Interaction Design & Psychology (2002)


Published on

My notes from a workshop on Interaction Design & Psychology I attended in 2002.

Published in: Design
  • Interesante presentacion sobre psicologia, me fue de mucha utilidad ya que estoy iniciando mis estudios en esta area, si están interesados comparto con ustedes el sitio donde encontrarán un directorio de especialistas en odontologia, saludos y espero ver más aportes.
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you so much, for sharing these good slides(ppt)
    Are you sure you want to  Yes  No
    Your message goes here
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to  Yes  No
    Your message goes here
  • Good presentation.
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing such an amazing explanation through nicely built presentation. I have website: and that I wish to embed this slide into them. I hope you don’t mind. Thanks.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Interaction Design & Psychology (2002)

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