A Visual Language for Sketching Large and Complex Interactive Designs

1. 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

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

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.

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

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

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. 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

45. Video