HumanComputer Interaction HCI Mario agalj University of Split

Human-Computer Interaction (HCI) Mario Čagalj University of Split

Usability and Usability Principles Based on slides by Saul Greenberg, Russell Beale…

In this lecture we will. . . Recall what HCI is and why it is important. We will look at some bad design. Understand a set of usability principles, and their implications for design. 3

What is HCI? Studying physical, psychological and theoretical aspects of how people interact with computers. Trying to understand to what extent computers support successful interaction or causes user’s frustration. So, HCI consists of three sides: The user (single, a group, a sequence of users) • The computer (any technology) • The way they work together • 4

Why HCI? . . . to enable us to design interactive products to support people in their everyday and working lives Develop usable products: easy to learn • effective to use • provide an enjoyable experience • 5

Some problematic designs How fast am I going? http: //www. baddesigns. com 6

Some problematic designs Default state is not Cancel but Lock Imagine if this was the dialog after typing in format C: 7

Some problematic designs Information overload User-centerd approach 8

Problematic designs Lead to daily challenges Cause frustration and low productivity Increase the cost of the product • For example, for a computer Costs from a technical perspective • • Hardware • Software Cost from the users’s perspective • Training costs • Daily usage • 9

To avoid problematic design we need to. . . Take into account who the users are • what activities are being carried out • where the interaction is taking place • Optimize the interactions users have with a product • such that they match users’ activities and needs 10

What is usability? Usability is the measure of the quality of a user's experience when interacting with a product or system The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. (international standard ISO 9241 -11) http: //www. usabilitynet. org 11

What is usability? Usability is about: Effectiveness - can users achieve goals with the product? • Efficiency - how much effort (time) do users require to do this? • Satisfaction – what do users think about the products ease of use? • …. which are affected by the users, their goals, and the usage situations (or context of use) Usability should not be confused with functionality • Increased functionality does not mean improved usability! 12

Usability goals Effectiveness Efficiency Safety Utility Learnability Memorability They all affect users’ satisfaction. 13

Basic design principles

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordance – how do I use it? Mental models – I think I know how this operates? 15

Visibility Can I see the state of a device and possible actions? Systems are more usable when they clearly indicate: their status • the possible actions that can be performed • and the consequences of those actions • 16

Visibility Car controls are positioned in a way that they can be easily found and used 17

Visibility Problems arise when we cannot see how to use a device or we do not see the state of a device Recall troublesome Win 10 lock screen • Sensor technology like auto faucets • • • not sure how to use, guess where to put hands Visible knobs, dials and buttons have been replaced by invisible active zones https: //www. youtube. com/watch? v=Eq. U 1 Fmo. Q 85 Q 18

Visibility This is a control panel for an elevator. How does it work? Push a button for the floor you want? • Nothing happens. Push any other button? Still nothing. What do you need to do? • It is not visible as to what to do! 19

Visibility You need to insert your room key – a card – into the slot by the buttons How would you make this action more visible? • Make the card reader more obvious Provide an auditory message (which language? ) Provide a big label next to the card reader Make relevant parts visible • Make what has to be done obvious • • • 20

Visibility (Visibility) issues with Animations in Power. Point 2016 How to remove animation once created? • How to combine animations on the same object using the Ribbon? • Unexpected defaults Revealing instead of all at once • 21

Visibility To remove an animation one has to open Animation Pane Discoverability failure: one cannot easily see how to perform a desired action (remove an animation) • On the other hand, adding an animation is easy • 22

Visibility Google makes it clear where to enter text 23

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordance – how do I use it? Mental models – I think I know how this operates? 24

Feedback What is it doing now? Sending info back to the user about what has been done Needs to be immediate and synchronized with user action Includes sound, highlighting, animation and combinations Listen to your mouse when you click it • Look around you and find examples of feedback • 25

Feedback Google Material design (You. Tube) 26

Feedback Feedforward: a mechanism that informs a user about what the result of their action will be (as opposed to was or is). 27

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordance – how do I use it? Mental models – I think I know how this operates? 28

Constraints Restricting the possible actions that can be performed Restricting the kind of interaction that can take the place Why? Helps prevent user from selecting incorrect options. 29

Constraints Restricting the kind of interaction that can take the place In the past Nowdays 30

Constraints Can reduce the error Can work to focus the user’s attention to needed task 31

Cultural constraints We learned arbitrary conventions which help us use technologies Can apply in a number of ways Icons, menus • Number pads: calculators vs. phone which should computer keypads follow? • Keyboards (typing Qwerty slower, still we all got used to it) • Qwerty vs Dvorak (You. Tube) Amplifico @Singapure startup-contest 32

Physical, semantic, logical and cultural constraints LEGO exploits different kind of constraints to specify how different pieces fit together (sometimes manual not needed) • • Physical: constraint possible combinations and placements Semantic: prevents putting heads backward, or label POLICE upside down Cultural: dictates the placement of the lights (yellow/white, red, blue) Logical: If you've eliminated all other possibilities whatever remains must be the truth - Sherlock Holmes 33

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordance – how do I use it? Mental models – I think I know how this operates? 34

Mapping Turn a wheel, flip a switch, or push a button What effect do you expect? Mapping is a relationship between controls and their movements and the results in the world (effects) Good (natural mapping) - the effect corresponds to the expectation • Poor mapping - the effect does not correspond to the expectation • Good mapping between controls and their effects results in greater easy of use 35

