Human-Computer Interaction HCI Mario Čagalj October 2017 University

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

Psychology of Everyday Actions Based on slides by Saul Greenberg, Russell Beale…

High-level vs. low-level models of HCI Developing theories in HCI • • Must explain and predict human behavior in the human-computer system Must work in a wide variety of task situations Low-level theories can be used to predict human performance • • • Fitts’ law: time to select an item with a pointing device (this lecture) Hick’s law: making the choice easier for users (this lecture) Keystroke level model: sums up times for keystroking, pointing, homing, drawing, thinking and waiting General models that explain human behavior with machines • • Norman’s 7 stages of action (this lecture) All of psychology! 3

Low-level theories: Fitts’ law Based on excellent article “Visualizing Fitts’ law” by Kevin Hale http: //particletree. com/features/visualizing-fittss-law

Fitts’ law 5

Visualizing Fitts’ law Fitts’s Law is made of lines No Yes 6

Visualizing Fitts’ law Fitts’s Law is made of lines Which cursor will have easier time selecting the target? 7

Visualizing Fitts’ law Fitts’s Law is made of lines How to optimize the target area? Cursor position dependent • Not the case with circular areas • 8

Visualizing Fitts’ law Physical (finger) vs virtual pointing (mouse) “The difference is only in the second movement phase, where visual control of deceleration in the virtual task took more time than in the physical task”. [Graham and Mac. Kenzine ’ 96] Links and buttons on a screen are harder to point out with your mouse than with your finger. 9

Visualizing Fitts’ law 10

Visualizing Fitts’ law Corners are the easiast target to reach 11

Visualizing Fitts’ law Web applications do not benefit from the Rule of Infinite Edges • • They run in a browser window Kiosk applications could benefit 12

Fitts’ law: lessons for user interface design 13

Fitts’ law: lessons for user interface design Usability increases along a logarithmic curve • E. g. , a very small button will become significantly easier to click when increased by 20%, but already large button will not share the same benefit 14

Fitts’ law on fesb. hr 15

Some examples of Fitts Ah, that 1 px 16

Some examples of Fitts Win 10 taskbar I lay in a corner benefiting infinite dimensions Me too 17

Some examples of Fitts Visual Studio Code (VSC) editor Activity bar in VSC lies on the edge with infinite width (contrast with Inkscape) • Minimap (outline view) is large and therefore easy to point to (contrast this with the regular scroll-bar) • Ah, that 1 px 18

Fitts with checkboxes UX Design: Checkbox and Toggle in Forms 19

Concluding on Fitts’ law Don’t use Fitts’ law as a formula, use it as a guideline: • • • The size of the target and the distance to the target matter Do not increase already large targets just because there is some empty space in your layout Do increase tiny targets (links, checkboxes, etc. ) Exploit the infinite edge rule where possible Exploit the prime pixel, the current location of your pointer Make top priority targets larger (Sign-up, Buy, Download, …) 20

Low-level theories: Hick’s law

Hick-Hyman Law Design principle: Hick’s Law-quick decision making 22

Hick’s law Applies to any situation in which a user has to make a decision and facing multiple options By reducing the number of perceived options on screen we make the interface more user friendly Progressive disclosure (wizards) • Group items/options: e. g. , 20 options implies slow decision (a user has to do a lot of thinking), however 4 groups of 5 items breaks the user’s choices to 4 then to 5 • Please note that there is a tension between visibility principle and the Hick’s law • 23

Experimenting with Hick’s law Researchers at Columbia and Stanford University conducted a number of experiments (both in field and lab settings) “When Choice is Demotivating: Can One Desire Too Much of a Good Thing? ” [Iyengar and Lepper ‘ 00] Findings: • • People are more likely to purchase jams or chocolates or to undertake optional class essay assignments when offered a limited array of 6 choices rather than a more extensive array of 24 or 30 choices Participants reported greater subsequent satisfaction with their selections and wrote better essays when their original set of options had been limited 24

