Usability Concepts Feedback, Errors, Visual Design Today More - - PowerPoint PPT Presentation

▶
usability concepts
SMART_READER_LITE
LIVE PREVIEW

Usability Concepts Feedback, Errors, Visual Design Today More - - PowerPoint PPT Presentation

Dec 23, 2023 343 likes •1.23k views

Usability Concepts Feedback, Errors, Visual Design Today More tools for design Feedback Error and Confirmation Dialogue Boxes Visual Design 2 Consistent Design Patterns Interact Other Systems Interactive System Response Selection

slide-1
SLIDE 1

Usability Concepts

Feedback, Errors, Visual Design

slide-2
SLIDE 2

Today

More tools for design… Feedback Error and Confirmation Dialogue Boxes Visual Design

2

slide-3
SLIDE 3

Stimulus Feedback

Perceive Predict Decide Interact

Design Patterns Mental Models Consistent Visual Verbal Audial Haptic Attention Resources Knowledge “in the world” (bottom-up processing) Knowledge “in the head” (top-down processing) Working (Short-term) Memory Long-term Memory

Transfer Learn

Response Selection Response Execution Interactive System Other Systems

3

slide-4
SLIDE 4

4

Engineer Designer User

Mental Model

Implementation

Model Represented Model

better worse

slide-5
SLIDE 5

Stimulus Feedback

Perceive Predict Decide Interact

Design Patterns Mental Models Consistent Visual Verbal Audial Haptic Attention Resources Knowledge “in the world” (bottom-up processing) Knowledge “in the head” (top-down processing) Working (Short-term) Memory Long-term Memory

Transfer Learn

Response Selection Response Execution Interactive System Other Systems

5

slide-6
SLIDE 6

6

Types of Feedback

Causality Sense of Place and Time Positive and Negative Reinforcement

slide-7
SLIDE 7

Causality

7

View Animation

slide-8
SLIDE 8

Sense of Place

8

Progress Bar Accordion Top Navigation See these and other design patterns here. Breadcrumbs

slide-9
SLIDE 9

Sense of Time

9 Progress Bar (Determinate, Modal) Spinner (Indeterminate, Modal) Progress Bar (Determinate, Modeless) Spinner (Indeterminate, Modeless)

slide-10
SLIDE 10

10

Complete Estimate of Time Speed

slide-11
SLIDE 11

11

Types of Feedback

Causality Sense of Place and Time Positive and Negative Reinforcement

slide-12
SLIDE 12

Success or Failure

12

Positive (success) feedback is better. Unobtrusive (Modeless) feedback is better.

Physiological Safety Love & Belonging Esteem Self-actualization

slide-13
SLIDE 13

Success or Failure

12

Positive (success) feedback is better. Unobtrusive (Modeless) feedback is better.

Physiological Safety Love & Belonging Esteem Self-actualization

slide-14
SLIDE 14

Success or Failure

12

Positive (success) feedback is better. Unobtrusive (Modeless) feedback is better.

Physiological Safety Love & Belonging Esteem Self-actualization

slide-15
SLIDE 15

Error & Confirmation Dialogues

13

slide-16
SLIDE 16

Dialogues present a mode change.

14

slide-17
SLIDE 17

Dialogues don’t do much.

15

slide-18
SLIDE 18

Habituation

16

A decrease in response to a stimulus after repeated presentations.

slide-19
SLIDE 19

Habituation

17

slide-20
SLIDE 20

Important Confirmation

18

slide-21
SLIDE 21

Dialogues are a weakness

  • f the app, not the user.

19

slide-22
SLIDE 22

How do we avoid dialogues?

20

slide-23
SLIDE 23

Prevent Errors

21

slide-24
SLIDE 24

1 2

slide-25
SLIDE 25

1 2

slide-26
SLIDE 26

Wall switch introduces unnecessary mode. 24

slide-27
SLIDE 27

How can we eliminate uploading an image that is too large. 25

slide-28
SLIDE 28

How can we improve this form? 26

Text Field

City

Text Field

State

Text Field

ZIP 30,000+ A-Z, a-z, 0-9 50 A-Z, a-z 5[-4] 0-9

slide-29
SLIDE 29

How can we improve this form? 27

Text Field

Date YYYY-MM-DD

slide-30
SLIDE 30

Real-time feedback of errors. 28

slide-31
SLIDE 31
  • Do. Don’t ask.

(for confirmation)

29

slide-32
SLIDE 32

30

slide-33
SLIDE 33

31

slide-34
SLIDE 34

Requiring manual save is unnatural. 32

slide-35
SLIDE 35

Requiring manual save is unnatural. 32

slide-36
SLIDE 36

Design Principle Summary

33

Polite Don't interrupt the user with modes. Confident Do, don't ask. Flexible Make all actions reversible. Helpful Provide modeless feedback to help users succeed and avoid mistakes.

slide-37
SLIDE 37

34

Visitor Counter

slide-38
SLIDE 38

Break Time 35

slide-39
SLIDE 39

36

Visual Design

slide-40
SLIDE 40

Stimulus Feedback

Perceive Predict Decide Interact

Design Patterns Mental Models Consistent Visual Verbal Audial Haptic Attention Resources Knowledge “in the world” (bottom-up processing) Knowledge “in the head” (top-down processing) Working (Short-term) Memory Long-term Memory

Transfer Learn

Response Selection Response Execution Interactive System Other Systems

37

slide-41
SLIDE 41

Visual Design & Art

38

slide-42
SLIDE 42

Visual design solves problems. 39

