Design Principles

1. NEEDS DESIGN EVALUATE IMPLEMENT Design Principles John C. Tang September 13, 2007

2. Today • Updates on facebook project • Conceptual model • Feedback • Constraints • Affordances • Action cycle • Gulf of execution • Gulf of evaluation • Time for group work

3. facebook group project • Discussion section topic, Sept. 19 • Introduction to facebook platform • Basic familiarity with features, constraints of platform • Project ideas • Yes! You need to do something different • We know about the applications in lists • Group design process  generate new idea • Convince us why it is better than prior ideas

4. facebook group project (2) • Implementation effort should be realistic • Must demonstrate working prototype • OK if not all aspects are working • User study must test for complete idea • Hybrid working prototype, paper prototype • Wizard of Oz

5. Great discussion sections! • Really appreciated good work • All slides uploaded to the web site • Allowing extra time (until 5:00pm today) to form groups • Take advantage of office hours (Brian, me, Christine) for feedback on topic ideas • Stanford Big Face(book)-off?

6. Social networking ? • Social networking fueled by “exhibitionism” • Social status • Contests • Popularity • Alternatives • Collectivism • Activism

7. FB: Causes • Promote awareness of UN Millennium project goals • Educate people about goals • Award “badge” for passing quiz • Community recognition for shared awareness

8. Criteria: Review facebook application (Due Sept. 18) • Pick an interesting application • Clearly explain to us what it does (illustrated) • Observe at least 2 non CS160 people using application (give demographic info) • Write review • What works well • What doesn’t work well • Support with evidence from observations • Suggested improvements • Shouldn’t be more than around 5 pages

9. Design nuts & bolts • Identified need • Conducted Contextual Inquiry • Stimulated ideating skills • Exercised visualizing skills • Working towards getting pixels on screen

10. Conceptual model View of the system as the user believes it to be, especially how the user can act upon it and what the system’s responses mean

11. Conceptual Model of a System • Design Model • The model the designer has of how the system works • System Image • How the system actually works • The structure and behavior of the system • User’s Model • How the user understands how the system works The most important thing to design is the user’s model. Everything else should be subordinated to making that model clear, obvious, and substantial. That is almost exactly the opposite of how most software is designed. David Liddle

12. Raising the bar: self-evident design • Back in 1946, users had to be highly trained to use ENIAC • Researchers • Military • technicians

13. Today’s computer manual

14. Conceptual Model of a System (augmented) • Design Model • The model the designer has of how the system works • System Image • How the system actually works • The structure and behavior of the system • User’s Model • How the user understands how the system works • Some “repair” between the designer and user • User manual • FAQ

15. A bad example • Radiator control COLD HOT

16. A good conceptual model • Allows users to reason through: • What can I do? • How do I do it? • What result will it have? • What is it telling me?

17. Conceptual Model and Reality • User’s conceptual model does not always have to match reality • Must be consistent with system’s behavior, reactions

18. My new refrigerator • Temperature controls for GE EnergyStar refrigerator • We know from Norman that this is probably not how refrigerators work • But it’s how we want to control temperature

19. Iterative revision of the conceptual model • As user interacts, conceptual model is revised • Breakdowns (unfulfilled expectations or unclear representations) require explicilty revising conceptual model • Consistency is key for developing robust conceptual model

20. What’s your conceptual model

21. Norman’s 7 stages of action • User • Translating goals • To actions • Based on user’s model

22. Norman’s 7 stages of action • System presents results back to user • According to design model

23. Gulfs of execution and evaluation • Note: We’re even assuming the computer works perfectly!

24. The Gulfs Where thought is required • Gulf of execution -- thinking required to figure out how to get something done -- transforming high-level intention into specific physical actions • Gulf of evaluation -- thinking required to understand what is being perceived -- transforming raw sensory data into an understanding of objects, properties and events

25. The gulfs simplified • Gulf of execution • How do I do it? • Gulf of evaluation • What did it do? evaluation execution

26. Example

27. Overcoming the gulfs • Gulf of execution • Make commands and mechanisms of the system match the thoughts and goals of the user • Gulf of evaluation • Make output displays present a good conceptual model of the system that is readily perceived, interpreted, and evaluated

28. Design Principles • Visibility • Natural mapping • Feedback Affordances

29. Visibility • Primary controls visible • Secondary controls discoverable

30. Three crucial “visibilities” • Of objects of interest • Of available actions • Of system status (feedback)

31. Remote control (good)

32. Remote controls (bad)

33. Car radio • Primary controls visible • But how do you set radio station preset?

34. iPod • How do you scan forward?

35. Learned conventions • De facto standards that become established over time

36. Natural mapping • Naturally connecting user’s model with system model • taking advantage of physical analogies and cultural standards • Physical properties (stove burner layout) • Metaphorical/linguistic (on is up) • Analogous function (playback control buttons) “Natural” is individual and culture-specific

37. Stovetop control

38. Natural mappings • Minimize the number of cognitive steps to transform action into effect, or perception into comprehension. • Applicable to both action and displays (execution and evaluation). • Minimize the need for labels, instructions, help systems.

39. Different contexts for “natural” • Social and organizational contexts • Office work • Off the desktop • Out-of-doors • Cultural norms • Red and green • Reading direction • What may be offensive

40. Conflicting mappings?

41. Feedback • Timely communication of system status

42. Visibility of system status, feedback • At all times, the system visually indicates what state it is in. • Examples: • - Hourglass “wait” icon • - Progress bars • - Security padlock on browser

43. Progressive vs. interruptive feedback • Feedback can be progressive, a part of the sequence of actions themselves • Feedback can also be interruptive, a break in the sequence of actions • Smooth is usually preferred to interruptive

44. Multimodal feedback • Visual • Aural • Tactile • Smell?

45. Affordances • “...the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.” [Norman]

46. In other words • How a thing appears tells us how the thing can be used. • (Whether the implied use matches the intended use is a question for design.)

47. Knurling provides a visual affordance for “gripping.” Example

48. Example I’m Clickable

49. William Gaver, 1991 • “People perceive the environment directly in terms of its potentials for action.” • “An affordance of an object … refers to attributes of both the object and the actor.” • “…when the apparent affordances of an artifact matches its intended use, the artifact is easy to operate. When apparent affordances suggest different actions than those for which the object is designed, errors are common.”

50. Affordances and metaphors • Metaphors meant to “jump start” user’s conceptual model for a system • Affordances meant to “jump start” user’s conceptual model for interacting with an artifact • As with metaphors, if affordances are designed poorly, they thwart developing a correct conceptual model