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

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’

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)

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

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

Interaction Design & Psychology (2002)

More Related Content

What's hot (19)

Similar to Interaction Design & Psychology (2002) (20)

More from Ferry den Dopper (20)

Recently uploaded (20)

Interaction Design & Psychology (2002)