1. Conceptual Models & Interface Metaphors

2. Interface Hall of Fame or Shame?

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
Review
POET
Conceptual models
Interface metaphors

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

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

10. Refrigerator Controls
A B C D E
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?

11. Most Likely Conceptual Model
A B C D E
cooling
unit
cooling
unit
i.e., independent controls

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

13. Design Model & Customer’s Model
System Image
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 (?)
HOLD button 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 (?)
HOLD button on old style telephone
Natural signals
plates on doors... location of push bars...

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

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

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

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

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

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

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