a visual language for sketching large and complex interactive designs
Download
Skip this Video
Download Presentation
A Visual Language for Sketching Large and Complex Interactive Designs

Loading in 2 Seconds...

play fullscreen
1 / 46

A Visual Language for Sketching - PowerPoint PPT Presentation


  • 229 Views
  • Uploaded on

G r o u p f o r User Interface Research. University of California Berkeley. A Visual Language for Sketching Large and Complex Interactive Designs. Michael Thomsen University of Aarhus. James Lin James A. Landay UC Berkeley. Outline. Introduction New visual language Evaluation

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 'A Visual Language for Sketching' - PamelaLan


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
a visual language for sketching large and complex interactive designs

Group for

User Interface Research

University of California

Berkeley

A Visual Language for SketchingLarge and ComplexInteractive Designs

Michael Thomsen

University of Aarhus

James LinJames A. Landay

UC Berkeley

outline
Outline
  • Introduction
  • New visual language
  • Evaluation
  • Related work
  • Future work and conclusion
early stage web design
Early-Stage Web Design
  • Often draw rough sketches of their design ideas using pen and paper
early stage web design4
Early-Stage Web Design
  • Tools like DENIMsupport sketching
early stage web design5
Early-Stage Web Design
  • Tools like DENIMsupport sketching
early stage web design6
Early-Stage Web Design
  • Tools like DENIMsupport sketching
early stage web design7
Early-Stage Web Design
  • Tools like DENIMsupport sketching
early stage web design8
Early-Stage Web Design
  • Tools like DENIMsupport sketching
early stage web design9
Early-Stage Web Design

But…

  • Cumbersome to prototype larger, more sophisticated interfaces
motivating example
Motivating Example
  • Prototype checkout process with
    • optional gift wrap
    • optional gift card
    • security timeout
problems
Problems
  • Adding behavior for two check boxes leads to visual spaghetti
problems cont
Problems (cont.)
  • Check boxes must be recreated for each design
  • Cannot prototype timeout
solution
Solution
  • Target audience: designers who are not likely to know programming
  • Solution: Add powerful features within the familiar sketching paradigm
  • Features
    • Components for recurring elements like check box
    • Conditionals to avoid combinatorial explosion of transitions
    • Enhanced arrows for various types of page transitions
outline16
Outline
  • Introduction
  • New visual language
    • components
    • conditionals
    • enhanced arrows
  • Evaluation
  • Related work
  • Future work and conclusion
components
Components
  • Mechanism to create and use reusable widgets and fragments of UI designs
  • Two types: intrinsic and custom
components18
Components
  • Mechanism to create and use reusable widgets and fragments of UI designs
  • Two types: intrinsic and custom
  • Can easily be “stamped” into design
custom components20
Custom Components
  • To creating a custom component:

1.

2.

3.

4.

conditionals
Conditionals
  • Conditional page is made up of stack of conditions
  • Each condition only differs in state of component instances
conditionals24
Conditionals
  • Conditional page is made up of stack of conditions
  • Each condition only differs in state of component instances
  • Includes number of conditions and current condition
conditionals cont
Conditionals (cont.)
  • Conditional page is made up of stack of conditions
  • Each condition only differs in state of component instances
  • Includes number of conditions and current condition
outline34
Outline
  • Introduction
  • New visual language
  • Evaluation
  • Related work
  • Future work and conclusion
lo fi evaluation
Lo-fi Evaluation
  • Tested paper prototypes of language design
  • 6 participants
    • 3 professional designers
    • 3 CS students
  • 4 tasks
  • All but 1 student completed all tasks
    • mostly within 10 minutes
informal evaluation participants
Informal EvaluationParticipants
  • 4 Master’s students in Information Science or Multimedia Design
  • 2 males, 2 females
  • background similar to professional designers
  • much experience with Photoshop
  • little experience with programming
informal evaluation tasks
Informal EvaluationTasks
  • Similar to shopping example
  • Create four pages
    • Home, Dog products, Shopping basket, Order confirmation
  • Add Include gift card check box to Shopping basket page
    • test creating and using components
  • Add Choose gift card page
    • test conditionals
  • Add security timeout feature
    • test enhanced arrows
informal evaluation results
Informal EvaluationResults
  • All 4 participants did all tasks in 20–30 minutes
  • 2 users very happy, 2 moderately happy
    • “better than paper and pencil!”
  • Usability issues
    • wanted to create component “in place”
    • should create initial conditions automatically
    • 3 found Wacom tablet hard to use
outline39
Outline
  • Introduction
  • New visual language
  • Evaluation
  • Related work
  • Future work and conclusion
related work
Related work
  • Storyboarding
    • SILK, DENIM, Anecdote, and PatchWork
  • Programming by Demonstration
    • Chimera and Marquise
  • Conditionals
    • Statecharts
  • Rule-based visual languages
    • AgentSheets, Stagecast Creator (KidSim, Cocoa)
outline41
Outline
  • Introduction
  • New visual language
  • Evaluation
  • Related work
  • Future work and conclusion
future work
Future work
  • Page masters
    • support for easily changing layout
  • Components and conditionals
    • expand and contract in place for easy exploration and “debugging”
  • Transferring text between pages
conclusion
Conclusion
  • Designers sketch prototypes
  • New visual language allows more sophisticated prototyping
    • components
    • conditionals
    • enhanced arrows
  • Sketch-based nature of the VL is good fit for UI designers
a visual language for sketching large and complex interactive designs44

Group for

User Interface Research

University of California

Berkeley

A Visual Language for SketchingLarge and ComplexInteractive Designs

Michael Thomsen

James LinJames A. Landay

http://guir.berkeley.edu/denim

ad