UXPA International , profile picture
Uploaded byUXPA International
2,257 views

Designing with the Mind in Mind: the Psychological Basis of UI Design Rules

The document discusses various user interface (UI) design guidelines grounded in psychology, focusing on principles such as consistency, user control, and error prevention. It highlights the importance of understanding human perception and cognition, including limitations in memory and attention, and how these factors should influence design decisions. Key insights include the need for structured information presentation and the significance of clear feedback to enhance user experience.

Embed presentation

Downloaded 100 times
1 1 Designing With the Mind in Mind:
 The Psychological Basis for UI Design Guidelines Jeff Johnson
 UI Wizards, Inc. 2 UI Design Guidelines
 (Shneiderman, 1987, 1998, …, 2016) ❚  Strive for consistency ❚  Cater to universal usability ❚  Offer informative feedback ❚  Design task-flows to yield closure ❚  Prevent errors ❚  Permit easy reversal of actions ❚  Make users feel they are in control ❚  Minimize short-term memory load
2 3 UI Design Guidelines
 (Nielsen & Molich, 1993) ❚  Visibility of system status ❚  Match between system & real world ❚  User control & freedom ❚  Consistency & standards ❚  Error prevention ❚  Recognition rather than recall ❚  Flexibility & efficiency of use ❚  Aesthetic & minimalist design ❚  Help users recognize, diagnose, & recover from errors ❚  Provide online documentation & help 4 UI Design Guidelines
 (Stone et al, 2005) ❚  Visibility: First step to goal should be clear ❚  Affordance: Control suggests how to use it ❚  Feedback: Should be clear what happened or is happening ❚  Simplicity: as simple as possible & task-focused ❚  Structure: content organized sensibly ❚  Consistency: similarity for predictability ❚  Tolerance: prevent errors, help recovery ❚  Accessibility: usable by all intended users, despite handicap, access device, or environmental conditions
3 5 Applying Usability Guidelines ❚  UI guidelines are based on how people perceive, think, learn, act ❚  UI guidelines are not rote recipes ❚  E.g., “minimize short-term memory load” ❚  Applying them effectively requires understanding their scientific basis ❙  Determining rule applicability & precedence ❙  Balancing trade-offs between competing rules 6 Facts about Human
 Perception & Cognition Perception ❚  Our perception is biased ❚  Our vision is optimized to see structure ❚  We seek and use visual structure ❚  Our color vision is limited ❚  Our peripheral vision is poor ❚  Visual search is linear unless target “pops” ❚  Reading is unnatural
4 7 Facts about Human
 Perception & Cognition (cont.) Cognition ❚  Our attention is limited; Our memory is imperfect ❚  Limits on attention shape our thought & action ❚  Recognition is easy; recall is hard ❚  Learning from experience & learned actions are easy; problem-solving & calculation are hard ❚  Many factors affect learning ❚  Our hand-eye coordination follows rules ❚  Human decision-making is rarely rational ❚  We have real-time requirements Perception 8
5 9 Our perception is biased by: ❚  Our experience ❚  The context ❚  Our goals Our Perception is Biased 10 Our Perception is Biased
6 11 Our Perception is Biased 12 Our Perception is Biased Page 1 Back Next Page 2 Back Next Page 3 Back Next Page 4 Next Back
7 13 Our Perception is Biased T E C T 14 Our Perception is Biased Müller-Lyer illusion
8 15 Our Perception is Biased All lines in this image are straight! 16 Our Perception is Biased Red vertical lines are parallel!
9 17 Our Perception is Biased Gray lines are horizontal, straight, and parallel! 18 Our Perception is Biased Triangle sides are not bent inward!
10 19 Our Perception is Biased Checkerboard does not bulge in middle! 20 We Perceive What We Expect Video by Mark Mitton & Josh Aviner
11 21 Our Perception is Biased ❚  Adults’ perception & attention focuses almost totally on our goals ❚  Tend not to notice things unrelated to goal 22 Our Perception is Biased
12 23 Our Vision is Optimized
 to See Structure Gestalt Principles of Visual Perception ❚  Proximity ❚  Similarity ❚  Continuity ❚  Closure ❚  Symmetry ❚  Figure/ground ❚  Common fate 24 Gestalt Principle: Proximity ❚  Items that are closer appear grouped ❚  Left: rows Right: columns
13 25 Gestalt Principle: Proximity ❚  Outlook dialog box uses group boxes to separate items 26 Gestalt Principle: Proximity ❚  Good: Mozilla Thunderbird dialog box
14 27 Gestalt Principle: Proximity ❚  Google search- results 28 Gestalt Principle: Proximity ❚  Bad: Fake Google search- results without blank space
15 29 Gestalt Principle: Proximity ❚  Bad: Discreet Software Installer 30 Gestalt Principle: Closure ❚  We tend to see whole, closed objects, not collections of fragments ❚  Overlapping circles & triangles, not odd fragments
16 31 Gestalt Principle: Closure ❚  We tend to see whole, closed objects, not collections of fragments ❚  Stacked letters, not odd bits of images 32 Gestalt Principle: Common Fate ❚  Items that move together appear grouped
17 33 Gestalt Principle: Common Fate 34 We Seek & Use Visual Structure Structured info is easier to perceive ❚  Unstructured: You are booked on United flight 237, which departs from Auckland at 14:30 and arrives at San Francisco at 11:40 Tuesday 15 Oct. ❚  Structured: Flight: UA 237, Auckland => San Francisco Depart: 14:30 Tue 15 Oct Arrive: 11:40 Tue 15 Oct
18 35 We Seek & Use Structure Visual hierarchy gets people to goal faster 36 We Seek & Use Structure Structured info is easier to perceive
19 37 Structured Numbers
 Are Easier to Scan and Read ❚  Easy: (415) 123-4567 ❚  Hard: 4151234567 ❚  Easy: 1234 5678 9012 3456 ❚  Hard: 1234567890123456 38 Structured Numbers
 Are Easier to Scan and Read ❚  Bad: SFGov.org ❚  Good: ActBlue.org
