Interface Metaphors and Conceptual Models

1. Interface Metaphors and Conceptual Models IS 485, Professor Matt Thatcher

2. Agenda • Administrivia • project teams should be working on their “task analysis and contextual inquiry” this week • Review • Mental models • User model vs. design model • General guides for designing interfaces of everyday objects • Examples of bad design

3. TA & CI Review • Answer task analysis questions before designing • who, what, where, when, how often? • other tools? when things go wrong? • Answer questions by performing a contextual inquiry • interview & observe real users • use master-apprentice model to get them to teach you • Create • task inventory list • scenarios of goals users want to accomplish • Sketch design ideas

4. The Psychology of Everyday Things “Give it [the human mind] the slightest clue and it goes off trying to find an explanation, rationalization, understanding” • “The Psychology of Everyday Things”(POET) • by Don Norman (UCSD, Apple, HP, NN Group) • paperback: “The Design of Everyday Things” • design of everyday objects illustrates problems faced by designers of computer systems • examples: doors, digital watches, washing machines, telephones, .... • Explains mental models • Resulting design guides

5. Mental Models • Mental representation of how object works and how interface controls affect it • People have preconceived models that you may not be able to change • infix vs. postfix calculators • dragging to trash deletes • turning a “knob” opens things • User interface (which conveys the design model) should match the user’s mental model

6. User Model Design Model System UI Design Model and User Model • Users gets model from their background, experiences and the design elements of the UI • What if design & user models don’t match?

7. Buying a Parking Lot Permit: What is Your Mental Model?

8. Getting Comfortable in the Car:What is Your Mental Model?

9. Mental Models Are Difficult to Change

10. Refrigerator freezer fresh food Problem: freezer too cold, but fresh food just right

11. A B C D E 7 6 5 4 3 Refrigerator Controls: The User Interface What is your mental model? How cooling system works and how interface controls affect it Normal Settings C and 5 Colder Fresh Food C and 6-7 Coldest Fresh Food B and 8-9 Colder Freezer D and 7-8 Warmer Fresh Food C and 4-1 OFF (both) 0

12. A B C D E 7 6 5 4 3 Most Likely User Mental Model • i.e., independent controls cooling unit cooling unit

13. 7 6 5 4 3 A B C D E Design Model (Correct or Intended Use of the System) i.e., not independent cooling unit

14. Design Guides • Provide good design models to users • make it clear to users how the UI impacts the object • Make things visible • well-designed objects have visual clues as to their operation and function • poorly designed objects have no clues or false clues • Provide appropriate metaphors that leverage the users’ experiences and background • Provide feedback

15. Make Things Visible (1/2) • Affordances • physical properties (shape, texture, color, etc.) of an object that show functionality • appearance indicates how the object should be used without the need for words, labels, instructions, etc. • the user know what to do instinctively • examples: chair, scissors, staple remover, “buttons” (clickable), knobs, doors, British Rail partition • Complex things may need explaining, but simple things should not

16. Gas Cap (Good or Bad Affordance?)

17. Elevator Buttons(Good or Bad Affordance?)

18. I Gotta Go!(Good or Bad Affordance?)

19. Doors(Good or Bad Affordances?) Flat metal plate on one side tells me Push or pull? Which side should I push?

20. The PC Cup Holder (Good or Bad Affordance for Novices) • A true (?) story from a Novell NetWire SysOP • Caller: “Hello, is this Tech Support?” • Tech Rep: “Yes, it is. How may I help you?” • Caller: “The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed?” • Tech Rep: “I’m sorry, but did you say a cup holder?” • Caller: “Yes, it’s attached to the front of my computer.” • Tech Rep: “Please excuse me if I seem a bit stumped, it’s because I am. Did you receive this as part of a promotional at a trade show? How did you get this cup holder? Does it have any trademark on it?” • Caller: “It came with my computer. I don’t know anything about a promotional. It just has ‘4X’ on it.”

21. How Do You Open the Washer and Dryer Doors?

22. Washer(Good or Bad Affordance?)

23. Dryer(Good or Bad Affordance?)

24. Make Things Visible(2/2) • Affordances • Constraints • limits possibilities • examples: scissors, menu systems, Wizards, option boxes, drop-down list boxes, check boxes • Crucial distinctions • examples: fuse box, salt and pepper shakers, hyperlink text

25. Fan / Light(Good or Bad Crucial Distinction?)

26. Which Way Should I Go? (Good or Bad Crucial Distinction?)

27. Gas Tank and Trunk Releases(Good or Bad Crucial Distinction?)

28. Which Light is Mine?(Good or Bad Crucial Distinction?)

29. Provide Good Metaphors • Use of a concept or word from one setting (e.g., real world) to convey meaning in another (e.g., digital world) • physical analogies (e.g., trash, spreadsheet, file cabinet) • cultural standards (e.g., color, words) • Help reduce cognitive load for user • Use of metaphors in design should be based on an understanding of user’s model • Communicate that metaphor to the user through the UI

30. Examples of Metaphors in GUI • MacIntosh’s trash icon to delete files • Form fill-ins (paper-based forms as a metaphor) • Quicken’s graphical representation of a check register • Word processing software packages (typewriter as a metaphor) • Digital camera software (photo album as a metaphor) • Spreadsheet (physical accounting ledger as a metaphor) • Tabs in a GUI (physical filing system as a metaphor) • Radio buttons (exclusive AM/FM selection as a metaphor) • To-do list • Calendar • Shopping cart metaphor for e-commerce applications • Play, FF, REW, and Pause symbols (borrowed from electronics) • Input devices (think about video games – it’s not just buttons and joysticks anymore)

31. Interface Hall of Shame(Stoplight Metaphor)

32. Alternative Design

33. Interface Hall of Shame(Magnifying Glass Metaphor)

34. Interface Hall of Shame(Electronics Controls Metaphor)

35. User Interfaces for Interactive TV(Exploring and Evaluating Metaphors)

36. User Interfaces for Interactive TV(Tree Metaphor)

37. User Interfaces for Interactive TV(Book Metaphor)

38. User Interfaces for Interactive TV(Comic City Metaphor)

39. User Interfaces for Interactive TV(Menu Metaphor)

40. Traditional Light Screen for Radiologists Viewing MRIs

41. Proposed Computer-Based UI Design for MRI Viewing What’s the UI metaphor?

42. Completing Tasks with the UI(Creating and Enlarging a User-Defined Group) (b) (a) (c)

43. Feedback • Causality • users often assume that the thing that happens right after an action was caused by that action • False causality • incorrect effect • starting up an unfamiliar application just as computer crashes causes “superstitious” behaviors • invisible effect • command with no apparent result often re-entered repeatedly • e.g., mouse click to raise menu on unresponsive system or get to internet link

44. The Invisible Effect: Problems with Slow or No Feedback

45. Summary • People have mental models of how things work • allow people to mentally simulate operation of the device • Mental models are built from: • user characteristics such as personal/job experiences, demographics, familiarity with device (or similar devices), training, context, etc. • design elements of the UI • How can we better match the design model to the user’s mental model? • make things visible (affordances, constraints, crucial distinctions) • provide good interface metaphors • provide feedback • provide instructions when necessary

46. User’s Model Design Model System UI Summary(continued) User sees the design choices User interprets UI elements based on her characteristics and experiences Designer’s UI design choices

47. Next Time • GUI design principles • Interactive case exercise