crossy: a crossing-based drawing application georg apitz & françois guimbretière hcil,...

CrossY:A Crossing-Based Drawing Application

Georg Apitz & François Guimbretière

HCIL, University of Maryland

francois@cs.umd.edu

People, Pens, and Tablet PC

The New Yorker

Illustration from Ken Hinckley presentation at Stanford

Typical setting for today’s interface

• Fixed stable environment, with a keyboard,

• Indirect interaction,

• High precision, stable pointing system

Typical Tablet PC use

• Portable, unstable environment, without a keyboard

• Direct interaction,

• Low precision aiming

• Empirical foundations• Use of strokes to cross target is more pen friendly

• Crossing is as efficient as point-and-click [Accot & Zhai, 2002]

• The basic interactor

• How expressive is it?

Why crossing?

CrossY

video

Previous work

• Theoretical basis• Steering Law, Trajectory-Based Tasks [Accot & Zhai 97-02]

• Limited scope examples• Toggle Map [Baudish 98]

• Lotus Notes: multiple e-mail selection

• Conceptual design• Visual Instruments: [Winograd & Guimbretière 98]

• Overloading• Gedrics: [Geißler 95]

Crossing based buttons

• Option box: stacked vertical targets• Reinforces the idea of mutually exclusive selections

• Check box: stacked diagonal targets• Allow for both single and multiple selections in one stroke

Scrolling

Line by line area

Page by page area

Absolute area

CrossY scrollbar

• Overloading simplify interactions• shorter distances to issue commands

• not as much precision necessary

CrossY scrollbar

• Overloading simplify interactions• shorter distances to issue commands

• not as much precision necessary

• Extending stroke for repeat• No need to wait for a timeout

Cursor control

• Cross to jump to an absolute position

Cursor control

• Cross to jump to an absolute position

Cursor control

• Cross to jump to an absolute position

• Near drag for coarse adjustment

Cursor control

• Cross to jump to an absolute position

• Near drag for coarse adjustment

Cursor control

• Cross to jump to an absolute position

• Near drag for coarse adjustment

• Far drag for fine adjustment• Similar toFineSlider [Masui 95]

• But one single stroke

Command composition

• From stroke-by-stroke interaction• borders are used to validate/cancel

Command composition

• From stroke-by-stroke interaction• borders are used to validate/cancel

• To multi-command stroke

Stroke as a scoping mechanism

• Stroke “carries” the information

StrokeObject

find width: med

find color: ??

find: ??

replace ??

Replace color:

??

replace width: ??

Stroke as a scoping mechanism

• Stroke “carries” the information

StrokeObject

find width: med

find color: red

find: ??

replace ??

Replace color:

??

replace width: ??

Stroke as a scoping mechanism

• Stroke “carries” the information

StrokeObject

find width: med

find color: red

find: true

replace ??

Replace color:

??

replace width: ??

Stroke as a scoping mechanism

• Stroke “carries” the information• No need to travel back to replace button

StrokeObject

find width: med

find color: red

find: true

replace true

Replace color:

blue

replace width: thin

Use of directionality

• Continuous find and replace

Use of directionality

• Continuous find and replace• Reverse direction for undo

A

difficult

case

Principles

• Based Auto-Completion idea

• Only unique prefixes are presented

• Selection always at the center

Selecting a file to open

• Open document /Papers04/ProofRite.pdf• In one stroke:

Discussion

• Space requirements• Similar to point-and-click

• Trade-off with command combination due to sloppiness

• Overloading vs. easy discovery• Consistency helps getting used to it

• Known in Windowing systems

• Fluid transition from novice to expert • Similar to SHARK: [Zhai et al. 2003]

• Single commands for novices

• Command combinations for experts

Discussion

• Consistency• Crossing direction from right to left to avoid occlusion

• For right handed (90% of users)

• In File-Open from left to right; based on our writing system

• Crossing detection:• Possibility that widgets miss events because not registered

• Solution: event dispatch

User feedback / Current study

• Initial user feedback during Open House at UMD• Very positive

• Liked the easiness

• Seen as very intuitive

• How does the layout influence performance• Angle of the target is important

• How do users react to missed crossings

Future Work

• Find general design rules• Do a general performance evaluation

• Which paths do user travel between crossing targets

• Several strokes vs. one continuous stroke

• Toolkit• Basic widgets to create crossing-based applications

• Different feedback• Tactile pen

Conclusion

• Crossing is feasible as sole interaction technique and• More flexible

• Supports command composition

• Support fluid transition between novice and expert

• Builds on the advantages of the pen• Use strokes

• Shows what is necessary to built such an application• Not limited to tablet PCs or drawing apps

http://www.cs.umd.edu/hcil/crossy/

Acknowledgments

• Microsoft Research

• Corinna Löckenhoff

• Anja Szustak

• Grecia Lapizco-Encinas and Alejandro Rodriguez