shape-change for zoomable tuis: opportunities and limits of a resizable slider
Post on 16-Apr-2017
187 Views
Preview:
TRANSCRIPT
Shape-Change for Zoomable TUIs: A Resizable Slider
Céline Coutrix Cédric Masclet
2
Sliders for continuous adjustment of parameters
graphical sliders
3
graphical sliders
4
graphical sliders
Zoom out: footprint
5
graphical sliders
Zoom in: performance
6
motor and visual zooming is the best
Chapuis and Dragicevic 20117
visual mag
motor and visual zooming is the best
Chapuis and Dragicevic 20118
visual mag motor mag
motor and visual zooming is the best
Chapuis and Dragicevic 20119
visual mag full magmotor mag
motor and visual zooming is the best
Chapuis and Dragicevic 201110
visual mag full magmotor mag zoom
motor and visual zooming is the best
Chapuis and Dragicevic 201111
visual mag full magmotor mag zoom
motor and visual zooming is the best
Chapuis and Dragicevic 201112
visual mag full magmotor mag zoom
motor and visual zooming for sliders
13
?
resizable should be beneficial
Ability to compromise between footprint and performance
14
15
tangible sliders bring performance
Jansen et al. 2012Tuddenham et al. 2010Weiss et al. 2009Fitzmaurice and Buxton 1997
http://palettegear.com/
tangible sliders bring performance
16
restricted workspace
17
18
restricted workspace: output
Khalilbeigi et al. 2011
varying workspace: continuously resizable display
19
Resizable tangible sliders
20
Motivation
resizability tangibility
graphical sliders
21
Motivation
resizability tangibility
graphical sliders ✔ ✘
22
Motivation
resizability tangibility
graphical sliders ✔ ✘
tangible sliders
23
Motivation
resizability tangibility
graphical sliders ✔ ✘
tangible sliders ✘ ✔
24
Motivation
resizability tangibility
graphical sliders ✔ ✘
tangible sliders ✘ ✔
resizable tangible sliders
25
Motivation
resizability tangibility
graphical sliders ✔ ✘
tangible sliders ✘ ✔
resizable tangible sliders ✔ ✔
26
Research questions
Resizable tangible sliders • Benefit ?
• Drawback ?
27
Research questions
• Benefit of Multiple Sizes:
How much more efficient are users with a large slider than a small slider?
• Drawback of resizing:
What is the drawback of the additional manipulation for resizing?
28
Research questions
• Benefit of Multiple Sizes:
How much more efficient are users with a large slider than a small slider?
• Drawback of resizing:
What is the drawback of the additional manipulation for resizing?
XP1
XP2
29
experimental plan
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
30
experimental plan
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
XP1
31
experimental plan
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
XP1 XP2
32
experimental plan
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
XP1 XP2same
prototype33
Prototype
34
Prototype
35
resolution: 2822 dpi
Benefit of Multiple Sizes: Experiment 1
How much more efficient are users with a large slider than a small slider?
36
37
cursor
target
Task: pointing with a tangible slider at a target displayed on a distant screen
38
2 cm
96 px 24.64 mm
39
4 cm
192 px 49.28 mm
×2
40
8 cm
384 px 98.56 mm
×4
41
Constant Control-Display gain
×1 ×2 ×4
2/96 = 4/192 = 8/384
Benefit of Multiple Sizes: Experiment 1
difficulty of the task
scale of the slidermovement time error rate
2cm/96px
4cm/192px
8cm/384px
2 (easy)
3 4 5 (difficult)
42
Benefit of Multiple Sizes: Experiment 1
D = 30 px,W = {10, 4, 2, 1} px
D = 60 px,W = {20, 9, 4, 2} pxdifficulty of the task
scale of the slidermovement time error rate
2cm/96px
4cm/192px
8cm/384px
2 (easy)
3 4 5 (difficult)
43
×2×4
Benefit of Multiple Sizes: Experiment 1
44
• 12 right-handed participants (6 female) aged from 21 to 42 years old
mean = 30
stdev = 6
• 2880 trials 12 participants
3 scales
4 widths * 2 distances
10 repetitions of each task
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
45
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
46
-0.98s
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
47
-0.98s +6cm +288px
2 3 4 5
Index of Difficulty (easy to difficult)
Erro
r rat
e
0.0
0.2
0.4 2cm/96px
4cm/192px8cm/384px
48
2 3 4 5
Index of Difficulty (easy to difficult)
Erro
r rat
e
0.0
0.2
0.4 2cm/96px
4cm/192px8cm/384px
49
-26%
2 3 4 5
Index of Difficulty (easy to difficult)
Erro
r rat
e
0.0
0.2
0.4 2cm/96px
4cm/192px8cm/384px
50
-26% +6cm +288px
51
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
Zoomed in is better
Zoomed in is better
not possible when workspace is restricted
52
Drawback of resizing: Experiment 2
53
Impact of resizing on performance
Drawback of resizing: Experiment 2
54
resiz
eresizeresiz
e Need to measurethe limit of usability
?
resizeresizeresizeresizeresiz
e
resize
resiz
ere
size
resiz
ere
size
resizeresizeresizeresizeresize
resizeresizeresizeresize
resize resize resize resizeresize
resizeresizeresizeresize
resi
zere
size
resiz
ere
size
resize
resize
resizeresizeresize
Task 1: pursuing
55
moving target
cursorpursuit error
Task 1: pursuing moving target when difficulty changes
56
Small slider (2cm/96px)
1 px
2 px
4 px
easy
difficult
size of target changes
Task 1: pursuing moving target when difficulty changes
57
4 px
Small slider (2cm/96px) Resizable slider
1 px
2 px
4 px
easy
difficult
size of target changes
resize so that size of targetis constant
Task 1: pursuing moving target when difficulty changes
58
4 px
Small slider (2cm/96px) Resizable slider Large slider
(8cm/384px)
1 px
2 px
4 px 4 px
8 px
16 px
easy
difficult
size of target changes
size of targetchanges
resize so that size of targetis constant
Task 1: pursuing moving target when difficulty changes
59
4 px
Small slider (2cm/96px) Resizable slider Large slider
(8cm/384px)
1 px
2 px
4 px 4 px
8 px
16 px
easy
difficult
size of target changes
size of targetchanges
resize so that size of targetis constant
Task 2: resizing
60
target size
actual sizesize error
Task 2: resizing
61
Drawback of resizing: Experiment
interval of difficulty’s change (s)
Slider deviceperformance(pursuit error)
Small(2cm/96px)
Resizable
Large(8cm/384px)
3 (difficult)
9 18 30 (easy)
62
Drawback of resizing: Experiment
63
• 9 right-handed participants (5 female) aged from 21 to 49 years old
mean = 31
stdev = 8
• Around 5h30 of trials 9 participants
3 sliders
4 intervals of difficulty’s change
2 repetitions of each 90 seconds trial
Drawback of resizing: Experiment
interval of difficulty’s change (s)
performance (pursuit error)
3 (difficult)
9 18 30 (easy)
64
= median of each frame’s error
65
3 9 18 30
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's ra
nge)
04
8 Large sliderResizable sliderSmall slider
66
3 9 18 30
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's ra
nge)
04
8 Large sliderResizable sliderSmall slider
67
3 9 18 30
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's ra
nge)
04
8 Large sliderResizable sliderSmall slider
68
3 9 18 30
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's ra
nge)
04
8 Large sliderResizable sliderSmall slider
69
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
y = a × x + b ≃ bMedian error is constant
Regression
70
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
y = a×bx + c
Regression
71
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
The larger the slider, the better the performance
but the bigger the footprint
1.75 larger
72
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
if too often, small slider better
than resizable
73
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
if not too often, resizable better than small slider
74
3 9 18 30
2%
6%
Interval of difficulty change (s)
Med
ian
erro
r (%
of s
lider
's r
ange
)
4%
8%Resizable sliderSmall slider
Large slider
if no room available,resize
only if less often than every ~9 seconds
75
resiz
eresizeresiz
e
~9s
resizeresizeresizeresizeresiz
e
resize
resiz
ere
size
resiz
ere
size
resizeresizeresizeresizeresize
resizeresizeresizeresize
resize resize resize resizeresize
resizeresizeresizeresize
resi
zere
size
resiz
ere
size
resize
resize
resizeresizeresize
Resizing brings benefits If less often than every ~9 seconds
76
from video analysis: mean resizing time = 0.7s 95%CI [0.6s, 0.8s] with no impact of amplitude
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
77
from video analysis: mean resizing time = 0.7s 95%CI [0.6s, 0.8s] with no impact of amplitude
mean movement times for each ID and size
pointing pursuing
mouse impact of M+V zooming
slider impact of M+V zooming impact of resizing
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
78
0
0.5
1
1.5
2
2.5
Resizing time (s)
mean resizing timemean movement times for each ID and size
One pointing task
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
79
0
0.5
1
1.5
2
2.5
Resizing time (s)
One pointing task: Point with small?
mean resizing timemean movement times for each ID and size
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
80
0
0.5
1
1.5
2
2.5
Resizing time (s)
One pointing task: Point with small? Enlarge, then point?
mean resizing timemean movement times for each ID and size
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
81
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
Two pointing tasks:
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
82
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
Two pointing tasks: Point with small?
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
83
0
0.5
1
1.5
2
2.5
Resizing time (s)
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
Two pointing tasks: Point with small? Enlarge, then point?
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
84
Resize before several difficult pointing tasks
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px
2 3 4 5
Index of Difficulty (easy to difficult)
Mov
emen
t tim
e (s
)
0.0
1.0
2.0 2cm/96px
4cm/192px8cm/384px 0
0.5
1
1.5
Resizing time (s)
Zoomable tangible sliders
Bring both benefits of performance+footprint (if not resized too often)
85
Future WorkForm-factor
Other tangible controllers
Impact on current HCI models
86
Shape-Change for Zoomable TUIs: A Resizable Slider
with C. Masclet
Céline Coutrix http://iihm.imag.fr/coutrix/
top related