CSE440: Introduction to HCI Methods for Design, Prototyping and - - PowerPoint PPT Presentation

▶
cse440 introduction to hci
SMART_READER_LITE
LIVE PREVIEW

CSE440: Introduction to HCI Methods for Design, Prototyping and - - PowerPoint PPT Presentation

Nov 14, 2022 192 likes •871 views

CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction Lecture 04: Nigini Oliveira Design of Everyday Things Manaswi Saha Liang He Jian Li Zheng Jeremy Viny What we will do today It is never a users

slide-1
SLIDE 1

CSE440: Introduction to HCI

Methods for Design, Prototyping and Evaluating User Interaction Lecture 04: Design of Everyday Things Nigini Oliveira Manaswi Saha Liang He Jian Li Zheng Jeremy Viny

slide-2
SLIDE 2

What we will do today

It is never a user’s fault!

slide-3
SLIDE 3

99% Invisible Post. (Just read and listen everything there!) =)

slide-4
SLIDE 4
slide-5
SLIDE 5

What is Interaction?

Two-Way

One-way is reaction

Communicative

Information is sent

Receptive

Information is received

Effective

There are changes as a result

slide-6
SLIDE 6

What is Interaction?

Two-Way

One-way is reaction

Communicative

Information is sent

Receptive

Information is received

Effective

There are changes as a result

slide-7
SLIDE 7

Buxton’s 3-State Model

slide-8
SLIDE 8

Buxton’s 3-State Model

slide-9
SLIDE 9

Buxton’s 3-State Model

slide-10
SLIDE 10

1.Establish the goal

Increase light in the room

2.Form the intention

To turn on the lamp

3.Specify the action sequence

Walk to the lamp, reach for the knob, twist the knob

4.Execute the action sequence

[walk, reach, twist]

5.Perceive the system state

[hear “click” sound, see light from lamp]

6.Interpret the system state

The knob rotated. The lamp is emitting light. The lamp seems to work

7.Evaluate the system state with respect to the goals and intentions

The lamp did indeed increase the light in the room [goal satisfied]

[REPEAT!]

Norman’s Execution-Evaluation Cycle

slide-11
SLIDE 11

Norman’s Execution-Evaluation Cycle

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

slide-12
SLIDE 12

Norman’s Execution-Evaluation Cycle

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

Gulf of Evaluation Gulf of Execution

slide-13
SLIDE 13

Norman’s Execution-Evaluation Cycle

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

Gulf of Evaluation Gulf of Execution

What factors can extend the Gulfs in the example

  • f increasing light in the room?
slide-14
SLIDE 14

https://www.coursera.org/learn/ui-design/lecture/JTDiI/the-gulf-of-execution-and-the-gulf-of-evaluation

Gulf of Execution: An Example

slide-15
SLIDE 15

Gulf of Evaluation: An Example

slide-16
SLIDE 16

Gulf of Evaluation: An Example

slide-17
SLIDE 17

Bridging the Gulfs

Ask yourself: How easily can the user…

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

slide-18
SLIDE 18

Bridging the Gulfs

Ask yourself: How easily can the user…

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

…determine what the system is for?

slide-19
SLIDE 19

Bridging the Gulfs

Ask yourself: How easily can the user…

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

…determine what the system is for? …tell what actions are possible?

slide-20
SLIDE 20

Bridging the Gulfs

Ask yourself: How easily can the user…

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

…determine what the system is for? …tell what actions are possible? …identify and carry

  • ut the appropriate

action?

slide-21
SLIDE 21

Bridging the Gulfs

Ask yourself: How easily can the user…

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

…determine what the system is for? …tell what actions are possible? …identify and carry

  • ut the appropriate

action? …perceive and interpret what happened?

slide-22
SLIDE 22

Let's Bridge the Gulfs...

… of finding the right Screenshot in my computer!

Goals Form Intention Develop Action Plan Execute Actions System Change Observe State Interpret State Evaluate Goals

…determine what the system is for? …tell what actions are possible? …identify and carry

  • ut the appropriate

action? …perceive and interpret what happened? …evaluate progress towards the goal?

slide-23
SLIDE 23

How did you bridge the gap?

slide-24
SLIDE 24

Design principles help us answer these questions

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-25
SLIDE 25

Design principles help us answer these questions

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-26
SLIDE 26

Affordances

Perceived Action Possibilities

What does this chair afford?

slide-27
SLIDE 27

Affordances

slide-28
SLIDE 28

Affordances

slide-29
SLIDE 29

Technology affordances are often based in affordances from the physical world

Affordances

