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