Cognition/Design, Design Principles, Design Patterns

1. Loren Terveen CS 5115, Fall 2010 October 6 Cognition/Design, Design Principles, Design Patterns

2. Hall of Fame – Hall of Shame Bharadwaj Parthasarathy Pavithra Paneerselvam Fall 2010 – User Interface Design, Implementation and Evaluation

3. Twitter Clients - Iphone • Social Media Application • Quick Status updates • Check replies and responses • Familiarity with iphone

4. Hall of Shame - Twitterific

5. Hall of Shame - Twitterific

6. Hall of Shame - Twitterific

7. Hall of Shame - Twitterific

8. Hall of Shame - Twitterific

9. Hall of Shame - Twitterific

10. Hall of Fame- Tweetie

11. Hall of Fame- Tweetie

12. Hall of Fame- Tweetie

13. Credit: ItunesU, Stanford CS193P

14. Hall of Fame- Tweetie

16. Human Cognition Basics • Attention • Perception and recognition • Memory • Learning • Problem solving and reasoning

17. Memory • Short-Term Memory • Severely limited capacity – “7 plus or minus 2” • Instant, effortless recall • “Chunking” • Fragile • Long-Term Memory • “Unlimited” capacity • Takes time/effort to store and retrieve • Interpretative • Retrieval is context-sensitive • rote memory vs. relationships vs. explanation

18. Memory (continued)‏ • People are really good at remembering some things • Visual cues, especially faces • People are much better at recognizing things than recalling them • People are good at associative reminding • People remember the typical case and the exceptions

19. Memory – Design Implications • Don’t make users remember complicated procedures • Design interfaces that promote recognition over recall • Give users resources to help them visually encode information (colors, icons, time stamps, etc.)‏

20. More than 7 +- 2 items in menu – bad? What about a voice menu?

21. Visual representation of contacts – recognition, not recall Spatial organization of information Pictures

23. Learning • Acquiring new knowledge or skills • Exploratory learning – learning by doing • Scaffolding or “training wheels”

24. Learning – Design Implications • Create interfaces that encourage exploration • Easy to try out and undo actions • Design interfaces to constrain users to select the right action • Provide multiple, linked representations

25. Examples • Graphical editors • Simulation environments

26. Can undo picture editing action Can learn about actions that are not available in current context

27. Problem solving and reasoning • Conscious; reflective • Thinking over one’s options • Figuring out the best option or solution • Making a plan • Weighing pros and cons

28. # of levels of decision making # of alternatives at any level A lot – deep A few - shallow A lot – wide Hard: games, puzzles, recreational activities Menu A few – narrow Recipe Don’t Make Me Think! Task Structure

29. Problem solving – Design Implications • Provide the proper information and aids • But, even better – design to make problem-solving and reasoning unnecessary

30. Spreadsheet

31. Tax Preparation Software • User doesn’t have to do computation • User doesn’t have to figure out which form to use • Instead, software poses questions that users are likely to be able to answer

33. Example • What’s the best flight from Vancouver to Montreal? • Time • Layovers • Plane changes • Price • …

34. AC 117 Vancouver Calgary 7:00 9:00 Cdn 321 Vancouver Calgary 9:00 12:00 Cdn 355 Calgary Montreal 13:30 19:30 AC 123 Calgary Toronto 12:30 16:30 AC 123 Toronto Montreal 16:45 17:30 Representation 1 * Time zones: van-cal  + 1 ; cal – tor, mon  + 2

35. Representation 2 7 9 11 13 15 17 Vancouver Cdn 321 AC 117 8 10 12 14 16 18 Calgary Cdn 355 AC 123 20 Toronto 10 12 14 16 18 Montreal

37. Graphic Design • Ideally, get a trained graphic designer • Use standard toolkits • Drupal, Wordpress, Joomla, ... • I know it when I (don’t) see it • Learn the basics yourself

41. Some principles • Contrast • Repetition • Alignment • Proximity

42. CRAP • Contrast • Emphasize important information • Make different things look different • Repetition • Consistency • Repeat design throughout the interface • Alignment • visually connect elements • create a visual flow • Proximity • group related elements, separate unrelated Robin Williams Non-Designers Design Book, Peachpit Press

43. Graphic Design – misc. • Simplicity / non-distracting • Don’t rely on color, use as a supplement • Angry fruit salad! • Don’t rely on sound

44. Original

45. Proximity

46. Alignment

47. Contrast

48. Repetition