slide-30
SLIDE 30

Affordances

slide-31
SLIDE 31

Affordances

“Real-world” example: Knurling

slide-32
SLIDE 32

Affordances

“In general, when the apparent affordances of an artifact matches its intended use, the artifact is easy to operate. When apparent affordances suggest different actions than those for which the object is designed, errors are common.”

Gaver

slide-33
SLIDE 33

False affordances

slide-34
SLIDE 34

False affordances

slide-35
SLIDE 35

When there is no perceptual information suggesting an actual intended use

Hidden affordances

slide-36
SLIDE 36

Logos linking to home is a convention, but not afforded by the page

Hidden affordances

slide-37
SLIDE 37

“Designers sometimes will say that when they put an icon, cursor, or other target on the screen, they have added an ‘affordance’ to the system. This is a misuse of the concept. … It is wrong to claim that the design of a graphical object on the screen ‘affords clicking.’ … Yes, the object provides a target and it helps the user know where to click and maybe even what to expect in return, but those aren’t affordances, those are conventions, and feedback, and the like. … Don’t confuse affordances with conventions.” Norman

Clarification on Convention

slide-38
SLIDE 38

Affordances vs Signifiers

Affordances are the possible interactions between people and the environment. (It is not a property of the "thing"!) Perceived affordances often act as signifiers, but they can be ambiguous. Signifiers signal things, in particular what actions are possible and how they should be done. Signifiers must be perceivable, else they fail to function. Norman

slide-39
SLIDE 39

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-40
SLIDE 40

Constraints

Prevent some actions while allowing others Prevent errors before they can happen

Disruptive error messages are a last resort

slide-41
SLIDE 41

Constraints

slide-42
SLIDE 42

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-43
SLIDE 43

Feedback

https://www.videoblocks.com/video/loading-bar-scribble-animation-doodle-cartoon-4k-b03byrauliz20iitl

slide-44
SLIDE 44

Feedback

All actions have to be confirmed Must be immediate Must be informative Preferably non-distracting and unobtrusive

slide-45
SLIDE 45

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-46
SLIDE 46

Consistency

Interfaces should be consistent in meaningful ways

Ubiquitous use of same keys for cut/copy/ paste

Types of consistency

Internal (i.e., within itself)

e.g., same terminology and layout throughout

External (i.e., with other applications)

e.g., common widget appearance e.g., design patterns common across applications

slide-47
SLIDE 47

Is consistency always better?

slide-48
SLIDE 48

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-49
SLIDE 49

Metaphors

Suggest an existing mental model

“horseless carriages”, “wireless”

Desktop metaphor

Not an attempt to simulate a real desktop Leverages knowledge of files, folders, trash Explains why some windows seem hidden

slide-50
SLIDE 50

Example: Mail Metaphor

slide-51
SLIDE 51

Example: Health Metaphor

slide-52
SLIDE 52

Broken Metaphors

Are not consistent, do not operate in every circumstance, or do not uphold things consistent with what the metaphor would suggest

slide-53
SLIDE 53

Dead Metaphors

Lost the original imagery of their meaning

slide-54
SLIDE 54

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-55
SLIDE 55

Mappings

Correspondence between an interface and the corresponding action in ‘the world’ Minimize cognitive steps to transform action into effect, or perception into comprehension (i.e., execution and evaluation)

slide-56
SLIDE 56

Mappings

slide-57
SLIDE 57

Mappings

slide-58
SLIDE 58

Mappings

slide-59
SLIDE 59

Mappings

slide-60
SLIDE 60

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-61
SLIDE 61

Visibility

slide-62
SLIDE 62

Visibility

slide-63
SLIDE 63

Visibility

Differentiate opposing functionality Use visual function to confirm the user's mental model of

  • peration

Sometimes sound can be used to make things ‘visible’ (e.g. vacuum cleaner clogging up) Just the right things have to be visible: excess is as bad as lack

  • f visible clues
slide-64
SLIDE 64

Summary

slide-65
SLIDE 65

Summary: Features of Good Design

Has affordances (makes each operation visible) Offers obvious mappings (makes the relationship between the actual action of the device and the action of the user obvious) Provides feedback on the user’s action Provides a good mental model of the underlying behavior of the device Provides constraints (to prevent errors)

slide-66
SLIDE 66

Bad Design Hunt

Can you discover instances of bad design on campus? False affordances? A lack of consistency, visibility, or mappings? “Thanks to you, I now constantly notice how badly things are designed.” — anonymous student from the Spring 2017 offering

slide-67
SLIDE 67

Ask me something!