480 likes | 717 Views
Interface Metaphors and Conceptual Models. IS 485, Professor Matt Thatcher. Agenda. Administrivia project teams should be working on their “task analysis and contextual inquiry” this week Review Mental models User model vs. design model
E N D
Interface Metaphors and Conceptual Models IS 485, Professor Matt Thatcher
Agenda • Administrivia • project teams should be working on their “task analysis and contextual inquiry” this week • Review • Mental models • User model vs. design model • General guides for designing interfaces of everyday objects • Examples of bad design
TA & CI Review • Answer task analysis questions before designing • who, what, where, when, how often? • other tools? when things go wrong? • Answer questions by performing a contextual inquiry • interview & observe real users • use master-apprentice model to get them to teach you • Create • task inventory list • scenarios of goals users want to accomplish • Sketch design ideas
The Psychology of Everyday Things “Give it [the human mind] the slightest clue and it goes off trying to find an explanation, rationalization, understanding” • “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 mental models • Resulting design guides
Mental Models • Mental representation of how object works and 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 • turning a “knob” opens things • User interface (which conveys the design model) should match the user’s mental model
User Model Design Model System UI Design Model and User Model • Users gets model from their background, experiences and the design elements of the UI • What if design & user models don’t match?
Refrigerator freezer fresh food Problem: freezer too cold, but fresh food just right
A B C D E 7 6 5 4 3 Refrigerator Controls: The User Interface What is your mental model? How cooling system works and how interface controls affect it 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 B C D E 7 6 5 4 3 Most Likely User Mental Model • i.e., independent controls cooling unit cooling unit
7 6 5 4 3 A B C D E Design Model (Correct or Intended Use of the System) i.e., not independent cooling unit
Design Guides • Provide good design models to users • make it clear to users how the UI impacts the object • Make things visible • well-designed objects have visual clues as to their operation and function • poorly designed objects have no clues or false clues • Provide appropriate metaphors that leverage the users’ experiences and background • Provide feedback
Make Things Visible (1/2) • Affordances • physical properties (shape, texture, color, etc.) of an object that show functionality • appearance indicates how the object should be used without the need for words, labels, instructions, etc. • the user know what to do instinctively • examples: chair, scissors, staple remover, “buttons” (clickable), knobs, doors, British Rail partition • Complex things may need explaining, but simple things should not
Doors(Good or Bad Affordances?) Flat metal plate on one side tells me Push or pull? Which side should I push?
The PC Cup Holder (Good or Bad Affordance for Novices) • A true (?) story from a Novell NetWire SysOP • Caller: “Hello, is this Tech Support?” • Tech Rep: “Yes, it is. How may I help you?” • Caller: “The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed?” • Tech Rep: “I’m sorry, but did you say a cup holder?” • Caller: “Yes, it’s attached to the front of my computer.” • Tech Rep: “Please excuse me if I seem a bit stumped, it’s because I am. Did you receive this as part of a promotional at a trade show? How did you get this cup holder? Does it have any trademark on it?” • Caller: “It came with my computer. I don’t know anything about a promotional. It just has ‘4X’ on it.”
Make Things Visible(2/2) • Affordances • Constraints • limits possibilities • examples: scissors, menu systems, Wizards, option boxes, drop-down list boxes, check boxes • Crucial distinctions • examples: fuse box, salt and pepper shakers, hyperlink text
Gas Tank and Trunk Releases(Good or Bad Crucial Distinction?)
Provide Good Metaphors • Use of a concept or word from one setting (e.g., real world) to convey meaning in another (e.g., digital world) • physical analogies (e.g., trash, spreadsheet, file cabinet) • cultural standards (e.g., color, words) • Help reduce cognitive load for user • Use of metaphors in design should be based on an understanding of user’s model • Communicate that metaphor to the user through the UI
Examples of Metaphors in GUI • MacIntosh’s trash icon to delete files • Form fill-ins (paper-based forms as a metaphor) • Quicken’s graphical representation of a check register • Word processing software packages (typewriter as a metaphor) • Digital camera software (photo album as a metaphor) • Spreadsheet (physical accounting ledger as a metaphor) • Tabs in a GUI (physical filing system as a metaphor) • Radio buttons (exclusive AM/FM selection as a metaphor) • To-do list • Calendar • Shopping cart metaphor for e-commerce applications • Play, FF, REW, and Pause symbols (borrowed from electronics) • Input devices (think about video games – it’s not just buttons and joysticks anymore)
User Interfaces for Interactive TV(Exploring and Evaluating Metaphors)
Proposed Computer-Based UI Design for MRI Viewing What’s the UI metaphor?
Completing Tasks with the UI(Creating and Enlarging a User-Defined Group) (b) (a) (c)
Feedback • Causality • users often assume that the thing that happens right after an action was caused by that action • False causality • incorrect effect • starting up an unfamiliar application just as computer crashes causes “superstitious” behaviors • invisible effect • command with no apparent result often re-entered repeatedly • e.g., mouse click to raise menu on unresponsive system or get to internet link
Summary • People have mental models of how things work • allow people to mentally simulate operation of the device • Mental models are built from: • user characteristics such as personal/job experiences, demographics, familiarity with device (or similar devices), training, context, etc. • design elements of the UI • How can we better match the design model to the user’s mental model? • make things visible (affordances, constraints, crucial distinctions) • provide good interface metaphors • provide feedback • provide instructions when necessary
User’s Model Design Model System UI Summary(continued) User sees the design choices User interprets UI elements based on her characteristics and experiences Designer’s UI design choices
Next Time • GUI design principles • Interactive case exercise