Conceptual Models Conceptual Models and Metaphors and Metaphors

Christine RobsonChristine Robson

September 18, 2007September 18, 2007

TodayToday

Review: The gulfs of evaluation and executionReview: The gulfs of evaluation and execution Metaphors Metaphors

– what they are what they are – how to use them wellhow to use them well– reducing the gulfreducing the gulf

InteractionsInteractions– Command-based interaction Command-based interaction – Direct-manipulation interaction Direct-manipulation interaction

ErrorsErrors– Error PreventionError Prevention– Description errorsDescription errors– Capture errorsCapture errors– Mode errorsMode errors

Review: gulfs of Review: gulfs of execution and execution and evaluationevaluation

Gulf of Gulf of executionexecution– How do I do How do I do

it?it? Gulf of Gulf of

evaluationevaluation– What did it What did it

do?do?

evaluation

execution

Review: The Gulfs Review: The Gulfs Where thought is Where thought is requiredrequired Gulf of executionGulf of execution -- thinking -- thinking

required to figure out how to get required to figure out how to get something done -- transforming high-something done -- transforming high-level intention into specific physical level intention into specific physical actions actions

Gulf of evaluationGulf of evaluation -- thinking -- thinking required to understand what is being required to understand what is being perceived -- transforming raw sensory perceived -- transforming raw sensory data into an understanding of objects, data into an understanding of objects, properties and eventsproperties and events

MetaphorsMetaphors

MetaphorMetaphor

The transference of the The transference of the relation between one set relation between one set of objects and another of objects and another for the purposes of brief for the purposes of brief explanationexplanation

Metaphors can be used Metaphors can be used to highlight and to highlight and suppress featuressuppress features

MetaphorsMetaphors

A means to bring the real world A means to bring the real world into your interfaceinto your interface

You’re borrowing a conceptual You’re borrowing a conceptual model the user has experience model the user has experience withwith

Use it if you have one, but don’t Use it if you have one, but don’t stretch for one if you don’t!stretch for one if you don’t!

Interface Metaphors Interface Metaphors ExamplesExamples A presentation tool is like a slide A presentation tool is like a slide

projectorprojector The painting metaphor in PhotoshopThe painting metaphor in Photoshop Your laptop has a desktopYour laptop has a desktop

– The desktop metaphor was started at The desktop metaphor was started at Xerox PARC with Xerox StarXerox PARC with Xerox Star

Files can be put in the Trash Can Files can be put in the Trash Can ©Apple©Apple

Can you think of any more?Can you think of any more?

Using MetaphorsUsing Metaphors

Metaphor caveatsMetaphor caveats

Too limited- restricts the Too limited- restricts the possibilities of the interfacepossibilities of the interface

Too powerful- implies things the Too powerful- implies things the system cant dosystem cant do

Too literal or cute- makes it difficult Too literal or cute- makes it difficult to understand the abstract conceptto understand the abstract concept

Mismatched- conveys the wrong Mismatched- conveys the wrong meaningmeaning

Good metaphorsGood metaphors

Capture essential elements of the Capture essential elements of the event/worldevent/world

Deliberately leave out or mute Deliberately leave out or mute the irrelevantthe irrelevant

And are appropriate for user task And are appropriate for user task and interpretationand interpretation

Reducing the gulfReducing the gulf

Reduce the distance Reduce the distance between the between the physical system and physical system and your goals by using your goals by using metaphormetaphor

Bring perceptions Bring perceptions closer to closer to interpretations & interpretations & evaluationsevaluations

Bring intentions Bring intentions closer to executionscloser to executions

Increase EngagementIncrease Engagement

Conversation vs. Model worldConversation vs. Model world– Abstraction uses language vs. directly Abstraction uses language vs. directly

operating on objectsoperating on objects– Describe actions of interest vs. performing Describe actions of interest vs. performing

actions directlyactions directly

Employ Employ AbstractionAbstraction to separate your to separate your user’s intentions and perceptions from user’s intentions and perceptions from your system commands and capabilitiesyour system commands and capabilities

Semantic & Semantic & Articulatory DistanceArticulatory Distance Semantic: is it possible to say what Semantic: is it possible to say what

one wants to say?one wants to say?– Can it be said concisely?Can it be said concisely?

ArticulatoryArticulatory– Make form of expression similar to Make form of expression similar to

meaning of expressionmeaning of expression– i.e. onomatopoeia: “boom” of explosion; i.e. onomatopoeia: “boom” of explosion;

“cock-a-doodle-doo” of roosters. “cock-a-doodle-doo” of roosters.

Semantic & Semantic & Articulatory DistanceArticulatory Distance

Another way of Another way of looking at Gulfslooking at Gulfs

User’s GoalsMeaning of Expression

Form of Expression

Semantic Semantic DistanceDistance

Articulatory Articulatory DistanceDistance

Semantic DistanceSemantic Distance

Gulf of executionGulf of execution– Match description level of interface Match description level of interface

language to level at which person language to level at which person thinks of the task (often interface is thinks of the task (often interface is much lower)much lower)

Gulf of evaluationGulf of evaluation– Match terms of output to the form Match terms of output to the form

