A Visual Language for Sketching Large and Complex Interactive Designs

1
A Visual Language for SketchingLarge and
ComplexInteractive Designs
G r o u p f o r User Interface Research
University of California Berkeley
James LinJames A. Landay UC Berkeley

• Michael Thomsen
• University of Aarhus

2
Outline

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

3
Early-Stage Web Design

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

4
Early-Stage Web Design

• Tools like DENIMsupport sketching

5
Early-Stage Web Design

• Tools like DENIMsupport sketching

6
Early-Stage Web Design

• Tools like DENIMsupport sketching

7
Early-Stage Web Design

• Tools like DENIMsupport sketching

8
Early-Stage Web Design

• Tools like DENIMsupport sketching

9
Early-Stage Web Design

• But
• Cumbersome to prototype larger, more
  sophisticated interfaces

10
Motivating Example

• Prototype checkout process with
• optional gift wrap
• optional gift card
• security timeout

11
(No Transcript)
12
(No Transcript)
13
Problems

• Adding behavior for two check boxes leads to
  visual spaghetti

14
Problems (cont.)

• Check boxes must be recreated for each design
• Cannot prototype timeout

15
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

16
Outline

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

17
Components

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

18
Components

• Mechanism to create and use reusable widgets and
  fragments of UI designs
• Two types intrinsic and custom
• Can easily be stamped into design

19
Custom Components

• video

20
Custom Components

• To creating a custom component

1.
2.
3.
4.
21
(No Transcript)
22
(No Transcript)
23
Conditionals

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

24
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

25
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

26
Conditionals

• video

27
Creating Conditionals
28
Creating Conditionals
29
Creating Conditionals (cont.)
30
Creating Conditionals (cont.)
31
Conditionals
32
Enhanced Arrows
33
Enhanced Arrows
34
Outline

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

35
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

36
Informal EvaluationParticipants

• 4 Masters students in Information Science or
  Multimedia Design
• 2 males, 2 females
• background similar to professional designers
• much experience with Photoshop
• little experience with programming

37
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

38
Informal EvaluationResults

• All 4 participants did all tasks in 2030 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

39
Outline

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

40
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)

41
Outline

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

42
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

43
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

44
A Visual Language for SketchingLarge and
ComplexInteractive Designs
G r o u p f o r User Interface Research
University of California Berkeley
James LinJames A. Landay http//guir.berkeley.ed
u/denim

• Michael Thomsen

45
Video
46
(No Transcript)