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