20 39 Questions? 40 Our Color Vision is Limited ❚  Our color vision is based on differences
21 41 Our Color Vision is Limited ❚  Our vision is optimized to see contrasts -- edges & changes, not absolute levels ❚  The inner bar is all one solid grey! 42 Our Color Vision Is Limited ❚  Our vision is optimized to see contrasts -- edges & changes, not absolute levels A: B:
22 44 Our Color Vision is Limited ❚  We have trouble discriminating: ❙  pale colors ❙  small color patches ❙  separated patches
23 45 Our Color Vision is Limited ❚  Federal Reserve Bank (Minn) ❚  ITN.net 46 Our Color Vision is Limited ❚  Some people have color-blindness ❙  ~ 8% of males ❙  ~ 0.5% of females ❚  E.g., colors that would be hard for red-green colorblind people to distinguish
24 Our Color Vision is Limited ❚  Google: normal ❚  Google: deuteranopia 47 48 Our Color Vision is Limited, so ❚  Don’t rely solely on color ❙  Use redundantly with other cues ❚  E.g., Let’s improve ITN.net ❚  How they improved it:
25 49 Our Color Vision is Limited, so ❚  Avoid subtle color differences ❙  Make colors differ in saturation as well as hue ❙  Should still look different in gray scale ❚  E.g., FRB.org 50 Our Color Vision is Limited, so ❚  Most distinctive colors: ❚  Other distinctive colors:
26 51 Our Peripheral Vision is Poor ❚  Client internal Web-app 52 Our Peripheral Vision is Poor ❚  Reason 1. Pixels much denser in fovea
27 53 Our Peripheral Vision is Poor ❚  Reason 2. Data from fovea uncompressed; Data from periphery is compressed 54 Our Peripheral Vision is Poor ❚  Reason 3. Half of visual cortex serves fovea
28 55 Our Peripheral Vision is Poor ❚  Reason 1. Pixels much denser in fovea ❚  Reason 2. Data from fovea uncompressed; Data from periphery is compressed ❚  Reason 3. Half of visual cortex serves fovea ❚  Resolution at center is 300 dots/inch ❚  What is resolution at vision’s edge? 56 Exercise: See Blind Spot in Retina Draw this on a piece of paper: + @ Cover left eye. Focus right eye on +. Adjust distance of paper from eye. Voila: the @ disappears!
29 57 ❚  Airborne.com Our Peripheral Vision is Poor 58 Our Peripheral Vision is Poor, so ❚  Common methods of getting seen ❙  Put where users are looking ❙  Put near the error ❙  Use red for errors ❙  Use error symbol
30 59 Our Peripheral Vision is Poor, so ❚  Place error msg where users are looking 60 Our Peripheral Vision is Poor, so ❚  Common methods of getting seen ❙  Put where users are looking ❙  Put near the error ❙  Use red for errors ❙  Use error symbol ❚  Heavy artillery: use sparingly ❙  Popup in error dialog box ❙  Audio: beep ❙  Flash or wiggle briefly (not continuously)
31 61 Our Peripheral Vision is Poor, so ❚  Client internal web-app, improved 62 Our Peripheral Vision is Poor, so ❚  iCloud, when login info is invalid
32 Visual Search is Linear
 Unless Target “Pops” ❚  Where’s Waldo? 63 Visual Search is Linear
 Unless Target “Pops” ❚  Find the Panda 64
33 Visual Search is Linear
 Unless Target “Pops” 65 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: Find letter in pile of characters L Q R B T J P L F B M R W S F R N Q S P D C H K U T G T H U J L U 9 J V Y I A E X C F T Y N H T D O L L 8 G V N G R Y J G Z S T 6 S 3 L C T V B H U S E M U K W Q E L F G H U Y I K D 9 66
34 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Find font-style in pile of letters G T H U J L U 9 J V Y I A L Q R B T J P L F B M R W S 3 L C T V B H U S E M U K F R N Q S P D C H K U T W Q E L F G H B Y I K D 9 G V N G R Y J G Z S T 6 S E X C F T Y N H T D O L L 8 67 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: Counting letters in pile of letters L Q R B T J P L F B M R W S F R N Q S P D C H K U T G T H U J L U 9 J V Y I A E X C F T Y N H T D O L L 8 3 L C T V B H U S E M U K G V N G R Y J G Z S T 6 S W Q E L F G H U Y I K D 9 68
35 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Counting colored symbols W Q E L F G H U Y I K D 9 F R N Q S P D C H K U T 3 L C T V B H U S E M U K G T H U J L U 9 J V Y I A L Q R B T J P L F B M R W S E X C F T Y N H T D O L L 8 G V N G R Y J G Z S T 6 S 69 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 70
36 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 71 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 72
37 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 73 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 74
38 Visual Search is Linear
 Unless Target “Pops” ❚  Non-linear: headings & bullets pop-out 75 Using Visual “Pop” to Help User Spot Faulty Servers 76
39 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: find item in unfamiliar menu ❚  With experience, people learn item-positions, so search becomes non-linear 77 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: find item in unfamiliar menu 78
40 Visual Search is Linear
 Unless Target “Pops” ❚  Non-linear: alphabetical & some pop-out 79 Visual Search Slows with Age 80
41 81 Questions? Cognition 82
42 Reading is Unnatural ❚  We’re pre-wired for language ❙  Brain learns language easily in childhood ❙  Nearly everyone learns a language ❚  We are not pre-wired for reading ❙  Brain has no special facility for reading ❙  Learning reading is like learning other skills: Writing, arithmetic, reading music, kung fu ❙  Same brain areas mediate ❙  Many people never learn to read well, or at all 83 Reading is Unnatural ❚  Four score and seven years ago, our forefathers brought forth on this continent a new nation, conceived in liberty… 84
43 Reading is Unnatural ❚  Poor text presentation can disrupt reading ❚  Unfamiliar words: Bailiwick, penultimate, bandwidth, defragment ❚  Difficult typefaces TEXT IN ALL CAPS, ESPECIALLY IN A FANCY FONT ❚  Patterned background or poor contrast 85 Reading is Unnatural ❚  Poor text presentation can disrupt reading ❚  Centered text Four score and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. 86
44 Our Attention is Limited;
 Our Memory is Imperfect ❚  Short-term memory (STM or WM) ❚  Long-term memory (LTM) 87 Our Attention is Limited;
 Our Memory is Imperfect ❚  Short-term memory (STM or WM) ❚  Long-term memory (LTM) 88
45 89 Our Attention is Limited;
 Our Memory is Imperfect Short-term memory (STM) ❚  Represents conscious mind ❙  Attention: what we’re attending to NOW ❙  Not a separate store; Foci of attention in LTM ❚  Capacity: 3-5 unrelated items ❙  “Magical number 7” was over-estimate ❚  New items can “grab” attention from old ❚  Easy to forget goals or info 90 Our Attention is Limited;
 Our Memory is Imperfect Short-term memory (STM) test: ❚  Memorize: 3 8 4 7 5 3 9 ❚  Say your phone number backwards ❚  Memorize: 3 1 4 1 5 9 2 ❚  Memorize: 1 3 5 7 9 11 13 ❚  Memorize: town river corn string car shovel ❚  Memorize: what is the meaning of life
46 91 Our Attention is Limited;
 Our Memory is Imperfect ❚  Slate.com ❚  Blooper: Search terms not shown (short-term memory) 92 Our Attention is Limited;
 Our Memory is Imperfect ❚  Microsoft Windows ❚  Blooper: Instructions go away too soon