Mapping Which stove control design provides better mapping? Why? http: //blog. amarsagoo. info 36

Mapping Good or bad mapping? 1 2 3 4 What about the switches in the classrom? 37

Mapping Good mapping primarily a function of similarity of Layout – e. g. , stove controls Behavior – e. g. , steering wheel, Segway Meaning – e. g. , power-off button (people associate red with STOP, and open circuit symbol with stand-by/power down) 38

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordance – how do I use it? Mental models – I think I know how this operates? 39

Consistency Design interfaces to have similar operations and use similar elements for similar tasks. For example: Always use Ctrl key plus first initial of the command for an operation - Ctrl+C, Ctrl+S, Ctrl+V. . . Consistent interfaces are easier to learn and use 40

Consistency breakdowns What happens if there is more than one command starting with the same letter? e. g. save, spelling, select, style Have to find other initials or combinations of keys, thereby breaking the consistency rule e. g. Ctrl+S, Ctrl+Space, Ctrl+Shift+L Increases learning burden on user, making them more prone to errors 41

Internal and external consistency Internal consistency refers to designing operations to behave the same within an application Difficult to achieve with complex interfaces External consistency refers to designing operations, interfaces, etc. , to be the same across applications and devices Very rarely the case 42

External inconsistency 43

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordances and signifiers – how do I use it? Mental models – I think I know how this operates? 44

Affordance Refers to an attribute of an object that allows people to know how to use it (what are potential actions) How something looks indicates how it’s can be used • • • Chair is for (affords) sitting Table is for placing things on Knobs is for turning Slots is for inserting things into Buttons is for pushing 45

Affordance Refers to an attribute of an object that allows people to know how to use it tohster@ux. stackexchange. com 46

Signifier A perceivable indicator (mark, sound) that communicates appropriate behavior to a person NN Group: Weak vs Strong Signifiers 47

Messing up affordances (signifiers to the rescue) Complex things may need explaining, but simple things should not If simple things need labels, instructions, the design has failed • Their usage should be obvious based upon their appearance • Norman doors @You. Tube 48

Basic design principles Visibility – can I see it? Feedback – what is it doing now? Constraints – why can’t I do that? Mapping – where am I and where can I go? Consistency – I think I have seen this before? Affordances and signifiers – how do I use it? Conceptual/mental models – I think I know how this operates? 49

Conceptual/mental model Conceptual model is an explanation (often simplified) of how something works. It is representation (in the head) of the given system derived from experience. People understand interact with systems based on mental representations developed from experience They compare the outcomes of their mental models with the real-world systems: When the outcomes correspond, a mental model is accurate • When the outcomes do not correspond, the mental model is inaccurate or incomplete • 50

Conceptual/mental models allows the user to simulate the operation of the device/design A good conceptual/mental model allows the user to predict the effects of their actions Mental models built from: • • • Affordances, signifiers and constraints Mappings Transfer effects Population stereotypes/cultural standards Instructions Interactions 51

Conceptual/mental models allows the user to simulate the operation of the device/design A good conceptual/mental model allows the user to predict the effects of their actions 52

Conceptual/mental model Can you predict the effects of running the following JS code? const p = new Promise( // this is called the "executor" (resolve, reject) => { console. log(1); resolve(2); console. log(3); } ); console. log(4); p. then( // this is called the success handler result => console. log(result) ); set. Timeout(() => console. log(5), 0); Source: reactjunkie console. log(6); 53

Comunicating through the system image Designer’s conceptual model is accurate System image is what can be percieved from the physical structure (interface) that has been built User’s conceptual model is developed through interaction, it is inaccurate (at least initially) The challenge on the designer is to provide a good conceptual model. How? • Usability testing, observing people unfamiliar with the system, this course 54

Example: a conceptual model of ABS Anti-lock braking system (ABS) vs. conventional brakes Statistics showed that ABS have not reduced the frequency or cost of accidents (in the early days) In spite of the fact that they have measurable safety benefits in controlled tests • Why is this so? • We can explain this by using the concept of wrong mental model of ABS 55

Example: a conceptual model of ABS Good interaction model for conventional brakes On slick surfaces Depress the brake pedal smoothly • Pump brakes to prevent them from locking up • Do not steer while braking, except to counter-steer • Noise and vibrations are signs that something is wrong • Good interaction model for ABS On slick surfaces Depress the brake pedal fast and hard • Do not pump breaks • Steer while braking • Noise and vibrations are signs that the system is operating properly • 56

Example: a conceptual model of ABS The likely cause that ABS have not made the difference People were not using ABS properly (bad conceptual model) • They transfer the knowledge from conventional breaks • All this simply means that ABS are not properly designed • So, design with people’s conceptual models in mind 57

Final thoughts: individual differences Who do you design for? People are different It is rarely possible to accommodate all people perfectly Rule of thumb: Designing for the average is a mistake May exclude half the audience Design should aim at 95% of audience But means 5% of population may be (seriously!) compromised 58

Final thoughts: individual differences You do NOT necessarily represent a good representative user of equipment or systems you design Do not expect others to think and behave as you do, or as you might like them to People vary in thought and behaviour just as they do physically Design for and with a user! 59

What you know Many so-called human errors are actually errors in design • Don’t blame the user! Designers help make things easier to use by providing a good mental/conceptual model through • • • Affordances and signifiers Constraints Mapping Visibility Population stereotypes Positive transfers (from other systems) 60