sims 213: user interface design & development marti hearst tues, feb 15, 2005
Post on 20-Dec-2015
217 views
TRANSCRIPT
![Page 1: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/1.jpg)
SIMS 213: User Interface Design & Development
Marti HearstTues, Feb 15, 2005
![Page 2: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/2.jpg)
Today
Finish Mappings and AffordancesMental ModelsNorman’s Action CycleMetaphors in InterfacesTime Permitting:– Raskin’s Locus of Attention– Errors– Modes
![Page 3: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/3.jpg)
Mappings
For devices, appliances– Natural mappings use constraints and correspondences in the
physical world• Controls on a stove• Controls on a car
– Radio volume» Knob goes left to right to control volume» Should also go in and out for front to rear speakers
For computer UI design– Mapping between controls and their actions on the computer
• Controls on a digital watch• Controls on a word processor program
![Page 4: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/4.jpg)
Mapping controls to physical outcomes
backright
frontleft
backleft
frontright
24 possibilities, requires: -visible labels -memory
arbitrary full mapping
back front front back
2 possibilities per side =4 total possibilities
paired
![Page 5: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/5.jpg)
Based on slide by Saul Greenberg
Transfer Effects
People transfer their expectations from familiar objects to similar new ones– positive transfer: previous experience applies to new
situation– negative transfer: previous experience conflicts with
new situation
![Page 6: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/6.jpg)
Based on slide by Saul Greenberg
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
![Page 7: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/7.jpg)
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 one?
![Page 8: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/8.jpg)
Digital Watch Redesigned for Affordances (Rachna Dhamija)
![Page 9: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/9.jpg)
Digital Watch Redesigned for Affordances (Ping Yee)
![Page 10: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/10.jpg)
Based on slide by Saul Greenberg
Mental Models
People have mental models of how things work:– how does your car start?– how does an ATM machine work?– how does your computer boot?
Allows people to make predictions about how things will work
![Page 11: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/11.jpg)
Based on slide by Saul Greenberg
Mental Models
Mental models built from– affordances– constraints– mappings– positive transfer – cultural associations/standards– instructions– interactions
Mental models are often wrong!
![Page 12: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/12.jpg)
Slide adapted from Saul Greenberg
Our mental models of how bicycles workcan “simulate” this to know it won’t work
![Page 13: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/13.jpg)
People are always trying to make sense of things
Mental models often extracted from fragmentary evidencePeople find ways to explain things– Computer terminal breaks when accessing the
library catalog– Certain you’re driving on the correct road
![Page 14: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/14.jpg)
Norman’s Action Cycle
Human action has two primary aspects– Execution: doing something– Evaluation: comparison of what happened to what
was desired
![Page 15: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/15.jpg)
Action Cycle
Goals
EvaluationExecution
The World
start here
![Page 16: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/16.jpg)
Action Cycle
Goals
EvaluationEvaluation of interpretations
Interpreting the perception
Perceiving the state of the world
ExecutionIntention to act
Sequence of actions
Execution of seq uence of actions
The World
start here
![Page 17: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/17.jpg)
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 actionsEvaluation has three stages:– Perceive world– Interpret what was perceived– Compare with respect to original intentions
![Page 18: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/18.jpg)
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!
![Page 19: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/19.jpg)
Metaphor in User Interfaces
![Page 20: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/20.jpg)
Slide adapted from James Landay
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
![Page 21: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/21.jpg)
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 toolis like
a slide projector
![Page 22: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/22.jpg)
What are some example interface metaphors?
![Page 23: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/23.jpg)
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?
![Page 24: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/24.jpg)
The Desktop MetaphorStarted 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
![Page 25: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/25.jpg)
Macintosh Desktop
![Page 26: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/26.jpg)
Caldera’s Desktop
![Page 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/27.jpg)
Microsoft Bob’s Desktop Metaphor
![Page 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/28.jpg)
Microsoft Bob’s Livingroom –
Almost not a metaphor anymore!
![Page 29: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/29.jpg)
Beyond the Desktop
Robertson, George et al. "The Task Gallery: A 3D Window Manager." In Proceedings of CHI 2000
![Page 30: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/30.jpg)
Beyond the Desktop
Jun Rekimoto, Multiple-Computer User Interfaces: "Beyond the Desktop" Direct Manipulation Environments, ACM CHI2000 Video Proceedings, 2000.
![Page 31: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/31.jpg)
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
![Page 32: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/32.jpg)
Identify the mis-matched metaphors(from the Interface Hall of Shame)
VCR buttons to control a printer??
![Page 33: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/33.jpg)
Identify the mis-matched metaphors(from the Interface Hall of Shame)
Using tabs to make arbitrary groups
![Page 34: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/34.jpg)
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 systemCentral 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)
![Page 35: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/35.jpg)
Slide adapted from Saul Greenberg
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
• inappropriate ones can be hidden– generic commands
• the same type of action can be performed on the object• eg drag ‘n drop:
my.doc
move
![Page 36: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/36.jpg)
Slide adapted from Saul Greenberg
Direct manipulation
Representation directly determines what can manipulated
![Page 37: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/37.jpg)
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”)
![Page 38: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/38.jpg)
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
![Page 39: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/39.jpg)
Based on slide by Saul Greenberg
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
![Page 40: SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005](https://reader036.vdocument.in/reader036/viewer/2022062421/56649d4e5503460f94a2e5fd/html5/thumbnails/40.jpg)
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