47 93 Our Memory is Imperfect Long-term memory (LTM) ❚  Memories = broad patterns of neural activity ❙  Experiences trigger patterns corresponding to features ❙  Similar experience triggers same pattern ! recognition ❙  Internal neural activity triggers pattern ! recall ❚  Stores a lifetime of experience, but… ❙  error-prone, impressionist, free-associative, easily biased ❙  Memories change when features are dropped or added ❘  See whale-shark, remember whale ❙  Seldom-followed routines hard to recall ❘  Reason for written food recipes, pilot checklists, etc. 94 Our Memory is Imperfect Long-term memory (LTM) test: ❚  Was there a roll of tape in the toolbox? ❚  What was your previous phone number? ❚  Pollack painting or dalmatian?
48 95 Our Memory is Imperfect, so… Don’t burden long-term memory 96 Our Memory is Imperfect, so… Provide external memory aids
49 97 Limits on Attention Shape Our Thought & Action ❚  We barely pay attention to computer tools ❙  Focus attention on own goals, data ❚  Think about computer, UI very superficially ❙  Krug: Don’t Make Me Think (about your software) ❚  Focused on achieving goal ❙  Prefer familiar paths over exploration ❙  User: “I’m in a hurry, so I’ll do it the long way.” ❚  Very literal in following “scent” toward goal 98 Limits on Attention Shape Our Thought & Action
50 Limits on Attention Shape Our Thought & Action ❚  Keeping track of features in STM is work ❚  We track only features crucial to task ❚  " We are often “blind” to changes 99 100 Limits on Attention Shape Our Thought & Action ❚  Keeping track of things in STM is work ❚  When we reach goal, we often let everything related to it fall out of STM ❚  " We often forget “loose ends” of tasks: ❙  Removing last page of document from copier ❙  Turning car headlights OFF ❙  Switching device or software back to normal mode ❚  Therefore: ❙  Systems should remind users of loose ends ❙  Modes should revert to “normal” automatically
51 101 Recognition is Easy;
 Recall is Hard ❚  We evolved to recognize things quickly ❙  We assess situations very fast ❙  We recognize faces blindingly fast ❙  We recognize complex patterns 102 Recognition is Easy;
 Recall is Hard ❚  We did not evolve to recall arbitrary facts ❙  Tricks for memorizing use recognition to stimulate recall, e.g., Greek “method of loci” ❙  Developed writing to avoid memorizing ❙  We rely on external memory aids, e.g., smartphones ❚  Implication for UI design: ❙  See & choose easier to learn than remember & type Remove>
52 System 1 and System 2 ❚  System 1: old brain + midbrain ❙  Collection of automatic “zombie” processes ❙  Can run many processes in parallel ❙  Fast but approximate, “satisficing” ❙  Doesn’t use working memory ❙  Unconscious; governs most of our behavior ❚  System 2: cerebral cortex (mainly frontal) ❙  Slow but precise ❙  Uses working memory ❙  One serial processor; cannot multi-task ❙  Conscious, self-aware; believes it governs our behavior 103 Example: System 1 vs. System 2 104 Copyright © Getty Images Copyright © Getty Images
53 Example: System 1 vs System 2 ❚  A baseball and a bat together cost $110. The bat costs $100 more than the ball. How much does the ball cost? ❚  System 1’s instant answer: $10 (wrong) ❚  System 2 may reject that answer. Or not. ❚  System 2 can calculate correct answer; System 1 cannot. 105 Example: System 1 vs System 2 ❚  System 1’s perception of the dogs’ size is biased by the lines; System 2’s is not. 106
54 Test: System 1 vs System 2 107 108 Easy: Performing Learned Routines ❚  Examples: ❙  Riding a bicycle after months of practice ❙  Driving to same workplace after many years ❙  Using a touchpad after a few days of practice ❙  Reading & deleting message from your phone ❚  Automatic: doesn’t use up STM / attention ❙  System 1: “zombie” or “robotic” processes ❙  Compiled mode, parallel processing ❙  Many processors: Can multi-task
55 Hard: Performing Novel Actions ❚  Examples: ❙  Following a new cooking recipe ❙  Driving somewhere you’ve never been ❙  Writing with your non-dominant hand ❙  Switching from Mac to Windows PC (or vice-versa) ❚  Controlled: consumes STM / attention ❙  System 2: Runs mainly in cerebral cortex ❙  Interpreted mode, serial processing ❙  Only one processor: Cannot multi-task 109 110 Test: Exercising Systems 1 vs. 2;
 Learned vs. Novel Actions ❚  Recite alphabet, A – M ❚  Recite alphabet backwards, M – A ❚  Countdown from 10 to 1 ❚  Countdown from 21 to 1 by 3s ❚  Hum first measure of “Twinkle, twinkle, little star” ❚  Hum it backwards
56 Our Hand-Eye Coordination Follows Laws ❚  Fitts’ Law ❚  Steering Law 111 Fitts’s Law [Fitts, 1954]:
 Time to hit a target w/pointer ❚  T = time (duration) to move to target ❚  D = distance from pointer to target ❚  W = width of target (on axis of movement) ❚  a = start/stop time of pointer/user ❚  b = maximum speed of device/user ❚  Formula: ❚  Simpler: T = a + bI 112
57 Fitts’s Law:
 Time to hit a target w/pointer ❚  Movement starts fast; slows near target ❚  Slows more at target if target is small 113 Fitts’s Law:
 Time to hit a target w/pointer 114
58 Fitts’s Law:
 Applies to almost all pointing ❚  All pointing devices ❚  Human hands, feet, even head movement! ❚  All people: all ages, abilities, even if drugged ❚  Just change parameters: a & b T = a + bI 115 Pointing Slows with Age 116
59 Fitts’s Law:
 Implications for Design ❚  Make click-targets (e.g., buttons, links) big ❚  Targets at top & edge of screen fast to hit ❙  Essentially have infinite size ❚  Menus: pop-up & pie menus faster than pull-down ❙  Less movement required ❙  All faster than pull-right menus 117 Steering Law [Accot & Zhai, 1997] ❚  Derived from Fitts’s Law: T = a + b(L/W) ❚  Wider paths allow faster movement ❚  Implications: allow wide paths for scrollbars & pull-right menus 118
60 Steering Law 119 Steering Law 120 ❚  Road Scholar Menus: 2012 vs. 2013
61 121 Questions? 122 Conclusion: Applying Design Rules in UI Designs is Not Simple & Mindless ❚  UI design is a skill; not something anyone can do by following guidelines ❚  Knowing cognitive basis helps us prioritize ❙  Recognize which rules to follow in each design situation
62 123 Now, Maybe those UI Design Rules Make More Sense Designing with The Mind in Mind, 2nd Edition 124
63 125 The End ❚  Questions? ❚  Thank you! ❚  Please fill out course evaluations!

