Christine Robson
September 18, 2007





Review: The gulfs of evaluation and execution
Metaphors
– what they are
– how to use them well
– reducing the gulf
Interactions
– Command-based interaction
– Direct-manipulation interaction
Errors
– Error Prevention
– Description errors
– Capture errors
– Mode errors



Gulf of execution
– How do I do it?
Gulf of evaluation
– What did it do?
evaluation execution

Review: The Gulfs
Where thought is required


Gulf of execution -- thinking required to figure out how to get something done -transforming high-level intention into specific physical actions
Gulf of evaluation -- thinking required to understand what is being perceived -transforming raw sensory data into an understanding of objects, properties and events


The transference of the relation between one set of objects and another for the purposes of brief explanation

Metaphors can be used to highlight and suppress features



A means to bring the real world into your interface
You’re borrowing a conceptual model the user has experience with

Use it if you have one, but don’t stretch for one if you don’t!






A presentation tool is like a slide projector
The painting metaphor in Photoshop
Your laptop has a desktop
– The desktop metaphor was started at
Xerox PARC with Xerox Star
Files can be put in the Trash Can ©Apple
Can you think of any more?





Too limited- restricts the possibilities of the interface
Too powerful- implies things the system cant do
Too literal or cute- makes it difficult to understand the abstract concept
Mismatched- conveys the wrong meaning




Capture essential elements of the event/world
Deliberately leave out or mute the irrelevant
And are appropriate for user task and interpretation


Reduce the distance between the physical system and your goals by using metaphor


Bring perceptions closer to interpretations & evaluations
Bring intentions closer to executions


Conversation vs. Model world
– Abstraction uses language vs. directly operating on objects
– Describe actions of interest vs. performing actions directly

Employ Abstraction to separate your user’s intentions and perceptions from your system commands and capabilities


Semantic: is it possible to say what one wants to say?
– Can it be said concisely?

Articulatory
– Make form of expression similar to meaning of expression
– i.e. onomatopoeia: “boom” of explosion; “cocka-doodle-doo” of roosters.

User’s Goals
Semantic
Distance

Another way of looking at Gulfs
Meaning of
Expression
Articulatory
Distance
Form of
Expression



Gulf of execution
– Match description level of interface language to level at which person thinks of the task (often interface is much lower)
Gulf of evaluation
– Match terms of output to the form user requires for checking that goals have been met



Gulf of execution
– Permit specification of action by mimicking it (i.e. move pointer with mouse, point with finger or light pen, etc)
Gulf of evaluation
– Depict output so that relationships between input action and output is obvious and easy to perceive (i.e. graphical chart versus table of numbers)



Disadvantages
– Ill suited for abstract operations i.e. spell checker or searching a database by scrolling
Solution: combine direct manipulation with abstractions
– i.e. the word processor
– Buttons, menus, dialog boxes  abstractions that provide direct manipulation in the small



Two ways of doing the same thing…
Which do you like?

Computer objects as visible moveable objects
Consequences…


Icons to represent items
Items can be “picked up” and moved


Items can be “thrown out”
Items can be “copied”



User interacts with visual representation of data objects
– Continuous visual representation
– Physical actions or labeled button presses
– Rapid, incremental, reversible, immediately visible effects
Examples
– Files and folders on a desktop
– Scrollbar
– Dragging to resize a rectangle
– Selecting text



Visual representation and physical interaction are important
Design Principles
– Affordances
– Natural mapping
– Visibility
– Feedback


Perceived and actual properties of a thing that determine how the thing could be used
Examples:

Scroll bars are scrollable


Buttons are clickable
Can you think of some more?



Physical arrangement of controls should match arrangement of functions
Best mappings are direct, but natural mappings don’t have to be direct

Examples?




Simplest but most important
Capabilities and relevant parts of your system should be visible
– Don’t make the user guess if you have functionality- show them!
Examples:
– Icons, menu options, etc




Feedback is what the system does when an action is preformed
Actions should have immediate visible, auditory or tactile effects
– Push buttons
– Drag & drop
Always let the user know that you caught their action





Confirmation Dialogs
– Don’t overuse them!
Substantially reduce the efficiency of the interface
The user will learn to expect it
– “oh, just click yes and get past it”
Usually better to have an undo function



Can be great when used wisely
You should always provide lots of information



No room for error, but is this the best way to enter Social Security number?
All the states are visible, but is this the most effective way to select state?




Description Error
Capture Error
Mode Error



Intended action is replaced by another action with many features in common
– Pouring orange juice into your cereal
– Putting the wrong lid on a jar
– Throwing your shirt into the toilet instead of the laundry basket
Avoid actions with very similar descriptions
– Long rows of identical switches
– Adjacent menu items that look similar



A sequence of actions is replaced by another sequence that starts the same way
– Leave home and find yourself walking to class instead of where you wanted to go
Avoid habitual action sequences with common prefixes



Modes: states which have different meanings
– Caps lock
– “edit photo” vs. “view photo” modes in image software
A mode error occurs when a user performs an action that is appropriate to a different mode and gets an unexpected and
undesired response.


Avoiding mode errors
– Eliminate modes
– Visibility of mode

Show me I’m in CAPS LOCK
– Spring-loaded or temporary modes

Click to highlight
– Disjoint action sets in different modes

No overlapping commands




Be precise- restate users input
– Not “cannot open file” but “cannot open
<filename>”
Give constructive help
– Why error occurred and how to fix it
Hide technical details
– Don’t show your stack trace unless the user asks for it



Which is more helpful?
Why?
Links to a URL describing the specific problem you are having http://www.google.com/support/talk/bin/answer.py?answer=41191
Of course… that requires your net connection to be up…



Human Information Processing
Readings:
– GOMS
– KLM
– Fitts's Law
– GOMS by Lorin Hochstein


Due Today: Project topic
– Team name (branding)
– Turn it in now if you have it, but please by 5pm today. John Tang has office hours from 2-
3:30pm if you would like to discuss.
Upcoming:

Contextual inquiry (Due Sept. 27)
– Pick appropriate method
– Group analysis
– Report

Discussion section Sept 19


Introduction to Facebook platform
Basic familiarity with features, constraints of platform

You don’t want to miss this one…

http://groups.google.com/group/cs160-fall07 click apply for membership



Remember that the design cycle is iterative:
– Design, Prototype, Test… then iterate and create a better design based on what you learned
Always think through your design goals first- what features should your interface have?




Generally good work!
Most common comment—looking for more reflection
– What did you learn from testing with user?
– What would you improve?
Most did good job interpreting intent of the assignment



See handout
Remember, no late homework accepted on group assignments



Webcast, today, 1:30pm Pacific Time
Randy Pausch, CMU professor
– Professor of Computer Science, HCII, and Design
– Co-Founder, Entertainment Technology Center http://www.cs.cmu.edu/~pausch/temp/RandySep t18TalkPoster.pdf
mms://wms.andrew.cmu.edu/pushit01
(must have Windows Media Player 9)

Pick up your homework
Take a handout on the
Contextual Inquiry
Assignment