crossy: a crossing-based drawing application
DESCRIPTION
CrossY: A Crossing-Based Drawing Application. Georg Apitz & Fran ç ois Guimbreti è re HCIL, University of Maryland [email protected]. People, Pens, and Tablet PC. The New Yorker. Illustration from Ken Hinckley presentation at Stanford. Typical setting for today’s interface. - PowerPoint PPT PresentationTRANSCRIPT
CrossY:A Crossing-Based Drawing Application
Georg Apitz & François Guimbretière
HCIL, University of Maryland
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