1 / 22

Sketching for Interface Design

Sketching for Interface Design. Jia Sheng DGP@CS 2003-09-25. Last Class Review. Sketching for geometry. Outline. SILK DENIM Gesture Recognition. Why Sketching. “…informal, perceptual interaction… especially valuable for creative design tasks” Sketching on paper vs. Electronic sketching.

Melvin
Download Presentation

Sketching for Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related