Sketching for Interface Design

1
Sketching for Interface Design

• Jia Sheng
• DGP_at_CS
• 2003-09-25

2
Last Class Review

• Sketching for geometry

3
Outline

• SILK
• DENIM
• Gesture Recognition

4
Why Sketching

• informal, perceptual interaction especially
  valuable for creative design tasks
• Sketching on paper vs. Electronic sketching

Pen Sketch Elec Sketch
Hard to modify Easy to edit
No design mem With design mem
Hard to test Easy to test
Freeform Constrained
Direct Need learning






5
SILK-Sketching Interfaces Like Krazy

• Integrate pen-based and electronic sketching
• Support whole design cycle

6
SILK(1) Overview
7
SILK(2) Recognition

• Widget
• Button, scroll bar, check box, radio,
• Editing Gestures
• Cycling, deleting, moving, copying, grouping,
• Annotations
• Comments drawn, written, typed,

8
SILK(3) Widget

• Basic Components
• Rectangle, squiggly line, straight line, ellipse
• Composing components
• Spatial relationship
• Rule-based widget inference
• Interactive behavior

9
SILK(4) Storyboard

• Relationships between single pages

10
SILK(5) Behavior Specification

• Run mode
• Single widget evaluation
• Single screen evaluation
• Storyboard evaluation

11
SILK(6) What do you think of SILK?

• Good points
• Not-so-good points

12
Extension from SILK

• Different application domain
• Web design (DENIM), electronic circuit
  (sketchSPICE),
• Different device
• PDA, Cell phone,
• 2D -gt 3D
• Combine SKETCHSILK?
• More

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
SATIN(2) Major Components

• Rendering
• Transitions
• Events
• Interpreters
• Notifications
• Widgets

• Scenegraph
• Views
• Strokes
• Recognizers
• Clipboard
• Commands

15
DENIM Website Design Interface

• Difference between DENIM and SILK
• Domain
• Integrated view through zooming
• Support more free-form sketching

16
DENIM

• More features
• Common components
• Conditionals
• Enhanced arrows

17
Behind the Curtain

• Single-stroke gesture recognition
• Gesture designing
• Strokes associated with certain command
• Actions associated with certain command

18
Single-Stroke Gesture Recognition

• Gesture is an array of sample points
• Features
• Incrementally computable
• Meaningful
• Enough, but not too many

19
Single-Stroke Gesture Recognition(2)

• Statistical classification using LDA
• Assumption Gaussian, same covariance

20
Hierarchy
21
Usability Evaluation

• How to?

22
The End

• QA