a visual language for sketching large and complex interactive designs l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
A Visual Language for Sketching Large and Complex Interactive Designs PowerPoint Presentation
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 Large and Complex Interactive Designs - PowerPoint PPT Presentation


  • 232 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 Large and Complex Interactive Designs' - PamelaLan


Download Now 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