shape-change for zoomable tuis: opportunities and limits of a resizable slider

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



visual mag motor mag



visual mag full magmotor mag



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


graphical sliders ✔ ✘

22

Motivation



tangible sliders

23

Motivation



tangible sliders ✘ ✔

24

Motivation




resizable tangible sliders

25

Motivation




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:


• 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



XP1

31

experimental plan

pointing pursuing



XP1 XP2

32

experimental plan

pointing pursuing



XP1 XP2same

prototype33

Prototype

34

Prototype

35

resolution: 2822 dpi

Benefit of Multiple Sizes: Experiment 1


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


difficulty of the task

scale of the slidermovement time error rate

2cm/96px

4cm/192px

8cm/384px

2 (easy)

3 4 5 (difficult)

42


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


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

46

-0.98s

2 3 4 5


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


Erro

r rat

e

0.0

0.2

0.4 2cm/96px

4cm/192px8cm/384px

48

2 3 4 5


Erro

r rat

e

0.0

0.2

0.4 2cm/96px

4cm/192px8cm/384px

49

-26%

2 3 4 5


Erro

r rat

e

0.0

0.2

0.4 2cm/96px

4cm/192px8cm/384px

50

-26% +6cm +288px

51

2 3 4 5


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


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


57

4 px

Small slider (2cm/96px) Resizable slider

1 px

2 px

4 px

easy

difficult


resize so that size of targetis constant


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 targetchanges



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 targetchanges


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


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


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


Med

ian

erro

r (%

of s

lider

's ra

nge)

04


67

3 9 18 30


Med

ian

erro

r (%

of s

lider

's ra

nge)

04


68

3 9 18 30


Med

ian

erro

r (%

of s

lider

's ra

nge)

04


69

3 9 18 30

2%

6%


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%


Med

ian

erro

r (%

of s

lider

's r

ange

)

4%


Large slider

y = a×bx + c

Regression

71

3 9 18 30

2%

6%


Med

ian

erro

r (%

of s

lider

's r

ange

)

4%


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%


Med

ian

erro

r (%

of s

lider

's r

ange

)

4%


Large slider

if too often, small slider better

than resizable

73

3 9 18 30

2%

6%


Med

ian

erro

r (%

of s

lider

's r

ange

)

4%


Large slider

if not too often, resizable better than small slider

74

3 9 18 30

2%

6%


Med

ian

erro

r (%

of s

lider

's r

ange

)

4%


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


resize resize resize resizeresize


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



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



2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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?


2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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?


2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

81

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

Two pointing tasks:

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

82

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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


Mov

emen

t tim

e (s

)

0.0

1.0

2.0 2cm/96px

4cm/192px8cm/384px

2 3 4 5


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/

shape-change for zoomable tuis: opportunities and limits of a resizable slider

Science