sims 213: user interface design & development marti hearst thurs, feb 7, 2002

SIMS 213: User Interface Design & Development

Marti HearstThurs, Feb 7, 2002

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

Slide adapted from Saul Greenberg

Computer psychopathologies

from InfoWorld, Dec ’86– “London—

An inexperienced computer operator pressed the wrong key on a terminal in early December, causing chaos at the London Stock Exchange. The error at [the stockbrokers office] led to systems staff working through the night in an attempt to cure the problem”


Computer psychopathologies

From Science magazine– In 1988, the Soviet Union’s Phobos 1 satellite was lost on its way

to Mars, when it went into a tumble from which it never recovered.

“… Not long after the launch, a ground controller omitted a single letter in a series of digital commands sent to the spacecraft. And by malignant bad luck, that omission caused the code to be mistranslated in such a way as to trigger the [ROM] test sequence [that was intended to be used only during checkout of the spacecraft on the ground]”

Affordance

The perceived and actual properties of an object that determine how it could possibly be used.

Affordances of a Teapot?

Affordances

Affordance: The perceived and actual properties of an object that determine how it could possibly be used.– Knobs are for turning– Buttons are for pushing

Some affordances are obvious, some learned– Glass can be seen through– Glass breaks easily

Sometimes visual plus physical feedback– Floppy disk example

• Rectangular – can’t insert sideways• Tabs on the disk prevent the drive from letting it be fully inserted

backwards

Based on slide by Saul Greenberg

Affordances

Perceived can differ from real affordance– Chair: real affordance

• Affords sitting• Affords standing for changing a lightbulb• Affords jamming a door open

– Chair: false affordance• Can be moved, but not if bolted down

See the Strauss Mouse video


Affordances in Screen-Based Interfaces

Designer only has control over perceived affordances– Display screen, pointing device, selection buttons,

keyboard– These afford touching, pointing, looking, clicking on

every pixel of the display.


Affordances in Screen-Based Interfaces

Most of this affordance is not used– Example: if the display is not touch-sensitive, even

though the screen affords touching, touching has no effect.

– Example: • does a graphical object on the screen afford clicking?• yes, but the real question is does the user perceive this

affordance; does the user recognize that clicking on the icon is a meaningful, useful action?

Visual affordances of a scrollbar

Mappings

Mapping: – Relationships between two things

• Between controls and their results– Related to metaphor discussion– Related to affordances

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

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


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


Cultural Associations

Groups of people learn idioms– red = danger, green = go

But these differ in different places– Light switches

• America: down is off• Britain: down is on

– Faucets• America: counter-clockwise is on• Britain: counter-clockwise is off


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


Mental Models

Mental models built from– affordances– constraints– mappings– positive transfer – cultural associations/standards– instructions– interactions

Mental models are often wrong!


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!


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


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)


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


Interface Metaphors

Use metaphors that matches user's 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...


Metaphors continued

Caveat– metaphors can be overdone!

Common pitfalls– overly literal

• unnecessary fidelity• excessive interactions

– overly cute• novelty quickly wears off

– mismatched• does not match user’s

task and/or thinking

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)


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


Direct manipulation

Representation directly determines what can manipulated


Phone list

List metaphor Rolodex metaphor


Games


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)


Is direct manipulation the way to go?

Some Disadvantages– Ill-suited for abstract operations

• spell-checker?Tedium

• manually search large database vs queryTask domain may not have adequate physical/visual metaphorMetaphor 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”)


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

Summary

Good Representations– captures essential elements of the event / world– deliberately leaves out / mutes the irrelevant– appropriate for the person, their task, and their interpretation

Metaphors– uses our knowledge of the familiar and concrete to represent abstract concepts– need not be literal– has 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

sims 213: user interface design & development marti hearst thurs, feb 7, 2002

Documents