Deformable and shape-
changing user interfaces
Kasper Hornbæk, University of Copenhagen
apple.com
wallviz.dk
Samsung, CES 2013
PaperPhone, CHI 2012
Samsung, CES 2014
MorePhone
MorePhone, CHI 2013
PneUI, UIST 2013
PneUI, UIST 2013
Rasmussen et al., CHI 2012
44 papers on shape change
44 papers on shape change
Little
UX
ghost-fet.org
ghost-fet.org
Dr. Kasper Hornbæk Dr. Esben W. Pedersen Giovanni M. Troiano John Tiab
User
Experience
Technology Design
GHOST
User
Experience
Technology Design
GHOST
Study 1:
Guessability of Gestures
Study 2:
Crowd-Sourced Reactions
Study 3:
Repository Grid Evaluation
Troiano, Pedersen & Hornbæk (AVI 2014)
Gestures were recorded with four cameras
Gestures were recorded with four cameras
10 page coding manual
Many%varia)ons%
Influence o
Study 1:
Guessability of Gestures
Study 2:
Crowd-Sourced Reactions
Study 3:
Repository Grid Evaluation
Pedersen, Subramanian & Hornbæk (CHI 2014)
Pedersen, Subramanian & Hornbæk (CHI 2014)
Shape-changing Handheld
Shape-changing Handheld
Parameters of shape change
1.5x
3x
5x
pi
-pi/2
pi/2
15 mm
20 mm
60 mm
n = 3
n = 8
n = 14
n = 1
n = 2
n = 3
towards (18 mm)
away (18 mm)
13 mm/s
0 1 2 3 64 5
53 mm/s
0 1 2 3 64 5
Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend
LowMediumHigh
Hemmert et al. Gomes et al.Roudaut et al.
Parameters of shape change
1.5x
3x
5x
pi
-pi/2
pi/2
15 mm
20 mm
60 mm
n = 3
n = 8
n = 14
n = 1
n = 2
n = 3
towards (18 mm)
away (18 mm)
13 mm/s
0 1 2 3 64 5
53 mm/s
0 1 2 3 64 5
Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend
LowMediumHigh
Hemmert et al. Gomes et al.Roudaut et al.
Parameters of shape change
1.5x
3x
5x
pi
-pi/2
pi/2
15 mm
20 mm
60 mm
n = 3
n = 8
n = 14
n = 1
n = 2
n = 3
towards (18 mm)
away (18 mm)
13 mm/s
0 1 2 3 64 5
53 mm/s
0 1 2 3 64 5
Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend
LowMediumHigh
Hemmert et al. Gomes et al.Roudaut et al.
Parameters of shape change
1.5x
3x
5x
pi
-pi/2
pi/2
15 mm
20 mm
60 mm
n = 3
n = 8
n = 14
n = 1
n = 2
n = 3
towards (18 mm)
away (18 mm)
13 mm/s
0 1 2 3 64 5
53 mm/s
0 1 2 3 64 5
Area Curvature Amplitude Zero-crossing Speed Tapering Corner bend
LowMediumHigh
Hemmert et al. Gomes et al.Roudaut et al.
Use scenarios
Notification Approach
Use scenarios
Notification Approach
187 participants
AttrakDiff2 Animacy SAM UC Specific
Zero crossing
Area
Curvature
Amplitude
Tapering
Corner bend
High
Low
PragmaticQuality
Zero crossing
Area
Curvature
Amplitude
Tapering
Corner bend
High
Low
PragmaticQuality
Structured
Simple
Practical
Predictable
PQ
Zero crossing
Area
Curvature
Amplitude
Tapering
Corner bend
High
Low
PragmaticQuality
Zero crossing
Tapering
Area
Curvature
Amplitude
Corner bend
High
Low
HedonicQuality
Zero crossing
Tapering
Area
Curvature
Amplitude
Corner bend
High
Low
HedonicQuality
Captivating
Stylish
Premium
Creative
HQ
Corner Bend
27 %
less urgent than the
three most urgent
shape changes
Corner Bend
27 %
less urgent than the
three most urgent
shape changes
Corner Bend
27 %
less urgent than the
three most urgent
shape changes
Amplitude Zero crossingArea
Calm
Aroused
Pleasent
Unpleasant
III
III IV
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
Area
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
Amplitude
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
Amplitude
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
Corner bend
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
Corner bend
corner bend
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
corner bend
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
corner bend
tapering
curvature
zero crossing
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
corner bend
tapering
curvature
zero crossing
Calm
Aroused
Pleasent
Unpleasant
III
III IV
alarmed
tense
angryafraid
annoyed
distressed
frustrated
miserable
sad
gloomy
depressed
bored
droopy
tired sleepy
relaxed
satisfied
at ease
content
serene
glad
pleased
happy
delighted
excited
astonished
aroused
area
amplitude
corner bend
tapering
curvature
zero crossing
Study 1:
Guessability of Gestures
Study 2:
Crowd-Sourced Reactions
Study 3:
Repository Grid Evaluation
Kwak, Markopolos, Bruns & Hornbæk (DIS 2014)
Bootcamp I: Master
Students Industrial Design
Goal:
Define
interaction
possibilities and
pilot workshop
approach
Results:
10 prototypes
and system output. However,
duct, such as its shape, change
hese changes through a process
uct that changes its shape can
feedback loop playing on the
ities, offering a dynamic
on of the user and the reaction
has been named interactive
pective on designing shape-
aluating emerging interactions
e.
n supported by manipulation,
dium sized (hand scale) objects.
[28] provided a systematic
ng hand movements and
ducted in the context of the
Figure 1. First generation of shape-changing interfaces,
exploring dynamic orientation, form, volume, texture, and
spatiality in one and two degrees of freedom. The bottom-
COGNITIVE PSYCHOLOGY 19, 342-368 (1987)
Hand Movements: A Window into Haptic
Object Recognition
SUSAN J. LEDERMAN
Queen’s University at Kingston, Ontario, Canada
AND
ROBERTA L. KLATZKY
University of California at Santa Barbara
Two experiments establish links between desired knowledge about objects and
hand movements during haptic object exploration. Experiment 1 used a match-
to-sample task, in which blindfolded subjects were directed to match objects on a
particular dimension (e.g., texture). Hand movements during object exploration
were reliably classified as “exploratory procedures,” each procedure defined
by its invariant and typical properties. The movement profile, i.e., the distribu-
tion of exploratory procedures, was directly related to the desired object knowl-
edge that was required for the match. Experiment 2 addressed the reasons for the
specific links between exploratory procedures and knowledge goals. Hand move-
ments were constrained, and performance on various matching tasks was as-
sessed. The procedures were considered in terms of their necessity, sufficiency,
and optimahty of performance for each task. The results establish that in free
exploration, a procedure is generally used to acquire information about an object
property, not because it is merely sufficient, but because it is optimal or even
necessary. Hand movements can serve as “windows,” through which it is pos-
sible to learn about the underlying representation of objects in memory and the
processes by which such representations are derived and utilized. o 1987 Academic
Press. Inc.
When we feel extremely helpless in a situation, we commonly say,
“My hands are tied!” Indeed, it is hard to imagine a world in which we
cannot feel the soft fur of a kitten or even tie our shoelaces. Yet, psy-
chology has often portrayed the hand as a second-class citizen. Research
The research reported in this paper was supported by the Natural Sciences & Engineering
Research Council of Canada (Grant A9854 awarded to SJL) and by the National Science
Foundation (Grant BNS84-21340 awarded to RLK). Reprint requests may be sent to SJL,
Psychology, Queen’s University, Kingston, Ontario, Canada K7L 3N6 or to RLK, Psy-
chology, University of California, Santa Barbara, CA 93106. Order of authorship does not
reflect relative contribution; both authors contributed equally to the work. We thank An-
drew Currie for his considerable contribution; he helped to prepare the stimulus objects, ran
the experiments, scored some of the videotapes for our reliability checks, collated and
analyzed much of the data, and provided valuable comments in general discussion.
342
OOlO-0285/87$7.50
Copyright 0 1987 by Academic Press, Inc.
All rights of reproduction in any form reserved.
Design Interaction Behaviour
Repertory Grid Study
These two seem
insecure
This one seems
determined
Insecure Determined
Constructs
Constructs
Friendly/Distant
Indifferent/Attentive
Honest/Underhand
Random/Predictable
Sturdy/Fragile
Mechanical/Organic
Cautious/Ambitious
Insecure/Determined
Unconcerned/InsecureVulnerable/Strong
Surly/Sensitive
Rebellious/Cooperative
Stubborn/Compliant
Obedient/Recalcitrant
Open/Mysterious
Boisterous/Introvert
Social/Introvert
Skittish/Affectionate
Frightened/Defensive
Aggressive/Coy
Weak/Powerful
Playful/Calm
Restful/Hasty
Downhearted/HopefulHappy/Sad
Future Work
- How do we map deformation to (sound) parameters?
- Participatory Design with 10 musicians as co-
designers.
Deformable UI for real people
Workshops continued
Deformable and shape-
changing user interfaces
Kasper Hornbæk, University of Copenhagen

Deformable and Shape Changing Interfaces