From Function to Form
Matthias Rauterberg
Department Industrial Design
Technical University Eindhoven
Separation FORM from CONTENT
Scott McCloud (1993) Understanding Comics.
© 2003 Matthias Rauterberg
2
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 Rauterberg
http://www.aber.ac.uk/media/Documents/S4B/semiotic.html
3
Applied Semiotics
http://users.bestweb.net/~sowa/peirce/ontometa.htm
© 2003 Matthias Rauterberg
4
The function-form mapping problem
implemented
functions
intended
semantic
DMM := designer’s mental model
© 2003 Matthias Rauterberg
perceivable
user
interface
forms
perceived
semantic
UMM := user’s mental model
5
What is User-System Interaction about?
Working domain
Goal:
Actual Performance
=>
Desired Performance
Working system
User[s]
© 2003 Matthias Rauterberg
system
6
The interface architecture
application
manager
am
user
i/o
interface
application
dialog
dm
organisation
i / o manager
dialog manager
organisation
socio-technical system
© 2003 Matthias Rauterberg
7
Three different function types
Secondary functions
[dialog manager]
Primary functions
[application manager]
Tertiary
functions
[dialog
manager]
Application object(s)
© 2003 Matthias Rauterberg
8
The function space
function space
FS
perceptible functions
PF
PFs of the
dialog
manager
PDF
δ
PFs of the
application
manager
PAF
hidden functions
HF
HFs of the
dialog
manager
HDF
HFs of the
application
manager
HAF
α
set of all possible
function representations
RF
© 2003 Matthias Rauterberg
9
Information types
static
physical
dynamic
static
States
descriptive
relationships
spatial
person sleeping
features of a computer
similarity between twins
dimensions of a room
discrete action
continuous action
events
procedural
causal
switch light on
ski turn
start of a race
repair photocopier
how an engine works
states
descriptive
relationships
values
evidence is uncertain
person’s belief
classes of religious belief
prime numbers
discrete action
continuous action
procedural
causal
choosing to agree/disagree
monitoring success
diagnosing a fault
explanation of gravity
conceptual
dynamic
© 2003 Matthias Rauterberg
10
The three important mappings
User’s world
device
pixel world
semantic
function-1
function-2
function-3
…
function-n
© 2003 Matthias Rauterberg
11
Button-Function Mapping (1)
Recommended Controls for Functions
Function Category
Control
Selecting mutually exclusive options
Selecting non-exclusive options
Performing an action
Selecting an item from a set
Entering or viewing large amounts
of information at the same time
Setting attribute values
Radio buttons
Check boxes
Command buttons
List boxes or drop-down list boxes
© 2003 Matthias Rauterberg
Tables
Text-entry fields
12
Button-Function Mapping (2)
Examples from
http://edocs.bea.com/wlintegration/v2_1/devplug/appgui.htm
© 2003 Matthias Rauterberg
13
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 Rauterberg
14
An Icon Set for Different Sports
Exercise:
try to find out the
different kind of sport
represented by each
icon.
© 2003 Matthias Rauterberg
15
An Icon Set for a Way-finding System
© 2003 Matthias Rauterberg
16
The Meaning of Icons
© 2003 Matthias Rauterberg
•
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]
17
The Icon Set for Marshalling Signals
© 2003 Matthias Rauterberg
•
[ 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.
18
Redesign of Icons (1)
• Design Principle:
– avoid excessive
detail in icon design.
•
© 2003 Matthias Rauterberg
[see Deborah J. Mayhew, Principles and
Guidelines in Software User Interface Design
(1992) pp.316-331]
19
Redesign of Icons (2)
© 2003 Matthias Rauterberg
•
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]
20
Affordances introduced by Gibson
© 2003 Matthias Rauterberg
21
The Perceptual Prototype
• Which shape represents the most typical bird?
© 2003 Matthias Rauterberg
22
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 Rauterberg
23
Design of Light Switch Panels
•
Problem:
– no direct mapping
between switches and
corresponding lamps
© 2003 Matthias Rauterberg
24
Design of Door Handles (1)
© 2003 Matthias Rauterberg
25
Design of Door Handles (2)
Open-pull
© 2003 Matthias Rauterberg
Open-push
26
Screenshot from Kai Krause's Photo Soap
© 2003 Matthias Rauterberg
27
Mac example of affordances
© 2003 Matthias Rauterberg
28
the complete action cycle
task(s)
Feed-back
information
goal-, subgoal-setting
Feed-forward
information
planning of execution
feedback
control of
action
selection of means
mental operation
synchronisation
in space
physical operation
© 2003 Matthias Rauterberg
synchronisation in time
29
The History of Usability Definitions
DIN 66 234
part 8
(1988)
EC directive
90/270/EEC
(1990)
ISO 9241
part 10
(1996)
suitability for the task
suitability (activity adapted)
suitability for the task
self-descriptiveness
feedback about system states
self-descriptiveness
appropriate format and pace
of information presentation
conformity with user
expectations
conformity with user
expectations
information and instruction of
suitability for learning
ease of use applicable to
suitability for
individualization
hearing and participation of
controllability
controllability
error robustness
error tolerance
© 2003 Matthias Rauterberg
30
Mapping form to expertise
Benefit
visual rperesentation
high
concrete
representation
textual
representation
low
low
high
knowledge and experiences in application domain
© 2003 Matthias Rauterberg
31
Media selection and combination
Information 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
© 2003 Matthias Rauterberg
32
Examples for media design
•
concrete
representational
abstract
picture, e.g.
speed –> speedometer,
e.g.
symbol, e.g.
danger –> alarm flasher,
e.g.
blue light of a police car
visual
•
signified
•
verbal
speech, e.g.
"Stop the machine!"
speech, e.g.
"Attention, please!"
•
spatial
onomatopoeia and mimic,
e.g. event generated
sound pattern
tone, e.g.
beep-beep-beep…
auditory
© 2003 Matthias Rauterberg
33
Ideas of Edward Tufte
© 2003 Matthias Rauterberg
34
Literature map — foundations of quantitative graphics
© 2003 Matthias Rauterberg
http://www1.cmis.csiro.au/matthew.hutchins/thesis/Thesis.pdf
35
Literature map — automated design of graphics
© 2003 Matthias Rauterberg
http://www1.cmis.csiro.au/matthew.hutchins/thesis/Thesis.pdf
36
Literature map — scientific visualization concepts
© 2003 Matthias Rauterberg
http://www1.cmis.csiro.au/matthew.hutchins/thesis/Thesis.pdf
37
Why Metaphors...
domain knowledge
metaphorical description
common sense knowledge
basic concepts common sense
© 2003 Matthias Rauterberg
domain specific
38
What is a Metaphor?
"The rock is getting brittle with age."
geological expert
literal interpretation
professor emeritus
metaphorical interpretation
[Ortony, 1979; Lakoff & Johnson, 1980; Kittay, 1984]
© 2003 Matthias Rauterberg
39
Wellknown Metaphors...
desktop
geographical
information system
(GIS)
office
room
space
euclidean
- virtual 3D
symbolic
- link structure
semantic ?
concept ?
lay out ?
© 2003 Matthias Rauterberg
40
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
© 2003 Matthias Rauterberg
41
GUI versus NUI/TUI: interaction models
Ullmer & Ishii, 2000
INPUT / OUTPUT
INPUT
OUTPUT
physical
digital
control
control
view
graspable
representation
Non graspable
representation
model
model
© 2003 Matthias Rauterberg
42
Design Metaphors
Substitute
Channel
Tool
long time ago
© 2003 Matthias Rauterberg
2000
history
43
Trend in Interface Design
150
100
SW controls
HW controls
50
0
1970-1990
© 2003 Matthias Rauterberg
1990-2010
2010-
44
mechatronic style
Design Styles
electronic style
mechanical style
1900
© 2003 Matthias Rauterberg
2000
time
45
mechatronic style
Design Forms
active forms
(smart memory alloys)
connected forms
(ambient intelligence)
given forms
(ubiquituous computing)
electronic style
channel forms
(e.g. PC, TV, Radio, etc)
mechanical style
dedicated form
(e.g. typewriter, etc)
1900
© 2003 Matthias Rauterberg
2000
time
46
Interaction Props with Active Form
unloaded state
© 2003 Matthias Rauterberg
Nitinol tubes
loaded state
47