Using Storyboards to Integrate Models and Informal Design Knowledge

  • Mieke Haesen
  • Jan Van den Bergh
  • Jan Meskens
  • Kris Luyten
  • Sylvain Degrandsart
  • Serge Demeyer
  • Karin Coninx
Part of the Studies in Computational Intelligence book series (SCI, volume 340)


Model-driven development of user interfaces has become increasingly powerful in recent years. Unfortunately, model-driven approaches have the inherent limitation that they cannot handle the informal nature of some of the artifacts used in truly multidisciplinary user interface development such as storyboards, sketches, scenarios and personas. In this chapter, we present an approach and tool support for multidisciplinary user interface development bridging informal and formal artifacts in the design and development process. Key features of the approach are the usage of annotated storyboards, which can be connected to other models through an underlying meta-model, and cross-toolkit design support based on an abstract user interface model.


User Interface Context Model Task Model News Video Concrete User Interface 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.


Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.


  1. 1.
    Coyette, A., Schimke, S., Vanderdonckt, J., Vielhauer, C.: Trainable sketch recognizer for graphical user interface design. In: Baranauskas, M.C.C., Palanque, P.A., Abascal, J., Barbosa, S.D.J. (eds.) INTERACT 2007. LNCS, vol. 4662, pp. 124–135. Springer, Heidelberg (2007)CrossRefGoogle Scholar
  2. 2.
    Haesen, M., Coninx, K., den Bergh, J.V., Luyten, K.: MuiCSer: A Process Framework for Multi-Disciplinary User-Centered Software Engineering processes. In: Proc. of Human-Centred Software Engineering, pp. 150–165 (2008)Google Scholar
  3. 3.
    Helms, J., Abrams, M.: Retrospective on ui description languages, based on eight years’ experience with the user interface markup language (uiml). Int. J. Web Eng. Technol. 4(2), 138–162 (2008)CrossRefGoogle Scholar
  4. 4.
    Brown, J., Graham, T.C.N., Wright, T.N.: The Vista environment for the coevolutionary design of user interfaces. In: Proc. of International Conference on Human Factors in Computing Systems, pp. 376–383 (1998)Google Scholar
  5. 5.
    Chatty, S., Sire, S., Vinot, J.L., Lecoanet, P., Lemort, A., Mertz, C.P.: Revisiting visual interface programming: creating gui tools for designers and programmers. In: Proc. of Annual ACM Symposium on User Interface Software and Technology, pp. 267–276. ACM, New York (2004)Google Scholar
  6. 6.
    Redmond-Pyle, D., Moore, A.: Graphical User Interface Design and Evaluation. Prentice Hall, London (1995)zbMATHGoogle Scholar
  7. 7.
    Cooper, A.: The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity, 2nd edn. Pearson Education, Old Tappan (2004)Google Scholar
  8. 8.
    Pruitt, J., Adlin, T.: The Persona Lifecycle: Keeping People in Mind Throughout Product Design. Morgan Kaufmann Publishers, San Francisco (2006)Google Scholar
  9. 9.
    Carroll, J.M.: Making use: scenario-based design of human-computer interactions. MIT Press, Cambridge (2000)Google Scholar
  10. 10.
    Dow, S., Saponas, T.S., Li, Y., Landay, J.A.: External representations in ubiquitous computing design and the implications for design tools. In: Proc. of the Conference on Designing Interactive Systems, pp. 241–250Google Scholar
  11. 11.
    Johansson, M., Arvola, M.: A case study of how user interface sketches, scenarios and computer prototypes structure stakeholder meetings. In: Proc. of BCS Conference on Human-Computer Interaction, vol. (1), pp. 177–184, BCS (2007)Google Scholar
  12. 12.
    Buxton, B.: Sketching User Experiences getting the design right and the right design. Norman Kaufmann Publishers, San Francisco (2007)Google Scholar
  13. 13.
    Roam, D.: Back of the Napkin: Solving Problems and Selling Ideas with Pictures. Portfolio, New York (2008)Google Scholar
  14. 14.
    Truong, K.N., Hayes, G.R., Abowd, G.D.: Storyboarding: an empirical determination of best practices and effective guidelines. In: Proc. of the Conference on Designing Interactive Systems, pp. 12–21Google Scholar
  15. 15.
    Bowen, J., Reeves, S.: Formal refinement of informal gui design artefacts. In: Proc. of Australian Software Engineering Conference, pp. 221–230. IEEE Computer Society, Los Alamitos (2006)Google Scholar
  16. 16.
    Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouillon, L., Vanderdonckt, J.: A unifying reference framework for multi-target user interfaces. Interact. Comput. 15(3), 289–308 (2003)CrossRefGoogle Scholar
  17. 17.
    Limbourg, Q., Vanderdonckt, J., Michotte, B., Bouillon, L., López-Jaquero, V.: USIXML: A language supporting multi-path development of user interfaces. In: Feige, U., Roth, J. (eds.) DSV-IS 2004 and EHCI 2004. LNCS, vol. 3425, pp. 200–220. Springer, Heidelberg (2005)CrossRefGoogle Scholar
  18. 18.
    Jourde, F., Laurillau, Y., Nigay, L.: Comm notation for specifying collaborative and multimodal interactive systems. In: Proc. of Symposium on Engineering Interactive Computing Systems, pp. 125–134. ACM, New York (2010)Google Scholar
  19. 19.
    Constantine, L.L.: Canonical abstract prototypes for abstract visual and interaction. In: Jorge, J.A., Jardim Nunes, N., Falcão e Cunha, J. (eds.) DSV-IS 2003. LNCS, vol. 2844, pp. 1–15. Springer, Heidelberg (2003)CrossRefGoogle Scholar
  20. 20.
    Nóbrega, L., Nunes, N.J., Coelho, H.: The meta sketch editor. In: Calvary, G., Pribeanu, C., Santucci, G., Vanderdonckt, J. (eds.) CADUI, pp. 201–214. Springer, Heidelberg (2006)Google Scholar
  21. 21.
    Harmelen, M.V. (ed.): Object Modeling and User Interface Design. The Component Software Series. Addison-Wesley, Reading (2001)Google Scholar
  22. 22.
    Haesen, M., Luyten, K., Coninx, K.: Get your requirements straight: Storyboarding revisited. In: Gross, T., Gulliksen, J., Kotzé, P., Oestreicher, L., Palanque, P., Prates, R.O., Winckler, M. (eds.) INTERACT 2009. LNCS, vol. 5727, pp. 546–549. Springer, Heidelberg (2009)CrossRefGoogle Scholar
  23. 23.
    Haesen, M., Meskens, J., Luyten, K., Coninx, K.: Draw me a storyboard: Incorporating principles and techniques of comics to ease communication and artefact creation in user-centred design. In: Proc. of BCS Conference on Human Computer Interaction, Dundee (to appear, 2010)Google Scholar
  24. 24.
    Allen, J.F.: Maintaining knowledge about temporal intervals. Commun. ACM 26(11), 832–843 (1983)zbMATHCrossRefGoogle Scholar
  25. 25.
    Vanderhulst, G., Luyten, K., Coninx, K.: Photo-based user interfaces: Picture it, tag it, use it. In: Meersman, R., Herrero, P., Dillon, T. (eds.) OTM 2009 Workshops. LNCS, vol. 5872, pp. 610–615. Springer, Heidelberg (2009)CrossRefGoogle Scholar
  26. 26.
    Meskens, J., Luyten, K., Coninx, K.: Jelly a multi-device design environment for managing consistency across devices. In: Santucci, G. (ed.) International Working Conference on Advanced Visual Interfaces, pp. 289–296. ACM Press, New York (2010)Google Scholar
  27. 27.
    Vermeulen, J., Vandriessche, Y., Clerckx, T., Luyten, K., Coninx, K.: Service-interaction descriptions: Augmenting services with user interface models. In: Proc. of Engineering Interactive Systems, Springer, Heidelberg (2007)Google Scholar
  28. 28.
    Li, Y., Landay, J.A.: Activity-based prototyping of ubicomp applications for long-lived, everyday human activities. In: Proc. of International Conference on Human Factors in Computing Systems, pp. 1303–1312Google Scholar
  29. 29.
    Campos, P.F., Nunes, N.J.: Towards useful and usable interaction design tools: Canonsketch. Interact. Comput. 19(5-6), 597–613 (2007)CrossRefGoogle Scholar
  30. 30.
    Nunes, N.J.: Representing user-interface patterns in UML. In: Masood, A., Léonard, M., Pigneur, Y., Patel, S. (eds.) OOIS 2003. LNCS, vol. 2817, pp. 142–163. Springer, Heidelberg (2003)CrossRefGoogle Scholar
  31. 31.
    Mori, G., Paternò, F., Santoro, C.: Ctte: Support for developing and analyzing task models for interactive system design. IEEE Trans. Software Eng. 28(8), 797–813 (2002)CrossRefGoogle Scholar
  32. 32.
    Newman, M.W., Lin, J., Hong, J.I., Landay, J.A.: Denim: an informal web site design tool inspired by observations of practice. Hum. -Comput. Interact. 18(3), 259–324 (2003)CrossRefGoogle Scholar
  33. 33.
    Lin, J., Landay, J.A.: Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. In: Proc. of International Conference on Human Factors in Computing Systems, pp. 1313–1322Google Scholar
  34. 34.
    Gajos, K.Z., Weld, D.S., Wobbrock, J.O.: Automatically generating personalized user interfaces with supple. Artif. Intell. 174, 910–950 (2010)CrossRefGoogle Scholar
  35. 35.
    Nichols, J., Chau, D.H., Myers, B.A.: Demonstrating the viability of automatically generated user interfaces. In: Proc. of International Conference on Human Factors in Computing Systems, pp. 1283–1292. ACM, New York (2007)CrossRefGoogle Scholar
  36. 36.
    Myers, B., Hudson, S.E., Pausch, R.: Past, present, and future of user interface software tools. ACM Trans. Comput.-Hum. Interact. 7(1), 3–28 (2000)CrossRefGoogle Scholar

Copyright information

© Springer-Verlag Berlin Heidelberg 2011

Authors and Affiliations

  • Mieke Haesen
    • 1
  • Jan Van den Bergh
    • 1
  • Jan Meskens
    • 1
  • Kris Luyten
    • 1
  • Sylvain Degrandsart
    • 2
    • 3
  • Serge Demeyer
    • 2
  • Karin Coninx
    • 1
  1. 1.Expertise Centre for Digital MediaHasselt University - tUL - IBBTDiepenbeekBelgium
  2. 2.Dept. Mathematics and Computer ScienceUniversiteit AntwerpenAntwerpenBelgium
  3. 3.Software Engineering LabUniversity of Mons - UMONSMonsBelgium

Personalised recommendations