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

Outline Introduction New visual language Evaluation Related work Future work and conclusion

Early-Stage Web Design Often draw rough sketches of their design ideas using pen and paper

Early-Stage Web Design Tools like DENIM support sketching

Early-Stage Web Design Tools like DENIM support sketching

Early-Stage Web Design Tools like DENIM support sketching

Early-Stage Web Design Tools like DENIM support sketching

Early-Stage Web Design Tools like DENIM support sketching

Early-Stage Web Design But… Cumbersome to prototype larger, more sophisticated interfaces

Motivating Example Prototype checkout process with – optional gift wrap – optional gift card – security timeout

Problems Adding behavior for two check boxes leads to visual spaghetti

Problems (cont.) Check boxes must be recreated for each design Cannot prototype timeout

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

Outline Introduction New visual language – components – conditionals – enhanced arrows Evaluation Related work Future work and conclusion

Components Mechanism to create and use reusable widgets and fragments of UI designs Two types: intrinsic and custom

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 Components video

Custom Components To creating a custom component:

Conditionals Conditional page is made up of stack of conditions Each condition only differs in state of component instances

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

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 video

Creating Conditionals

Creating Conditionals (cont.)

Conditionals

Enhanced Arrows

Outline Introduction New visual language Evaluation Related work Future work and conclusion

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 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 Similar to shopping example 1. Create four pages – Home, Dog products, Shopping basket, Order confirmation 2. Add Include gift card check box to Shopping basket page – test creating and using components 3. Add Choose gift card page – test conditionals 4. Add security timeout feature – test enhanced arrows

Informal Evaluation Results 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

Outline Introduction New visual language Evaluation Related work Future work and conclusion

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)

Outline Introduction New visual language Evaluation Related work Future work and conclusion

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 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 Designs Michael Thomsen G r o u p f o r User Interface Research University of California Berkeley James Lin James A. Landay

Video