advanced interaction design metaphors · uu/it @ uu/it 2012-02-27 | #3 use of metaphors user...
TRANSCRIPT
![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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/28.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/29.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/30.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/31.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/32.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/33.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/34.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022071213/60315ba12f89032e43241141/html5/thumbnails/35.jpg)
UU/IT
2012-02-27 | #35 @ UU/IT
What is a typewriter?