CrossY: A Crossing-Based Drawing Application

1
CrossYA Crossing-Based Drawing Application

• Georg Apitz François Guimbretière
• HCIL, University of Maryland
• francois_at_cs.umd.edu

2
People, Pens, and Tablet PC
The New Yorker
Illustration from Ken Hinckley presentation at
Stanford
3
Typical setting for todays interface

• Fixed stable environment, with a keyboard,
• Indirect interaction,
• High precision, stable pointing system

4
Typical Tablet PC use

• Portable, unstable environment, without a
  keyboard
• Direct interaction,
• Low precision aiming

5
Why crossing?

• 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?

6
CrossY video
7
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

8
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

9
Scrolling
Line by line area
Page by page area
Absolute area
10
CrossY scrollbar

• Overloading simplify interactions
• shorter distances to issue commands
• not as much precision necessary

11
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

12
Cursor control

• Cross to jump to an absolute position

13
Cursor control

• Cross to jump to an absolute position

14
Cursor control

• Cross to jump to an absolute position
• Near drag for coarse adjustment

15
Cursor control

• Cross to jump to an absolute position
• Near drag for coarse adjustment

16
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

17
Command composition

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

18
Command composition

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

19
Stroke as a scoping mechanism

• Stroke carries the information

find width med
find color ??
find ??
replace ??
Replace color ??
replace width ??


StrokeObject
20
Stroke as a scoping mechanism

• Stroke carries the information

find width med
find color red
find ??
replace ??
Replace color ??
replace width ??


StrokeObject
21
Stroke as a scoping mechanism

• Stroke carries the information

find width med
find color red
find true
replace ??
Replace color ??
replace width ??


StrokeObject
22
Stroke as a scoping mechanism

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

find width med
find color red
find true
replace true
Replace color blue
replace width thin


StrokeObject
23
Use of directionality

• Continuous find and replace

24
Use of directionality

• Continuous find and replace
• Reverse direction for undo

25
A difficult case
26
Principles

• Based Auto-Completion idea
• Only unique prefixes are presented
• Selection always at the center

27
Selecting a file to open

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

28
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

29
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

30
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

31
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

32
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/

33
Acknowledgments

• Microsoft Research
• Corinna Löckenhoff
• Anja Szustak
• Grecia Lapizco-Encinas and Alejandro Rodriguez