More Related Content

PPTX
Microsoft Power Platform.pptx
byUni Systems S.M.S.A.
 
PDF
Graphs for Data Science and Machine Learning
byNeo4j
 
PPTX
Introduction to dm and dw
byANUSUYA T K
 
PPTX
8. Valutare la usabilita'
byRoberto Polillo
 
PDF
Predicting Influence and Communities Using Graph Algorithms
byDatabricks
 
PDF
Netflix AIM Engineering Manager
byKaren Casella
 
PDF
Docker Security: Are Your Containers Tightly Secured to the Ship?
byMichael Boelen
 
PDF
Combining a Knowledge Graph and Graph Algorithms to Find Hidden Skills at NASA
byNeo4j
 
Microsoft Power Platform.pptx
byUni Systems S.M.S.A.
 
Graphs for Data Science and Machine Learning
byNeo4j
 
Introduction to dm and dw
byANUSUYA T K
 
8. Valutare la usabilita'
byRoberto Polillo
 
Predicting Influence and Communities Using Graph Algorithms
byDatabricks
 
Netflix AIM Engineering Manager
byKaren Casella
 
Docker Security: Are Your Containers Tightly Secured to the Ship?
byMichael Boelen
 
Combining a Knowledge Graph and Graph Algorithms to Find Hidden Skills at NASA
byNeo4j
 

What's hot

PPTX
EY + Neo4j: Why graph technology makes sense for fraud detection and customer...
byNeo4j
 
PPTX
Building the Smart City Platform on FIWARE Lab
byFernando Lopez Aguilar
 
PPTX
SITA WorldTracer - Lost & Found Property
byNeo4j
 
PDF
Training Week: Create a Knowledge Graph: A Simple ML Approach
byNeo4j
 
PDF
Pharo 10 and beyond
byESUG
 
PPTX
Machine Learning with Azure Cognitive Services - Face Recognition and Deep Fa...
byCodeOps Technologies LLP
 
PPT
Introduction to CLIPS Expert System
byMotaz Saad
 
PDF
stackconf 2022: Introduction to Vector Search with Weaviate
byNETWAYS
 
PDF
Danish Business Authority: Explainability and causality in relation to ML Ops
byNeo4j
 
PPTX
Optimizing Your Supply Chain with Neo4j
byNeo4j
 
EY + Neo4j: Why graph technology makes sense for fraud detection and customer...
byNeo4j
 
Building the Smart City Platform on FIWARE Lab
byFernando Lopez Aguilar
 
SITA WorldTracer - Lost & Found Property
byNeo4j
 
Training Week: Create a Knowledge Graph: A Simple ML Approach
byNeo4j
 
Pharo 10 and beyond
byESUG
 
Machine Learning with Azure Cognitive Services - Face Recognition and Deep Fa...
byCodeOps Technologies LLP
 
Introduction to CLIPS Expert System
byMotaz Saad
 
stackconf 2022: Introduction to Vector Search with Weaviate
byNETWAYS
 
Danish Business Authority: Explainability and causality in relation to ML Ops
byNeo4j
 
Optimizing Your Supply Chain with Neo4j
byNeo4j
 

Viewers also liked

PDF
Jeff Johnson at BayCHI: Designing with the Mind in Mind
byBayCHI
 
PPTX
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
byUXPA International
 
PPTX
What can social psychology teach us about (better) UX research?
byUXPA International
 
PDF
Building Buy-In: Internally Positioning UX for Executive Impact
byJohn Whalen
 
PDF
Design Rationale: 10 Steps to Killing it in Design Reviews
byUXPA International
 
PDF
Measuring User Experience
byAlan Ho
 
PDF
Stop guessing colors! A system to help you build a UX Design color palette.
byUXPA International
 
PDF
Storytelling intro
byHans Gerhard Meier
 
PDF
Presumptive Design: "It's not research! We're getting stuff done!"
byUXPA International
 
KEY
UX & ROI: What to measure and what to expect
bycxpartners
 
PPTX
Stepping Back to See Clearly - Building a Solid UX Strategy
byScott McCall
 
PDF
Beyond Measure | UX London
byErika Hall
 
PPTX
Gestalt for Visual Design
byJodie Nicotra
 
PDF
How do Asian and Western websites differ, and why? Recent findings in experim...
byUXPA International
 
PDF
Visual Principles of Experience Design: Blending Art and Science
byDan Berlin
 
PDF
Lean Analytics - How to Measure Your Product
byLiron Hayun
 
PPT
Chapter 11
bydborcoman
 
PDF
Strategic User Experience Management
byUXPA International
 
PPTX
What's on your mind? Exploring new methods for measuring emotional engagement...
byUXPA International
 
PDF
Designing for the Mind - SXSW 2015
byRoger Dooley
 
Jeff Johnson at BayCHI: Designing with the Mind in Mind
byBayCHI
 
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
byUXPA International
 
What can social psychology teach us about (better) UX research?
byUXPA International
 
Building Buy-In: Internally Positioning UX for Executive Impact
byJohn Whalen
 
Design Rationale: 10 Steps to Killing it in Design Reviews
byUXPA International
 
Measuring User Experience
byAlan Ho
 
Stop guessing colors! A system to help you build a UX Design color palette.
byUXPA International
 
Storytelling intro
byHans Gerhard Meier
 
Presumptive Design: "It's not research! We're getting stuff done!"
byUXPA International
 
UX & ROI: What to measure and what to expect
bycxpartners
 
Stepping Back to See Clearly - Building a Solid UX Strategy
byScott McCall
 
Beyond Measure | UX London
byErika Hall
 
Gestalt for Visual Design
byJodie Nicotra
 
How do Asian and Western websites differ, and why? Recent findings in experim...
byUXPA International
 
Visual Principles of Experience Design: Blending Art and Science
byDan Berlin
 
Lean Analytics - How to Measure Your Product
byLiron Hayun
 
Chapter 11
bydborcoman
 
Strategic User Experience Management
byUXPA International
 
What's on your mind? Exploring new methods for measuring emotional engagement...
byUXPA International
 
Designing for the Mind - SXSW 2015
byRoger Dooley
 

Similar to Designing with the Mind in Mind: the Psychological Basis of UI Design Rules

PDF
Mental model Human model conceptula model human senses-HCI.pdf
byDistinguishAshik
 
PPTX
HCI - 13 - Design Rules Human Interaction Computer.pptx
byssuser58c832
 
PDF
User Experience 2: Psychology Concepts
byMarc Miquel
 
PDF
Ui design-day2b
byTim Proffitt
 
PPT
Interaction Design & Psychology (2002)
byFerry den Dopper
 
PDF
Human computer Interface designLecture3.pdf
byOMARYABDULAMIRI
 
PDF
User Interface Design- Module 2 Uid Process
bybrindaN
 
