user-centred design: design principles (lecture-3) prof. dr. matthias rauterberg faculty industrial...

User-Centred Design:

Design Principles(lecture-3)

Prof. Dr. Matthias RauterbergFaculty Industrial DesignTechnical University Eindhoven

g.w.m.rauterberg@tue.nl

© M. Rauterberg, TU/e 2

© M. Rauterberg, TU/e 3

Theories of Perception (1)

Representational Approach

green

light physical stimulus neurophysiological stimulus

colour sensation

© M. Rauterberg, TU/e 4

The “Visual Cliff”

© M. Rauterberg, TU/e 5

The “Gestalt”-Law I

• The law of proximity– all elements nearby are

perceived as a group

© M. Rauterberg, TU/e 6

The “Gestalt”-Law II

• The law of uniformity– all elements with the

same structure are perceived as a group

© M. Rauterberg, TU/e 7

The “Gestalt”-Law III

• The law of compactness– all elements with the

same orientation are perceived as a group

© M. Rauterberg, TU/e 8

Hidden Figures (1)

• The triangle on the left side is “hidden” or masked on the right side

© M. Rauterberg, TU/e 9

Hidden Figures (2)

• The number 4 on the left side is “hidden”or masked on the right side

© M. Rauterberg, TU/e 10

Perception of Distance (1)

• superposition

• relative size

© M. Rauterberg, TU/e 11

Perception of Distance (2)

• height in plane

• gradient texture

© M. Rauterberg, TU/e 12

The Perceptual Prototype

• Which shape represents the most typical bird?

© M. Rauterberg, TU/e 13

Theories of Perception (2)

(Pure) Constructivism

green

light neurophysiological stimulus

colour sensation

© M. Rauterberg, TU/e 14

Perceptual Styles (1)

• The continent Africa can be perceived without problems if the figure is rotated 90grad right

© M. Rauterberg, TU/e 15

Perceptual Styles (2)

• Two rectangles, one behind the other is perceived

© 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

© M. Rauterberg, TU/e 17

Reversible Figure and Ground

• reversible goblet is a favorite demonstration of a figure-ground reversal

© 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

© 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

© 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.

© 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?

© 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

© 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

© 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

© 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

© 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

© 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

© 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!

© M. Rauterberg, TU/e 29

A design concept for visual attractors

© 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.

© 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.

© M. Rauterberg, TU/e 32

An Icon Set for a Wayfinding System

© 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]

© 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.

© 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]

© 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]

© 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.

© 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.

© 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

© 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

© M. Rauterberg, TU/e 41

Dynamic in a static picture (3)

• Breaking through the frame increases the perception of dynamics

© M. Rauterberg, TU/e 42

Dynamic in a static picture (4)

© 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.

© M. Rauterberg, TU/e 44

A design concept for a Multimedia Information System

© 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).

© 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]

© M. Rauterberg, TU/e 47

Explicit Screen Design

© M. Rauterberg, TU/e 48

Implicit Screen Design

© 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”

© 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

© M. Rauterberg, TU/e 51

Why Metaphors...

domain knowledge

common sense knowledge

metaphorical description

common sensebasic concepts domain specific

© 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

© 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

© 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

© 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.