A visual language for sketching large and complex interactive designs

ABSTRACT

Informal, sketch-based design tools closely match the work practices of user interface designers. Current tools, however, are limited in the size and complexity of interaction that can be specified. We have created an advanced sketch-based visual language that allows for easy prototyping of large, complex interactive designs. In its current embodiment in the denim web design tool, the visual language allows designers to sketch reusable components for recurring page elements, such as navigation bars, as well as conditionals to illustrate and test transitions that depend on a user's input. Designers can also specify sites that accept richer user input than simple clicking. Our informal evaluation shows that these features allow designers with little programming experience to quickly create prototypes of large, complex web sites while still working inside an informal, sketch-based environment

REFERENCES

• 1: Brian P. Bailey , Joseph A. Konstan , John V. Carlis, DEMAIS: designing multimedia applications with interactive storyboards, Proceedings of the ninth ACM international conference on Multimedia, September 30-October 05, 2001, Ottawa, Canada [doi>10.1145/500141.500179]
• 2: Allen Cypher , David Canfield Smith, KidSim: end user programming of simulations, Proceedings of the SIGCHI conference on Human factors in computing systems, p.27-34, May 07-11, 1995, Denver, Colorado, United States [doi>10.1145/223904.223908]
• 3: Goel, V., Sketches of Thought. Cambridge, MA: The MIT Press. 279, 1995.
• 4: Komei Harada , Eiichiro Tanaka , Ryuichi Ogawa , Yoshinori Hara, Anecdote: a multimedia storyboarding system with seamless authoring support, Proceedings of the fourth ACM international conference on Multimedia, p.341-351, November 18-22, 1996, Boston, Massachusetts, United States [doi>10.1145/244130.244235]
• 5: David Harel, Statecharts: A visual formalism for complex systems, Science of Computer Programming, v.8 n.3, p.231-274, June 1, 1987 [doi>10.1016/0167-6423(87)90035-9]
• 6: Jason I. Hong , James A. Landay, SATIN: a toolkit for informal ink-based applications, Proceedings of the 13th annual ACM symposium on User interface software and technology, p.63-72, November 06-08, 2000, San Diego, California, United States [doi>10.1145/354401.354412]
• 7: Jason I. Hong , Francis C. Li , James Lin , James A. Landay, End-user perceptions of formal and informal representations of web sites, CHI '01 extended abstracts on Human factors in computing systems, March 31-April 05, 2001, Seattle, Washington [doi>10.1145/634067.634294]
• 8: David Kurlander , Steven Feiner, A history of editable graphical histories, Watch what I do: programming by demonstration, MIT Press, Cambridge, MA, 1993
• 9: James A. Landay , Brad A. Myers, Sketching Interfaces: Toward More Human Interface Design, Computer, v.34 n.3, p.56-64, March 2001
• 10: James Lin , Mark W. Newman , Jason I. Hong , James A. Landay, DENIM: finding a tighter fit between tools and practice for Web site design, Proceedings of the SIGCHI conference on Human factors in computing systems, p.510-517, April 01-06, 2000, The Hague, The Netherlands [doi>10.1145/332040.332486]
• 11: Francesmary Modugno , Brad A. Myers, Graphical representation and feedback in a PBD system, Watch what I do: programming by demonstration, MIT Press, Cambridge, MA, 1993
• 12: Mark W. Newman , James A. Landay, Sitemaps, storyboards, and specifications: a sketch of Web site design practice, Proceedings of the conference on Designing interactive systems: processes, practices, methods, and techniques, p.263-274, August 17-19, 2000, New York City, New York, United States [doi>10.1145/347642.347758]
• 13: John F. Pane , Brad A. Myers, Improving user performance on Boolean queries, CHI '00 extended abstracts on Human factors in computing systems, April 01-06, 2000, The Hague, The Netherlands [doi>10.1145/633292.633449]
• 14: Repenning, A. and W. Citrin. Agentsheets: Applying Grid-Based Spatial Reasoning to Human-Computer Interaction. In Proceedings of IEEE Symposium on Visual Languages (VL'93). Bergen, Norway: IEEE Computer Society Press. pp. 77--82, September, 1993.
• 15: Stagecast, Stagecast Creator, 1997. Stagecast Software, Inc. http://www.stagecast.com/
• 16: Maarten van de Kant , Stephanie Wilson , Mathilde Bekker , Hilary Johnson , Peter Johnson, PatchWork: a software tool for early design, CHI 98 conference summary on Human factors in computing systems, p.221-222, April 18-23, 1998, Los Angeles, California, United States [doi>10.1145/286498.286711]
• 17: Robert A. Virzi , Jeffrey L. Sokolov , Demetrios Karis, Usability problem identification using both low- and high-fidelity prototypes, Proceedings of the SIGCHI conference on Human factors in computing systems: common ground, p.236-243, April 13-18, 1996, Vancouver, British Columbia, Canada [doi>10.1145/238386.238516]

INDEX TERMS

Primary Classification:
  D. Software
  D.2 SOFTWARE ENGINEERING
      D.2.6 Programming Environments
          Subjects: Interactive environments

Additional Classification:
  D. Software
  D.1 PROGRAMMING TECHNIQUES
      D.1.7 Visual Programming
  D.2 SOFTWARE ENGINEERING
      D.2.2 Design Tools and Techniques
          Subjects: User interfaces

  H. Information Systems
  H.3 INFORMATION STORAGE AND RETRIEVAL
      H.3.1 Content Analysis and Indexing
          Subjects: Linguistic processing

General Terms:
Design, Human Factors, Performance, Theory

Keywords:
denim, user interface design, visual language, web design