Conceptual Models Interface Metaphors Interface Hall of Fame

Conceptual Models & Interface Metaphors

Interface Hall of Fame or 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 ▲left side not torn vs. right side torn ▣ Position of arrows awkward (split to each side? ) ▲also, small targets near each other (Fitts’ Law)

Outline ▣Review ▣POET ▣Conceptual models ▣Interface metaphors

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

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

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 ? vdeletes (eject disk a bad idea!) ▣ Interface must communicate model (how? ) ▲online help / documentation can help, but shouldn’t be necessary ▲visually

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

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

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

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

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

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

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

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!

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 (? ) ▲HOLD button on old style telephone

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 (? ) ▲HOLD button on old style telephone ▣ Natural signals ▲plates on doors. . . location of push bars. . .

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

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” vhe attacked every weak point. . . criticisms right on target. . . if you use that strategy ▣ We can use metaphor to highlight certain features & suppress others

Desktop Metaphor ▣A way to explain why some windows seemed blocked ? ▲not an attempt to simulate a real desktop

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

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

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

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