Interaction Design & Psychology (2002)

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

Slide 2: 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

Slide 3: Human functions as UI principles Movement Perception Language Memory Thinking Efficient user Steering Clear use of Help, learning Thinking input attention and language and memory recognizing information 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 Mental load forgetting Distance Where to place Clear words Help From virtual to information? conceptual Structure Tables Sentences Consistency Navigation and standards

Slide 4: 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)

Slide 5: Movement Less input Typing or clicking? Pointing & Clicking Typing Movement •Slow (one arm) •Fast (10 fingers) •Higher risk of RSI •Lower risk of RSI Perception Eyes needed Blind control is Human functions possible Language Few differentiations Many differentiations Learning Few conventions Many conventions Thinking •For positional •Hard relations •For instruction •For instruction Technical Easy Hard

Slide 6: 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

Slide 7: Too many attention points

Slide 8: Perception > Form Perceiving characters Bad Good Because 29/1/89 Extra figures like symbols decrease 29-1-89 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

Slide 9: Perception > Form Test: Find the amount 1,25 02803,45 2 803,45 10419,65 10 419,65 23429,95 23 429,95 00293,40 293,40 90290,25 90 290,25 20016,05 20 016,05 03930,30 3 930,30 40283,25 40 283,25 03749,50 3 749,50 00903,00 903,00 30272,35 30 272,35 15932,95 15 932,95 90030,25 90 030,25 28298,80 28 298,80 30985,55 30 985,55 00901,25 901,25 84739,90 84 739,90 39573,55 39 573,55 00001,25 1,25 06280,45 6 280,45 29272,65 29 272,65 49849,40 49 849,40 13988,25 13 988,25 73890,85 73 890,85

Slide 10: 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

Slide 11: Perception > Form Perceiving text and graphics Text or graphics? Text Graphics Perception Recognizability Difficult Easy Conspicuousness Inconspicuous Conspicuous Visual Search Slow search Fast search Cognition Recognizability Easy Difficult Cognitive search Easy Not possible User programming Easy Difficult Practical Space required Much space Little space Design effort Easy to design Much (but fun) No translation Large number Any # Restricted #

Slide 12: 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 Good use of luminance – 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

Slide 13: 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’

Slide 14: Too many colors

Slide 15: Unclear use of colors

Slide 16: Perception > Color Control of attention Which color for which situation? Situation Action Example Color Normal Information Menu White available Grey Black Expected change of Needed Default value, chosen Yellow situation option Situation is unusual, Needed Running out of Orange unexpected, NOW memory, virus found, dangerous system will shut down Disaster is Too late Out of memory, Red unavoidable or has system crash, system already happened shuts down

Slide 17: 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

Slide 18: 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

Slide 19: Perception > Where to place information? Comparison 1 123 1 1 123 124 2 124 2 2 3 3 4 1 2 4 difficult easy easy difficult Place differences within one eye fixation (as close as possible)

Slide 20: 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)

Slide 21: Eye fixation

Slide 22: Eye fixation Close Too far

Slide 23: 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

Slide 24: Language Test: Verb or noun? File A file To file What will the user do Edit An edit To edit at this message? Format A format To format Print A print To print MS Word

Slide 25: 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

Slide 26: Language More error messages

Slide 27: Language Clear use of language advanced infrequently used, detailed (search) application program banner advertisement basket orders database refer to content (e.g. hotels, films) information be more specific click here give content (e.g. email, order now) link give content (e.g. details) personalize customize next to next ok be specific no results give content (e.g. no cars found)

Slide 28: 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

Slide 29: 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

Slide 30: 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

Slide 31: 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

Slide 32: 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

Slide 33: 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

Slide 34: 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)

Slide 35: Thinking 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 Suggests dates: today, tomorrow, other… user’s history • Reliability – Announce uncertainty, don’t conceal it – Show reliable waiting time – Have up-to-date content

Slide 36: 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

Slide 37: 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