1. Conceptual Models & Interface Metaphors Working 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. 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 Make things visible
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. 1 Minute Quiz Take out a sheet of paper…
Write down the 3 most important points today

20. Metaphor Definition ? Lakoff & Johnson
“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 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

23. Misused Metaphor Direct translations Mixed metaphors
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. Teams vs. Groups Groups Teams 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
Teams
shared leadership
individual & mutual accountability
specific team purpose
collective work products
open-ended meetings
measures performance from work products
does real work together

26. Keys to Team Success Common commitment Specific performance goals
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. 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)
design (visual/interaction)
software
user testing

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? Design Model should equal Customer Model?
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