Sketching for Interface Design Jia Sheng DGP@CS 2003-09-25 Jia Sheng, DGP, CS@UT
Last Class Review • Sketching for geometry Jia Sheng, DGP, CS@UT
Outline • SILK • DENIM • Gesture Recognition Jia Sheng, DGP, CS@UT
Why Sketching • “…informal, perceptual interaction… especially valuable for creative design tasks” • Sketching on paper vs. Electronic sketching Jia Sheng, DGP, CS@UT
SILK-Sketching Interfaces Like Krazy • Integrate pen-based and electronic sketching • Support whole design cycle Jia Sheng, DGP, CS@UT
SILK(1): Overview Jia Sheng, DGP, CS@UT
SILK(2): Recognition • Widget • Button, scroll bar, check box, radio, … • Editing Gestures • Cycling, deleting, moving, copying, grouping, … • Annotations • Comments drawn, written, typed, … Jia Sheng, DGP, CS@UT
SILK(3): Widget • Basic Components • Rectangle, squiggly line, straight line, ellipse • Composing components • Spatial relationship • Rule-based widget inference • Interactive behavior Jia Sheng, DGP, CS@UT
SILK(4): Storyboard • Relationships between single pages Jia Sheng, DGP, CS@UT
SILK(5): Behavior Specification • Run mode • Single widget evaluation • Single screen evaluation • Storyboard evaluation Jia Sheng, DGP, CS@UT
SILK(6): What do you think of SILK? • Good points • Not-so-good points Jia Sheng, DGP, CS@UT
Extension from SILK • Different application domain • Web design (DENIM), electronic circuit (sketchSPICE), … • Different device • PDA, Cell phone, … • 2D -> 3D • Combine SKETCH&SILK? • More… Jia Sheng, DGP, CS@UT
SATIN: A Toolkit for Pen-based App • Pen-based applications • Design tools, whiteboard, annotation, note-taking, new interaction, … • Functionalities • Pen input as ink/gesture, selecting, moving, interpreting, grouping, layering, time indexing, … Jia Sheng, DGP, CS@UT
SATIN(2): Major Components • Rendering • Transitions • Events • Interpreters • Notifications • Widgets • Scenegraph • Views • Strokes • Recognizers • Clipboard • Commands Jia Sheng, DGP, CS@UT
DENIM: Website Design Interface • Difference between DENIM and SILK • Domain • Integrated view through zooming • Support more free-form sketching Jia Sheng, DGP, CS@UT
DENIM++ • More features • Common components • Conditionals • Enhanced arrows Jia Sheng, DGP, CS@UT
Behind the Curtain • Single-stroke gesture recognition • Gesture designing • Strokes associated with certain command • Actions associated with certain command Jia Sheng, DGP, CS@UT
Single-Stroke Gesture Recognition • Gesture is an array of sample points • Features • Incrementally computable • Meaningful • Enough, but not too many Jia Sheng, DGP, CS@UT
Single-Stroke Gesture Recognition(2) • Statistical classification using LDA • Assumption: Gaussian, same covariance Jia Sheng, DGP, CS@UT
Hierarchy Jia Sheng, DGP, CS@UT
Usability Evaluation • How to? Jia Sheng, DGP, CS@UT
The End • Q&A Jia Sheng, DGP, CS@UT
