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

A Visual Language for Sketching Large and Complex Interactive Designs - 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 Large and Complex Interactive Designs

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


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