View
227
Download
2
Tags:
Embed Size (px)
Citation preview
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
Refrigerator
Problem: freezer too cold, but fresh food just right
freezer
fresh food
10
Refrigerator Controls
What is your conceptual model?
A B C D E 7 6 5 4 3
Normal Settings C and 4Colder Fresh Food C and 5-6Coldest Fresh Food B and 7Colder Freezer D and 6-7Warmer Fresh Food C and 3-1OFF (both) 0
11
Most Likely Conceptual Model
i.e., independent controls
A B C D Ecooling
unit
7 6 5 4 3cooling
unit
12
Correct Conceptual Model
Now can you fix the problem?A B C D E
7 6 5 4 3
coolingunit
Possible solutions:1) make controls map to user’s model2) make controls map to actual system
13
Design Model & Customer’s Model
Customers get model from experience & usage through system image
What if the two models don’t match?
Design Model Customer’s Model
System Image
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
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
Teams vs. Groups
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 & 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
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
design (visual/interaction) software user testing
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