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

Jun 13, 2023 329 likes •969 views

CSE440: Introduction to HCI Methods for Design, Prototyping and Evaluating User Interaction Lecture 04: Nigini Oliveira Design of Everyday Things Abhinav Yadav Liang He Angel Vuong 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 Abhinav Yadav Liang He Angel Vuong 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

Norman’s Execution-Evaluation Cycle

slide-11
SLIDE 11

Norman’s Execution-Evaluation Cycle

slide-12
SLIDE 12

Norman’s Execution-Evaluation Cycle

Gulf of Execution

slide-13
SLIDE 13

Norman’s Execution-Evaluation Cycle

Gulf of Evaluation

slide-14
SLIDE 14

Norman’s Execution-Evaluation Cycle

Gulf of Execution Gulf of Evaluation

slide-15
SLIDE 15

Norman’s Execution-Evaluation Cycle

What factors can extend the Gulfs in the example

  • f increasing light in the room?

Gulf of Execution Gulf of Evaluation

slide-16
SLIDE 16

Gulf of Evaluation: An Example

slide-17
SLIDE 17

Gulf of Evaluation: An Example

slide-18
SLIDE 18

Bridging the Gulfs

Ask yourself: How easily can the user…

slide-19
SLIDE 19

Bridging the Gulfs

Ask yourself: How easily can the user…

…determine what the system is for?

slide-20
SLIDE 20

Bridging the Gulfs

Ask yourself: How easily can the user…

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

slide-21
SLIDE 21

Bridging the Gulfs

Ask yourself: How easily can the user…

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

  • ut the appropriate

action?

slide-22
SLIDE 22

Bridging the Gulfs

Ask yourself: How easily can the user…

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

  • ut the appropriate

action? …perceive and interpret what happened?

slide-23
SLIDE 23

…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?

Bridging the Gulfs

Ask yourself: How easily can the user…

slide-24
SLIDE 24

Let's Bridge the Gulfs...

… of finding the right Screenshot in my computer!

slide-25
SLIDE 25

Design principles help us answer these questions

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-26
SLIDE 26

Design principles help us answer these questions

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-27
SLIDE 27

Affordances

slide-28
SLIDE 28

Affordances

slide-29
SLIDE 29

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-30
SLIDE 30

False affordances

slide-31
SLIDE 31

False affordances

slide-32
SLIDE 32

When there is no perceptual information suggesting an actual intended use

Hidden affordances

slide-33
SLIDE 33

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

Hidden affordances

slide-34
SLIDE 34

“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-35
SLIDE 35

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-36
SLIDE 36

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-37
SLIDE 37

Constraints

slide-38
SLIDE 38

Constraints

slide-39
SLIDE 39

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-40
SLIDE 40

Feedback

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

slide-41
SLIDE 41

Feedback

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

slide-42
SLIDE 42

Feedback

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

?

slide-43
SLIDE 43

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-44
SLIDE 44

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-45
SLIDE 45

Is consistency always better?

slide-46
SLIDE 46

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-47
SLIDE 47

Metaphors

… …

slide-48
SLIDE 48

Example: Mail Metaphor

slide-49
SLIDE 49

Example: Health Metaphor

slide-50
SLIDE 50

Broken Metaphors

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

slide-51
SLIDE 51

Dead Metaphors

Lost the original imagery of their meaning

slide-52
SLIDE 52

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-53
SLIDE 53

Mappings

slide-54
SLIDE 54

Mappings

slide-55
SLIDE 55

Mappings

slide-56
SLIDE 56

Mappings

slide-57
SLIDE 57

Mappings

slide-58
SLIDE 58

Design principles

Affordances Constraints Feedback Consistency Metaphors Mappings Visibility

slide-59
SLIDE 59

Visibility

slide-60
SLIDE 60

Visibility

slide-61
SLIDE 61

Visibility

Differentiate opposing functionality Use visual function

to confirm the user's mental model of operation

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 of visible clues

slide-62
SLIDE 62

Activity: 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

slide-63
SLIDE 63

Ask me something!