Conceptual Models & Interface Metaphors: Conceptual Models andamp; Interface Metaphors


Interface Hall of Fame or Shame?: 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:


Interface Hall of Shame!: 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 Where did the 'Editor' tab go? Position of arrows awkward (split to each side?) also, small targets near each other (Fitts’ Law)


Conceptual Models & Interface Metaphors: Conceptual Models andamp; Interface Metaphors


Outline: Outline Design of Everyday Things Conceptual models Interface metaphors


Design of Everyday Things: Design of Everyday Things By Don Norman (UCSD, Apple, HP, NN Group) Design of everyday objects illustrates problems faced by designers of systems Explains conceptual models doors, washing machines, digital watches, telephones, ... Resulting design guides -andgt; Highly recommend this book


Conceptual Models: Conceptual Models Mental representation of how object works andamp; how interface controls affect it People may have preconceived models that are hard to change (4 + 5) vs. (4 5 +) dragging to trash? delete file but eject disk Interface must communicate model visually online help and documentation can help, but shouldn’t be necessary


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)


Affordances as Perceptual Clues: Affordances as Perceptual Clues Siemens Pocket PC Phone Pen input, no keypad Handspring Treo Pen input/keypad input


Affordances as Perceptual Clues: Affordances as Perceptual Clues Poorly-designed objects no clues or misleading clues Crazy design for a screw punch!


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


Refrigerator Controls: Refrigerator Controls What is your conceptual model? 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


A Common Conceptual Model: A Common Conceptual Model independent controls cooling unit cooling unit


Actual Conceptual Model: Actual Conceptual Model Now can you fix the problem? Possible solutions make controls map to user’s model make controls map to actual system cooling unit


Design Model & User Model: Design Model andamp; User Model Users get model from experience andamp; usage through system image What if the two models don’t match?


Conceptual Model Mismatch: Conceptual Model Mismatch Mismatch between designer’s andamp; user’s conceptual models leads to… Slow performance Errors Frustration ...


Notorious Example: Notorious Example


Personal Example: Personal Example


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


Make Things Visible: 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 and they are not visible! Compare to controls on simple car radio #controls = #functions controls are labeled (?) and grouped together


Map Interface Controls: Control should mirror real-world Which is better for dashboard speaker front / back control? Map Interface Controls


Map Interface Controls: Map Interface Controls


Map Interface Controls: Map Interface Controls


Metaphor: Metaphor Definition ? 'The transference of the relation between one set of objects to another set for the purpose of brief explanation.' Lakoff andamp; Johnson, Metaphors We Live By '...the way we think, what we experience, and what we do every day is very much a matter of metaphor.' in our language andamp; thinking - 'argument is war' he attacked every weak point ... criticisms right on target ... if you use that strategy We can use metaphors to leverage existing conceptual models


Desktop Metaphor: Desktop Metaphor Suggests a conceptual model Not really an attempt to simulate a real desktop Leverages existing knowledge about files, folders, trash A way to explain why some windows seemed blocked


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


Is Consistent Always Better?: Is Consistent Always Better? PDA example: should 'add appointment' and 'delete appointment' be in the same place? Add is common, but delete is not


Is Consistent Always Better?: Is Consistent Always Better? Early Palm design Streamlined design


Is Consistent Always Better?: Is Consistent Always Better? Interfaces should be consistent in a meaningful way Eating knives, cutting knives, Swiss army Some types of consistency Consistent internally Ex. Same terminology and layout throughout Consistent with other apps Ex. Works like MSWord, uses keyboard conventions Design patterns Consistent with physical world


Summary: Summary Conceptual models mental representation of how the object works andamp; how interface controls effect it Design model should equal user model mismatches lead to errors know the user’s likely conceptual model Design guides make things visible map interface controls to user’s model provide feedback


Further Reading: Further Reading Design of Everyday Things, Donald Norman Design as Practiced, Donald Norman Talks about failure to make changes to Macintosh http://www.jnd.org/dn.mss/Design_as_Practiced.html Computing the Case Against User Interface Consistency, Jonathan Grudin Talks about why interfaces should not always be consistent http://www1.ics.uci.edu/~grudin/Papers/CACM89/CACM89.html