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

From Function to Form

Matthias RauterbergDepartment Industrial Design

Technical University Eindhoven

© 2003 Matthias Rauterberg 2

Separation FORM from CONTENTScott McCloud (1993) Understanding Comics.

http://www.amazon.com/exec/obidos/tg/detail/-/0060953500/ref=lib_dp_TFCV/002-4137471-6053666?v=glance&s=books&vi=reader


The Semiotic Triangle

•Sense: the sense made of the sign; •Sign vehicle: the form of the sign; •Referent: what the sign 'stands for'.

http://www.aber.ac.uk/media/Documents/S4B/semiotic.html

http://www.amazon.com/exec/obidos/ASIN/0807843423/ref=nosim/fwsite1-20

http://www.amazon.co.uk/exec/obidos/ASIN/1874166552/semioticforbegin

http://www.amazon.co.uk/exec/obidos/ASIN/1874166552/semioticforbegin

http://www.amazon.com/exec/obidos/ASIN/0807843423/ref=nosim/fwsite1-20


Applied Semiotics

http://users.bestweb.net/~sowa/peirce/ontometa.htm


The function-form mapping problem

implementedfunctions

perceivable userinterfaceforms

intendedsemantic

perceivedsemantic

DMM := designer’s mental model UMM := user’s mental model


What is User-System Interaction about?

systemUser[s]

Working domain

Working system

Goal:Actual Performance=> Desired Performance


The interface architecture

useri/o

interface

dialog

application

application manager

dialog manager i / o manager

am

dm

organisation organisation

socio-technical system


Three different function types

Primary functions[application manager]

Secondary functions[dialog manager] Tertiary

functions[dialog manager]

Application object(s)


The function space

function space FS

perceptible functions PF

hidden functions HF

PFs of thedialog manager PDF

set of all possible function representations

RF

PFs of theapplication manager PAF

HFs of thedialog manager HDF

HFs of theapplication manager HAF


Information types

physical

conceptual

static

dynamic

static

dynamic

States person sleepingdescriptive features of a computerrelationships similarity between twinsspatial dimensions of a room

discrete action switch light oncontinuous action ski turnevents start of a raceprocedural repair photocopiercausal how an engine works

states evidence is uncertaindescriptive person’s beliefrelationships classes of religious beliefvalues prime numbers

discrete action choosing to agree/disagreecontinuous action monitoring successprocedural diagnosing a faultcausal explanation of gravity


The three important mappings

User’s world device pixel world semantic

function-1function-2function-3…function-n


Button-Function Mapping (1)Recommended Controls for Functions

Function Category Control

Selecting mutually exclusive options Radio buttonsSelecting non-exclusive options Check boxesPerforming an action Command buttonsSelecting an item from a set List boxes or drop-down list boxesEntering or viewing large amounts of information at the same time TablesSetting attribute values Text-entry fields


Button-Function Mapping (2)

Examples fromhttp://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm


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.


An Icon Set for Different Sports

Exercise:try to find out the different kind of sport represented by each icon.


An Icon Set for a Way-finding System


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]


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.


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]


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]


Affordances introduced by Gibson


The Perceptual Prototype

• Which shape represents the most typical bird?


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!


Design of Light Switch Panels

• Problem:

– no direct mapping between switches and corresponding lamps


Design of Door Handles (1)


Design of Door Handles (2)

Open-pull Open-push


Screenshot from Kai Krause's Photo Soap


Mac example of affordances


physical operation

feedback control of action

goal-, subgoal-setting

mental operation

task(s)

planning of execution selection of means

the complete action cycle

synchronisation in time

synchronisation in space

Feed-backinformation

Feed-forwardinformation


The History of Usability Definitions

DIN 66 234part 8 (1988)

EC directive90/270/EEC

(1990)

ISO 9241part 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


Mapping form to expertise

Benefit

knowledge and experiences in application domain

low high

textualrepresentation

visual rperesentation

concreterepresentation

high

low


Media selection and combinationInformation type Preferred media selection Example

Physical Realistic still or moving image Photo of a person

Conceptual Text or speech, designed image Explain sales policy

Descriptive Text, speech, realistic image Chemical properties

Spatial Realistic/designed image Diagram of a building

Value Text/tables/numeric list(s) Pressure reading

Relationship Designed images, graphs, charts Histogram of rainfall/month

Procedural Image series, text Evacuation instructions

Discrete action Still image Make coffee

Continuous action Moving image Monoeuvres while skiing

Events Sound, speech Fire alarm

States Still images, text Photo of weather conditions

Causal Still & moving image, text, speech Video of rainstorm causing flash flood


Examples for media design

representational abstract

visual

• concrete

• signified

picture, e.g.

symbol, e.g.

speed –> speedometer,e.g.

danger –> alarm flasher,e.g.blue light of a police car

auditory• verbal

• spatial

speech, e.g."Stop the machine!"

onomatopoeia and mimic,e.g. event generatedsound pattern

speech, e.g."Attention, please!"

tone, e.g.beep-beep-beep…


Ideas of Edward Tufte


Literature map — foundations of quantitative graphics

http://www1.cmis.csiro.au/matthew.hutchins/thesis/Thesis.pdf


Literature map — automated design of graphics



Literature map — scientific visualization concepts



Why Metaphors...

domain knowledge

common sense knowledge

metaphorical description

common sensebasic concepts domain specific


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


Wellknown Metaphors...

desktop

office

room

symbolic - link structure

geographical information system (GIS)

euclidean - virtual 3D

semantic ? concept ? lay out ?

space


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


GUI versus NUI/TUI: interaction modelsUllmer & Ishii, 2000

model

control view

INPUT OUTPUT

physical

digitalmodel

control Non graspablerepresentation

graspablerepresentation

INPUT / OUTPUT

http://www.media.mit.edu/

http://web.mit.edu/

http://tangible.media.mit.edu/projects/metaDESK/metaDESK.html


Channel

Tool

Substitute

long time ago 2000 history

Design Metaphors


Trend in Interface Design

0

50

100

150

1970-1990 1990-2010 2010-

SW controls

HW controls


Design Styles

time1900 2000

mechanical style

electronic style

mechatronic style


Design Forms

time1900 2000

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)


Interaction Props with Active Form

unloaded state loaded stateNitinol tubes