PDF
Intelligent design 101
byMichael Morozov
 
PPTX
unit 2-The User Interface Design Process-UID
bySarmiHarsha
 
PDF
Visualization-2
byKush Kulshrestha
 
PDF
Usable Information Visualizations & Dashboards
byTarik (Rick) Dzekman
 
PDF
Perception and Cognition
byEiji Slideshare
 
PDF
How we perceive information
byFrieda Brioschi
 
PPT
human_factors_03.ppt
byUniversity of Manchester
 
PDF
Introduction to Data Visualization
byAna Jofre
 
PPT
class three 2024 updated.ppt for human computer interaction
by2023bse144
 
PPT
0809-topic7-graphical_design_principles.ppt
byEngmtaher
 
PDF
How we perceive information (v. 2020 ITA)
byFrieda Brioschi
 
PDF
Human Factors (Every User has a Mind!)
byHamed Abdi
 
PPTX
Principles of Interface Design
byjbellWCT
 
Mental model Human model conceptula model human senses-HCI.pdf
byDistinguishAshik
 
HCI - 13 - Design Rules Human Interaction Computer.pptx
byssuser58c832
 
User Experience 2: Psychology Concepts
byMarc Miquel
 
Ui design-day2b
byTim Proffitt
 
Interaction Design & Psychology (2002)
byFerry den Dopper
 
Human computer Interface designLecture3.pdf
byOMARYABDULAMIRI
 
User Interface Design- Module 2 Uid Process
bybrindaN
 
Intelligent design 101
byMichael Morozov
 
unit 2-The User Interface Design Process-UID
bySarmiHarsha
 
Visualization-2
byKush Kulshrestha
 
Usable Information Visualizations & Dashboards
byTarik (Rick) Dzekman
 
Perception and Cognition
byEiji Slideshare
 
How we perceive information
byFrieda Brioschi
 
human_factors_03.ppt
byUniversity of Manchester
 
Introduction to Data Visualization
byAna Jofre
 
class three 2024 updated.ppt for human computer interaction
by2023bse144
 
0809-topic7-graphical_design_principles.ppt
byEngmtaher
 
How we perceive information (v. 2020 ITA)
byFrieda Brioschi
 
Human Factors (Every User has a Mind!)
byHamed Abdi
 
Principles of Interface Design
byjbellWCT
 

More from UXPA International

PPTX
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
byUXPA International
 
PDF
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
byUXPA International
 
PDF
UXPA 2023 Poster: ESG & Sustainable UX
byUXPA International
 
PDF
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
byUXPA International
 
PDF
UXPA 2023: Data science and UX: Smarter together
byUXPA International
 
PDF
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
byUXPA International
 
PDF
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
byUXPA International
 
PDF
UXPA 2023: Learn how to get over personas by swiping right on user roles
byUXPA International
 
PDF
UXPA 2023: F@#$ User Personas
byUXPA International
 
PDF
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
byUXPA International
 
PDF
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
byUXPA International
 
PDF
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
byUXPA International
 
PDF
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
byUXPA International
 
PDF
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
byUXPA International
 
PPTX
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
byUXPA International
 
PPTX
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
byUXPA International
 
PDF
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
byUXPA International
 
PDF
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
byUXPA International
 
PDF
UXPA 2023: Lessons for new managers
byUXPA International
 
PDF
UXPA 2023: Redesigning An Automotive Feature from Gasoline to Electric Vehicl...
byUXPA International
 
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
byUXPA International
 
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
byUXPA International
 
UXPA 2023 Poster: ESG & Sustainable UX
byUXPA International
 
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
byUXPA International
 
UXPA 2023: Data science and UX: Smarter together
byUXPA International
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
byUXPA International
 
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
byUXPA International
 
UXPA 2023: Learn how to get over personas by swiping right on user roles
byUXPA International
 
UXPA 2023: F@#$ User Personas
byUXPA International
 
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
byUXPA International
 
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
byUXPA International
 
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
byUXPA International
 
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
byUXPA International
 
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
byUXPA International
 
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
byUXPA International
 
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
byUXPA International
 
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
byUXPA International
 
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
byUXPA International
 
UXPA 2023: Lessons for new managers
byUXPA International
 
UXPA 2023: Redesigning An Automotive Feature from Gasoline to Electric Vehicl...
byUXPA International
 

Recently uploaded

