SIMS 213: User Interface Design & Development

Marti HearstTues, Feb 15, 2005

Today

Finish Mappings and AffordancesMental ModelsNorman’s Action CycleMetaphors in InterfacesTime Permitting:– Raskin’s Locus of Attention– Errors– Modes

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

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

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

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

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?

Digital Watch Redesigned for Affordances (Rachna Dhamija)

Digital Watch Redesigned for Affordances (Ping Yee)

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

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

Norman’s Action Cycle

Human action has two primary aspects– 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 actionsEvaluation 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

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

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

What are some example interface metaphors?

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?

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

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 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)

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

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”)

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

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

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