Conceptual Models Interface Metaphors Working as a Team

Conceptual Models & Interface Metaphors Working as a Team* 1

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

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

Outline l l l POET Conceptual models Interface metaphors Administrivia (teams, HW…) Working as a team 4

Task Analysis & Contextual Inquiry Review l Answer questions before designing ? l l l Selecting tasks ? l l l who, what, where, when, how often? relationship between users & data? what other tools do users have? what happens when things go wrong? 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? l l l way to answer the task analysis questions interview & observe real users use the master-apprentice model to get them to teach 5

POET l “The Psychology of Everyday Things”(POET) l l 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 l Resulting design guides -> Highly recommend you read this book l 6

Conceptual Models l l Mental representation of how object works & how interface controls affect it People have preconceived models that you may not be able to change l l infix vs. postfix calculators dragging to trash ? l l deletes (eject disk a bad idea!) Interface must communicate model (how? ) l l online help / documentation can help, but shouldn’t be necessary visually 7

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

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

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? 10

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

Correct Conceptual Model 7 6 5 4 3 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) 12

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

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

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

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

Make Things Visible l l l 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 l l #controls == #functions controls are labeled (? ) HOLD button on old style telephone Natural signals l plates on doors. . . location of push bars. . . 17

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

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

Metaphor l Definition ? l l “The transference of the relation between one set of objects to another set for the purpose of brief explanation” Lakoff & Johnson l l “. . . 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” l l he attacked every weak point. . . criticisms right on target. . . if you use that strategy We can use metaphor to highlight certain features & suppress others 20

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

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

Misused Metaphor l Direct translations l l 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 l trash cans don’t burst into flames in the real world 23

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

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

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

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

Contextual Inquiry & TA Writeup l l Problem & solution overview Contextual inquiry l l l TA analysis question/answers New & old tasks l l l scenario vs. task Suggested solution l l who you did it with & key results 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 28 l not including sketches (scan those in & display inline)

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