User- Centered Design: Intro and Methods

1. Loren Terveen CS 5115, Fall 2010 September 15 User-CenteredDesign: Intro and Methods

2. Sample Hall of Fame/Shame • James Greensky Fall 2006

3. Blood Pressure Monitor (Aneroid)

4. Hall of Shame • Very difficult to impossible to form any conceptual model • Absolutely no constraints or few visibility clues as to how to use the objects or even how they relate • Some affordanances, but without a conceptual model they don’t make sense • No feedback as to using the devices correctly • Must remember exactly how to use the devices • Very large Gulfs of Execution and Evaluation • Other “Gulfs” - Even if you know how to use the device, very hard to execute the correct action sequences without errors to obtain the results - Easy to position cuff wrong, but the arrow helps - Also easy to put cuff on too tight or too loose - Easy to forget valve is open - Needs full user attention to hear and remember results - Interpreting the results requires previous knowledge - Do the results make sense or is the cuff on wrong, better adjust cuff and retest - Was the pressure for no heartbeat systolic or diastolic, often referred to by non-professional users of the device as simply the top and bottom numbers

5. Blood Pressure Monitor (Digital) • Much easier to form a conceptual model for the device due to a unified structure • Being able to form a conceptual model makes all the difference • Affordances make more sense • Much easier to figure out and after remember how to use the device • Much better visibility and feedback due to display • No longer requires user’s full attention • Can easily see the results and KNOW that the top number is systolic and the bottom number is diastolic • Less susceptible to error but…

6. Hall of Fame??? • Errors can still easily occur due to improper placement or fit of cuff • Easy to hit on/off button instead of start which instantly turns the tester off • Still need to have previous knowledge to interpret the results - Is ???/?? normal, am I going to die??? • Start button could be “coded” better

7. Blood Pressure Monitor (Walmart) • Excellent conceptual model • Excellent use of affordance • Excellent use of physical constraints • No Gulf of Execution

8. Hall of Fame • Buttons are “culturally coded” • Can easily interpret and evaluate results • No Gulf of Evaluation • A good design can make you want to use the device

9. User-Centered Design

10. You need real users You may think your idea for a new system is so wonderful that everyone will want it, though you can’t think of a really specific example, and that it will be useful in some way to people, even though you can’t say how. But history suggests that you will be wrong. (Lewis and Rieman, Chapter 2)‏

12. Task-Centered User Interface Design Tasks?

13. Tasks A detailed description of a complete job that specific users want to accomplish What, not how Concrete, detailed Complete job Not just feature lists Transitions between sub-tasks Inputs/outputs – information flow

14. Example Task Professor Terveen gets email telling him that 5115 is scheduled to meet every Monday and Wednesday, starting September 7, and ending December 15; the final will be sometime during the week of December 15. He should enter those dates into his calendar, scheduling 9:45-11:00 for the class. He should also produce a list of conflicting appointments that need to be rescheduled.

15. Another Example • Loren wants to buy tickets for a trip to San Francisco, leaving November 2 and returning November 5. He wants to leave as close to noon as possible, but wants to be sure to arrive by 4pm Pacific Time. For the return trip, he wants to leave as close to 5pm as possible, not no earlier. He prefers to fly Delta, since he’s a SkyMiles member. He prefers an aisle seat. He’d also like a row where no other passengers are seated or else an exist row so he’s got more room to stretch out.

16. What Tasks? Focus: frequent and infrequent-but-important tasks Depth/quality more important than number of tasks

17. Scenarios Specific instances of system use From the what to the how A particular task A particular interface What the user would do, in detail, in a specific interface So someone could complete without task knowledge (Yes, Go and Carroll mean something else....)

18. Important: tasks and scenarios are concrete Questions come in different kinds Some can be settled through abstract argument Are there more real numbers than natural numbers? Some only can be settled empirically Can students use OneStop.umn.edu to find out whether there is room to enroll in CS 5115?

19. Scenario • (Go & Carroll) • Usage story • kind of like • + • Task • (Lewis & Rieman) • Persona

20. Exercise Take a look at the student section of www.OneStop.umn.edu Define a task(not scenarios) students might try to accomplish with the site Remember what tasks are used for Present tasks, discuss, ask questions 10 minutes 10 minutes

21. Project check

23. Human Cognition • It’s Human-Computer Interaction, User Interface Design so we need to understand something about human capabilities • … 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

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

25. Attention • From the range of available possibilities, select what to concentrate on • Visual or auditory scanning • Factors that affect ease of focusing on the right stuff: • Specificity of goals • Information display

26. Attention – Design Implications • Information relevant to the current task should be salient • Graphical techniques – layout, ordering, organization, underlining, color, animation – can be used to achieve this goal • But don’t visually clutter the interface: plain interfaces can be easier to use

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

30. Two more examples

33. Perception • Acquiring information from the environment using different senses • Results in internal experience of external events • Vision is dominant sense for sighted people

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

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

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

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

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

39. 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.)‏

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

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

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

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

44. Examples • Graphical editors • Simulation environments

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

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

47. # 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 Task Structure

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

49. Spreadsheet

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