SIMS 213: User Interface Design & Development

Marti HearstTues, Jan 27, 2004

Metaphor in User Interfaces

Metaphor and AnalogyMetaphor– L. metaphora, fr. to carry over, transfer; meta: beyond, over– The transference of the relation between one set of objects to another set for

the purpose of brief explanation (Webster’s revised)Analogy– A resemblance of relations; an agreement or likeness between things in

some circumstances or effects, when the things are otherwise entirely different. (Webster’s revised)

– 1. Similarity in some respect between things that are otherwise dissimilar: "the operation of a computer presents an interesting analogy to the working of the brain“ (WordNet)

– 2: (logic) inference that if things agree in some respects they probably agree in others (WordNet)

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

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

Discussion

Kent Sullivan, The Windows 95 User Interface: A Case Study in Usability Engineering, CHI 1996.A case study of the iterative design process.

Sullivan Case Study

– 12 people on the Windows 95 team!!– Waterfall design method (compartmentalized; UI done at the

end during quality assurance stage) would produce an unusable product.

– Method:• Find most common tasks, and test on those• Compare to a baseline (Windows 3.1)• Rapid prototyping tools• Importance of usability testing!!

– Stepping back• Found big problems• Held a retreat to radically re-think things

Sullivan Case Study

– Decided to:• Focus on scaffolding (beginner -> intermediate-expert)• Give up on too much backwards-compatibility with 3.1• Dump the huge design spec (!) Encouraged social interaction.• Continually informed outsiders as well as team members about the

design– Fine tuning with usablity tests

• Holistic interface test in the lab– Many participants!

• Longitudinal field study– About Windows 3.1

• … a good demonstration of what happens when usability is not taken into account