user requires for checking that goals user requires for checking that goals have been methave been met

Articulatory DistanceArticulatory Distance

Gulf of executionGulf of execution– Permit specification of action by Permit specification of action by

mimicking it (i.e. move pointer with mimicking it (i.e. move pointer with mouse, point with finger or light pen, mouse, point with finger or light pen, etc)etc)

Gulf of evaluationGulf of evaluation– Depict output so that relationships Depict output so that relationships

between input action and output is between input action and output is obvious and easy to perceive (i.e. obvious and easy to perceive (i.e. graphical chart versus table of numbers)graphical chart versus table of numbers)

Issues with Issues with AbstractionsAbstractions DisadvantagesDisadvantages

– Ill suited for abstract operations i.e. spell Ill suited for abstract operations i.e. spell checker or searching a database by checker or searching a database by scrollingscrolling

Solution: combine direct manipulation Solution: combine direct manipulation with abstractionswith abstractions– i.e. the word processori.e. the word processor– Buttons, menus, dialog boxes Buttons, menus, dialog boxes

abstractions that provide direct abstractions that provide direct manipulation in the smallmanipulation in the small

InteractionsInteractions

Command Based Command Based InteractionsInteractions

Two ways of doing Two ways of doing the same thing…the same thing…

Which do you like?Which do you like?

Computer Interface Computer Interface MetaphorsMetaphors

Computer objects as visible moveable Computer objects as visible moveable objectsobjects

Consequences…Consequences… Icons to represent itemsIcons to represent items Items can be “picked up” and movedItems can be “picked up” and moved Items can be “thrown out”Items can be “thrown out” Items can be “copied”Items can be “copied”

Direct ManipulationDirect Manipulation

User interacts with visual representation of User interacts with visual representation of data objectsdata objects– Continuous visual representationContinuous visual representation– Physical actions or labeled button pressesPhysical actions or labeled button presses– Rapid, incremental, reversible, immediately Rapid, incremental, reversible, immediately

visible effectsvisible effects ExamplesExamples

– Files and folders on a desktopFiles and folders on a desktop– ScrollbarScrollbar– Dragging to resize a rectangleDragging to resize a rectangle– Selecting textSelecting text

Direct ManipulationDirect Manipulation

Visual representation and Visual representation and physical interaction are importantphysical interaction are important

Design PrinciplesDesign Principles– AffordancesAffordances– Natural mappingNatural mapping– VisibilityVisibility– FeedbackFeedback

AffordancesAffordances

Perceived and actual properties of Perceived and actual properties of a thing that determine how the a thing that determine how the thing could be usedthing could be used

Examples:Examples: Scroll bars are scrollableScroll bars are scrollable Buttons are clickableButtons are clickable Can you think of some more?Can you think of some more?

Natural MappingsNatural Mappings

Physical arrangement of controls Physical arrangement of controls should match arrangement of should match arrangement of functionsfunctions

Best mappings are direct, but Best mappings are direct, but natural mappings don’t natural mappings don’t havehave to to be directbe direct

Examples?Examples?

VisibilityVisibility

Simplest but most importantSimplest but most important Capabilities and relevant parts of Capabilities and relevant parts of

your system should be visibleyour system should be visible– Don’t make the user guess if you Don’t make the user guess if you

have functionality- show them!have functionality- show them! Examples: Examples:

– Icons, menu options, etcIcons, menu options, etc

FeedbackFeedback

Feedback is what the system Feedback is what the system does when an action is preformeddoes when an action is preformed

Actions should have immediate Actions should have immediate visible, auditory or tactile effectsvisible, auditory or tactile effects– Push buttonsPush buttons– Drag & drop Drag & drop

Always let the user know that you Always let the user know that you caught their actioncaught their action

Dealing with errorsDealing with errors

Error PreventionError Prevention

Confirmation DialogsConfirmation Dialogs– Don’t overuse them! Don’t overuse them!

Substantially reduce the Substantially reduce the efficiency of the interfaceefficiency of the interface

The user will learn to The user will learn to expect itexpect it– ““oh, just click yes and oh, just click yes and

get past it”get past it” Usually better to have an Usually better to have an

undo functionundo function

Confirmation DialogsConfirmation Dialogs

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

informationinformation

Avoiding Errors- the Avoiding Errors- the wrong waywrong way

No room for error, but is this the No room for error, but is this the best way to enter Social Security best way to enter Social Security number?number?

All the states are visible,All the states are visible, but is this the most effective but is this the most effective

way to select state? way to select state?

Error CategoriesError Categories

Description ErrorDescription Error Capture ErrorCapture Error Mode ErrorMode Error

Description ErrorDescription Error

Intended action is replaced by another Intended action is replaced by another action with many features in commonaction with many features in common– Pouring orange juice into your cerealPouring orange juice into your cereal– Putting the wrong lid on a jarPutting the wrong lid on a jar– Throwing your shirt into the toilet instead of Throwing your shirt into the toilet instead of

the laundry basketthe laundry basket Avoid actions with very similar Avoid actions with very similar

