2003-09-25jia sheng, dgp, cs@ut1 sketching for interface design jia sheng dgp@cs 2003-09-25
TRANSCRIPT
2003-09-25 Jia Sheng, DGP, CS@UT 1
Sketching for Interface Design
Jia Sheng
DGP@CS
2003-09-25
2003-09-25 Jia Sheng, DGP, CS@UT 2
Last Class Review
Sketching for geometry
Elec Sketching
Pen Sketching
Graphics UI
SKETCH, Teddy, ... SILK, DENIM, ...
Others?
2003-09-25 Jia Sheng, DGP, CS@UT 3
Outline
SILK DENIM Gesture Recognition
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 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
2003-09-25 Jia Sheng, DGP, CS@UT 5
SILK-Sketching Interfaces Like Krazy Integrate pen-based and electronic sketching Support whole design cycle
2003-09-25 Jia Sheng, DGP, CS@UT 6
SILK(1): Overview
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, …
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
2003-09-25 Jia Sheng, DGP, CS@UT 9
SILK(4): Storyboard
Relationships between single pages
2003-09-25 Jia Sheng, DGP, CS@UT 10
SILK(5): Behavior Specification Run mode
Single widget evaluation Single screen evaluation Storyboard evaluation
2003-09-25 Jia Sheng, DGP, CS@UT 11
SILK(6): What do you think of SILK? Good points
Not-so-good points
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…
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, …
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
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
2003-09-25 Jia Sheng, DGP, CS@UT 16
DENIM++
More features Common components Conditionals Enhanced arrows
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
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
),,( ppp tyx
2003-09-25 Jia Sheng, DGP, CS@UT 19
Single-Stroke Gesture Recognition(2) Statistical classification
using LDA Assumption: Gaussian,
same covariance
x1
x2
0
C1
C3C2
cc
F
iicicc
vgesture
Cc
fwwv
maxarg
01
0
2003-09-25 Jia Sheng, DGP, CS@UT 20
Hierarchy
Gesture Recognition and Interpreting
SILK
SATIN
DENIM
DENIM++
2003-09-25 Jia Sheng, DGP, CS@UT 21
Usability Evaluation
How to?
2003-09-25 Jia Sheng, DGP, CS@UT 22
The End
Q&A