Jia Sheng, DGP, Sketching for Interface Design Jia Sheng

Jia Sheng, DGP, 2 Last Class Review Sketching for geometry

Jia Sheng, DGP, 3 Outline SILK DENIM Gesture Recognition

Jia Sheng, DGP, 4 Why Sketching “…informal, perceptual interaction… especially valuable for creative design tasks” Sketching on paper vs. Electronic sketching Pen SketchElec Sketch Hard to modifyEasy to edit No design memWith design mem Hard to testEasy to test FreeformConstrained DirectNeed learning

Jia Sheng, DGP, 5 SILK-Sketching Interfaces Like Krazy Integrate pen-based and electronic sketching Support whole design cycle

Jia Sheng, DGP, 6 SILK(1): Overview

Jia Sheng, DGP, 7 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, 8 SILK(3): Widget Basic Components  Rectangle, squiggly line, straight line, ellipse Composing components  Spatial relationship  Rule-based widget inference  Interactive behavior

Jia Sheng, DGP, 9 SILK(4): Storyboard Relationships between single pages

Jia Sheng, DGP, 10 SILK(5): Behavior Specification Run mode  Single widget evaluation  Single screen evaluation  Storyboard evaluation

Jia Sheng, DGP, 11 SILK(6): What do you think of SILK? Good points Not-so-good points

Jia Sheng, DGP, 12 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, 13 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, 14 SATIN(2): Major Components Scenegraph Views Strokes Recognizers Clipboard Commands Rendering Transitions Events Interpreters Notifications Widgets

Jia Sheng, DGP, 15 DENIM: Website Design Interface Difference between DENIM and SILK  Domain  Integrated view through zooming  Support more free- form sketching

Jia Sheng, DGP, 16 DENIM++ More features  Common components  Conditionals  Enhanced arrows

Jia Sheng, DGP, 17 Behind the Curtain Single-stroke gesture recognition Gesture designing  Strokes associated with certain command  Actions associated with certain command

Jia Sheng, DGP, 18 Single-Stroke Gesture Recognition Gesture is an array of sample points Features  Incrementally computable  Meaningful  Enough, but not too many

Jia Sheng, DGP, 19 Single-Stroke Gesture Recognition(2) Statistical classification using LDA  Assumption: Gaussian, same covariance

Jia Sheng, DGP, 20 Hierarchy

Jia Sheng, DGP, 21 Usability Evaluation How to?

Jia Sheng, DGP, 22 The End Q&A