Sketching for interface design
1 / 22

Sketching for Interface Design - PowerPoint PPT Presentation

  • Updated On :

Sketching for Interface Design. Jia Sheng [email protected] 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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Sketching for Interface Design' - Melvin

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Sketching for interface design l.jpg

Sketching for Interface Design

Jia Sheng

[email protected]


Jia Sheng, DGP, [email protected]

Last class review l.jpg
Last Class Review

  • Sketching for geometry

Jia Sheng, DGP, [email protected]

Outline l.jpg

  • SILK


  • Gesture Recognition

Jia Sheng, DGP, [email protected]

Why sketching l.jpg
Why Sketching

  • “…informal, perceptual interaction… especially valuable for creative design tasks”

  • Sketching on paper vs. Electronic sketching

Jia Sheng, DGP, [email protected]

Silk sketching interfaces like krazy l.jpg
SILK-Sketching Interfaces Like Krazy

  • Integrate pen-based and electronic sketching

  • Support whole design cycle

Jia Sheng, DGP, [email protected]

Silk 1 overview l.jpg
SILK(1): Overview

Jia Sheng, DGP, [email protected]

Silk 2 recognition l.jpg
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, [email protected]

Silk 3 widget l.jpg
SILK(3): Widget

  • Basic Components

    • Rectangle, squiggly line, straight line, ellipse

  • Composing components

    • Spatial relationship

    • Rule-based widget inference

    • Interactive behavior

Jia Sheng, DGP, [email protected]

Silk 4 storyboard l.jpg
SILK(4): Storyboard

  • Relationships between single pages

Jia Sheng, DGP, [email protected]

Silk 5 behavior specification l.jpg
SILK(5): Behavior Specification

  • Run mode

    • Single widget evaluation

    • Single screen evaluation

    • Storyboard evaluation

Jia Sheng, DGP, [email protected]

Silk 6 what do you think of silk l.jpg
SILK(6): What do you think of SILK?

  • Good points

  • Not-so-good points

Jia Sheng, DGP, [email protected]

Extension from silk l.jpg
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, [email protected]

Satin a toolkit for pen based app l.jpg
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, [email protected]

Satin 2 major components l.jpg
SATIN(2): Major Components

  • Rendering

  • Transitions

  • Events

  • Interpreters

  • Notifications

  • Widgets

  • Scenegraph

  • Views

  • Strokes

  • Recognizers

  • Clipboard

  • Commands

Jia Sheng, DGP, [email protected]

Denim website design interface l.jpg
DENIM: Website Design Interface

  • Difference between DENIM and SILK

    • Domain

    • Integrated view through zooming

    • Support more free-form sketching

Jia Sheng, DGP, [email protected]

Denim l.jpg

  • More features

    • Common components

    • Conditionals

    • Enhanced arrows

Jia Sheng, DGP, [email protected]

Behind the curtain l.jpg
Behind the Curtain

  • Single-stroke gesture recognition

  • Gesture designing

    • Strokes associated with certain command

    • Actions associated with certain command

Jia Sheng, DGP, [email protected]

Single stroke gesture recognition l.jpg
Single-Stroke Gesture Recognition

  • Gesture is an array of sample points

  • Features

    • Incrementally computable

    • Meaningful

    • Enough, but not too many

Jia Sheng, DGP, [email protected]

Single stroke gesture recognition 2 l.jpg
Single-Stroke Gesture Recognition(2)

  • Statistical classification using LDA

    • Assumption: Gaussian, same covariance

Jia Sheng, DGP, [email protected]

Hierarchy l.jpg

Jia Sheng, DGP, [email protected]

Usability evaluation l.jpg
Usability Evaluation

  • How to?

Jia Sheng, DGP, [email protected]

The end l.jpg
The End

  • Q&A

Jia Sheng, DGP, [email protected]