From Function to Form Matthias Rauterberg Department Industrial Design Technical University Eindhoven

© 2003 Matthias Rauterberg2 Separation FORM from CONTENT Scott McCloud (1993) Understanding Comics.

© 2003 Matthias Rauterberg3 The Semiotic Triangle Sense: the sense made of the sign; Sign vehicle: the form of the sign; Referent: what the sign 'stands for'.

© 2003 Matthias Rauterberg4 Applied Semiotics

© 2003 Matthias Rauterberg5 The function-form mapping problem implemented functions perceivable user interface forms intended semantic perceived semantic DMM := designer’s mental model UMM := user’s mental model

© 2003 Matthias Rauterberg6 What is User-System Interaction about? system User[s] Working domain Working system Goal: Actual Performance => Desired Performance

© 2003 Matthias Rauterberg7 The interface architecture

© 2003 Matthias Rauterberg8 Three different function types Primary functions [application manager] Secondary functions [dialog manager] Tertiary functions [dialog manager] Application object(s)

© 2003 Matthias Rauterberg9 The function space function space FS perceptible functions PF hidden functions HF PFs of the dialog manager PDF set of all possible function representations RF PFs of the application manager PAF HFs of the dialog manager HDF HFs of the application manager HAF  

© 2003 Matthias Rauterberg10 Information types physical conceptual static dynamic static dynamic Statesperson sleeping descriptivefeatures of a computer relationshipssimilarity between twins spatialdimensions of a room discrete actionswitch light on continuous actionski turn eventsstart of a race proceduralrepair photocopier causalhow an engine works statesevidence is uncertain descriptiveperson’s belief relationshipsclasses of religious belief valuesprime numbers discrete actionchoosing to agree/disagree continuous actionmonitoring success proceduraldiagnosing a fault causalexplanation of gravity

© 2003 Matthias Rauterberg11 The three important mappings User’s worlddevicepixel worldsemantic function-1 function-2 function-3 … function-n

© 2003 Matthias Rauterberg12 Button-Function Mapping (1) Recommended Controls for Functions Function Category Control Selecting mutually exclusive options Radio buttons Selecting non-exclusive options Check boxes Performing an action Command buttons Selecting an item from a set List boxes or drop-down list boxes Entering or viewing large amounts of information at the same time Tables Setting attribute values Text-entry fields

© 2003 Matthias Rauterberg13 Button-Function Mapping (2) Examples from

© 2003 Matthias Rauterberg14 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.

© 2003 Matthias Rauterberg15 An Icon Set for Different Sports Exercise: try to find out the different kind of sport represented by each icon.

© 2003 Matthias Rauterberg16 An Icon Set for a Way-finding System

© 2003 Matthias Rauterberg17 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]

© 2003 Matthias Rauterberg18 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.

© 2003 Matthias Rauterberg19 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 ]

© 2003 Matthias Rauterberg20 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 ]

© 2003 Matthias Rauterberg21 Affordances introduced by Gibson

© 2003 Matthias Rauterberg22 The Perceptual Prototype Which shape represents the most typical bird?

© 2003 Matthias Rauterberg23 The Concept of Natural Mappings Definition [see Norman, D., 1988, p. 75ff]: –A design solution based on a natural mappings reduces the need for additional explanatory information in memory! –Natural mappings guarantee a minimum number of cognitive transformation steps. –If a design depends upon labels, it may be faulty. Labels are important and often necessary, but the appropriate use of natural mappings can minimize the need for them. Wherever labels seem necessary, consider another design!

© 2003 Matthias Rauterberg24 Design of Light Switch Panels Problem: –no direct mapping between switches and corresponding lamps

© 2003 Matthias Rauterberg25 Design of Door Handles (1)

© 2003 Matthias Rauterberg26 Design of Door Handles (2) Open-pull Open-push

© 2003 Matthias Rauterberg27 Screenshot from Kai Krause's Photo Soap

© 2003 Matthias Rauterberg28 Mac example of affordances

© 2003 Matthias Rauterberg29 Feed-back information Feed-forward information

© 2003 Matthias Rauterberg30 The History of Usability Definitions DIN part 8 (1988) EC directive 90/270/EEC (1990) ISO 9241 part 10 (1996) suitability for the task self-descriptiveness conformity with user expectations controllability error robustness suitability (activity adapted) feedback about system states appropriate format and pace of information presentation information and instruction of ease of use applicable to hearing and participation of suitability for the task self-descriptiveness conformity with user expectations suitability for learning suitability for individualization controllability error tolerance

© 2003 Matthias Rauterberg31 Mapping form to expertise

© 2003 Matthias Rauterberg32 Media selection and combination

© 2003 Matthias Rauterberg33 Examples for media design

© 2003 Matthias Rauterberg34 Ideas of Edward Tufte

© 2003 Matthias Rauterberg35 Literature map — foundations of quantitative graphics

© 2003 Matthias Rauterberg36 Literature map — automated design of graphics

© 2003 Matthias Rauterberg37 Literature map — scientific visualization concepts

© 2003 Matthias Rauterberg38 Why Metaphors...

© 2003 Matthias Rauterberg39 What is a Metaphor?

© 2003 Matthias Rauterberg40 Wellknown Metaphors...

© 2003 Matthias Rauterberg41 A Method for Metaphor generation / elicitation

© 2003 Matthias Rauterberg42 GUI versus NUI/TUI: interaction models Ullmer & Ishii, 2000 model controlview INPUTOUTPUT physical digital model control Non graspable representation graspable representation INPUT / OUTPUT

© 2003 Matthias Rauterberg43 Channel Tool Substitute long time ago2000 history Design Metaphors

© 2003 Matthias Rauterberg44 Trend in Interface Design

© 2003 Matthias Rauterberg45 Design Styles time mechanical style electronic style mechatronic style

© 2003 Matthias Rauterberg46 Design Forms time mechanical style electronic style mechatronic style active forms (smart memory alloys) given forms (ubiquituous computing) channel forms (e.g. PC, TV, Radio, etc) connected forms (ambient intelligence) dedicated form (e.g. typewriter, etc)

© 2003 Matthias Rauterberg47 Interaction Props with Active Form unloaded stateloaded stateNitinol tubes