Conceptual Models & Interface Metaphors Working as a Team *

1. Conceptual Models & Interface MetaphorsWorking as a Team* CS 160, Spring 2002 Professor James Landay February 4, 2002 * no extra cost!

2. Interface Hall of Fame or Shame? • Tabbed dialog for setting options in MS Web Studio • more tabs than space to display them • Clicking on the right arrow once gives:

3. Interface Hall of Shame! • Tabbed dialog for setting options in MS Web Studio • more tabs than space to display them • Clicking on the right arrow once gives: • Inconsistent display of possible tabs • left side not torn vs. right side torn • Position of arrows awkward (split to each side?) • also, small targets near each other (Fitts’ Law)

4. Conceptual Models & Interface MetaphorsWorking as a Team* CS 160, Spring 2002 Professor James Landay February 4, 2002 * no extra cost!

5. Outline • Review • POET • Conceptual models • Interface metaphors • Administrivia (teams, HW…) • Working as a team

6. Task Analysis & Contextual Inquiry Review • Answer questions before designing ? • who, what, where, when, how often? • relationship between users & data? • what other tools do users have? • what happens when things go wrong? • Selecting tasks ? • real tasks with reasonable functionality coverage • complete, specific tasks of what user wants to do • Contextual inquiry? What is it for & how is it done? • way to answer the task analysis questions • interview & observe real users • use the master-apprentice model to get them to teach you

7. POET • “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 conceptual models • Resulting design guides -> Highly recommend you read this book

8. Conceptual Models • Mental representation of how object works & 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 (eject disk a bad idea!) • Interface must communicate model (how?) • online help / documentation can help, but shouldn’t be necessary • visually

9. Crazy design for a screwdriver! Visual Clues (affordances) • Well-designed objects have affordances • visible clues to their operation • Poorly-designed objects • no clues • false clues • teapot with handle & spout on the same side

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

11. Normal Settings C and 4 Colder Fresh Food C and 5-6 Coldest Fresh Food B and 7 Colder Freezer D and 6-7 Warmer Fresh Food C and 3-1 OFF (both) 0 A B C D E 7 6 5 4 3 Refrigerator Controls What is your conceptual model?

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

13. 7 6 5 4 3 cooling unit A B C D E Correct Conceptual Model Now can you fix the problem? Possible solutions: make controls map to user’s model make controls map to actual system

14. Customer’s Model Design Model System Image Design Model & Customer’s Model • Customers get model from experience & usage • through system image • What if the two models don’t match?

15. Mismatch between Designer’s & Customer’s Conceptual Models • Errors • Slow • Frustration • ...

16. Design Guides • Provide good conceptual model • customers want to understand how UI controls impact object • Make things visible • if object has function, interface should show it • Map interface controls to customer’s model • infix -vs- postfix calculator -- whose model? • Provide feedback • what you see is what you get!

17. Make Things Visible • Refrigerator (?) • make the A..E dial something about percentage of cooling between the two compartments? • Controls available on watch w/ 3 buttons? • too many & they are not visible! • Compare to controls on simple car radio • #controls == #functions • controls are labeled (?) • HOLDbutton on old style telephone

18. Make Things Visible • Make the A..E dial something about percentage of cooling between the two? • Controls available on watch w/ 3 buttons? • Compare to controls on simple car radio • #controls == #functions • controls are labeled (?) • HOLDbutton on old style telephone • Natural signals • plates on doors... location of push bars...

19. Dashboard Map Interface Controls • Control should mirror real-world • which is better for speaker front/back control?

20. 1 Minute Quiz • Take out a sheet of paper… • Write down the 3 most important points today

21. Metaphor • Definition ? • “The transference of the relation between one set of objects to another set for the purpose of brief explanation” • Lakoff & Johnson • “...the way we think, what we experience, and what we do every day is very much a matter of metaphor.” • in our language & thinking - “argument is war” • he attacked every weak point ... criticisms right on target ... if you use that strategy • We can use metaphor to highlight certain features & suppress others

22. Desktop Metaphor • A way to explain why some windows seemed blocked • not an attempt to simulate a real desktop ?

23. Example Metaphors • Global metaphors • personal assistant, wallet, clothing, pens, cards, telephone, eyeglasses • Data & function • rolodex, to-do list, calendar, applications documents, find, assist • Collections • drawers, files, books, newspapers, photo albums

24. Misused Metaphor • Direct translations • Software CD player that requires turning volume knob with the mouse • Software telephony solution that requires the user to dial a number by clicking on a simulated keypad • Airline web site that simulates a ticket counter! • Mixed metaphors • trash cans don’t burst into flames in the real world

25. Developing Key Interface Elements • Develop interface metaphor or conceptual model • Communicate that metaphor to the user • Provide high-level task-oriented operations not low-level implementation commands

26. Administriva • Handback project idea write-ups • Average ~ 80 (B-), Standard deviation = 12 • Roll • anyone else dropping? let me know ASAP • Project teams • meet ASAP to plan regular meeting, etc. • Ombudspersons • 2 volunteers

27. Groups strong leader individual accountability organizational purpose individual work products efficient meetings measures performance by influence on others delegates work Teams shared leadership individual & mutual accountability specific team purpose collective work products open-ended meetings measures performance from work products does real work together Teams vs. Groups • Teams & good performance are inseparable • a team is more than the sum of its parts

28. Keys to Team Success • Common commitment • requires a purpose in which team members can believe • “prove that all children can learn”, “revolutionizing X…” • Specific performance goals • comes directly from the common purpose • “increasing the scores of graduates form 40% to 95%” • helps maintain focus – start w/ something achievable • A right mix of skills • technical/functional expertise (programming/cogsci/writing) • problem-solving & decision-making skills • interpersonal skills • Agreement • who will do particular jobs, when to meet & work, schedules

29. design (visual/interaction) software user testing Team Action Items • Meet & get used to each other • Figure out strengths of team members • Assign each person a role • responsible for seeing work is organized & done • not responsible for doing it themselves • Names/roles listed on next assign. turned in • Roles • group manager (coordinate - big picture) • documentation (writing)

30. Contextual Inquiry & TA Write-up • Problem & solution overview • Contextual inquiry • who you did it with & key results • TA analysis question/answers • New & old tasks • scenario vs. task • Suggested solution • functionality (i.e., what can you do with it) • user interface (i.e., how you use it - rough sketches) • 3 scenarios of example tasks (storyboards) • Due on-line in HTML on Monday (& paper copy in class) • No more than 6 pages printed • not including sketches (scan those in & display inline)

31. Summary • Conceptual models? • mental representation of how the object works & how interface controls effect it • Design Model should equal Customer Model? • mismatches lead to errors • know the customer’s likely conceptual model • Design guides? • make things visible • map interface controls to customer’s model • provide feedback

32. Next Time • The History of HCI • Read • As We May Think by Vannevar Bush • Tools For Thought Ch 11 (Engelbart Demo) • L & R Chapter 2