Transcript Document 7908256

i213:
User Interface Design & Development
Marti Hearst
Tues, Feb 13, 2007
Today
Review Affordances, Mappings, Mental Models
– Strauss Mouse
Norman’s Action Cycle
Metaphors in Interfaces
Raskin’s Locus of Attention
Putting These Together
Scissors
– affordances:
• holes for insertion of fingers
• blades for cutting
– constraints
• big hole for several fingers, small hole for thumb
– mapping
• between holes and fingers suggested and constrained by appearance
– positive transfer
• learnt when young
– conceptual model
• implications clear of how the operating parts work
Based on slide by Saul Greenberg
Bad Example
Digital Watch
– affordances
• four push buttons, not clear what they do
– contraints and mapping unknown
• no visible relation between buttons and the end-result of their actions
– negative transfer
• little association with analog watches
– cultural standards
• somewhat standardized functionality, but highly variable
– conceptual model
• must be taught; not obvious
How to design a better Based
one?
on slide by Saul Greenberg
Digital Watch Redesigned for Affordances
(Rachna Dhamija)
Digital Watch Redesigned for Affordances
(Ping Yee)
Norman’s Action Cycle
Human action has two primary aspects
– Execution: doing something
– Evaluation: comparison of what happened to what
was desired
Action Cycle
start here
Goals
Execution
Evaluation
The World
Action Cycle
start here
Goals
Execution
Evaluation
Intention to act
Evaluation of interpretations
Sequence of actions
Interpreting the perception
Execution of seq uence of actions
Perceiving the state of the world
The World
Norman’s Action Cycle
Execution has three stages:
– Start with a goal
– Translate into an intention
– Translate into a sequence of actions
Now execute the actions
Evaluation has three stages:
– Perceive world
– Interpret what was perceived
– Compare with respect to original intentions
Gulf of Evaluation
The amount of effort a person must exert to
interpret
– the physical state of the system
– how well the expectations and intentions have been
met
We want a small gulf!
Metaphor in User Interfaces
Metaphor
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
– There is some systematicity to the transference
Slide adapted from James Landay
Interface Metaphors
Definition of Metaphor
– application of name or descriptive term to an object to which it is not
literally applicable
Purpose
– function as natural models
– leverages our knowledge of familiar, concrete objects/experiences to
understand abstract computer and task concepts
Problem
– metaphor may portray inaccurate or naive conceptual model of the system
A presentation tool
is like
a slide projector
The Desktop Metaphor
Started at Xerox PARC
– Xerox Star (see video)
– Bitmapped screens made it possible
Not meant to be a real desktop
– Idea is to organize information in a way to allow people to use it
in the way they user information on their desktops
– Allow windows to overlap – make the screen act as if there
were objects on it
Apple took it farther
– Waste basket, etc
Microsoft took it to extremes
– Microsoft Bob – a recognized failure
Macintosh Desktop
Caldera’s Desktop
Microsoft Bob’s Desktop Metaphor
Microsoft Bob’s Livingroom –
Almost not a metaphor anymore!
Beyond the Desktop
Robertson, George et al. "The Task Gallery: A 3D Window Manager." In
Proceedings of CHI 2000
Beyond the Desktop
Jun Rekimoto, Multiple-Computer User Interfaces: "Beyond the Desktop" Direct
Manipulation Environments, ACM CHI2000 Video Proceedings, 2000.
Identify the mis-matched metaphors
(from the Interface Hall of Shame)
The classic (from the mac desktop)
– To eject a disk you drag it to the trashcan
Identify the mis-matched metaphors
(from the Interface Hall of Shame)
VCR buttons to control a printer??
Identify the mis-matched metaphors
(from the Interface Hall of Shame)
Using tabs to make arbitrary groups
The Metaphor of Direct Manipulation
Direct Engagement
– the feeling of working directly on the task
Direct Manipulation
– An interface that behaves as though the interaction was with
a real-world object rather than with an abstract system
Central ideas
–
–
–
–
visibility of the objects of interest
rapid, reversible, incremental actions
manipulation by pointing and moving
immediate and continuous display of results
Almost always based on a metaphor
– mapped onto some facet of the real world task semantics)
Direct Manipulation uses a Metaphor
Metaphor
– Computer objects as visible, moveable objects
Consequences
–
–
–
–
Items represented as icons
Items can be “picked up” and “moved” on a surface
Items can be “thrown out”
Items can be “copied”
• Do we really want to have to drag them to a photocopier?
How much is too much?
Object-Action vs Action-Object
Select object, then do action
– interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)
Advantages
– closer to real world
– modeless interaction
– actions always within context of object
move
my.doc
• inappropriate ones can be hidden
– generic commands
• the same type of action can be performed on the object
• eg drag ‘n drop:
Slide adapted from Saul Greenberg
Direct manipulation
Representation directly determines what can manipulated
Slide adapted from Saul Greenberg
Is direct manipulation the way to go?
Some Disadvantages
– Ill-suited for abstract operations
• Spell-checker?
• Search database by scrolling or by query?
Solution: Most systems combine direct manipulation and
abstractions
• Word processor:
– WYSIWYG document (direct manipulation)
– buttons, menus, dialog boxes (abstractions, but direct manipulation “in
the small”)
Slide adapted from Saul Greenberg
Guidelines for Design
Metaphors
– use our knowledge of the familiar and concrete to represent
abstract concepts
– need not be literal
– have limitations that must be understood
Guidelines for Design
Provide a good conceptual model
– allows users to predict consequences of actions
– communicated thorugh the image of the system
Make things visible
– relations between user’s intentions, required actions, and
results should be
• sensible
• consistent
• meaningful (non-arbitrary)
– make use of visible affordances, mappings, and constraints
– remind person of what can be done and how to do it
Based on slide by Saul Greenberg
Guidelines for Design
Good Representations
• capture essential elements of the event / world
• deliberately leave out / mute the irrelevant
• appropriate for the user, their task, and their interpretation