CS376 Introduction

							stanford hci group
/ cs147




Direct
Manipulation
and Mental
ModelsAziz, Mike Krieger,
Scott Klemmer
tas: Amal dar
Ranjitha Kumar,
Steve Marmon, Neema Moraveji, Neil
14 October
Patel                  http://cs147.stanford.ed
 How do people learn
  interactive systems?
 What makes an interface easy
  or hard to remember?
 Why do people make errors?
 What makes an interface
  “natural”
Scott Adams deletes all
500 comments in blog
         Dear Tog:                                            Error One: User Model didn't reflect
                                                                the Design Model
         Scott Adams moderated 500
                                                               Scott Adams believed that there were
          comments to his blog and
                                                                two documents holding his comments…
          then deleted them                                     there was only one database.
          permanently despite                                  Error Two: Misleading metaphor
          prominent warnings about                             “Publish” [used to mean]… the mass
          permanent deletion. Whose                             replication and distribution of a
          fault was it?                                         document…. [some developers] decided
      ~Veky                                                    to drastically redefine “publish” to
                                                                “set a little flag.”
      Not Scott                                               Error Three: Confirmation Dialogs
      A chain of five errors led                               Ambiguous
          to Scott Adams losing his                            dialogs kept warning Scott Adams
          work. Not one of those                                about destroying what he considered
          errors was his. They had                              now-useless information. Of course,
          been made months and even                             he Okayed them.
          years before Scott Adams                             Error Four: Confirmation Substituted
                                                                for Undo
          ever started work on his
                                                               Often, developers wanting to avoid
          blog. His was an accident
                                                                undo will throw in a confirmation
          waiting to happen, an                                 dialog instead…. The only effect of
          accident that has almost                              such dialogs is to make the
          certainly befallen a large                            developers feel good: “The users may
Source: Toggazini, Bruce. other individuals
          number of “The Scott Adams Meltdown:   Anatomy of   a be screwing up, but we warned them,
                                                                Disaster”. http://www.asktog.com/columns/069ScottAdamsMe
Marr’s 3 Levels of
Representation
  Computational (semantic,
   content)
  Algorithmic (syntactic, form)
  Implementational (physical,
   medium)
What is a Mental Model?
  “defined inputs and outputs
   that lead to a believable
   process which operates on the
   inputs to produce outputs.”
What kinds of models?
    My own behavior
    Someone else’s behavior
    A software application
    …or any information process
     that’s mediated
Learning Mental Models
  “A text processor is a
   typewriter”
  “Indeed, the models that
   learners spontaneously form
   are incomplete, inconsistent,
   unstable in time, and often
   rife with superstition”
   Olson and Carroll
The Design of Everyday
Things




Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.
ON DOORS & AFFORDANCES
Users / designers
communicate through their
mental models
  Designer’s model =
       mental/conceptual model of the
       system
      User’s model = mental model
       developed through interaction
       with the system
      Designer expects user’s model
       to be the same as the
       designer’s model
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.
Conceptual Model
Mismatch
  Mismatch between designer’s &
   user’s conceptual models leads to…
      Slow performance
      Errors
      Frustration
      ...
The gap : the gulfs of
execution & evaluation
      The right mental model can
       reduce the gulfs




Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.
Good design reduces the
gaps




Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.
Examples (Bad) : Old
Refrigerator
                                                                                             freezer




                                                                                         fresh food




  Problem: freezer too cold, but fresh
             food just right
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.   James Landay, CS160 UC Berkeley, Mental Models Lectur
Example (bad):
Refrigerator Controls
                       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




                       A B C D E                               7 6         5 4 3



    What is your conceptual model?
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.   James Landay, CS160 UC Berkeley, Mental Models Lectur
Example (bad): Most
Likely Conceptual Model
                                                A B C D E
                                                                                                   cooling
                                                                                                    unit




                                                7 6         5 4 3
                                                                                                   cooling
                                                                                                    unit




               i.e., independent controls
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.   James Landay, CS160 UC Berkeley, Mental Models Lectur
Example (bad): Actual
Conceptual Model
                                                7 6         5 4 3



                                                                                                   cooling
                                                                                                    unit




                                                         A B C D E



                Now can you fix the
                 problem?
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.   James Landay, CS160 UC Berkeley, Mental Models Lectur
Principles of mental
models mapped to actions in an
  Controls
       understandable way
      affordances disclose how to
       performing an action
      sense making: user problem solving
       allows the user to make sense of
       the interface
      analogies / examples play a key
       role in communicating how a design
       works
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.   Klemmer, Scott, Examples Research.
Direct manipulation
      Immediate feedback on actions
      Continuous representations of
       objects
      Real world metaphors / mental
       models

      Direct manipulation can
       minimize the gap
Source: Hutchins, Edwin L.. James D. Hollan, and Donald Norman.Direct manipulation interfaces. (1985). Shneiderman, Ben. "Di
languages," IEEE Computer 16(8) (August 1983), 57-69.
Notorious Example
What happens in good
designs of how each object
  Good idea
       works and how to control it
      Interface itself discloses how
       it is used

      The art in design is to
       translate users cognitive
       capabilities and existing
       mental models into interfaces
       that work!
Source: Norman, Don.   The Design of Everyday Things.   Currency, 1990.
Example (good)




                             Mercedes S500 Car Seat Controller



Source: http://www.lilviv.com/motoring/cars/s500/seatcont.jpg
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 and they are not visible!
 Compare to controls on simple car
  radio
   #controls = #functions
   controls are labeled (?) and grouped
    together
Map Interface Controls
 Control should mirror real-world
 Which is better for dashboard
  speaker front / back control?

              Dashboard
Map Interface Controls
Map Interface Controls
Evolution of Windows
Xerox                                        Mac
Star                                         OS




Windows                                      Windows
3.1                                          Vista




Source: Xerox, Apple, Microsoft, Wikipedia
COMMAND LINE v. GUI
Desktop to mobile…




                   Original Microsoft   Windows Mobile 6
                   Palm PC



Source: Microsoft, Wikipedia
visibility

E-Voting
“If technology is to
provide an advantage,
the correspondence to
the real world must
break down at some
point.”
   - Jonathan Grudin
                      NEW
                   TECHNOLOGY




           minimize
CURRENT    this distance

PRACTICE
thick practice

Medical Records
thick practice

Final Scratch
Further Reading
  Mental Models
    Olson and Carroll 1984
    Gentner and Stevens, Mental Models
  Errors
    Norman, Design of Everyday Things
     (chapter _)
    Norman, Things that Make Us Smart
     (chapter 5)
    Norman, Design Rules based on analyses
     of human error
    James Reason, Human Error
  Direct Manipulation