Interaction Design & Psychology (2002)

Interaction Design & Psychology Workshop by Leonard Verhoef, 2002 Ferry den Dopper Notes from

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 Size Large buttons Perceive size Form Perceive form Resistance Luminance Texture Color Changes Blinking and animations Number Less input 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

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)

Human functions Typing or clicking? Movement Less input 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 Because 29 / 1 / 89 29 - 1 - 89 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

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 Test: Find the amount 1,25

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 Large number Much space Easy to design Any # Little space Much (but fun) No translation Restricted #

Perception > Luminance
High luminance for:
Relevant information
Variable information
Differences
Information on quantity (e.g. atlas)
Parallel attention
We don’t work sequential, but parallel
In multi-step processes: show the next step
Impossible choices
If people try to select an impossible (inactive) option, the interface is wrong
Conflict: software vs. psychology
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 Good use of luminance

Perception > Color
Color and visibility
Use unsaturated colors
Light blue not for important info
Red and green different luminance
Red and blue not both in foreground
Color not for:
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
1
2
4
1 2 3 1 2 4 1 1 2 2 3 4 1 2 3 1 2 4 difficult difficult easy easy 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 Too far Close

Perception > Tables
Efficient use of rows
Few empty lines
One item one line
As long as possible
Include marks, search entries
Search list vertical
Efficient use of columns
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? What will the user do at this message? MS Word File A file To file Edit An edit To edit Format A format To format Print A print To print

Language Clear use of language
Less words
Use few words
Don’t use synonyms
Use plurals
Use homogeneous word sets
Clear words
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 (working memory) Long term 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

Thinking
Lists
Mutually exclusive elements
Predictable order
Relative predictable list position
Provide agenda
Suggest dates
Allow user entered dates
Support password recall
User specifies password
Provide hint

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
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)
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…
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)

Reduce mental load
The computer computes
Program computes numbers
Present from user’s perspective
Present in user’s units
Personalize
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
Thinking 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

http://www.userspots.com	1252
http://ignaciopastor.blogspot.com	633
https://vuws.uws.edu.au	226
http://ignaciopastor.blogspot.com.es	206
http://www.slideshare.net	151
http://brainmod.ru	52
http://noaeta.blogspot.com	37
http://funkykaraoke.blogspot.com	37
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	36
http://ignaciopastor.blogspot.com.ar	35
http://hyunsu.dd.gl	29
http://nayatop21.tistory.com	25
http://www.levidepoches.fr	22
http://brandnew.blogbus.com	21
http://www.miraesoft.kr	20
http://www.den-dopper.com	19
http://hkim01.blogspot.com	18
http://www.agglom.com	16
http://userfly.com	12
http://www.howl.or.kr	12
http://www.jigglynuts.com	11
http://desmoquattro.blogspot.it	11
http://ignaciopastor.blogspot.mx	10
http://onjung.tistory.com	9
http://www.catalyze.org	8
http://designwebinar.com	8
http://desmoquattro.blogspot.com	8
http://uedindia.com	8
http://ciberaprendizajes.blogspot.com	8
http://feeds.feedburner.com	8
http://d4th.com	8
http://pixstory.tumblr.com	7
http://www.oneworldoneagency.net	7
http://kms.saerom.co.kr	7
http://life24.oa.to	7
http://www.levidepoches.blogs.com	6
http://t648.tistory.com	6
http://noaeta.blogspot.com.es	5
http://www.funkykaraoke.com	5
http://ignaciopastor.blogspot.co.uk	5
http://trend.wk.to	5
http://www.delabuk.com	4
http://www.hanrss.com	4
http://21t0p21.tistory.com	4
http://ignaciopastor.blogspot.de	4
http://www.mycatalyze.org	4
http://creativegas.wordpress.com	4
http://aapp785.oa.to	4
http://top785.oa.to	3
http://romanashu.blogspot.com	3
http://moodle.fielding.edu	3

Interaction Design & Psychology (2002)

by Ferry den Dopper on Jan 27, 2008

Accessibility

Categories

Upload Details

Usage Rights

139 Embeds 3,184

Statistics

Interaction Design & Psychology (2002) Presentation Transcript