sketching for interface design l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Sketching for Interface Design PowerPoint Presentation
Download Presentation
Sketching for Interface Design

Loading in 2 Seconds...

play fullscreen
1 / 22

Sketching for Interface Design - PowerPoint PPT Presentation


  • 391 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

Sketching for Interface Design

Jia Sheng

DGP@CS

2003-09-25

Jia Sheng, DGP, CS@UT

last class review
Last Class Review
  • Sketching for geometry

Jia Sheng, DGP, CS@UT

outline
Outline
  • SILK
  • DENIM
  • Gesture Recognition

Jia Sheng, DGP, CS@UT

why sketching
Why Sketching
  • “…informal, perceptual interaction… especially valuable for creative design tasks”
  • Sketching on paper vs. Electronic sketching

Jia Sheng, DGP, CS@UT

silk sketching interfaces like krazy
SILK-Sketching Interfaces Like Krazy
  • Integrate pen-based and electronic sketching
  • Support whole design cycle

Jia Sheng, DGP, CS@UT

silk 1 overview
SILK(1): Overview

Jia Sheng, DGP, CS@UT

silk 2 recognition
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

silk 3 widget
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

silk 4 storyboard
SILK(4): Storyboard
  • Relationships between single pages

Jia Sheng, DGP, CS@UT

silk 5 behavior specification
SILK(5): Behavior Specification
  • Run mode
    • Single widget evaluation
    • Single screen evaluation
    • Storyboard evaluation

Jia Sheng, DGP, CS@UT

silk 6 what do you think of silk
SILK(6): What do you think of SILK?
  • Good points
  • Not-so-good points

Jia Sheng, DGP, CS@UT

extension from silk
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

satin a toolkit for pen based app
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

satin 2 major components
SATIN(2): Major Components
  • Rendering
  • Transitions
  • Events
  • Interpreters
  • Notifications
  • Widgets
  • Scenegraph
  • Views
  • Strokes
  • Recognizers
  • Clipboard
  • Commands

Jia Sheng, DGP, CS@UT

denim website design interface
DENIM: Website Design Interface
  • Difference between DENIM and SILK
    • Domain
    • Integrated view through zooming
    • Support more free-form sketching

Jia Sheng, DGP, CS@UT

denim
DENIM++
  • More features
    • Common components
    • Conditionals
    • Enhanced arrows

Jia Sheng, DGP, CS@UT

behind the curtain
Behind the Curtain
  • Single-stroke gesture recognition
  • Gesture designing
    • Strokes associated with certain command
    • Actions associated with certain command

Jia Sheng, DGP, CS@UT

single stroke gesture recognition
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

single stroke gesture recognition 2
Single-Stroke Gesture Recognition(2)
  • Statistical classification using LDA
    • Assumption: Gaussian, same covariance

Jia Sheng, DGP, CS@UT

hierarchy
Hierarchy

Jia Sheng, DGP, CS@UT

usability evaluation
Usability Evaluation
  • How to?

Jia Sheng, DGP, CS@UT

the end
The End
  • Q&A

Jia Sheng, DGP, CS@UT