user-centred design: design principles (lecture-3) prof. dr. matthias rauterberg faculty industrial...
Post on 21-Dec-2015
222 views
TRANSCRIPT
![Page 1: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/1.jpg)
User-Centred Design:
Design Principles(lecture-3)
Prof. Dr. Matthias RauterbergFaculty Industrial DesignTechnical University Eindhoven
![Page 2: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/2.jpg)
© M. Rauterberg, TU/e 2
![Page 3: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/3.jpg)
© M. Rauterberg, TU/e 3
Theories of Perception (1)
Representational Approach
green
light physical stimulus neurophysiological stimulus
colour sensation
![Page 4: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/4.jpg)
© M. Rauterberg, TU/e 4
The “Visual Cliff”
![Page 5: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/5.jpg)
© M. Rauterberg, TU/e 5
The “Gestalt”-Law I
• The law of proximity– all elements nearby are
perceived as a group
![Page 6: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/6.jpg)
© M. Rauterberg, TU/e 6
The “Gestalt”-Law II
• The law of uniformity– all elements with the
same structure are perceived as a group
![Page 7: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/7.jpg)
© M. Rauterberg, TU/e 7
The “Gestalt”-Law III
• The law of compactness– all elements with the
same orientation are perceived as a group
![Page 8: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/8.jpg)
© M. Rauterberg, TU/e 8
Hidden Figures (1)
• The triangle on the left side is “hidden” or masked on the right side
![Page 9: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/9.jpg)
© M. Rauterberg, TU/e 9
Hidden Figures (2)
• The number 4 on the left side is “hidden”or masked on the right side
![Page 10: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/10.jpg)
© M. Rauterberg, TU/e 10
Perception of Distance (1)
• superposition
• relative size
![Page 11: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/11.jpg)
© M. Rauterberg, TU/e 11
Perception of Distance (2)
• height in plane
• gradient texture
![Page 12: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/12.jpg)
© M. Rauterberg, TU/e 12
The Perceptual Prototype
• Which shape represents the most typical bird?
![Page 13: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/13.jpg)
© M. Rauterberg, TU/e 13
Theories of Perception (2)
(Pure) Constructivism
green
light neurophysiological stimulus
colour sensation
![Page 14: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/14.jpg)
© M. Rauterberg, TU/e 14
Perceptual Styles (1)
• The continent Africa can be perceived without problems if the figure is rotated 90grad right
![Page 15: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/15.jpg)
© M. Rauterberg, TU/e 15
Perceptual Styles (2)
• Two rectangles, one behind the other is perceived
![Page 16: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/16.jpg)
© M. Rauterberg, TU/e 16
Perceptual Styles (3)
• Without any frame an oval is perceived just based on the special shapes of the surrounding elements
![Page 17: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/17.jpg)
© M. Rauterberg, TU/e 17
Reversible Figure and Ground
• reversible goblet is a favorite demonstration of a figure-ground reversal
![Page 18: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/18.jpg)
© M. Rauterberg, TU/e 18
Theories of Perception (3)Interactionistic Approach
green
light physical stimulus neurophysiological stimulus
colour sensation
black
goal setting
planning
execution
control
action regulated system
![Page 19: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/19.jpg)
© M. Rauterberg, TU/e 19
The Perceptual Cycle[U. Neisser: Cognition and Reality, 1976]
Object
(available information)
Schema
Exploration
modifies directs
(memory)
(activity)
Perception(attention)
samplesselects
![Page 20: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/20.jpg)
© M. Rauterberg, TU/e 20
What is this?
Answer: a “magic eye”!
You have to hold it in front of your face (ca. 20 cm) and look “through” this picture at a virtual horizon;if you do it properly you will get a stereoscopic image of three arrows pointing downwards.
The point of this image is to know how to handle it!
This is a clear example of the strong relationship between perception and action.
![Page 21: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/21.jpg)
© M. Rauterberg, TU/e 21
The “normal” order in the world (5)
• What is wrong with the drinking-cup in the hand of the gentleman on the left side?
![Page 22: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/22.jpg)
© M. Rauterberg, TU/e 22
The “normal” order in the world (1)
• There is no problem to perceive a bath room, based on our daily life experiences
![Page 23: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/23.jpg)
© M. Rauterberg, TU/e 23
The “normal” order in the world (2)
• All objects in the picture are shown at that place of their normal appearance
![Page 24: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/24.jpg)
© M. Rauterberg, TU/e 24
The “normal” order in the world (3)
• All objects in the picture are shown in a random order
• these kinds of pictures are difficult to interpret
![Page 25: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/25.jpg)
© M. Rauterberg, TU/e 25
The “normal” order in the world (4)
• To break through the “normal” order in the world can be used to control attention via attraction
![Page 26: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/26.jpg)
© M. Rauterberg, TU/e 26
Differences between the visual and the auditory sense
• The two most important constrains in interface design:
– the control of user's attention
– the physical size of the observation field
![Page 27: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/27.jpg)
© M. Rauterberg, TU/e 27
The three major Feedback Modalities
PROS CONSvisual parallel in space
large information transfer
active eye contact neccessary
auditory enforces attention allocation
enables the perception ofbackground activities
important for visuallyimpaired people
noise through environment
linear in time
exists only for a short time span
haptic force perception
object recognition
textur and surfaceperception
linear in time
contact with objects
neccessary
![Page 28: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/28.jpg)
© M. Rauterberg, TU/e 28
The Concept of Perceptual Attractors
• To guide the users attention on the interface, each visual attractor (=any separate perceivable structure) is of crucial importance, so use them carefully in your design to avoid not intended distractions.
• Consequence: you will end up with a slim design!
![Page 29: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/29.jpg)
© M. Rauterberg, TU/e 29
A design concept for visual attractors
![Page 30: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/30.jpg)
© M. Rauterberg, TU/e 30
Historical Trends for Icon Design
• Four different levels of abstraction can be found over the last 80 years.
• Actual icons get more abstract compared to the past.
![Page 31: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/31.jpg)
© M. Rauterberg, TU/e 31
An Icon Set for Different Sports
Exercise:try to find out the different kind of sport represented by each icon.
![Page 32: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/32.jpg)
© M. Rauterberg, TU/e 32
An Icon Set for a Wayfinding System
![Page 33: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/33.jpg)
© M. Rauterberg, TU/e 33
The Meaning of Icons
• The numbers in the table mean the percentage of all collected answers; each intended answer is underlined.
• [see Caron, J.P., Jamieson, D.G. & Dewar, R.E.: Evaluating pictograms using semantic differential and classification technique. Ergonomics 23(2), 1980, p. 142]
![Page 34: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/34.jpg)
© M. Rauterberg, TU/e 34
The Icon Set for Marshalling Signals
• [ redrawn from Henry Dreyfuss, Symbol Sourcebook (New York, 1972), p. 152]
• See the wonderful analysis of this icon set and the recommended redesign in the marvelous book of Edward R. Tufte (Envisioning Information, 1990, Graphics Press) on page 63.
![Page 35: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/35.jpg)
© M. Rauterberg, TU/e 35
Redesign of Icons (1)
• Design Principle:– avoid excessive detail in
icon design.
• [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp.316-331]
![Page 36: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/36.jpg)
© M. Rauterberg, TU/e 36
Redesign of Icons (2)
• Design Principles:– design the icons to
communicate object relations and attributes whenever possible;
– accompany icons with names.
• [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp.316-331]
![Page 37: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/37.jpg)
© M. Rauterberg, TU/e 37
Design of Road-Signs (1)
• Based on the concept of Natural Mapping (see the book of Donald Norman, The psychology of every day things) the road-sign is realized.
• The exception is the order of the city names on top of the sign: first the most nearby city, and then the more fare away locations.
![Page 38: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/38.jpg)
© M. Rauterberg, TU/e 38
Design of Road-Signs (2)
• The sign above is following the concept of natural mapping.
• The sign below is misdesigned, because the whole shape is indicating a turn to the left.
![Page 39: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/39.jpg)
© M. Rauterberg, TU/e 39
Dynamic in a static picture (1)
• The right picture has more dynamic than the left caused by the oversized ball
![Page 40: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/40.jpg)
© M. Rauterberg, TU/e 40
Dynamic in a static picture (2)
• The right picture has more dynamic than the left caused by the tilted frame
![Page 41: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/41.jpg)
© M. Rauterberg, TU/e 41
Dynamic in a static picture (3)
• Breaking through the frame increases the perception of dynamics
![Page 42: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/42.jpg)
© M. Rauterberg, TU/e 42
Dynamic in a static picture (4)
![Page 43: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/43.jpg)
© M. Rauterberg, TU/e 43
The Power of the Center
• [see the book of Rudolf Arnheim, 1982, The power of the center--a study of composition in the visual arts. University of California Press]
• Results of an eye recording experiments: the area in the center (see the figure) covers 13% of the total screen area, but captures 26% of 220’000 fixation points of users looking at different screens of these size.
• Results of a mock-up study: the central hot spot area (one of four hot spots = 25%; see next slide) captures 38% of all touch downs of different users.
![Page 44: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/44.jpg)
© M. Rauterberg, TU/e 44
A design concept for a Multimedia Information System
![Page 45: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/45.jpg)
© M. Rauterberg, TU/e 45
Explicit versus Implicit Design
• This design concept for a specific screen of the hypercard stack “Inigo Gets Out” is based on explicit design: only two buttons are used for navigation (--> forward, <-- backward).
![Page 46: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/46.jpg)
© M. Rauterberg, TU/e 46
Implicit Design: screen from “Inigo Gets Out”
• This screen is based on implicit design and has a second-person perspective: to get the cat to run to the right, you click on the cat itself. The actual image from “Inigo Gets Out” has been overlaid with data (the click markers) from a field study of the use of the system in a Copenhagen kindergarten.
• [see in the book of Jakob Nielsen, HyperText & HyperMedia, 1990, Academic Press, p. 136]
![Page 47: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/47.jpg)
© M. Rauterberg, TU/e 47
Explicit Screen Design
![Page 48: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/48.jpg)
© M. Rauterberg, TU/e 48
Implicit Screen Design
![Page 49: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/49.jpg)
© M. Rauterberg, TU/e 49
Corrective Design (1)
To motivate users to switch from explicit to implicit an additional explicit instruction is necessary: “Tippen Sie auf eines der EC-Symbole”
![Page 50: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/50.jpg)
© M. Rauterberg, TU/e 50
Corrective Design (2)
• One major problem of a mixed style (explicit plus implicit) is that nearly all users are not able to switch from the buttons (explicit) to the picture with touch sensitive areas (implicit).
• To overcome this problem an extra explicit instruction is necessary: “Waehlen Sie die gewuenschte Region durch Beruehren”
button area
![Page 51: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/51.jpg)
© M. Rauterberg, TU/e 51
Why Metaphors...
domain knowledge
common sense knowledge
metaphorical description
common sensebasic concepts domain specific
![Page 52: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/52.jpg)
© M. Rauterberg, TU/e 52
What is a Metaphor?
[Ortony, 1979; Lakoff & Johnson, 1980; Kittay, 1984]
"The rock is getting brittle with age."
geological expert
literal interpretation
professor emeritus
metaphorical interpretation
![Page 53: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/53.jpg)
© M. Rauterberg, TU/e 53
Wellknown Metaphors...desktop
office
room
symbolic - link structure
geographical information system (GIS)
euclidean - virtual 3D
semantic ? concept ? lay out ?
space
![Page 54: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/54.jpg)
© M. Rauterberg, TU/e 54
A Method for Metaphor generation / elicitation
steps of development... 1.) epistemological basis 2.) selection procedure of the domain expert 3.) selection criteria of the 'metaphor engineer' 4.) criteria for metaphor extraction / identification 5.) mapping rules of metaphor to design
![Page 55: User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl](https://reader030.vdocuments.us/reader030/viewer/2022020111/56649d6c5503460f94a4b552/html5/thumbnails/55.jpg)
© M. Rauterberg, TU/e 55
Literature for Visual DesignInformation Visualization, Robert Spence, Addison-Wesley, 2001
Art and Visual Perception, a Psychology of the Creative Eye, Rudolf Arnheim, University of California Press, 1974.
The Power of the Center, a Study of Composition in the Visual Arts, Rudolf Arnheim, University of California Press, 1982.
Steps to an Ecology of Mind, Gregory Bateson, Ballantine Books, 1972.
Logic and Design, in Art, Science and Mathematics, Krome Barratt, George Godwin Limited, 1980.
Design in the Visual Arts, Roy Behrens, Prentice Hall, 1984.
Principles of Visual Perception, Carolyn M. Bloomer, Van Nostrand Reinhold Co., 1976.
Primer of Visual Literacy, Donis Dondis, M.I.T. Press, 1973.
The Hidden Order of Art, Anton Ehrenzweig, University of California Press, 1967.
Art and Illusion, a Study in the Psychology of Pictorial Representation, E.H. Gombrich, Princeton University Press,1960.
Illusion in Nature and Art, Gregory and Gombrich, Charles Scribner's and Sons, 1980.
Eye and Brain, R.L. Gregory, McGraw Hill Paperback edition, 1966.
Illusions, edited by Edi Lanner, Holt, Rinehart and Winston, 1973.
The Visual Display of Quantitative Information, Edward R. Tufte, Graphics Press, 1983.
Envisioning Information, Edward R. Tufte, Graphics Press, 1990.
Perception and Photography, Richard D. Zakia, Prentice-Hall Inc., 1975.