Conceptual Models

1
Conceptual Models Interface MetaphorsWorking
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
• -gt 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
  shouldnt 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

9
Refrigerator

• Problem freezer too cold, but fresh food just
  right

10
Refrigerator Controls

• What is your conceptual model?

11
Most Likely Conceptual Model

• i.e., independent controls

12
Correct Conceptual Model

• Now can you fix the problem?

• Possible solutions
• make controls map to users model
• make controls map to actual system

13
Design Model Customers Model

• Customers get model from experience usage
• through system image
• What if the two models dont match?

14
Mismatch between Designers Customers
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 customers 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?

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 dont 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

• 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
• 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 customers likely conceptual model
• Design guides?
• make things visible
• map interface controls to customers model
• provide feedback