Conceptual Models & Interface Metaphors
Total Page:16
File Type:pdf, Size:1020Kb
CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Interface Hall of Fame or Shame? Conceptual Models & Interface Metaphors • Tabbed dialog for setting options in MS Web Studio – more tabs than space to display them • Clicking on the right arrow once gives Prof. James A. Landay University of Washington Autumn 2008 October 23, 2008 CSE 440 User Interface Design, Prototyping, and Evaluation 2 Interface Hall of Shame! Conceptual Models & Interface Metaphors • Tabbed dialog for setting options in MS Web Studio – more tabs than space to display them • Clicking on the right arrow once gives: Prof. James A. Landay University of Washington Autumn 2008 • Inconsistent display of possible tabs – Where did the “Editor” tab go? • Position of arrows awkward (split to each side?) October 23, 2008 – also, small targets near each other (Fitts’ Law) CSE 440 User Interface Design, Prototyping, and Evaluation 3 Outline Human Abilities Review • Color can be helpful, but pay attention to ? – how colors combine • Review – limitations of human perception – people with color deficiency • Meetings • Model Human Processor ? – perceptual, motor, cognitive processors + memory • Design of Everyday Things – model allows us to make predictions • e.g., perceive distinct events in same cycle as one • Conceptual models • Memory ? – three types: sensor, WM, & LTM – interference can make hard to access LTM • Interface metaphors – cues in WM can make it easier to access LTM • Key time to remember? • Ubiquitous computing – 100 ms (~processor cycle time & memory access) • Fitts’ Law ? – moving hand is a series of microcorrections predicted by D & S • Tpos = a + b log2 (D/S + 1) – time to move hand depends only on relative precision required CSE 440 User Interface Design, Prototyping, and Evaluation 5 CSE 440 User Interface Design, Prototyping, and Evaluation 6 James Landay CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Design of Everyday Things Conceptual Models • By Don Norman (UCSD, Apple, HP, NN Group) • Mental representation of how an artifact • Design of everyday objects illustrates works & how interface controls affect it problems faced by designers of systems • People may have preconceived models that are hard to change • Explains conceptual models – (4 + 5) vs. (4 5 +) – doors, washing machines, – dragging to trash? digital watches, telephones, ... • deletes file but ejects disk • Resulting design guides • Interface must communicate model – visually (& possibly physically or using sound) Highly recommend this book – online help and documentation can help, but shouldn’t be necessary CSE 440 User Interface Design, Prototyping, and Evaluation 7 CSE 440 User Interface Design, Prototyping, and Evaluation 8 Affordances as Perceptual Clues Affordances as Perceptual Clues • Well-designed objects have affordances – clues to their operation – often visual, but not always (e.g., speech) Siemens Pocket PC Phone Handspring Treo What affordances do you see here? Pen input, no keypad Pen input/keypad input CSE 440 User Interface Design, Prototyping, and Evaluation 9 CSE 440 User Interface Design, Prototyping, and Evaluation 10 Affordances as Perceptual Clues Refrigerator • Poorly-designed objects freezer – no clues or misleading clues fresh food French artist Jacques Carelman Crazy design for a screw punch! Problem: freezer too cold, but fresh food just right CSE 440 User Interface Design, Prototyping, and Evaluation 11 CSE 440 User Interface Design, Prototyping, and Evaluation 12 James Landay CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Refrigerator Controls A Common Conceptual Model Normal Settings C and 5 A B C D E Colder Fresh Food C and 6-7 cooling Coldest Fresh Food B and 8-9 unit Colder Freezer D and 7-8 Warmer Fresh Food C and 4-1 7 6 5 4 3 OFF (both) 0 cooling unit A B C D E 7 6 5 4 3 What is your conceptual model? independent controls CSE 440 User Interface Design, Prototyping, and Evaluation 13 CSE 440 User Interface Design, Prototyping, and Evaluation 14 Actual Conceptual Model Design Model & Customer Model A B C D E Design Model Customer Model cooling unit 7 6 5 4 3 System Image • Can you fix the problem? • Customers get model from experience & usage • Possible solutions – through system image – make controls map to customer’s model • What if the two models don’t match? – make controls map to actual system CSE 440 User Interface Design, Prototyping, and Evaluation 15 CSE 440 User Interface Design, Prototyping, and Evaluation 16 Conceptual Model Mismatch Notorious Example • Mismatch between designer’s & customer’s conceptual models leads to… – slow performance – errors – frustration – ... CSE 440 User Interface Design, Prototyping, and Evaluation 17 CSE 440 User Interface Design, Prototyping, and Evaluation 18 James Landay CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Car Example Design Guides • Provide good conceptual model – customer wants 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 is that? • Provide feedback – what you see is what you get! (WYSIWYG) CSE 440 User Interface Design, Prototyping, and Evaluation 19 CSE 440 User Interface Design, Prototyping, and Evaluation 20 Make Things Visible Map Interface Controls to Customer’s Model • Refrigerator (?) – make the A..E dial something about percentage • Which is better for car dashboard speaker of cooling between the two compartments? front / back control? • Controls available on watch w/ 3 buttons? • Control should mirror real-world – too many and they are not visible! Dashboard • Compare to controls on simple car radio – #controls = #functions 1 – controls are labeled (?) and grouped together 2 CSE 440 User Interface Design, Prototyping, and Evaluation 21 CSE 440 User Interface Design, Prototyping, and Evaluation 22 Map Interface Controls to Customer’s Model Map Interface Controls to Customer’s Model CSE 440 User Interface Design, Prototyping, and Evaluation 23 CSE 440 User Interface Design, Prototyping, and Evaluation 24 James Landay CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Metaphor Desktop Metaphor • Definition ? • Suggests a conceptual model – “The transference of the relation between one set of objects to another set for the – not really an attempt to simulate purpose of brief explanation.” a real desktop – a way to explain why some • Lakoff & Johnson, Metaphors We Live By windows seemed blocked – “...the way we think, what we experience, and what we do every day is very much a matter of metaphor.” – leverages existing knowledge – in our language & thinking – “argument is war” about files, folders, & trash … he attacked every weak point … criticisms right on target … if you use that strategy • We can use metaphor in interface design to leverage existing conceptual models CSE 440 User Interface Design, Prototyping, and Evaluation 25 CSE 440 User Interface Design, Prototyping, and Evaluation 26 Example Metaphors How to Use Metaphor • Global metaphors • Develop interface metaphor tied to – personal assistant, wallet, clothing, pens, cards, conceptual model telephone, eyeglasses • Data & function • Communicate that metaphor to the user – rolodex, to-do list, calendar, applications documents, find, assist • Provide high-level task-oriented operations, • Collections not low-level implementation commands – drawers, files, books, newspapers, photo albums CSE 440 User Interface Design, Prototyping, and Evaluation 27 CSE 440 User Interface Design, Prototyping, and Evaluation 28 Is Consistent Always Better? NO Is Consistent Always Better? NO • PDA example: should “new appointment” & “delete appointment” be in the same place? • New (add) is common, but delete is not Early Palm design Streamlined design (like desktop version) CSE10/5/2006 440 User Interface Design, Prototyping, and Evaluation 29 CSE 440 User Interface Design, Prototyping, and Evaluation 30 James Landay CSE440 – User Interface Design, Prototyping, & Evaluation Autumn 2008 Prof. James A. Landay, University of Washington, CSE Is Consistent Always Better? NO Ways of Being Consistent • Interfaces should be consistent in a meaningful way – E.g., ubiquitous use of same keys for cut/copy/ paste • Types of consistency – consistent internally • e.g., same terminology and layout throughout – consistent with other apps • ex. works like MS Word, uses keyboard conventions • design patterns (across many apps) – consistent with physical world Firefox 3 Back/Forward Buttons CSE 440 User Interface Design, Prototyping, and Evaluation 31 CSE 440 User Interface Design, Prototyping, and Evaluation 32 Summary Further Reading • Design of Everyday Things, Donald Norman • Conceptual models ? – mental representation of how the object works & how interface controls effect it • Design as Practiced, Donald Norman – Talks about failure to make changes to Macintosh • Design model should equal customer’s model ? – http://www.jnd.org/dn.mss/Design_as_Practiced.html – mismatches lead to errors – use customer’s likely conceptual model to design • Computing the Case Against User Interface Consistency, Design Model Customer Model Jonathan Grudin