SIMS 213: User Interface Design &
Development
Marti Hearst
Thurs, Feb 1, 2001
Cooper Chapter 11
Scenarios– Daily use vs Edge Case
Perpetual Intermediaries The Importance of Precise Vocabulary Case study: Image processing tool
– Who are the Personas? Found some common goals Focus on a few key capabilities Matched to the capabilities of the system
– Had fewer features, but seemed most powerful!
Cognitive Considerations
From Don Norman’s book, The Psychology (Design) of Everyday Things– Affordances, Constraints, and Mappings– Mental Models– Action Cycle and Gulf of Execution
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
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!
Slide adapted from Saul Greenberg
Our mental models of how bicycles workcan “simulate” this to know it won’t work
Slide adapted from Saul Greenberg
People are always trying to explain things
Mental models often extracted from fragmentary evidence
People find ways to explain things– Computer terminal breaks when accessing the
library catalog– Sure your driving on the correct road
Norman’s Action Cycle
Human action has two aspects– execution and evaluation
Execution: doing something Evaluation: comparison of what happened to
what was desired
Action Cycle
Goals
EvaluationExecution
The World
start here
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
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!
Based on slide by Saul Greenberg
Good Example
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
Digital Watch Redesigned for Affordances (Rachna Dhamija)
Digital Watch Redesigned for Affordances (Ping Yee)
Slide adapted from Saul Greenberg
Interface Metaphors Revisited
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
Slide adapted from Saul Greenberg
Interface Metaphors
– Use metaphors that matches user's conceptual task – desktop metaphor for office workers– paintbrush metaphor for artists...
– Given a choice, choose the metaphor close to the way the system works
– Ensure emotional tone is appropriate to usersE.g., file deletion metaphors
– trashcan– black hole– paper shredder– pit bull terrier– nuclear disposal unit...
Slide adapted from Saul Greenberg
Metaphors continued
metaphors can be overdone! Common pitfalls
– overly literal unnecessary fidelity excessive interactions
– overly cute novelty quickly wears off
– overly restrictive cannot move beyond
– mismatched does not match user’s
task and/or thinking
Slide adapted from Saul Greenberg
The Metaphor of Direct Manipulation
Direct Manipulation– the feeling of working directly on the task– 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)
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
Slide adapted from Saul Greenberg
Direct manipulation Representation directly determines what can manipulated
Slide adapted from Saul Greenberg
Phone list
List metaphor Rolodex metaphor
Slide adapted from Saul Greenberg
Games
Slide adapted from Saul Greenberg
Direct Manipulation
Xerox Star: pioneered in early '80s, copied by almost everyone– simulates desktop with icons
in and out baskets file folders and documents calculators printers blank forms for letters and memos
– small number of generic actions applicable system wide move, copy, delete, show properties, again, undo, help
– eg same way to move text, documents, etc property sheets
– pop-up form, alterable by user
– What you see is what you get (WYSIWYG)
Slide adapted from Saul Greenberg
Xerox Star continued
Star's observers:– objects understood in terms of their visual characteristics
affordances, constraints
– actions understood in terms of their effects on the screen causality
– intuitively reasonable actions can be performed at any time conceptual model
A subtle thing happens when everything is visible: the display becomes reality
Slide adapted from Saul Greenberg
Is direct manipulation the way to go?
Some Disadvantages– Ill-suited for abstract operations
spell-checker?
– Tedium manually search large database vs query
– Task domain may not have adequate physical/visual metaphor
– Metaphor may be overly-restrictive
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
Conventional Applications: A Mix
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
Slide adapted from Saul Greenberg
Summary
Good Representations– captures essential elements of the event / world– deliberately leave out / mute the irrelevant– appropriate for the targetted users, their task, and their interpretation
Metaphors– use our knowledge of the familiar and concrete to represent abstract concepts– need not be literal– have limitations that must be understood
Direct manipulation– visibility of the objects of interest– rapid, reversible, incremental actions– manipulation by pointing and moving– immediate and continuous display of results
Raskin on Cognition
Cognitive Engineering– Ergonomics: sizes and capabilities of the human
body– Cognetics: Ergonomics of the mind– Applied side of cognitive science
Image from Newsweek, Jan 2001
Raskin on Cognition
Cognitive Conscious / Unconscious– Examples?– Differences?
Locus of Attention– What is it?– Why is it important for HCI?
Cooper on error dialog boxes
Why are they problematic? How related to locus of attention? What are the alternatives?
– Cooper is talking to programmers “Silicon Sanctimony” You should feel as guilty as for using a goto – an
admission of failure in design
What happens when you cancel a cancelled operation?
Do I have any choice in this?
Umm, thanks for the warning,but what should I do?
Uhhh… I give up on this one
Inane Dialog Boxes
Slide adapted from Saul Greenberg
Silly Help
Midwest Microwave's online catalog
ClearCase, a source-code control system from Rational Software
Slide adapted from Saul Greenberg
“HIT ANY KEY TO CONTINUE”
Next Time: Design
Top Related