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

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 Response Execution Visual Verbal Stimulus Feedback Audial Haptic Predict Attention Perceive Transfer Resources Decide Mental Models Learn Working Long-term (Short-term) Memory Memory Knowledge “in the head” (top-down processing) Knowledge “in the world” (bottom-up processing) 3

worse better Mental Implementation Model Model Represented Model Designer User Engineer 4

Consistent Design Patterns Interact Other Systems Interactive System Response Selection Response Execution Visual Verbal Stimulus Feedback Audial Haptic Predict Attention Perceive Transfer Resources Decide Mental Models Learn Working Long-term (Short-term) Memory Memory Knowledge “in the head” (top-down processing) Knowledge “in the world” (bottom-up processing) 5

Types of Feedback Causality Sense of Place and Time Positive and Negative Reinforcement 6

Causality View Animation 7

Sense of Place Top Navigation Accordion Progress Bar Breadcrumbs See these and other design patterns here. 8

Sense of Time Progress Bar (Determinate, Modal) Progress Bar (Determinate, Modeless ) Spinner (Indeterminate, Modal) Spinner (Indeterminate, Modeless ) 9

Estimate of Time Speed Complete 10

Types of Feedback Causality Sense of Place and Time Positive and Negative Reinforcement 11

Success or Failure Self-actualization Esteem Positive (success) feedback is better. Love & Belonging Safety Unobtrusive (Modeless) feedback is better. Physiological 12

Success or Failure Self-actualization Esteem Positive (success) feedback is better. Love & Belonging Safety Unobtrusive (Modeless) feedback is better. Physiological 12

Success or Failure Self-actualization Esteem Positive (success) feedback is better. Love & Belonging Safety Unobtrusive (Modeless) feedback is better. Physiological 12

Error & Confirmation Dialogues 13

Dialogues present a mode change. 14

Dialogues don’t do much. 15

Habituation A decrease in response to a stimulus after repeated presentations. 16

Habituation 17

Important Confirmation 18

Dialogues are a weakness of the app, not the user. 19

How do we avoid dialogues? 20

Prevent Errors 21

1 2

2 1

Wall switch introduces unnecessary mode. 24

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

City State ZIP Text Field Text Field Text Field 30,000+ A-Z, a-z, 0-9 50 A-Z, a-z 5[-4] 0-9 How can we improve this form? 26

Date Text Field YYYY-MM-DD How can we improve this form? 27

Real-time feedback of errors. 28

Do. Don’t ask. (for confirmation) 29

30

31

Requiring manual save is unnatural. 32

Requiring manual save is unnatural. 32

Design Principle Summary 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. 33

Visitor Counter 34

Break Time 35

Visual Design 36

Consistent Design Patterns Interact Other Systems Interactive System Response Selection Response Execution Visual Verbal Stimulus Feedback Audial Haptic Predict Attention Perceive Transfer Resources Decide Mental Models Learn Working Long-term (Short-term) Memory Memory Knowledge “in the head” (top-down processing) Knowledge “in the world” (bottom-up processing) 37

Visual Design & Art 38

Visual Designer’s Role Brand Visual Verbal Styles Behavior IxD Framework Content Wireframes Graphs Charts Infographics Executive Designers “gather” Design user requirements Visual design solves problems. 39

Rich Visual Modeless Feedback 40

It gives in-depth information about the status or attributes of a process or object. Rich Visual Modeless Feedback 40

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

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

Real-time feedback of errors. 41

Physical example of rich visual modeless feedback. 42

43

44

Example of Rich Modeless Visual Feedback 45

Basics VD Concepts Color Contrast Typography Layout 46

Color 47

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

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

energy chear cheer love excitement vitality violence warmth optimism purity power nature trust magic neutrality innocence sophistication freshness cleanliness dignity intelligence sterility the unknown health technology creativity technology Contrast Saturation = 0% 50

51

Color-blindness Normal Protanopia Deuteranopia Tritanopia Ishihara Test 52

Contrast Saturated complimentary colors are unpleasant next to each other. Hue +/- 180° 53

Typography 54

Font Size a = 1' (1/60°) 55

Typesetting Parameters Column Width Aoccdrnig to a rscheearch at Leading Cmabrigde Uinervtisy, it deosn't ascenders mttaer in waht oredr the ltteers in a Texting wrod are, the olny iprmoetnt tihng is font x-height size taht the frist and lsat ltteer be at the rghit pclae. The rset can be a toatl descenders Sans Serif mses and you can sitll raed it wouthit Texting porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Serif 56

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

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

Anchoring E ff ect The tendency to rely too heavily, or "anchor," on one trait or piece of information when making decisions. 60 Design solutions satisfy many requirements and constraints.

62

63

64

65

Stroop E ff ect Neutral Semantic Facilitation Interference Red Green Blue Green Red Green Blue Green Red Green Blue Green Blue Red Blue Red Blue Red Blue Red Blue Red Blue Red Green Blue Green Red Green Blue Green Red Green Blue Green Red Green Red Blue Red Green Red Blue Red Green Red Blue Red Blue Green Blue Green Blue Green Lamma Island red led’s 66

Prediction / A ff ordance 67

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

Skeumorphism 69

70

Designs for Color Blind 71

Consistency! Visual Verbal Structural Behavioral (Responses, Transitions) 72

Consistent Design Patterns Interact Other Systems Interactive System Response Selection Response Execution Visual Verbal Stimulus Feedback Audial Haptic Predict Attention Perceive Transfer Resources Decide Mental Models Learn Working Long-term (Short-term) Memory Memory Knowledge “in the head” (top-down processing) Knowledge “in the world” (bottom-up processing) 73

Consistency of layout and navigation. 74

Visual language guidelines - Main navigation 75

Visual language guidelines - Sub navigation 76

Visual language guidelines - Buttons and Text 77

Visual language guidelines - Buttons and Text 78

Visual language guidelines - Form inputs 79

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

Good design ... … makes a product useful. … is aesthetic. … makes a product understandable. … is unobtrusive. Dieter Rams … is as little design as possible. Can Dieter Rams principles of good design be applied to IxD? 81