Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User...

35
IT Uppsala universitet Advanced Interaction Design Metaphors Bengt Sandblad

Transcript of Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User...

Page 1: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

IT Uppsala universitet

Advanced Interaction

Design Metaphors

Bengt Sandblad

Page 2: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #2 @ UU/IT

Metaphor A metaphor is an analogy between two

objects or ideas, ……. (Wikipedia) At its most basic level, a metaphor describes

the use of a body of knowledge about one concept to understand or comment on a second concept. • That new worker is pretty green • The green politician

Page 3: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #3 @ UU/IT

Use of metaphors User interface, like the ‘desktop’, or ‘room’ Graphical representation, icons Interaction styles: direct manipulation, drag-

and-drop, gestures Concepts: computer virus, firewall Functionality: cut, paste, save, delete Etc.

Page 4: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #4 @ UU/IT

?

Page 5: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #5 @ UU/IT

Icons Generic – specific Standards – invented Combined with text, images....

Bengts documents

Page 6: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #6 @ UU/IT

Icons How many icons are there in Windows 7? Examples of good and bad icons?

Page 7: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #7 @ UU/IT

Metaphors A metaphor is a metaphor for a metaphor

for….

Page 8: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #8 @ UU/IT

Metaphor

A computer is a.....?

Page 9: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #9 @ UU/IT

The Xerox Star Project The first ”work-station” with a desk-top metaphor (1975)

Page 10: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #10 @ UU/IT

Mac desktop – the original 1983 Naive users Office work Weak computational

resources Basic physical

interaction (b/w small display, one-button mouse, keyboard)

No Internet Today??

Page 11: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #11 @ UU/IT

Any problems here?

Page 12: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #12 @ UU/IT

Magic Cap - rooms

Page 13: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #13 @ UU/IT

Desktop vs room

Different rooms

Work area

Everybody can do everything

Specific users can do specific things

Page 14: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #14 @ UU/IT

Rooms, example

Select one room

User is in the patient record room, and works in its work area

User is in the appointment room and its work area

Page 15: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #15 @ UU/IT

Rooms, example

Page 16: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #16 @ UU/IT

Gestures

Page 17: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #17 @ UU/IT

Critique “Searching for that guiding metaphor is like

searching for the correct steam engine to power your airplane, or searching for a good dinosaur on which to ride to work” (Alan Cooper)

Page 18: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #18 @ UU/IT

Do we understand all metaphors? Letter, envelope, mailbox Typewriter Slide ruler

Differences between different cultures? Examples?

Page 19: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #19 @ UU/IT

What is this? A metaphor for “save” Why this image? Could we invent

something better? Why keep old (dead)

metaphors? More examples?

Page 20: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #20 @ UU/IT

Cultural differences?

More examples?

Page 21: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #21 @ UU/IT

Question

Is it possible to design a digital product without using any kind of metaphor? Can you give an example of an interactive

product that lacks a metaphor?

Page 22: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #22 @ UU/IT

Example: Visuwork Research project at

our department

An office for case handling work

Page 23: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #23 @ UU/IT

Work tasks

Paper-based tasks

Computer

Overview. Sorting. Piles.

Co-operation

Phone and support

Observations

Page 24: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #24 @ UU/IT

Visuwork – Design workshop

Workshop + Brainstorming = 4 metaphors

1. Inbox

Page 25: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #25 @ UU/IT

Visuwork – Design workshop

3. Factory

2. Calendar

Page 26: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #26 @ UU/IT

The case factory.....?

Page 27: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #27 @ UU/IT

Visuwork metaphors 4. Piles

• Piles of tasks, sorted • Size is an important signal • Place on desktop

Page 28: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #28 @ UU/IT

Lo-fi prototype (paper)

Page 29: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #29 @ UU/IT

Hi-fi prototype

Page 30: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #30 @ UU/IT

Combination of metaphors

Page 31: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #31 @ UU/IT

Page 32: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #32 @ UU/IT

Page 33: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #33 @ UU/IT

Plus We easily create new metaphors, in language

and everyday life May give the user a mental model of the

system Supports understanding and learning Can function as a creative tool for finding

new solutions

Page 34: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #34 @ UU/IT

Minus May help the first time you use the system, but may

hinder you the rest of your life • What commands can we express?

Does not scale well (direct manipulation) • Point and click on 100 GB of files?

Stuck in the old (machines and old technology) • Travel across town to the post office to read your email?

The metaphor is not true, and may give the user the wrong mental model • Windows are not quite real windows? • Mac’s dustbin?

Page 35: Advanced Interaction Design Metaphors · UU/IT @ UU/IT 2012-02-27 | #3 Use of metaphors User interface, like the ‘ desktop’, or ‘room’ Graphical representation, icons Interaction

UU/IT

2012-02-27 | #35 @ UU/IT

What is a typewriter?