Human-Computer Interaction (HCI)

Mario ČagaljOctober, 2017

Human-Computer Interaction (HCI)

University of Split

Based on slides by Saul Greenberg, Russell Beale…

Psychology of Everyday Actions

High-level vs. low-level models of HCI

3

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!

Based on excellent article “Visualizing Fitts’ law” by Kevin Hale

Low-level theories: Fitts’ law

http://particletree.com/features/visualizing-fittss-law

Fitts’ law

5

Visualizing Fitts’ law

6

Fitts’s Law is made of lines

No

Yes


7

Fitts’s Law is made of linesWhich cursor will have easier time selecting the target?


8

Fitts’s Law is made of linesHow to optimize the target area?

• Cursor position dependent• Not the case with circular areas


9

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 MacKenzine ’96]

Links and buttons on a screen are harder to point out with your mouse than with your finger.


10


11

Corners are the easiast target to reach


12

Web applications do not benefit from the Rule of Infinite Edges

• They run in a browser window• Kiosk applications could benefit

Fitts’ law: lessons for user interface design

13

Fitts’ law: lessons for user interface design

14

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

Fitts’ law on fesb.hr

15

Some examples of Fitts

16

Ah, that 1px


17

I lay in a corner benefiting infinite dimensions Me too

Win10 taskbar


18

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 1px

Fitts with checkboxes

19

UX Design: Checkbox and Toggle in Forms

Concluding on Fitts’ law

20

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, …)

Low-level theories: Hick’s law

Hick-Hyman Law

22

Design principle: Hick’s Law-quick decision making

Hick’s law

23

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

Experimenting with Hick’s law

24

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

How many options at the first glance?

25

Do you see the problem here? Try to fix it

26

Concluding on Hick’s law

27

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)

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

How people do things (Don Norman)

29

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)

Norman’s action cycle

30

Goals

EvaluationExecution

THE WORLD

start here

What we want to happen

What we doto the world

Comparing what happenedwith what we wanted to happen

Action cycle: stages of execution

31

“I am reading a book and decide to need more light”

1. My goal: get more light2. 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)

Note that I could satisfy my (the same) goal with other plans and action sequences (open the curtains, move closer to a window).

Action cycle: stages of execution

32

Goals

Evaluation

Plan the action

THE WORLD

start here


Comparing what happenedwith what we wanted to happen

Specify an action sequence

Perform the action sequence

Action cycle: stages of evaluation

33

Evaluation (checking up what happened)

• Perceiving what happened in the world• Interpret the perception• Compare the outcome with the goal


34

“I am reading a book and decide to need more light”

1. My goal: get more light2. 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)5. Perceive whether there is more light in room6. Decide whether the lamp turned on7. Decide whether the resulting amount of light is

sufficient


35

Goals

Execution

THE WORLD

start here


What we doto the world

Perceive the state of the world

Interpret the perception

Compare the outcome with the goal

7 stages of action

36

1 for goals, 3 for execution and 3 for evaluation

1. Goal (form the goal)

2. Plan (the action)3. Specify (an action sequence)4. Perform (the action sequence)

5. Perceive (the state of the world)6. Interpret (the perception)7. Compare (the outcome with the goal)

7 stages of action

37

Goals

THE WORLD

start here


Perceive the state of the world

Interpret the perception

Compare the outcome with the goal

Plan the action

Specify an action sequence

Perform the action sequence

What 7 stages of action model reveals?

38

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.

The gulfs of execution and evaluation

39

Goals

THE WORLD

start here

What happened?

Is this what I wanted?

How do I work this?

What can I do?

Use 7 stages of action to ask design questions

40

Anyone using a product should be able to answer 7 questions:

1. What do I want to accomplish? (goal)

2. What are the alternative action sequences? (plan)

3. What action can I do now? (specify)4. How do I do it? (perform)

5. What happened? (perceive)6. What does it mean? (interpret)7. Is it okay? Have I accomplished my goal?

(compare)

Use 7 stages of action to ask design questions

41

THE WORLD

What are alternatives?

What can I do?

How do I do it?

Is it ok?

What does it mean?

What happened?

What do I want to accomplish?

7 stages of action and design principles

42

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

You know now

43

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

Documents

Human-Computer Interaction (HCI)