descriptionsdescriptions– Long rows of identical switchesLong rows of identical switches– Adjacent menu items that look similarAdjacent menu items that look similar

Capture ErrorCapture Error

A sequence of actions is replaced A sequence of actions is replaced by another sequence that starts by another sequence that starts the same waythe same way– Leave home and find yourself Leave home and find yourself

walking to class instead of where walking to class instead of where you wanted to goyou wanted to go

Avoid habitual action sequences Avoid habitual action sequences with common prefixeswith common prefixes

Mode ErrorMode Error

Modes: states which have different Modes: states which have different meaningsmeanings– Caps lockCaps lock– ““edit photo” vs. “view photo” modes in edit photo” vs. “view photo” modes in

image softwareimage software A A mode errormode error occurs when a user occurs when a user

performs an action that is appropriate to performs an action that is appropriate to a different mode and gets an a different mode and gets an unexpectedunexpected and and undesiredundesired response. response.

Mode ErrorMode Error

Avoiding mode errorsAvoiding mode errors– Eliminate modesEliminate modes– Visibility of modeVisibility of mode

Show me I’m in CAPS LOCKShow me I’m in CAPS LOCK

– Spring-loaded or temporary modesSpring-loaded or temporary modes Click to highlightClick to highlight

– Disjoint action sets in different modesDisjoint action sets in different modes No overlapping commandsNo overlapping commands

Error reporting, Error reporting, diagnosis, Recoverydiagnosis, Recovery Be precise- restate users inputBe precise- restate users input

– Not “cannot open file” but “cannot Not “cannot open file” but “cannot open <filename>”open <filename>”

Give constructive helpGive constructive help– Why error occurred and how to fix itWhy error occurred and how to fix it

Hide technical detailsHide technical details– Don’t show your stack trace unless Don’t show your stack trace unless

the user asks for itthe user asks for it

Example Error Example Error MessagesMessages

Links to a URL describing the specific problem you are havinghttp://www.google.com/support/talk/bin/answer.py?answer=41191

Of course… that requires your net connection to be up…

Which is more Which is more helpful? helpful?

Why?Why?

Nuts & BoltsNuts & Bolts

Next timeNext time

Human Information ProcessingHuman Information Processing Readings: Readings:

– GOMSGOMS– KLMKLM– Fitts's LawFitts's Law– GOMS by Lorin Hochstein GOMS by Lorin Hochstein

AssignmentsAssignments

Due Today: Project topic Due Today: Project topic – Team name (branding)Team name (branding)– Turn it in now if you have it, but please by Turn it in now if you have it, but please by

5pm today. John Tang has office hours 5pm today. John Tang has office hours from 2-3:30pm if you would like to discuss.from 2-3:30pm if you would like to discuss.

Upcoming:Upcoming: Contextual inquiry (Due Sept. 27)Contextual inquiry (Due Sept. 27)

– Pick appropriate methodPick appropriate method– Group analysisGroup analysis– ReportReport

Discussion section Sept Discussion section Sept 1919

Introduction to Facebook platformIntroduction to Facebook platform Basic familiarity with features, Basic familiarity with features,

constraints of platformconstraints of platform

You don’t want to miss this one…You don’t want to miss this one…

Join Class Mailing ListJoin Class Mailing List(it’s a Google Group)(it’s a Google Group)

http://groups.google.com/group/cs160-http://groups.google.com/group/cs160-fall07fall07

click click apply for membership apply for membership

Map of BerkeleyMap of Berkeley

Remember that the design cycle Remember that the design cycle is iterative:is iterative:– Design, Prototype, Test…Design, Prototype, Test… then then

iterate and create a better design iterate and create a better design based on what you learnedbased on what you learned

Always think through your design Always think through your design goals first- what features should goals first- what features should your interface have? your interface have?

Exploring Berkeley Exploring Berkeley with your Conceptual with your Conceptual MapsMaps

Map of BerkeleyMap of Berkeley

Generally good work!Generally good work! Most common comment—looking Most common comment—looking

for more reflectionfor more reflection– What did you learn from testing with What did you learn from testing with

user?user?– What would you improve?What would you improve?

Most did good job interpreting Most did good job interpreting intent of the assignmentintent of the assignment

Clarifying Contextual Clarifying Contextual Inquiry assignmentInquiry assignment See handoutSee handout Remember, no late homework Remember, no late homework

accepted on group assignmentsaccepted on group assignments

Really Really Achieving Your Childhood Dreams Webcast, today, 1:30pm Pacific TimeWebcast, today, 1:30pm Pacific Time Randy Pausch, CMU professorRandy Pausch, CMU professor

– Professor of Computer Science, HCII, and Design

– Co-Founder, Entertainment Technology Center

http://www.cs.cmu.edu/~pausch/temp/Randhttp://www.cs.cmu.edu/~pausch/temp/RandySept18TalkPoster.pdfySept18TalkPoster.pdfmms://wms.andrew.cmu.edu/pushit01

(must have Windows Media Player 9)(must have Windows Media Player 9)

Pick up your homeworkPick up your homework

Take a handout on the Take a handout on the Contextual Inquiry Contextual Inquiry AssignmentAssignment