How many options at the first glance? 25

Do you see the problem here? Try to fix it 26

Concluding on Hick’s law states that less is more In particular when the user has to make a critical decision (to purchase or not) • It does not apply to complex decision making (requiring reading, researching) • 27

High-level model: Norman’s seven stages of action

How people do things (Don Norman) To get something done, you start with some notion of what is wanted – the goal to be achieved Then you do something to the world – take action to move yourself or manipulate someone or something (execution) Finally, you check to see that your goal was made (evaluation) 29

Norman’s action cycle start here Goals What we want to happen Execution What we do to the world Evaluation Comparing what happened with what we wanted to happen THE WORLD 30

Action cycle: stages of execution “I am reading a book and decide to need more light” My goal: get more light 2. Plan the action (e. g. , turn on the nearby light) 3. Specify an action sequence (e. g. , ask somebody, do it myself) 4. Perform the action sequence (physical execution) 1. Note that I could satisfy my (the same) goal with other plans and action sequences (open the curtains, move closer to a window). 31

Action cycle: stages of execution start here Goals Plan the action What we want to happen Specify an action sequence Evaluation Comparing what happened with what we wanted to happen Perform the action sequence THE WORLD 32

Action cycle: stages of evaluation Evaluation (checking up what happened) Perceiving what happened in the world • Interpret the perception • Compare the outcome with the goal • 33

Action cycle: stages of evaluation “I am reading a book and decide to need more light” 1. 2. 3. 4. 5. 6. 7. My goal: get more light Plan the action (e. g. , turn on the nearby light) Specify an action sequence (e. g. , ask somebody, do it myself) Perform the action sequence (physical execution) Perceive whethere is more light in room Decide whether the lamp turned on Decide whether the resulting amount of light is sufficient 34

Action cycle: stages of evaluation start here Goals What we want to happen Compare the outcome with the goal Execution Interpret the perception What we do to the world Perceive the state of the world THE WORLD 35

7 stages of action 1 for goals, 3 for execution and 3 for evaluation 1. Goal (form the goal) Plan (the action) 3. Specify (an action sequence) 4. Perform (the action sequence) 2. Perceive (the state of the world) 6. Interpret (the perception) 7. Compare (the outcome with the goal) 5. 36

7 stages of action start here Goals Plan the action What we want to happen Compare the outcome with the goal Specify an action sequence Perform the action sequence Interpret the perception Perceive the state of the world THE WORLD 37

What 7 stages of action model reveals? When people use something, they face two gulfs: The Gulf of Execution – they try to figure out how it operates • The Gulf of Evaluation – they try to figure out what happened • The role of the designer is to help people bridge the gulfs. 38

The gulfs of execution and evaluation start here How do I work this? What happened? Is this what I wanted? What can I do? GULF OF EVALUATION GULF OF EXECUTION Goals THE WORLD 39

Use 7 stages of action to ask design questions Anyone using a product should be able to answer 7 questions: 1. What do I want to accomplish? (goal) What are the alternative action sequences? (plan) 3. What action can I do now? (specify) 4. How do I do it? (perform) 2. What happened? (perceive) 6. What does it mean? (interpret) 7. Is it okay? Have I accomplished my goal? (compare) 5. 40

Use 7 stages of action to ask design questions What are alternatives? Is it ok? What can I do? What does it mean? How do I do it? What happened? FEEDBACK FEEDFORWARD What do I want to accomplish? THE WORLD 41

7 stages of action and design principles The information that helps answer questions of execution is feedforward. Feedforward accomplished through the use of: Signifiers • Constraints • Mappings • Mental models • The information that aids in understanding what has happened is feeback. Feedback accomplished through: Feedback • Mental models • 42

You know Fitts’ law: how to size and where to place your buttons and links Hick’s law: how to help user making the choice easier Norman’s stages of human interaction (problems identified as gulfs of execution and evaluation) Basic principles of good design 43