A visual language for sketching large and complex interactive designs
Download
1 / 46

A Visual Language for Sketching - PowerPoint PPT Presentation


  • 229 Views
  • Updated 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

Related searches for A Visual Language for 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 '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 l.jpg

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 l.jpg
Outline

  • Introduction

  • New visual language

  • Evaluation

  • Related work

  • Future work and conclusion


Early stage web design l.jpg
Early-Stage Web Design

  • Often draw rough sketches of their design ideas using pen and paper


Early stage web design4 l.jpg
Early-Stage Web Design

  • Tools like DENIMsupport sketching


Early stage web design5 l.jpg
Early-Stage Web Design

  • Tools like DENIMsupport sketching


Early stage web design6 l.jpg
Early-Stage Web Design

  • Tools like DENIMsupport sketching


Early stage web design7 l.jpg
Early-Stage Web Design

  • Tools like DENIMsupport sketching


Early stage web design8 l.jpg
Early-Stage Web Design

  • Tools like DENIMsupport sketching


Early stage web design9 l.jpg
Early-Stage Web Design

But…

  • Cumbersome to prototype larger, more sophisticated interfaces


Motivating example l.jpg
Motivating Example

  • Prototype checkout process with

    • optional gift wrap

    • optional gift card

    • security timeout


Problems l.jpg
Problems

  • Adding behavior for two check boxes leads to visual spaghetti


Problems cont l.jpg
Problems (cont.)

  • Check boxes must be recreated for each design

  • Cannot prototype timeout


Solution l.jpg
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 l.jpg
Outline

  • Introduction

  • New visual language

    • components

    • conditionals

    • enhanced arrows

  • Evaluation

  • Related work

  • Future work and conclusion


Components l.jpg
Components

  • Mechanism to create and use reusable widgets and fragments of UI designs

  • Two types: intrinsic and custom


Components18 l.jpg
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 l.jpg
Custom Components

  • To creating a custom component:

1.

2.

3.

4.


Conditionals l.jpg
Conditionals

  • Conditional page is made up of stack of conditions

  • Each condition only differs in state of component instances


Conditionals24 l.jpg
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 l.jpg
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 l.jpg
Outline

  • Introduction

  • New visual language

  • Evaluation

  • Related work

  • Future work and conclusion


Lo fi evaluation l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Outline

  • Introduction

  • New visual language

  • Evaluation

  • Related work

  • Future work and conclusion


Related work l.jpg
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 l.jpg
Outline

  • Introduction

  • New visual language

  • Evaluation

  • Related work

  • Future work and conclusion


Future work l.jpg
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 l.jpg
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 l.jpg

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