CrossY: A Crossing-Based Drawing Application
description
Transcript of CrossY: A Crossing-Based Drawing Application
![Page 1: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/1.jpg)
CrossY:A Crossing-Based Drawing Application
Georg Apitz & François Guimbretière
HCIL, University of Maryland
![Page 2: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/2.jpg)
People, Pens, and Tablet PC
The New Yorker
Illustration from Ken Hinckley presentation at Stanford
![Page 3: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/3.jpg)
Typical setting for today’s interface
• Fixed stable environment, with a keyboard,
• Indirect interaction,
• High precision, stable pointing system
![Page 4: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/4.jpg)
Typical Tablet PC use
• Portable, unstable environment, without a keyboard
• Direct interaction,
• Low precision aiming
![Page 5: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/5.jpg)
• 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?
![Page 6: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/6.jpg)
CrossY
video
![Page 7: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/7.jpg)
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]
![Page 8: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/8.jpg)
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
![Page 9: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/9.jpg)
Scrolling
Line by line area
Page by page area
Absolute area
![Page 10: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/10.jpg)
CrossY scrollbar
• Overloading simplify interactions• shorter distances to issue commands
• not as much precision necessary
![Page 11: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/11.jpg)
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
![Page 12: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/12.jpg)
Cursor control
• Cross to jump to an absolute position
![Page 13: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/13.jpg)
Cursor control
• Cross to jump to an absolute position
![Page 14: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/14.jpg)
Cursor control
• Cross to jump to an absolute position
• Near drag for coarse adjustment
![Page 15: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/15.jpg)
Cursor control
• Cross to jump to an absolute position
• Near drag for coarse adjustment
![Page 16: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/16.jpg)
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
![Page 17: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/17.jpg)
Command composition
• From stroke-by-stroke interaction• borders are used to validate/cancel
![Page 18: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/18.jpg)
Command composition
• From stroke-by-stroke interaction• borders are used to validate/cancel
• To multi-command stroke
![Page 19: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/19.jpg)
Stroke as a scoping mechanism
• Stroke “carries” the information
StrokeObject
find width: med
find color: ??
find: ??
replace ??
Replace color:
??
replace width: ??
![Page 20: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/20.jpg)
Stroke as a scoping mechanism
• Stroke “carries” the information
StrokeObject
find width: med
find color: red
find: ??
replace ??
Replace color:
??
replace width: ??
![Page 21: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/21.jpg)
Stroke as a scoping mechanism
• Stroke “carries” the information
StrokeObject
find width: med
find color: red
find: true
replace ??
Replace color:
??
replace width: ??
![Page 22: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/22.jpg)
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
![Page 23: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/23.jpg)
Use of directionality
• Continuous find and replace
![Page 24: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/24.jpg)
Use of directionality
• Continuous find and replace• Reverse direction for undo
![Page 25: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/25.jpg)
A
difficult
case
![Page 26: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/26.jpg)
Principles
• Based Auto-Completion idea
• Only unique prefixes are presented
• Selection always at the center
![Page 27: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/27.jpg)
Selecting a file to open
• Open document /Papers04/ProofRite.pdf• In one stroke:
![Page 28: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/28.jpg)
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
![Page 29: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/29.jpg)
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
![Page 30: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/30.jpg)
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
![Page 31: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/31.jpg)
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
![Page 32: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/32.jpg)
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/
![Page 33: CrossY: A Crossing-Based Drawing Application](https://reader035.fdocuments.us/reader035/viewer/2022062323/5681556b550346895dc3360e/html5/thumbnails/33.jpg)
Acknowledgments
• Microsoft Research
• Corinna Löckenhoff
• Anja Szustak
• Grecia Lapizco-Encinas and Alejandro Rodriguez