Interaction Design & Psychology Workshop by Leonard Verhoef , 2002

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

2. Psychology: a different scope

3. Human functions as UI principles

4. 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)

5. MovementLess input Typing or clicking? Human functions

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

7. Too many attention points

8. Perception > FormPerceiving characters

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

10. CompuServe WinCim 2.0 MS Word 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:

11. Perception > FormPerceiving text and graphics Text or graphics?

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 • 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. Good use of luminance Bold highlighted text

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’

14. Too many colors

15. Unclear use of colors

16. Perception > ColorControl of attention Which color for which situation?

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

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

19. 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 easy easy difficult Place differences within one eye fixation (as close as possible)

20. Perception > Where to place information? • Direction • Not necessarily from left to right, top to bottom • Distance • Concentratenot 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)

21. Eye fixation

22. Eye fixation Close Too far

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

24. LanguageTest: Verb or noun? What will the user do at this message? MS Word

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

26. LanguageMore error messages

27. 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) LanguageClear use of language

28. MemoryHelp, learning and memory Human memory

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

30. Memory> Mistaking and forgetting Help, learning and memory Presentation • Show active processesProgress 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

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

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

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

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)

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

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

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