Download
sketching for interface design n.
Skip this Video
Loading SlideShow in 5 Seconds..
Sketching for Interface Design PowerPoint Presentation
Download Presentation
Sketching for Interface Design

Sketching for Interface Design

405 Vues Download Presentation
Télécharger la présentation

Sketching for Interface Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

  3. Outline • SILK • DENIM • Gesture Recognition Jia Sheng, DGP, CS@UT

  4. Why Sketching • “…informal, perceptual interaction… especially valuable for creative design tasks” • Sketching on paper vs. Electronic sketching Jia Sheng, DGP, CS@UT

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

  6. SILK(1): Overview 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, … 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 Jia Sheng, DGP, CS@UT

  9. SILK(4): Storyboard • Relationships between single pages Jia Sheng, DGP, CS@UT

  10. SILK(5): Behavior Specification • Run mode • Single widget evaluation • Single screen evaluation • Storyboard evaluation Jia Sheng, DGP, CS@UT

  11. SILK(6): What do you think of SILK? • Good points • Not-so-good points 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… 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, … Jia Sheng, DGP, CS@UT

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

  16. DENIM++ • More features • Common components • Conditionals • Enhanced arrows 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 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 Jia Sheng, DGP, CS@UT

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

  20. Hierarchy Jia Sheng, DGP, CS@UT

  21. Usability Evaluation • How to? Jia Sheng, DGP, CS@UT

  22. The End • Q&A Jia Sheng, DGP, CS@UT