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

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 DENIM support sketching

5. Early-Stage Web Design Tools like DENIM support sketching

6. Early-Stage Web Design Tools like DENIM support sketching

7. Early-Stage Web Design Tools like DENIM support sketching

8. Early-Stage Web Design Tools like DENIM support 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. 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.)

26. Conditionals video

27. Creating Conditionals

29. Creating Conditionals (cont.)

31. Conditionals

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

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

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

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 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 http://guir.berkeley.edu/denim

45. Video