1 / 29

Conceptual Models & Interface Metaphors Working as a Team *

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!.

tduane
Download Presentation

Conceptual Models & Interface Metaphors Working as a Team *

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Conceptual Models & Interface MetaphorsWorking as a Team*

  2. 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:

  3. 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)

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

  5. 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

  6. 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

  7. 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

  8. Crazy design for a screwdriver! 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

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

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

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

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

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

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

  15. 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!

  16. 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 (?) • HOLDbutton on old style telephone

  17. 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 (?) • HOLDbutton on old style telephone • Natural signals • plates on doors... location of push bars...

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

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

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

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

  22. 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

  23. 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

  24. 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

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

  26. Keys to Team Success • Common commitment • 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

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

  28. 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)

  29. 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

More Related