Design and Prototyping (+ Human Cognition)

1. Loren Terveen CS 5115, Fall 2010 September 29 Design and Prototyping (+ Human Cognition)

2. Hall of Fame/Shame:Cell Phone Keypads Matt Azlin Steve Frederickson Fall 2010

3. Hall of Shame: Sure Type • Poor Mapping • Multiple functions on one key • Poor visibility • Fingers cover tiny text on buttons while typing • Designing for Error • Issue when combined with Standards • “R I Coming over?” • Typos not easily detected or corrected

4. Sure Type • Standardization • Has qwerty keypad • Affordances • Buttons can be pressed • Good Feedback • Tactile feedback from buttons • Text displays on screen as you type

5. Shame Touch screen Fame Visibility The letters pop up above your fingers as you type Letters also appear in text box Mapping Each button has exactly one function Designing for Error Software corrects common typos • Feedback • Not as strong as buttons • Touch typing is impossible • Standardization • Pressing alt switches keyboard configuration • Constraints • Limited by screen size • Expensive

6. Hall of Fame: Physical Keyboard • Good Feedback • Tactile feedback from buttons • Text displays on screen as you type • Standardization • Qwerty keyboard • Affordances • Buttons can be pressed

7. Hall of Fame: Physical Keyboard • Mapping • Fewest functions per physical button • Knowledge in the world • Buttons are clearly labeled with contrasting colors • Alt functions are color coded • Designed for error • Allow software to focus on spelling issues (vs choosing correct words with specific input)

8. Ryan Anderson and Kevin Wendzel

9. Hall of Shame

15. Hall of Fame

21. Some helpful project thoughts • http://www.debralauterbach.com/blog/2010/09/advice-to-chi-student-design-competition-participants/

22. Prototypes

23. Paper (Low Fidelity) Prototypes Sketches of interface and task completion paper, post-its, or screen drawings

24. Examples and References • http://www.nngroup.com/reports/prototyping/video_stills.html • http://www.paperprototyping.com/references.html • http://www.alistapart.com/articles/paperprototyping

25. LoFi pluses Easy to produce Rapid iteration / generate then test To get a good idea, get lots of ideas Never look for the “best way” – look for hundreds of ways Users focus on the important stuff Bugs don’t halt testing Status is clear – proper expectations Designers don’t get emotionally invested

26. LoFi limits • Hard to capture timed, dynamic interaction

27. What to prototype? • Screen layouts and information display • Work flow, task design • Technical issues • Difficult, controversial, critical areas

28. Human Cognition Basics

29. Human Cognition Basics • It’s Human-Computer Interaction, UserInterface Design • … so a brief overview of human cognitive capabilities as relevant to HCI • Goal: use this knowledge to guide design of interfaces that extend people’s abilities and compensate for weaknesses

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

31. Attention • From the range of available possibilities, select what to concentrate on

32. Attention – Design Implications • Emphasize task-relevant information • But don’t visually clutter the interface: plain interfaces can be easier to use

33. Attention - Example • Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query

36. Two more examples

39. Perception • Acquiring information from the environment using different senses • Vision is dominant sense for sighted people

40. Perception – Design Implications • Icons should be designed so users can easily distinguish their meanings • Sounds should be clearly audible and distinguishable • Text should be legible and distinguishable from the background

41. Perception - Example • My goal is to read new messages in an online forum

42. Icons: are their meanings clear? Attention: easy to focus on the right stuff?