snap-and-go

helping users align objectswithout the modality of traditional snapping

patrick baudisch

ed cutrellken hinckleyadam eversolemicrosoft research

CHI 2005

not a demo

snapping gets in the way

snapping gets in the way

kind of a solution

• hold down <shift> key to activate• hold down <alt> key to deactivate

• problems1. <shift>, <alt>, <ctrl> may be in use (Adobe)2. more snapping functions than qualifier keys

(Visio)3. target audience may not know

(who knows that <alt>tab switches windows?)in the real world 18% do

lots of UI for turning off

a

now a demo

traditional snapping

inaccessible

snap location

inaccessible

snap-and-gosnap location

enlarged inmotor space only

related work

Alignment techniques

Alignment techniques

Alignment techniques• Constraints Thinglab [Borning, CHI 86]

Alignment techniques

• Snap dragging [Bier, SIGGRAPH 86]

Alignment techniquesAlignment Stick [Raisamo & Räihä, UIST 96]

Alignment techniques

• The CAGE [Baudisch, UIST 96]

Fuzzing with pointer speed

• Pseudo haptics [Lecuyer VR ’00]

Fuzzing with pointer speed• Sticky icons [Worden…, CHI 97]• Semantic pointing [Blanc, 04]• Object pointing [Guiard 04]

snap-and-goin 2D

basic snap-and-go building blocks

combine building blocks to make widgets

widget example

snap-and-go vs. sticky

and yes, it also works also for target acquisition

target

target

• vs. bubble cursor [Grossman, CHI 05]• selecting handles

vs. Bubble Cursor [CHI 05]

• bubble cursor can’t help selecting these handles

• snap-and-go can• because we insert

implementation

simplest code

snapTo(x, width, snapX) {

if (x >= snapX + width)

return x - width + 1;

if (x > snapX)

return snapX;

else return x;

}

“real” implementation

• written in C#

• rectangular “friction objects”• friction gradient of configurable direction and

strength• combine multiple friction objects

• algorithm• integrate friction along interpolated pointer path

ok, even if pointer jumps over a widget• track in subpixels to avoid accumulated error

user study

3 studies

snap-and-go compared to traditional snapping…

snap-and-go with distractors…

…in 1D study 1 study 2

…in 2D study 3

1D apparatus

user study apparatus

experimental design

• within subjects design• 2 x 4 x 4 (Snapping Technique x Attractor Width

x Target Distance)• 8 repetitions for each cell• Distances 100, 200, 400, and 800 pixels• Widths 5, 10, 18, and 34 pixels• recorded task completion time and error

• 9 participants

hypotheses

• snap-and-go faster than no snapping

• stronger attractors reduce task time

• snap-and-go slightly slower than traditional snapping

results: task time

No Attractor 5 10 18 340

0.5

1

1.5

2

2.5

Re

spon

se T

ime

(se

con

ds

± S

EM

)

Attractor Width (pixels)

Traditional Snapping

Snap-and-Go

fitts analysis of task time

0

0.2

0.4

0.6

0.8

1

1.2

1.4

1.6

1.8

2

0 1 2 3 4 5 6 7 8

Mov

emen

t Tim

e (s

econ

ds ±

SE

M)

Fitts Index of Difficulty

Traditional Snapping

Snap-and-Go

anecdote

• control condition != control condition

• We reran

2nd study: distractors

experimental design

• single distance• only two attractor widths• only snap-and-go (no traditional snapping) (2 x 2 x 2 x 2 x 2 x 2) (Target Attractor on x

Distractor 1 x Distractor 2 x Distractor 3 x Distractor 4 x Attractor Width)

• 4 repetitions for each cell• recorded task completion time and error

• 9 participants

results: task time

0 1 2 3 40

0.5

1

1.5

2

2.5

Re

spon

se T

ime

(se

con

ds

± S

EM

)

Number of Distractors

Width=10

Width=34

“Oh, I see, you don’t put any targets really close the light bulbs, because I could not reach them there”

study 3: 2D apparatus

4530

15

0

study 3: task 1

• within subjects• 2 x 4 x 4 (Snapping Technique x Attractor Width x

Approach Angle)• 8 repetitions for each cell• distance to the target was 200 pixels• approach angles were 0, 15, 30, and 45 degrees, • recorded task completion time and error

• 11 participants

results task 1

No Attractor 5 10 18 340

0.5

1

1.5

2

2.5

3

3.5

Re

spon

se T

ime

(se

con

ds

± S

EM

)

Attractor Width (pixels)

Traditional Snapping

Snap-and-Go

study 3: task 2 distracters

study 3: task 2

• within subjects• 2 x 2 x 2 x 2 x 2 x 2 (Target Attractor Vertical

x Target Attractor Horizontal x Distractor Vertical10 x Distractor Horizontal10 x Distractor Vertical60x Distractor Horizontal60

• 4 repetitions for each cell• recorded task completion time and error

• 11 participants

results task 2

No Target Attractor

1 Target Attractor

2 Target Attractors

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

Res

pons

e T

ime

(sec

onds

± S

EM

)

Number of Distractors (Vertical & Horizontal)10 2 3 4 10 2 3 4 10 2 3 4

discussion all 3 studies

• faster with snap-and-go than without• 138% in 1D• 231% in 2D

• as predicted slightly slower then traditional snapping• 3% in 1D• 14% in 2D

• fairly robust against distractors

lessons learned:placing attractor visuals

lessons learned:cartoon animation

conclusions: snap-and-go

• unlike traditional snappingdoes not require deactivation omit the deactivation interface

• allows deployment where complexity of deactivation interface would be prohibitive

contributions

1. manipulations of mouse gain can help align objects

2. extended technique to 2D by introducing guides that guide dragged objects to snap locations (plus and the bar widgets)

3. three user studies evaluating

• future work: extend snap-and-go to such as pen and touch input

read more & try out

patrickbaudisch.com/projects

thanks to VIBE

END

a cb

user study apparatus