Upload
ferry-den-dopper
View
75.129
Download
5
Tags:
Embed Size (px)
DESCRIPTION
My notes from a workshop on Interaction Design & Psychology I attended in 2002.
Citation preview
Interaction Design & PsychologyWorkshop by Leonard Verhoef, 2002
Ferry den Dopper
Notes fromNotes from
Psychology: a different scope
Usability PsychologyBased on… Based on biology
Applies to products Applies to processes
Overlapping concepts Exclusive concepts
Principles Human functionsConsistency 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
MovementEfficient 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)
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
Hum
an fu
nctio
nsTyping or clicking?
MovementLess input
PerceptionSteering 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 > FormPerceiving characters
Bad Good Because29/1/8929-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,4510419,6523429,9500293,4090290,2520016,0503930,3040283,2503749,5000903,0030272,3515932,9590030,2528298,8030985,5500901,2584739,9039573,5500001,2506280,4529272,6549849,4013988,2573890,85
2 803,4510 419,6523 429,95 293,4090 290,2520 016,05 3 930,3040 283,25 3 749,50 903,0030 272,3515 932,9590 030,2528 298,8030 985,55 901,2584 739,9039 573,55 1,25 6 280,4529 272,6549 849,4013 988,2573 890,85
Perception > Form
Test: Find the amount 1,25
Perception > FormPerceiving 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
Text GraphicsPerceptionRecognizabilityConspicuousnessVisual Search
DifficultInconspicuousSlow search
EasyConspicuousFast search
CognitionRecognizabilityCognitive searchUser programming
EasyEasyEasy
DifficultNot possibleDifficult
PracticalSpace requiredDesign effort
Large number
Much spaceEasy to design
Any #
Little spaceMuch (but fun)No translationRestricted #
Text or graphics?
Perception > FormPerceiving text and graphics
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 > ColorControl of attention
Situation Action Example ColorNormal Information
availableMenu White
GreyBlack
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
Which color for which situation?
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
123
124
1 2 31 2 4
1 12 23 4
1 2 3 1 2 4
difficult difficulteasy 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 farClose
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
LanguageTest: Verb or noun?
File A file To fileEdit An edit To editFormat A format To format
Print A print To print
What will the user do at this message?
MS Word
LanguageClear 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
LanguageMore error messages
LanguageClear use of language
advancedapplicationbannerbasketdatabaseinformationclick herelinkpersonalizenextokno results
infrequently used, detailed (search)programadvertisementordersrefer to content (e.g. hotels, films)be more specificgive content (e.g. email, order now)give content (e.g. details)customizeto nextbe specificgive content (e.g. no cars found)
MemoryHelp, learning and 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
Human memory
MemoryHelp, 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
– 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
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– 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 andvirtual models
Logical errors with text editor when usingtypewriter 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