Slides for the Information Visualisation unit of my 2013 online course on HCI – part 3 https://hcibook.com/hcicourse/2013/unit/10-physicality * study the old to design the new – exposing the latent lessons in well-designed products * understanding the multiple feedback loops in digital devices with physical form * model physical device states ofthe device ‘unplugged' using physigrams

1. designing for physicality
everyday devices to physigrams
Alan Dix
www.alandix.com
www.physicality.org/TouchIT/

2. levels of fidelity in design
from paper prototype
to working mock-up

3. study the old to design the new
• look at ordinary consumer devices
– washing machine, light switch, personal stereo
• why?
– we are used to using them ourselves
– they have been ‘tested’ by the marketplace
– they embody the experience of designers

4. half empty?
other places …
– Norman – DOET/POET
– Thimbleby – FSM for video, microwave
often used as HCI strawman
– emphasise for design flaws
we are looking for the good lessons
– how mundane devices exploit physicality

6. multiple feedback loops
physical–logical
mappings
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
(ii) physical effects
(iii) virtual effects
show message,
turn light on
motors, effectors
(a) physical manipulation (i) sensed inputs
logical
system
A B
C
(c) felt feedback
(d)‘electronic’ feedback
(b) perceived state
see message on screen
resistance,
? physical sounds ?
turn knob, press button
effects on
logical objects
device
physical
environment
D
(iv) physical effects
controlling
external things
(e) physical feedback
notice light is on,
kettle boils
semantic
feedback

7. multiple feedback loops
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
A
(c) felt feedback
(b) perceived state
(a) physical manipulation
turn knob, press button
device

8. multiple feedback loops
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
logical
system
A
(ii) physical effects
motors, effectors
(i) sensed inputs
B
(c) felt feedback
physical–logical
mappings
(b) perceived state
(a) physical manipulation
turn knob, press button
device

9. multiple feedback loops
physical–logical
mappings
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
(ii) physical effects
motors, effectors
(a) physical manipulation (i) sensed inputs
logical
system
A B
(iii) virtual effects
show message,
turn light on
C
(c) felt feedback
(b) perceived state
(d)‘electronic’ feedback
see message on screen
resistance,
? physical sounds ?
turn knob, press button
device

10. multiple feedback loops
physical–logical
mappings
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
(ii) physical effects
(iii) virtual effects
show message,
turn light on
motors, effectors
(a) physical manipulation (i) sensed inputs
logical
system
A B
C
(c) felt feedback
(d)‘electronic’ feedback
(b) perceived state
see message on screen
resistance,
? physical sounds ?
turn knob, press button
effects on
logical objects
device
physical
environment
D
(iv) physical effects
controlling
external things
(e) physical feedback
notice light is on,
kettle boils

11. multiple feedback loops
the GUI fallacy … semantic feedback is NOT enough
physical–logical
mappings
physical aspects
virtual aspects
screens,
lights,
buzzers, speakers
(ii) physical effects
(iii) virtual effects
show message,
turn light on
motors, effectors
(a) physical manipulation (i) sensed inputs
logical
system
A B
C
(c) felt feedback
(d)‘electronic’ feedback
(b) perceived state
see message on screen
resistance,
? physical sounds ?
turn knob, press button
effects on
logical objects
device
physical
environment
D
(iv) physical effects
controlling
external things
(e) physical feedback
notice light is on,
kettle boils
semantic
feedback
knobs, dials,
buttons, location,
orientation

12. multiple feedback loops
physical–logical
mappings
physical aspects
knobs, dials,
buttons, location,
orientation
virtual aspects
screens,
lights,
buzzers, speakers
(ii) physical effects
(iii) virtual effects
show message,
turn light on
motors, effectors
(i) sensed inputs
logical
system
B
C
(d)‘electronic’ feedback
see message on screen
resistance,
? physical sounds ?
(a) physical manipulation
A
(c) felt feedback
(b) perceived state
turn knob, press button
effects on
logical objects
device
physical
environment
D
(iv) physical effects
controlling
external things
(e) physical feedback
notice light is on,
kettle boils
semantic
feedback
the GUI fallacy … semantic feedback is NOT enough

14. model physical device states
the device ‘unplugged’
the device ‘unplugged’
switch
UP
DOWN
user pushes
switch up
and down
two visible …
and feelable …
states
physigram

15. model logical system
light
OFF
ON
two states
of the system

16. physical–logical mapping
light
OFF
ON
switch
UP
DOWN
user pushes
switch up
and down

17. exposed state
particularly easy to understand and use
but not always 1–1
light
OFF
ON
switch
UP
DOWN
user pushes
switch up
and down
mapping 1–1

18. controlled state

19. compliant interaction
(1) system state visible through control
(2) system and user have similar effects
press
down
UP
DOWN
press
up
kettle switch
system
down
system
downBOILING
Temp
< 100
POWER
OFF
POWER
ON
system state

20. 20
bounce-back button
OUT
IN
user pushes
switch in
bounce
back
computer
OFF
ON
(a) (a)
switch
(a)
(z)

21. 21
initial pressure on exposed state switch
UP
DOWN
PART
DOWN
PART
UP
press
down
press
down
press
up
press
up
switch
‘gives’
switch
‘gives’
press
down
UP
DOWN
press
up
shorthand

22. time-dependent devices (continued
pressure)
22
CENTRE
IN
LEFT
IN
RIGHT
IN
twist
left
twist
right
CENTRE
OUT
LEFT
OUT
RIGHT
OUT
twist
left
twist
right
pull out
pull out
pull out
minidisk

23. 23
CENTRE
LEFT
RIGHT
twist left
(down)
twist right
(up)
1
down
minidisk knob
2
3
 (up)
 (down)
track selected
17
up
up
up
up
down
down
down

24. give it to designer