PDF
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
PDF
[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...
byWintari Yasmin
 
PDF
PCCC25（設立25年記念PCクラスタシンポジウム）：エヌビディア合同会社 テーマ２「NVIDIA BlueField-4 DPU」
byPC Cluster Consortium
 
PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
PDF
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
PDF
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
PDF
Cybersecurity Prevention and Detection: Unit 2
byVICTOR MAESTRE RAMIREZ
 
PDF
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
byJonathan Ralton
 
PPTX
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
PDF
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PDF
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
PDF
How Much Does It Cost To Build Software
bycollinmishell2
 
PDF
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
PPTX
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
PDF
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
PDF
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
PDF
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
PDF
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...
byWintari Yasmin
 
PCCC25（設立25年記念PCクラスタシンポジウム）：エヌビディア合同会社 テーマ２「NVIDIA BlueField-4 DPU」
byPC Cluster Consortium
 
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
bySharpEagle Technology
 
Mastering Agentic Orchestration with UiPath Maestro | Hands on Workshop
byUiPathCommunity
 
Cybersecurity Prevention and Detection: Unit 2
byVICTOR MAESTRE RAMIREZ
 
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
byJonathan Ralton
 
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
How Much Does It Cost To Build Software
bycollinmishell2
 
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
byCheryl Hung
 
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
Dev Dives: Build smarter agents with UiPath Agent Builder
byUiPathCommunity
 
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 

Designing with the Mind in Mind: the Psychological Basis of UI Design Rules

  • 1.
    1 1 Designing With theMind in Mind:
 The Psychological Basis for UI Design Guidelines Jeff Johnson
 UI Wizards, Inc. 2 UI Design Guidelines
 (Shneiderman, 1987, 1998, …, 2016) ❚  Strive for consistency ❚  Cater to universal usability ❚  Offer informative feedback ❚  Design task-flows to yield closure ❚  Prevent errors ❚  Permit easy reversal of actions ❚  Make users feel they are in control ❚  Minimize short-term memory load
  • 2.
    2 3 UI Design Guidelines
 (Nielsen& Molich, 1993) ❚  Visibility of system status ❚  Match between system & real world ❚  User control & freedom ❚  Consistency & standards ❚  Error prevention ❚  Recognition rather than recall ❚  Flexibility & efficiency of use ❚  Aesthetic & minimalist design ❚  Help users recognize, diagnose, & recover from errors ❚  Provide online documentation & help 4 UI Design Guidelines
 (Stone et al, 2005) ❚  Visibility: First step to goal should be clear ❚  Affordance: Control suggests how to use it ❚  Feedback: Should be clear what happened or is happening ❚  Simplicity: as simple as possible & task-focused ❚  Structure: content organized sensibly ❚  Consistency: similarity for predictability ❚  Tolerance: prevent errors, help recovery ❚  Accessibility: usable by all intended users, despite handicap, access device, or environmental conditions
  • 3.
    3 5 Applying Usability Guidelines ❚ UI guidelines are based on how people perceive, think, learn, act ❚  UI guidelines are not rote recipes ❚  E.g., “minimize short-term memory load” ❚  Applying them effectively requires understanding their scientific basis ❙  Determining rule applicability & precedence ❙  Balancing trade-offs between competing rules 6 Facts about Human
 Perception & Cognition Perception ❚  Our perception is biased ❚  Our vision is optimized to see structure ❚  We seek and use visual structure ❚  Our color vision is limited ❚  Our peripheral vision is poor ❚  Visual search is linear unless target “pops” ❚  Reading is unnatural
  • 4.
    4 7 Facts about Human
 Perception& Cognition (cont.) Cognition ❚  Our attention is limited; Our memory is imperfect ❚  Limits on attention shape our thought & action ❚  Recognition is easy; recall is hard ❚  Learning from experience & learned actions are easy; problem-solving & calculation are hard ❚  Many factors affect learning ❚  Our hand-eye coordination follows rules ❚  Human decision-making is rarely rational ❚  We have real-time requirements Perception 8
  • 5.
    5 9 Our perception isbiased by: ❚  Our experience ❚  The context ❚  Our goals Our Perception is Biased 10 Our Perception is Biased
  • 6.
    6 11 Our Perception isBiased 12 Our Perception is Biased Page 1 Back Next Page 2 Back Next Page 3 Back Next Page 4 Next Back
  • 7.
    7 13 Our Perception isBiased T E C T 14 Our Perception is Biased Müller-Lyer illusion
  • 8.
    8 15 Our Perception isBiased All lines in this image are straight! 16 Our Perception is Biased Red vertical lines are parallel!
  • 9.
    9 17 Our Perception isBiased Gray lines are horizontal, straight, and parallel! 18 Our Perception is Biased Triangle sides are not bent inward!
  • 10.
    10 19 Our Perception isBiased Checkerboard does not bulge in middle! 20 We Perceive What We Expect Video by Mark Mitton & Josh Aviner
  • 11.
    11 21 Our Perception isBiased ❚  Adults’ perception & attention focuses almost totally on our goals ❚  Tend not to notice things unrelated to goal 22 Our Perception is Biased
  • 12.
    12 23 Our Vision isOptimized
 to See Structure Gestalt Principles of Visual Perception ❚  Proximity ❚  Similarity ❚  Continuity ❚  Closure ❚  Symmetry ❚  Figure/ground ❚  Common fate 24 Gestalt Principle: Proximity ❚  Items that are closer appear grouped ❚  Left: rows Right: columns
  • 13.
    13 25 Gestalt Principle: Proximity ❚ Outlook dialog box uses group boxes to separate items 26 Gestalt Principle: Proximity ❚  Good: Mozilla Thunderbird dialog box
  • 14.
    14 27 Gestalt Principle: Proximity ❚ Google search- results 28 Gestalt Principle: Proximity ❚  Bad: Fake Google search- results without blank space
  • 15.
    15 29 Gestalt Principle: Proximity ❚ Bad: Discreet Software Installer 30 Gestalt Principle: Closure ❚  We tend to see whole, closed objects, not collections of fragments ❚  Overlapping circles & triangles, not odd fragments
  • 16.
    16 31 Gestalt Principle: Closure ❚ We tend to see whole, closed objects, not collections of fragments ❚  Stacked letters, not odd bits of images 32 Gestalt Principle: Common Fate ❚  Items that move together appear grouped
  • 17.
    17 33 Gestalt Principle: CommonFate 34 We Seek & Use Visual Structure Structured info is easier to perceive ❚  Unstructured: You are booked on United flight 237, which departs from Auckland at 14:30 and arrives at San Francisco at 11:40 Tuesday 15 Oct. ❚  Structured: Flight: UA 237, Auckland => San Francisco Depart: 14:30 Tue 15 Oct Arrive: 11:40 Tue 15 Oct
  • 18.
    18 35 We Seek &Use Structure Visual hierarchy gets people to goal faster 36 We Seek & Use Structure Structured info is easier to perceive
  • 19.
    19 37 Structured Numbers
 Are Easierto Scan and Read ❚  Easy: (415) 123-4567 ❚  Hard: 4151234567 ❚  Easy: 1234 5678 9012 3456 ❚  Hard: 1234567890123456 38 Structured Numbers
 Are Easier to Scan and Read ❚  Bad: SFGov.org ❚  Good: ActBlue.org
  • 20.
    20 39 Questions? 40 Our Color Visionis Limited ❚  Our color vision is based on differences
  • 21.
    21 41 Our Color Visionis Limited ❚  Our vision is optimized to see contrasts -- edges & changes, not absolute levels ❚  The inner bar is all one solid grey! 42 Our Color Vision Is Limited ❚  Our vision is optimized to see contrasts -- edges & changes, not absolute levels A: B:
  • 22.
    22 44 Our Color Visionis Limited ❚  We have trouble discriminating: ❙  pale colors ❙  small color patches ❙  separated patches
  • 23.
    23 45 Our Color Visionis Limited ❚  Federal Reserve Bank (Minn) ❚  ITN.net 46 Our Color Vision is Limited ❚  Some people have color-blindness ❙  ~ 8% of males ❙  ~ 0.5% of females ❚  E.g., colors that would be hard for red-green colorblind people to distinguish
  • 24.
    24 Our Color Visionis Limited ❚  Google: normal ❚  Google: deuteranopia 47 48 Our Color Vision is Limited, so ❚  Don’t rely solely on color ❙  Use redundantly with other cues ❚  E.g., Let’s improve ITN.net ❚  How they improved it:
  • 25.
    25 49 Our Color Visionis Limited, so ❚  Avoid subtle color differences ❙  Make colors differ in saturation as well as hue ❙  Should still look different in gray scale ❚  E.g., FRB.org 50 Our Color Vision is Limited, so ❚  Most distinctive colors: ❚  Other distinctive colors:
  • 26.
    26 51 Our Peripheral Visionis Poor ❚  Client internal Web-app 52 Our Peripheral Vision is Poor ❚  Reason 1. Pixels much denser in fovea
  • 27.
    27 53 Our Peripheral Visionis Poor ❚  Reason 2. Data from fovea uncompressed; Data from periphery is compressed 54 Our Peripheral Vision is Poor ❚  Reason 3. Half of visual cortex serves fovea
  • 28.
    28 55 Our Peripheral Visionis Poor ❚  Reason 1. Pixels much denser in fovea ❚  Reason 2. Data from fovea uncompressed; Data from periphery is compressed ❚  Reason 3. Half of visual cortex serves fovea ❚  Resolution at center is 300 dots/inch ❚  What is resolution at vision’s edge? 56 Exercise: See Blind Spot in Retina Draw this on a piece of paper: + @ Cover left eye. Focus right eye on +. Adjust distance of paper from eye. Voila: the @ disappears!
  • 29.
    29 57 ❚  Airborne.com Our PeripheralVision is Poor 58 Our Peripheral Vision is Poor, so ❚  Common methods of getting seen ❙  Put where users are looking ❙  Put near the error ❙  Use red for errors ❙  Use error symbol
  • 30.
    30 59 Our Peripheral Visionis Poor, so ❚  Place error msg where users are looking 60 Our Peripheral Vision is Poor, so ❚  Common methods of getting seen ❙  Put where users are looking ❙  Put near the error ❙  Use red for errors ❙  Use error symbol ❚  Heavy artillery: use sparingly ❙  Popup in error dialog box ❙  Audio: beep ❙  Flash or wiggle briefly (not continuously)
  • 31.
    31 61 Our Peripheral Visionis Poor, so ❚  Client internal web-app, improved 62 Our Peripheral Vision is Poor, so ❚  iCloud, when login info is invalid
  • 32.
    32 Visual Search isLinear
 Unless Target “Pops” ❚  Where’s Waldo? 63 Visual Search is Linear
 Unless Target “Pops” ❚  Find the Panda 64
  • 33.
    33 Visual Search isLinear
 Unless Target “Pops” 65 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: Find letter in pile of characters L Q R B T J P L F B M R W S F R N Q S P D C H K U T G T H U J L U 9 J V Y I A E X C F T Y N H T D O L L 8 G V N G R Y J G Z S T 6 S 3 L C T V B H U S E M U K W Q E L F G H U Y I K D 9 66
  • 34.
    34 Visual Search isLinear
 Unless Target “Pops” ❚  Nonlinear: Find font-style in pile of letters G T H U J L U 9 J V Y I A L Q R B T J P L F B M R W S 3 L C T V B H U S E M U K F R N Q S P D C H K U T W Q E L F G H B Y I K D 9 G V N G R Y J G Z S T 6 S E X C F T Y N H T D O L L 8 67 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: Counting letters in pile of letters L Q R B T J P L F B M R W S F R N Q S P D C H K U T G T H U J L U 9 J V Y I A E X C F T Y N H T D O L L 8 3 L C T V B H U S E M U K G V N G R Y J G Z S T 6 S W Q E L F G H U Y I K D 9 68
  • 35.
    35 Visual Search isLinear
 Unless Target “Pops” ❚  Nonlinear: Counting colored symbols W Q E L F G H U Y I K D 9 F R N Q S P D C H K U T 3 L C T V B H U S E M U K G T H U J L U 9 J V Y I A L Q R B T J P L F B M R W S E X C F T Y N H T D O L L 8 G V N G R Y J G Z S T 6 S 69 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 70
  • 36.
    36 Visual Search isLinear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 71 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 72
  • 37.
    37 Visual Search isLinear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 73 Visual Search is Linear
 Unless Target “Pops” ❚  Nonlinear: Color “pops out” 74
  • 38.
    38 Visual Search isLinear
 Unless Target “Pops” ❚  Non-linear: headings & bullets pop-out 75 Using Visual “Pop” to Help User Spot Faulty Servers 76
  • 39.
    39 Visual Search isLinear
 Unless Target “Pops” ❚  Linear: find item in unfamiliar menu ❚  With experience, people learn item-positions, so search becomes non-linear 77 Visual Search is Linear
 Unless Target “Pops” ❚  Linear: find item in unfamiliar menu 78
  • 40.
    40 Visual Search isLinear
 Unless Target “Pops” ❚  Non-linear: alphabetical & some pop-out 79 Visual Search Slows with Age 80
  • 41.
  • 42.
    42 Reading is Unnatural ❚ We’re pre-wired for language ❙  Brain learns language easily in childhood ❙  Nearly everyone learns a language ❚  We are not pre-wired for reading ❙  Brain has no special facility for reading ❙  Learning reading is like learning other skills: Writing, arithmetic, reading music, kung fu ❙  Same brain areas mediate ❙  Many people never learn to read well, or at all 83 Reading is Unnatural ❚  Four score and seven years ago, our forefathers brought forth on this continent a new nation, conceived in liberty… 84
  • 43.
    43 Reading is Unnatural ❚ Poor text presentation can disrupt reading ❚  Unfamiliar words: Bailiwick, penultimate, bandwidth, defragment ❚  Difficult typefaces TEXT IN ALL CAPS, ESPECIALLY IN A FANCY FONT ❚  Patterned background or poor contrast 85 Reading is Unnatural ❚  Poor text presentation can disrupt reading ❚  Centered text Four score and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. 86
  • 44.
    44 Our Attention isLimited;
 Our Memory is Imperfect ❚  Short-term memory (STM or WM) ❚  Long-term memory (LTM) 87 Our Attention is Limited;
 Our Memory is Imperfect ❚  Short-term memory (STM or WM) ❚  Long-term memory (LTM) 88
  • 45.
    45 89 Our Attention isLimited;
 Our Memory is Imperfect Short-term memory (STM) ❚  Represents conscious mind ❙  Attention: what we’re attending to NOW ❙  Not a separate store; Foci of attention in LTM ❚  Capacity: 3-5 unrelated items ❙  “Magical number 7” was over-estimate ❚  New items can “grab” attention from old ❚  Easy to forget goals or info 90 Our Attention is Limited;
 Our Memory is Imperfect Short-term memory (STM) test: ❚  Memorize: 3 8 4 7 5 3 9 ❚  Say your phone number backwards ❚  Memorize: 3 1 4 1 5 9 2 ❚  Memorize: 1 3 5 7 9 11 13 ❚  Memorize: town river corn string car shovel ❚  Memorize: what is the meaning of life
  • 46.
    46 91 Our Attention isLimited;
 Our Memory is Imperfect ❚  Slate.com ❚  Blooper: Search terms not shown (short-term memory) 92 Our Attention is Limited;
 Our Memory is Imperfect ❚  Microsoft Windows ❚  Blooper: Instructions go away too soon
  • 47.
    47 93 Our Memory isImperfect Long-term memory (LTM) ❚  Memories = broad patterns of neural activity ❙  Experiences trigger patterns corresponding to features ❙  Similar experience triggers same pattern ! recognition ❙  Internal neural activity triggers pattern ! recall ❚  Stores a lifetime of experience, but… ❙  error-prone, impressionist, free-associative, easily biased ❙  Memories change when features are dropped or added ❘  See whale-shark, remember whale ❙  Seldom-followed routines hard to recall ❘  Reason for written food recipes, pilot checklists, etc. 94 Our Memory is Imperfect Long-term memory (LTM) test: ❚  Was there a roll of tape in the toolbox? ❚  What was your previous phone number? ❚  Pollack painting or dalmatian?
  • 48.
    48 95 Our Memory isImperfect, so… Don’t burden long-term memory 96 Our Memory is Imperfect, so… Provide external memory aids
  • 49.
    49 97 Limits on AttentionShape Our Thought & Action ❚  We barely pay attention to computer tools ❙  Focus attention on own goals, data ❚  Think about computer, UI very superficially ❙  Krug: Don’t Make Me Think (about your software) ❚  Focused on achieving goal ❙  Prefer familiar paths over exploration ❙  User: “I’m in a hurry, so I’ll do it the long way.” ❚  Very literal in following “scent” toward goal 98 Limits on Attention Shape Our Thought & Action
  • 50.
    50 Limits on AttentionShape Our Thought & Action ❚  Keeping track of features in STM is work ❚  We track only features crucial to task ❚  " We are often “blind” to changes 99 100 Limits on Attention Shape Our Thought & Action ❚  Keeping track of things in STM is work ❚  When we reach goal, we often let everything related to it fall out of STM ❚  " We often forget “loose ends” of tasks: ❙  Removing last page of document from copier ❙  Turning car headlights OFF ❙  Switching device or software back to normal mode ❚  Therefore: ❙  Systems should remind users of loose ends ❙  Modes should revert to “normal” automatically
  • 51.
    51 101 Recognition is Easy;
 Recallis Hard ❚  We evolved to recognize things quickly ❙  We assess situations very fast ❙  We recognize faces blindingly fast ❙  We recognize complex patterns 102 Recognition is Easy;
 Recall is Hard ❚  We did not evolve to recall arbitrary facts ❙  Tricks for memorizing use recognition to stimulate recall, e.g., Greek “method of loci” ❙  Developed writing to avoid memorizing ❙  We rely on external memory aids, e.g., smartphones ❚  Implication for UI design: ❙  See & choose easier to learn than remember & type Remove>
  • 52.
    52 System 1 andSystem 2 ❚  System 1: old brain + midbrain ❙  Collection of automatic “zombie” processes ❙  Can run many processes in parallel ❙  Fast but approximate, “satisficing” ❙  Doesn’t use working memory ❙  Unconscious; governs most of our behavior ❚  System 2: cerebral cortex (mainly frontal) ❙  Slow but precise ❙  Uses working memory ❙  One serial processor; cannot multi-task ❙  Conscious, self-aware; believes it governs our behavior 103 Example: System 1 vs. System 2 104 Copyright © Getty Images Copyright © Getty Images
  • 53.
    53 Example: System 1vs System 2 ❚  A baseball and a bat together cost $110. The bat costs $100 more than the ball. How much does the ball cost? ❚  System 1’s instant answer: $10 (wrong) ❚  System 2 may reject that answer. Or not. ❚  System 2 can calculate correct answer; System 1 cannot. 105 Example: System 1 vs System 2 ❚  System 1’s perception of the dogs’ size is biased by the lines; System 2’s is not. 106
  • 54.
    54 Test: System 1vs System 2 107 108 Easy: Performing Learned Routines ❚  Examples: ❙  Riding a bicycle after months of practice ❙  Driving to same workplace after many years ❙  Using a touchpad after a few days of practice ❙  Reading & deleting message from your phone ❚  Automatic: doesn’t use up STM / attention ❙  System 1: “zombie” or “robotic” processes ❙  Compiled mode, parallel processing ❙  Many processors: Can multi-task
  • 55.
    55 Hard: Performing NovelActions ❚  Examples: ❙  Following a new cooking recipe ❙  Driving somewhere you’ve never been ❙  Writing with your non-dominant hand ❙  Switching from Mac to Windows PC (or vice-versa) ❚  Controlled: consumes STM / attention ❙  System 2: Runs mainly in cerebral cortex ❙  Interpreted mode, serial processing ❙  Only one processor: Cannot multi-task 109 110 Test: Exercising Systems 1 vs. 2;
 Learned vs. Novel Actions ❚  Recite alphabet, A – M ❚  Recite alphabet backwards, M – A ❚  Countdown from 10 to 1 ❚  Countdown from 21 to 1 by 3s ❚  Hum first measure of “Twinkle, twinkle, little star” ❚  Hum it backwards
  • 56.
    56 Our Hand-Eye Coordination FollowsLaws ❚  Fitts’ Law ❚  Steering Law 111 Fitts’s Law [Fitts, 1954]:
 Time to hit a target w/pointer ❚  T = time (duration) to move to target ❚  D = distance from pointer to target ❚  W = width of target (on axis of movement) ❚  a = start/stop time of pointer/user ❚  b = maximum speed of device/user ❚  Formula: ❚  Simpler: T = a + bI 112
  • 57.
    57 Fitts’s Law:
 Time tohit a target w/pointer ❚  Movement starts fast; slows near target ❚  Slows more at target if target is small 113 Fitts’s Law:
 Time to hit a target w/pointer 114
  • 58.
    58 Fitts’s Law:
 Applies toalmost all pointing ❚  All pointing devices ❚  Human hands, feet, even head movement! ❚  All people: all ages, abilities, even if drugged ❚  Just change parameters: a & b T = a + bI 115 Pointing Slows with Age 116
  • 59.
    59 Fitts’s Law:
 Implications forDesign ❚  Make click-targets (e.g., buttons, links) big ❚  Targets at top & edge of screen fast to hit ❙  Essentially have infinite size ❚  Menus: pop-up & pie menus faster than pull-down ❙  Less movement required ❙  All faster than pull-right menus 117 Steering Law [Accot & Zhai, 1997] ❚  Derived from Fitts’s Law: T = a + b(L/W) ❚  Wider paths allow faster movement ❚  Implications: allow wide paths for scrollbars & pull-right menus 118
  • 60.
    60 Steering Law 119 Steering Law 120 ❚ Road Scholar Menus: 2012 vs. 2013
  • 61.
    61 121 Questions? 122 Conclusion: Applying DesignRules in UI Designs is Not Simple & Mindless ❚  UI design is a skill; not something anyone can do by following guidelines ❚  Knowing cognitive basis helps us prioritize ❙  Recognize which rules to follow in each design situation
  • 62.
    62 123 Now, Maybe thoseUI Design Rules Make More Sense Designing with The Mind in Mind, 2nd Edition 124
  • 63.
    63 125 The End ❚  Questions? ❚ Thank you! ❚  Please fill out course evaluations!