designing with the mind in mind
TRANSCRIPT
-
8/14/2019 Designing With the Mind in Mind
1/25
1
Psychological Basis for UIDesign Rules
Designing with the Mind in Mind
Jeff Johnson
UI Wizards, Inc.
2
Many HCI researchers andpractitioners have offeredUI Design Guidelines
-
8/14/2019 Designing With the Mind in Mind
2/25
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 ishappening
! 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, orenvironmental conditions
-
8/14/2019 Designing With the Mind in Mind
3/25
5
Applying Usability Guidelines
! UI Guidelines are based on how peopleperceive, think, learn, act
! UI designers want reasons for rules
! UI guidelines are notrote recipes
! Applying them effectively requires
understanding their scientific basis
" Determining rule applicability & precedence
" Balancing trade-offs between competing rules
6
Facts about HumanPerception & Cognition
! We perceive what we expect
! Our vision is optimized to see structure
! Our color vision is limited! Our peripheral vision is poor
! Our attention is limited
! Our memory is imperfect
! Recognition is easy; recall is hard
! We think mostly about ourtasks, not ourtools
!We seek and use structure
! Human thought-cycle: goal, execute, evaluate
-
8/14/2019 Designing With the Mind in Mind
4/25
7
Our perception is biased by:! Our experience
! The context
! Our goals
We Perceive What We Expect
8
We Perceive What We Expect
-
8/14/2019 Designing With the Mind in Mind
5/25
9
We Perceive What We Expect
Page 1
Back Next
Page 2
Back Next
Page 3
Back Next
Page 4
Next Back
10
We Perceive What We Expect
T E C T
-
8/14/2019 Designing With the Mind in Mind
6/25
11
We Perceive What We Expect
! Adults perception & attention focusesalmost totally on our goals
! Tend not to notice things unrelated to goal
12
We Perceive What We Expect
-
8/14/2019 Designing With the Mind in Mind
7/25
13
Our Vision is Optimizedto See Structure
Gestalt Principles of Visual Perception! Proximity
! Similarity
! Common fate
! Continuity
! Closure! Symmetry
! Figure/ground
14
Gestalt Principle: Proximity
! Items that are closer appear grouped
! Left: rows Right: columns
-
8/14/2019 Designing With the Mind in Mind
8/25
15
Gestalt Principle: Similarity
! Items that look similar appear grouped
! Larger circles appear as a group
16
Gestalt Principle:Common Fate
! Items that move together are grouped
-
8/14/2019 Designing With the Mind in Mind
9/25
17
Gestalt Principle: Continuity
! We tend to see continuous forms
! Blue line and orange line;
not blue-and-orange > and
18
Gestalt Principle: Closure
! We tend to see whole, closed objects, not
collections of fragments
! Overlapping circles & triangles,
not odd fragments
-
8/14/2019 Designing With the Mind in Mind
10/25
19
! We tend to see whole figures inrelationship, rather than parts
! E.g., two overlapping diamonds;
not inverted V standing on V
Gestalt Principle: Symmetry
20
Gestalt Principle: Figure/Ground
! When objects overlap, we see smaller as
figure on ground (larger)
! Escher exploited figure/ground ambiguity
-
8/14/2019 Designing With the Mind in Mind
11/25
-
8/14/2019 Designing With the Mind in Mind
12/25
23
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
! MoneyDance
-
8/14/2019 Designing With the Mind in Mind
13/25
25
Our Color Vision is Limited, so
! Dont rely solely on color" Use redundantly with other cues
! E.g., Lets improve ITN.net
! How theyimproved it:
26
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
-
8/14/2019 Designing With the Mind in Mind
14/25
27
Our Peripheral Vision is Poor
! Client internal Web-app
28
! Airborne.com
Our Peripheral Vision is Poor
-
8/14/2019 Designing With the Mind in Mind
15/25
29
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)
30
Our Peripheral Vision is Poor, so
! Client internal web-app, improved
-
8/14/2019 Designing With the Mind in Mind
16/25
31
Our Attention is Limited;Our Memory is Imperfect
! Short-term memory (STM)! Long-term memory (LTM)
32
Our Attention is Limited;Our Memory is Imperfect
Short-term memory (STM)
! Represents conscious mind
" Attention: what were attending to NOW
! Holds 3-7 unrelated items
" Goals, numbers, words, images, other info
! New items can bump old ones out
! Easy to forget goals or info
-
8/14/2019 Designing With the Mind in Mind
17/25
33
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
34
Our Attention is Limited;Our Memory is Imperfect
! Slate.com
! Blooper:
Search terms
not shown
(short-term
memory)
-
8/14/2019 Designing With the Mind in Mind
18/25
35
Our Attention is Limited;Our Memory is Imperfect
! Microsoft Windows
! Blooper: Instructions go away too soon
36
Our Memory is Imperfect
Long-term memory (LTM)
! Stores a lifetime of experience, but
" error-prone, impressionist, free-associative,
idiosyncratic, easily biased
! Seldom-followed routines hard to recall
" Reason for food recipes, pilot checklists, etc.
! Even often-recalled memories change
" See whale-shark, remember whale
-
8/14/2019 Designing With the Mind in Mind
19/25
37
Our Memory is Imperfect
Long-term memory (LTM) test:! Was there a roll of tape in the toolbox?
! What was yourprevious phone number?
! In list? stream city corn auto twine spade
! The list: river town corn car string shovel
! What website doesnt show search terms?
38
Our Memory is Imperfect
Long-term memory (LTM) & UI Design
! Which UI will be easiest to remember?
! Which one will be hardest?
insert, deletedraw, eraseinsert, deleteBorder
insert, deletecreate, destroyinsert, deleteRow
insert, removeremove, addinsert, deleteColumn
insert, deleteinsert, deleteinsert, deleteTable
Design CDesign BDesign AObject
-
8/14/2019 Designing With the Mind in Mind
20/25
39
Recognition is Easy;Recall is Hard
! We evolved to recognize things quickly" We assess situations very fast
" We recognize faces so fast its a mystery
" We recognize complex patterns
40
Recognition is Easy;Recall is Hard
! We did notevolve to recall arbitrary facts" Tricks for memorizing use recognition to stimulate
recall, e.g., Greek method of loci" Developed writing to avoidmemorizing
" We rely on external memory aids, e.g., PDAs
! Implication for UI design:" See & choose easier to learn than remember & type
Remove>
-
8/14/2019 Designing With the Mind in Mind
21/25
41
We Think Mostly About Our Tasks;Not Our Tools
! Barely pay attention to computer tools" Focus attention on own goals, data
! Think about computer, UI only superficially
! Very literalin following scent toward goal
42
We Seek & Use 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 the same day.
! Structured:
Flight: UA 237, Auckland => San Francisco
Depart: 14:30
Arrive: 11:40 (same day)
-
8/14/2019 Designing With the Mind in Mind
22/25
43
We Seek & Use Structure
Visual hierarchy gets people to goal faster
44
Human Thought-Cycle
! Form goal
! Execute actions:
" A goal can be achieved in different ways
! Evaluate: perceive results of actions
" Did we achieve goal?
" Are we closer to goal?
" Are our actions working?
! Repeat (at many levels)
-
8/14/2019 Designing With the Mind in Mind
23/25
45
Human Thought-Cycle, e.g.
! Goal: Buy airline ticket to Berlin.! Go to travel website. (First step)
! Search for suitable flights. (Normal step)
! Choose desired flight. (If none, back up)
! Go to checkout. (Approaching goal)
! Confirm flight details. (All correct?)! Purchase ticket w/credit card. (Looks OK)
! Print ticket. (Goal achieved)
46
Many Levels of Goals, Actions
! Send flowers to friend
" Find flower delivery service
# Type flowers into Google Correct typo: floowers
# Visit some of resulting links
# Choose a flower delivery service
" Order flowers delivered to friend# Review services flower selection
# Choose flowers
# Specify delivery# Pay for flowers & delivery
-
8/14/2019 Designing With the Mind in Mind
24/25
47
Thought-Cycle AffectsShort-Term Memory (STM)
! Keeping track of things in STM is work! When we reach a goal, we often let everything
related to it fall out of STM
! Thats why we often forget loose ends of tasks:
" Last pages of documents are left on copiers
" Car headlights are left ON
" Device or software is left in the wrong mode
! Therefore:
" Systems should remind users of loose ends
" Modes should revert to normal automatically
48
Applying Design Rules in Real UIDesigns is Not Simple & Mindless
! Constraints happen; force tradeoffs
" Sometimes we must violate one rule to follow
another, more important one
" Thats why UI design is a skill; not something
anyone can do by following a recipe
! Designers learn to prioritize
" Recognize which rules to follow in each
design situation
" Prototyping helps explore tradeoffs
-
8/14/2019 Designing With the Mind in Mind
25/25
49
Now, Maybe those UI
Design Rules Make MoreSense
Questions?