Transcript Conceptual Models & Interface Metaphors

Conceptual Models & Interface
Metaphors
Working as a Team*
CS 160, Spring 2002
Professor James Landay
February 4, 2002
2/4/2002
* no extra cost!
1
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:
2/4/2002
2
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)
2/4/2002
3
Conceptual Models & Interface
Metaphors
Working as a Team*
CS 160, Spring 2002
Professor James Landay
February 4, 2002
2/4/2002
* no extra cost!
4
Outline
 Review
 POET
 Conceptual models
 Interface metaphors
 Administrivia (teams, HW…)
 Working as a team
2/4/2002
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
2/4/2002
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
2/4/2002
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
2/4/2002
8
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!
2/4/2002
9
Refrigerator
freezer
fresh food
Problem: freezer too cold, but fresh food just right
2/4/2002
10
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?
2/4/2002
11
Most Likely Conceptual Model
A B C D E
7 6
5 4 3
cooling
unit
cooling
unit
i.e., independent controls
2/4/2002
12
Correct Conceptual Model
7
6
5 4
3
cooling
unit
A B C D E
Now can you fix the problem?
Possible solutions:
2/4/2002
make controls map to user’s model
2) make controls map to actual system
1)
13
Design Model & Customer’s 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?
2/4/2002
14
Mismatch between Designer’s &
Customer’s Conceptual Models
 Errors
 Slow
 Frustration
 ...
2/4/2002
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!
2/4/2002
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 (?)
* HOLD button on old style telephone
2/4/2002
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 (?)
* HOLD button on old style telephone
 Natural signals
* plates on doors... location of push bars...
2/4/2002
18
Map Interface Controls
 Control should mirror real-world
* which is better for speaker front/back control?
Dashboard
2/4/2002
19
1 Minute Quiz
 Take out a sheet of paper…
 Write down the 3 most important points today
2/4/2002
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
2/4/2002
21
Desktop Metaphor

A way to explain why some
?
windows seemed blocked
* not an attempt to simulate a real
desktop
2/4/2002
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
2/4/2002
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
2/4/2002
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
2/4/2002
25
Administriva
 Handback project idea write-ups
* Average ~ 80 (B-), Standard deviation = 12
 Roll
* anyone else dropping? let me know ASAP
 Project teams
* meet ASAP to plan regular meeting, etc.
 Ombudspersons
* 2 volunteers
2/4/2002
26
Teams vs. Groups
 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
2/4/2002
 Teams
* shared leadership
* individual & mutual
accountability
* specific team purpose
* collective work products
* open-ended meetings
* measures performance
from work products
* does real work together
27
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
2/4/2002
28
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)
2/4/2002
* design (visual/interaction)
* software
* user testing
29
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)
2/4/2002
30
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
2/4/2002
31
Next Time
 The History of HCI
* Read
+ As We May Think by Vannevar Bush
+ Tools For Thought Ch 11 (Engelbart Demo)
+ L & R Chapter 2
2/4/2002
32