SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 27, 2004

Metaphor in User Interfaces

Metaphor and Analogy Metaphor –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 Metaphor Started 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

Direct Manipulation Metaphor DLITE makes heavy use of direct manipulation metaphors But it isn’t supposed to be just like in the real world Retain what works, omit the rest

Discussion Kent Sullivan, The Windows 95 User Interface: A Case Study in Usability Engineering, CHI 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