1. User-Centred Design: Design Principles (lecture-3) Prof. Dr. Matthias Rauterberg Faculty Industrial Design Technical University Eindhoven g.w.m.rauterberg@tue.nl

2. © M. Rauterberg, TU/e2

3. 3 Theories of Perception (1)

4. © M. Rauterberg, TU/e4 The “Visual Cliff”

5. © M. Rauterberg, TU/e5 The “Gestalt”-Law I The law of proximity –all elements nearby are perceived as a group

6. © M. Rauterberg, TU/e6 The “Gestalt”-Law II The law of uniformity –all elements with the same structure are perceived as a group

7. © M. Rauterberg, TU/e7 The “Gestalt”-Law III The law of compactness –all elements with the same orientation are perceived as a group

8. © M. Rauterberg, TU/e8 Hidden Figures (1) The triangle on the left side is “hidden” or masked on the right side

9. © M. Rauterberg, TU/e9 Hidden Figures (2) The number 4 on the left side is “hidden”or masked on the right side

10. © M. Rauterberg, TU/e10 Perception of Distance (1) superposition relative size

11. © M. Rauterberg, TU/e11 Perception of Distance (2) height in plane gradient texture

12. © M. Rauterberg, TU/e12 The Perceptual Prototype Which shape represents the most typical bird?

13. © M. Rauterberg, TU/e13 Theories of Perception (2)

14. © M. Rauterberg, TU/e14 Perceptual Styles (1) The continent Africa can be perceived without problems if the figure is rotated 90grad right

15. © M. Rauterberg, TU/e15 Perceptual Styles (2) Two rectangles, one behind the other is perceived

16. © M. Rauterberg, TU/e16 Perceptual Styles (3) Without any frame an oval is perceived just based on the special shapes of the surrounding elements

17. © M. Rauterberg, TU/e17 Reversible Figure and Ground reversible goblet is a favorite demonstration of a figure-ground reversal

18. © M. Rauterberg, TU/e18 Theories of Perception (3)

19. © M. Rauterberg, TU/e19 The Perceptual Cycle [U. Neisser: Cognition and Reality, 1976]

20. © M. Rauterberg, TU/e20 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.

21. © M. Rauterberg, TU/e21 The “normal” order in the world (5) What is wrong with the drinking-cup in the hand of the gentleman on the left side?

22. © M. Rauterberg, TU/e22 The “normal” order in the world (1) There is no problem to perceive a bath room, based on our daily life experiences

23. © M. Rauterberg, TU/e23 The “normal” order in the world (2) All objects in the picture are shown at that place of their normal appearance

24. © M. Rauterberg, TU/e24 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

25. © M. Rauterberg, TU/e25 The “normal” order in the world (4) To break through the “normal” order in the world can be used to control attention via attraction

26. © M. Rauterberg, TU/e26 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

27. © M. Rauterberg, TU/e27 The three major Feedback Modalities

28. © M. Rauterberg, TU/e28 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!

29. © M. Rauterberg, TU/e29 A design concept for visual attractors

30. © M. Rauterberg, TU/e30 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.

31. © M. Rauterberg, TU/e31 An Icon Set for Different Sports Exercise: try to find out the different kind of sport represented by each icon.

32. © M. Rauterberg, TU/e32 An Icon Set for a Wayfinding System

33. © M. Rauterberg, TU/e33 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]

34. © M. Rauterberg, TU/e34 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.

35. © M. Rauterberg, TU/e35 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]

36. © M. Rauterberg, TU/e36 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]

37. © M. Rauterberg, TU/e37 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.

38. © M. Rauterberg, TU/e38 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.

39. © M. Rauterberg, TU/e39 Dynamic in a static picture (1) The right picture has more dynamic than the left caused by the oversized ball

40. © M. Rauterberg, TU/e40 Dynamic in a static picture (2) The right picture has more dynamic than the left caused by the tilted frame

41. © M. Rauterberg, TU/e41 Dynamic in a static picture (3) Breaking through the frame increases the perception of dynamics

42. © M. Rauterberg, TU/e42 Dynamic in a static picture (4)

43. © M. Rauterberg, TU/e43 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.

44. © M. Rauterberg, TU/e44 A design concept for a Multimedia Information System

45. © M. Rauterberg, TU/e45 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).

46. © M. Rauterberg, TU/e46 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]

47. © M. Rauterberg, TU/e47 Explicit Screen Design

48. © M. Rauterberg, TU/e48 Implicit Screen Design

49. © M. Rauterberg, TU/e49 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”

50. © M. Rauterberg, TU/e50 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

51. © M. Rauterberg, TU/e51 Why Metaphors...

52. © M. Rauterberg, TU/e52 What is a Metaphor?

53. © M. Rauterberg, TU/e53 Wellknown Metaphors...

54. © M. Rauterberg, TU/e54 A Method for Metaphor generation / elicitation

55. © M. Rauterberg, TU/e55 Literature for Visual Design Information 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.