Notes from
Interaction Design & Psychology
Workshop by Leonard Verhoef, 2002
Ferry den Dopper
Psychology: a different scope
Usability
Psychology
Based on…
Based on biology
Applies to products
Applies to processes
Overlapping concepts
Exclusive concepts
Principles
Human functions
Consistency
Movement
Feedback
Perception
Portability
Language
Robustness
Memory
Etc.
Thinking
Human functions as UI principles
Movement
Perception
Language
Memory
Thinking
Efficient user
input
Steering
attention and
recognizing
information
Clear use of
language
Help, learning
and memory
Thinking
Large buttons
Perceive size
Quiet pages
Less words
Mistaking and
forgetting
Mental load
Distance
Where to place
information?
Clear words
Help
From virtual
to conceptual
Structure
Tables
Sentences
Consistency
and standards
Navigation
Size
Form
Perceive form
Resistance
Luminance
Texture
Color
Changes
Blinking and
animations
Number
Less input
Movement
Efficient user input
• Large buttons
– Bigger targets are easier to hit
• Less input
– Efficient list selection
• Have a default selection
• Include frequency of use
• Allow keying and pointing
(Think about which is the faster way)
– Efficient word input
•
•
•
•
•
•
> 400 elements
Auto completion (e.g. MSIE address bar)
Accept synonyms
Accept errors
Sort / Analyze data for user (no database terror)
Date input
(Accept no leading zero’s, month numbers, month names, no century, century)
Movement
Less input
Human functions
Typing or clicking?
Pointing & Clicking
Typing
Movement
•Slow (one arm)
•Higher risk of RSI
•Fast (10 fingers)
•Lower risk of RSI
Perception
Eyes needed
Blind control is
possible
Language
Few differentiations
Many differentiations
Learning
Few conventions
Many conventions
Thinking
•For positional
relations
•For instruction
•Hard
•For instruction
Technical
Easy
Hard
Perception
Steering attention and recognizing information
• Size
– Use few large sizes
– Use different sizes to picture the layout
structure
(like a newspaper)
• Form
– Perceiving characters
(hand-out readability test)
– Perceiving text
– Perceiving graphics
•
•
•
•
•
•
Luminance
Color
Blinking and animations
Quiet pages
Where to place information
Tables
Too many attention points
Perception > Form
Perceiving characters
Bad
Good
29/1/89
29-1-89
Because
Extra figures like symbols decrease
distinctiveness
29 1 89
Empty space increases
distinctiveness
29 01 89
29 Jan 89
Jan is from another symbol set and
more distinct
29 01 89
29 1 89
Leading zero’s decrease
distinctiveness between tens,
hundreds, thousands
29 1 89
Underlining decreases
distinctiveness
1234 AB
1234 56
An other symbol set is more distinct
READ MORE
read more
Uppercase text reads 10% slower
than lowercase
abcd
abcd
Sans-serif characters are more
distinct and are read easier / faster
abc efg
abc efg
Bigger isn’t always better
Perception > Form
Test: Find the amount 1,25
02803,45
10419,65
23429,95
00293,40
90290,25
20016,05
03930,30
40283,25
03749,50
00903,00
30272,35
15932,95
90030,25
28298,80
30985,55
00901,25
84739,90
39573,55
00001,25
06280,45
29272,65
49849,40
13988,25
73890,85
2 803,45
10 419,65
23 429,95
293,40
90 290,25
20 016,05
3 930,30
40 283,25
3 749,50
903,00
30 272,35
15 932,95
90 030,25
28 298,80
30 985,55
901,25
84 739,90
39 573,55
1,25
6 280,45
29 272,65
49 849,40
13 988,25
73 890,85
Perception > Form
Perceiving text and graphics
•
With text:
–
–
–
–
•
Omit leading zero’s
Use distinctive characters
Use lowercase text
Don’t underline text
Use graphics to:
–
–
–
–
–
Improve visual recognizability
Improve conspicuousness
Search in few items
Increase understandability
Save screen space
Icons are very useful with recurring visitors
but only clear icons:
CompuServe WinCim 2.0
MS Word
Perception > Form
Perceiving text and graphics
Text or graphics?
Text
Graphics
Perception
Recognizability
Conspicuousness
Visual Search
Difficult
Inconspicuous
Slow search
Easy
Conspicuous
Fast search
Cognition
Recognizability
Cognitive search
User programming
Easy
Easy
Easy
Difficult
Not possible
Difficult
Practical
Space required
Design effort
Much space
Easy to design
Large number
Any #
Little space
Much (but fun)
No translation
Restricted #
Perception > Luminance
•
High luminance for:
–
–
–
–
•
Parallel attention
–
–
•
Good use of luminance
If people try to select an impossible (inactive)
option, the interface is wrong
Conflict: software vs. psychology
–
•
We don’t work sequential, but parallel
In multi-step processes: show the next step
Impossible choices
–
•
Relevant information
Variable information
Differences
Information on quantity (e.g. atlas)
Psychology: Emphasize the ‘dangerous’ option,
not the likely option
Highlighting text
–
Which is better? Making the text bold or marking
the text transparent yellow?
•
•
Bold: In principle preferable, but you lose focus on
other distant markings.
Yellow: More luminous, but requires mental switch
between yellow and black.
Bold highlighted text
Perception > Color
•
Color and visibility
–
–
–
–
•
Color not for:
–
–
–
–
•
Use unsaturated colors
Light blue not for important info
Red and green different luminance
Red and blue not both in foreground
Quantitative information
Unknown meaning
Too many in foreground
Too many in background
Color for:
–
–
–
Interpretation of data
Search of elements
Control of attention
•
•
•
•
Monochrome for no attention
One color for attention required soon
One color for immediate attention
One color for after ‘disaster’
Too many colors
Unclear use of colors
Perception > Color
Control of attention
Which color for which situation?
Situation
Action
Example
Color
Normal
Information
available
Menu
White
Grey
Black
Expected change of
situation
Needed
Default value, chosen
option
Yellow
Situation is unusual,
unexpected,
dangerous
Needed
NOW
Running out of
memory, virus found,
system will shut down
Orange
Disaster is
unavoidable or has
already happened
Too late
Out of memory,
system crash, system
shuts down
Red
Perception > Blinking and animations
•
•
Blinking = screaming!
Running text reads 10% slower
•
Animation not for:
–
–
–
–
–
–
–
•
Indicating direction
System is working
User should wait
To appear attractive
Text, e.g. running
Objects, e.g. moving
A realistic image
Animation for:
–
–
–
Unexpected info
Complex spatial relations
Bridge visual distance
Perception > Quiet pages
•
•
•
•
•
•
•
•
Use few sizes
Use few fonts
Use few graphics
Use few lines
Use luminance scarce
Use few colors
Use few animations
Low pixel information ratio
Perception > Where to place information?
Comparison
1
2
3
123
124
1 1
2 2
3 4
123
124
easy
easy
difficult
1
2
4
difficult
Place differences within one eye fixation
(as close as possible)
Perception > Where to place information?
•
Direction
–
•
Not necessarily from left to right, top to bottom
Distance
–
–
–
Concentrate
not on the distance from the page margin,
but on the distance from the current fixation point
Don’t center text blocks, keep a fixed fixation point
As close as possible:
•
•
•
Labels to the object
Objects for comparison
Grouping
–
–
–
–
–
Watch out for too many boxes / borders
Rather no black borders
No more than 5 tabs horizontally
Enable sort by column
Enable search entries (e.g. alphabet-ordered list)
Eye fixation
Eye fixation
Close
Too far
Perception > Tables
•
Efficient use of rows
–
–
–
–
–
•
Efficient use of columns
–
–
–
–
–
–
•
Few empty lines
One item one line
As long as possible
Include marks, search entries
Search list vertical
Use approx. 5 tabs max
Not too large
Do not centre
Fixed size
Last user selection
x% of longest element in list
Efficient use of areas
–
If scrolling unavoidable, sort by:
•
•
•
•
–
Recently used
Frequently used
Rarely used
Never used
Use empty, unused space
Language
Test: Verb or noun?
File
A file
To file
Edit
An edit
To edit
Format
A format
To format
Print
A print
To print
MS Word
What will the user do
at this message?
Language
Clear use of language
•
Less words
–
–
–
–
•
Clear words
–
–
–
–
–
–
•
Use few words
Don’t use synonyms
Use plurals
Use homogeneous word sets
No incorrect words
No homonyms
No jargon
No unspecific words
No form words
No negative words
Sentences
–
–
–
–
Use a verb and a noun
Use an adjective and a noun
Consistent word order
Use sentence with punctuation
Language
More error messages
Language
Clear use of language
advanced
application
banner
basket
database
information
click here
link
personalize
next
ok
no results
infrequently used, detailed (search)
program
advertisement
orders
refer to content (e.g. hotels, films)
be more specific
give content (e.g. email, order now)
give content (e.g. details)
customize
to next
be specific
give content (e.g. no cars found)
Memory
Help, learning and memory
Human memory
Short term memory
Long term memory
(working memory)
Short term recall
Long term recall
Electric basis
Chemical basis
Instable
Stable
Limited capacity (5-9 elements)
Rather large
Memory
Help, learning and memory
• Mistaking and forgetting
– Presentation
– Thinking
• Help
– Easy learning not by…
– Easy learning by…
• Consistency and standards
–
–
–
–
–
–
–
Have consistent input keys
Have consistent presentation
Have consistent words (no synonyms)
Have consistent abbreviations
Program standards
Platform standards
Computer interface standards
But:
– Be careful ‘worshipping’ consistency
– With very complex systems, it’s very hard to remain consistent
– Crossing system boundaries, inconsistency is allowed
Memory > Mistaking and forgetting
Help, learning and memory
Presentation
•
Show active processes
Progress indicator:
–
–
–
–
–
–
–
–
–
•
•
•
•
•
•
Function: Allow user to perform other task
Info: Indicate system is alive
Info: Indicate (reliable!) time to wait (in user’s units)
Info: Indicate total waiting time
Info: Change graphical presentation every 0.5 seconds
Control: Pause / Continue
Control: Undo actions done
Control: Alarm stop escape
Control: Stop
Show irregular status
Show history
Show context
Show icon word label
Reduce visual distance
Enable progress control
Memory > Mistaking and forgetting
Help, learning and memory
Thinking
•
Lists
–
–
–
•
Provide agenda
–
–
•
Mutually exclusive elements
Predictable order
Relative predictable list position
Suggest dates
Allow user entered dates
Support password recall
–
–
User specifies password
Provide hint
Memory > Mistaking and forgetting
Help, learning and memory
Thinking
•
Are you sure?
–
–
–
Only for actions which have impact
If “no” is probable
No user input
But: prevent routine clicking:
•
•
–
–
–
–
By typing “yes”
Not by typing a random number
Wait a few seconds before fatal action
Pretend starting operation
Enable abort / undo
“Progress indicator” requirements
Memory > Help
•
If you need ‘Help’, the interface is wrong
–
–
•
Don’t give help that doesn’t help
–
–
–
•
Give help concerning content, not on controls
Don’t explain the browser in your website help
Be on the right expert level
No help using…
–
–
•
You have to tune your application to the user, not
the other way around.
“Help” is an alibi for incompetence
(The designer/developer doesn’t understand how
people work)
Tip of the day
Help option in menu
Helpful help…
–
–
–
–
Has correct expert level
Is vertical
Changes level automatically
Reduces operation
Memory > Help
Tool tips
•
A tool tip…
–
–
–
–
–
has an unobtrusive presentation
has a verb and a noun
has the correct expert level
has concise text
has a correct time delay (0.5 seconds)
Thinking
Reduce mental load
•
The computer computes
–
–
–
•
Personalize
–
–
–
•
Program computes numbers
Present from user’s perspective
Present in user’s units
Better: Customize
Why?
Not because you don’t know how
the user works
How?
E.g. Give info / offers based on
user’s history
Reliability
–
–
–
Announce uncertainty, don’t
conceal it
Show reliable waiting time
Have up-to-date content
Suggests dates: today, tomorrow, other…
Thinking
From virtual to conceptual
Be careful with using metaphors and
virtual models
Logical errors with text editor when using
typewriter as a metaphor
•
•
•
•
•
Accented characters using destructive backspace
Confusion over cursor keys, space bar,
backspace and return
Misunderstanding difference hard / soft return
Insert spaces to justify right
Overtype with spaces to delete characters
Thinking
Navigation
•
Psychologically, each menu,
toolbar and tab control is a list.
So the same requirements apply:
– Mutually exclusive elements
– Predictable order
– Relative predictable list position
– Absolute predictable position