Conceptual Models & Interface Metaphors Working as a Team*

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! 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 POET Conceptual models Interface metaphors Administrivia (teams, HW…) Working as a team

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 ? deletes (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 teapot with handle & spout on the same side Crazy design for a screwdriver!

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

Refrigerator Controls A B C D E 7 6 5 4 3 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 What is your conceptual model?

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

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

Design Model & Customer’s 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 Make things visible 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

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

Metaphor Definition ? Lakoff & Johnson “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

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

Example Metaphors Global metaphors Data & function Collections 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 Mixed metaphors 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

Teams vs. Groups Groups Teams Teams & good performance are inseparable a team is more than the sum of its parts 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

Keys to Team Success Common commitment Specific performance goals 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

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) design (visual/interaction) software user testing

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)

Summary Conceptual models? Design Model should equal Customer Model? 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