Foundations of User-Centered Design

1. Foundations of User-Centered Design

2. Questions about the Project? • Done in groups • ~4 members • Projects must have at least two real users (who are not members of the team) • Find a project that you can get excited about • Find people with shared goals, vision, and work style • Get started now! • If you have a project, start selling it

3. Types of Projects • Induce change: • Take an existing interaction and make it more efficient or add new capabilities • Invent new forms • Enable new behaviors

4. Refrain from • Building from the “ground up” • Investing too much in the “back end” • Yet another attempt at a well known or commonly pursued interface: • To do lists, grocery finders, course schedulers, apartment finders, mail or news readers, etc.

5. Next Wednesday • You will each make a ONE MINUTE pitch of an idea

6. Hall of Fame or Shame? • My task: after taking a cup and filling it with soda, I need to put a lid on the cup

9. Analysis • Why is the first one a candidate for Hall of Shame, while the other is a candidate for the Hall of Fame? • Mappings • But: must consider context

10. Exercise • Another taste of what you’ll be doing….

11. A two-person game • Start with the numbers 1, 2, 3, ..., 9 • Alternate turns, taking one number at a time • Player one Xs out the number they want to take • Payer two circles the number they want to take • A player wins when they have any 3 numbers that sum to 15 • e.g., 1, 3, 9, 5 wins because 1+9+5 equals 15 • If numbers are all used with no winner, the game is a draw

12. 4 3 8 1 9 5 2 7 6 OK, now try it another way

13. Now, observe • Do you really need the numbers? • An interface is a representation of a problem/task • A well-designed interface can wholly transform a task, making it much simpler

14. Moving On – Today’s Objectives • “Refresh your memory" of some basic human psychology • Begin to discuss design principles based on these principles

15. The Core Process of UI Design • Understand • Map • Evaluat

16. Understand User Behavior

17. Mapping to Interaction

18. Evaluate and Learn

19. Human Cognition • It’s Human-Computer Interaction, User Interface Design so we need to understand something about human capabilities • … so a very brief overview of human cognitive capabilities as relevant to HCI

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

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

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

23. Attention - Example • My Task – Enter the query “task centered user interface design” into a search engine. • Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query.

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

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

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

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

30. Also true for auditory cues • Microsoft Money generates the “Exclamation” sound whenever a new transaction is entered into an account. • Annoying in it’s own right • But is this the proper choice of sounds?

31. Memory • Short-Term Memory • Instant, effortless recall • Severely limited capacity – “7 plus or minus 2” • “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

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

33. Memory – Design Implications • Don’t make users remember complicated procedures • Limit number of items in text menus • Design interfaces that promote recognition over recall • Give users resources to help them visually encode information (colors, icons, time stamps, etc.)

34. More than 7 +- 2 items in menu – bad?

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

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

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

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

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

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

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

42. Representation 1 * Time zones: van-cal  + 1 ; cal – tor, mon  + 2

43. Representation 2 7 9 11 13 15 17 Vancouver Cdn 321 AC117 8 10 12 14 16 18 Calgary Cdn 355 AC123 20 Toronto 10 12 14 16 18 Montreal

44. Another Example: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

45. Next Steps • Reading: • Keep reading DOET (Finish bySept. 8) • Project: • “It Bugs Me” Activity – Bring to class Friday • Begin brainstorming ideas – Bring next Wednesday • Next class: • Studio : “It Bugs Me”