1. 2003-09-25Jia Sheng, DGP, CS@UT1 Sketching for Interface Design Jia Sheng DGP@CS 2003-09-25

2. Jia Sheng, DGP, CS@UT 2 Last Class Review Sketching for geometry

3. 2003-09-25 Jia Sheng, DGP, CS@UT 3 Outline SILK DENIM Gesture Recognition

4. 2003-09-25 Jia Sheng, DGP, CS@UT 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

5. 2003-09-25 Jia Sheng, DGP, CS@UT 5 SILK-Sketching Interfaces Like Krazy Integrate pen-based and electronic sketching Support whole design cycle

6. 2003-09-25 Jia Sheng, DGP, CS@UT 6 SILK(1): Overview

7. 2003-09-25 Jia Sheng, DGP, CS@UT 7 SILK(2): Recognition Widget  Button, scroll bar, check box, radio, … Editing Gestures  Cycling, deleting, moving, copying, grouping, … Annotations  Comments drawn, written, typed, …

8. 2003-09-25 Jia Sheng, DGP, CS@UT 8 SILK(3): Widget Basic Components  Rectangle, squiggly line, straight line, ellipse Composing components  Spatial relationship  Rule-based widget inference  Interactive behavior

9. 2003-09-25 Jia Sheng, DGP, CS@UT 9 SILK(4): Storyboard Relationships between single pages

10. 2003-09-25 Jia Sheng, DGP, CS@UT 10 SILK(5): Behavior Specification Run mode  Single widget evaluation  Single screen evaluation  Storyboard evaluation

11. 2003-09-25 Jia Sheng, DGP, CS@UT 11 SILK(6): What do you think of SILK? Good points Not-so-good points

12. 2003-09-25 Jia Sheng, DGP, CS@UT 12 Extension from SILK Different application domain  Web design (DENIM), electronic circuit (sketchSPICE), … Different device  PDA, Cell phone, … 2D -> 3D  Combine SKETCH&SILK? More…

13. 2003-09-25 Jia Sheng, DGP, CS@UT 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, …

14. 2003-09-25 Jia Sheng, DGP, CS@UT 14 SATIN(2): Major Components Scenegraph Views Strokes Recognizers Clipboard Commands Rendering Transitions Events Interpreters Notifications Widgets

15. 2003-09-25 Jia Sheng, DGP, CS@UT 15 DENIM: Website Design Interface Difference between DENIM and SILK  Domain  Integrated view through zooming  Support more free- form sketching

16. 2003-09-25 Jia Sheng, DGP, CS@UT 16 DENIM++ More features  Common components  Conditionals  Enhanced arrows

17. 2003-09-25 Jia Sheng, DGP, CS@UT 17 Behind the Curtain Single-stroke gesture recognition Gesture designing  Strokes associated with certain command  Actions associated with certain command

18. 2003-09-25 Jia Sheng, DGP, CS@UT 18 Single-Stroke Gesture Recognition Gesture is an array of sample points Features  Incrementally computable  Meaningful  Enough, but not too many

19. 2003-09-25 Jia Sheng, DGP, CS@UT 19 Single-Stroke Gesture Recognition(2) Statistical classification using LDA  Assumption: Gaussian, same covariance

20. 2003-09-25 Jia Sheng, DGP, CS@UT 20 Hierarchy

21. 2003-09-25 Jia Sheng, DGP, CS@UT 21 Usability Evaluation How to?

22. 2003-09-25 Jia Sheng, DGP, CS@UT 22 The End Q&A