Executive “gather” user requirements Brand Visual Verbal Styles Designers Design Behavior IxD Framework Wireframes Content Graphs Charts Infographics

Visual Designer’s Role

slide-43
SLIDE 43

Rich Visual Modeless Feedback

40

slide-44
SLIDE 44

Rich Visual Modeless Feedback

40

It gives in-depth information about the status or attributes of a process or object.

slide-45
SLIDE 45

Rich Visual Modeless Feedback

40

It gives in-depth information about the status or attributes of a process or object. You can see it.

slide-46
SLIDE 46

Rich Visual Modeless Feedback

40

It gives in-depth information about the status or attributes of a process or object. You can see it. It requires no special action or mode shift from the user (it doesn’t interrupt).

slide-47
SLIDE 47

Real-time feedback of errors. 41

slide-48
SLIDE 48

Physical example of rich visual modeless feedback. 42

slide-49
SLIDE 49

43

slide-50
SLIDE 50

44

slide-51
SLIDE 51

Example of Rich Modeless Visual Feedback 45

slide-52
SLIDE 52

Basics VD Concepts

46

Color Contrast Typography Layout

slide-53
SLIDE 53

Color

47

slide-54
SLIDE 54

Color spaces

48 Cyan 0-100% Magenta 0-100% Yellow 0-100% Black 0-100% Red 0-255 Green 0-255 Blue 0-255 Hue 0-360° Saturation 0-100% Brightness 0-100%

Print Digital

slide-55
SLIDE 55

Hue, Saturation, Value

49 Hue 0-360° Saturation 0-100% Brightness (Value) 0-100%

Intuitive

slide-56
SLIDE 56

50 energy love violence magic dignity creativity trust cleanliness technology nature freshness health cheer vitality

  • ptimism

chear excitement warmth power sophistication the unknown purity innocence sterility neutrality intelligence technology Contrast Saturation = 0%

slide-57
SLIDE 57

51

slide-58
SLIDE 58

Color-blindness

52 Normal Protanopia Deuteranopia Tritanopia Ishihara Test

slide-59
SLIDE 59

53

Contrast

Saturated complimentary colors are unpleasant next to each

  • ther.

Hue +/- 180°

slide-60
SLIDE 60

Typography

54

slide-61
SLIDE 61

Font Size

55

a = 1' (1/60°)

slide-62
SLIDE 62

Typesetting Parameters

56

Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit

  • porbelm. Tihs is bcuseae the huamn

mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.

Texting

Column Width Leading

Texting

Serif x-height descenders ascenders font size Sans Serif

slide-63
SLIDE 63

Pre-attentive vs. Attentive Processing

Pre-attentive processing is the unconscious accumulation of information from the environment. Information that has the highest salience (a stimulus that stands out the most) or relevance to what a person is thinking about is selected for further and more complete analysis by conscious (attentive) processing.

57

slide-64
SLIDE 64

Gestalt

The principle maintains that the human eye sees objects in their entirety before perceiving their individual parts, suggesting the whole is greater than the sum of its parts.

58

slide-65
SLIDE 65
slide-66
SLIDE 66

Design solutions satisfy many requirements and constraints.

Anchoring Effect

The tendency to rely too heavily, or "anchor," on one trait or piece of information when making decisions.

60

slide-67
SLIDE 67
slide-68
SLIDE 68

62

slide-69
SLIDE 69

63

slide-70
SLIDE 70

64

slide-71
SLIDE 71

65

slide-72
SLIDE 72

66

Lamma Island red led’s Red Green Blue Green Blue Red Blue Red Green Blue Green Red Green Red Blue Red Blue Green

Stroop Effect

Red Green Blue Green Blue Red Blue Red Green Blue Green Red Green Red Blue Red Blue Green Red Green Blue Green Blue Red Blue Red Green Blue Green Red Green Red Blue Red Blue Green

Neutral Interference Semantic Facilitation

slide-73
SLIDE 73

67

Prediction / Affordance

slide-74
SLIDE 74

68

Monocular Cues

Monocular cues provide depth information when viewing a scene with one eye.

slide-75
SLIDE 75

Skeumorphism

69

slide-76
SLIDE 76

70

slide-77
SLIDE 77

Designs for Color Blind 71

slide-78
SLIDE 78

Consistency!

72

Visual Verbal Structural Behavioral (Responses, Transitions)

slide-79
SLIDE 79

Stimulus Feedback

Perceive Predict Decide Interact

Design Patterns Mental Models Consistent Visual Verbal Audial Haptic Attention Resources Knowledge “in the world” (bottom-up processing) Knowledge “in the head” (top-down processing) Working (Short-term) Memory Long-term Memory

Transfer Learn

Response Selection Response Execution Interactive System Other Systems

73

slide-80
SLIDE 80

Consistency of layout and navigation. 74

slide-81
SLIDE 81

Visual language guidelines - Main navigation 75

slide-82
SLIDE 82

Visual language guidelines - Sub navigation 76

slide-83
SLIDE 83

Visual language guidelines - Buttons and Text 77

slide-84
SLIDE 84

Visual language guidelines - Buttons and Text 78

slide-85
SLIDE 85

Visual language guidelines - Form inputs 79

slide-86
SLIDE 86

Visual language guidelines - Data objects (albums and images) 80

slide-87
SLIDE 87

Can Dieter Rams principles of good design be applied to IxD? 81

Good design ... … is aesthetic. … makes a product understandable. … is unobtrusive. … is as little design as possible. … makes a product useful. Dieter Rams