Visual Design of User Interfaces by (De)composition

  • Sophie Lepreux
  • Jean Vanderdonckt
  • Benjamin Michotte
Part of the Lecture Notes in Computer Science book series (LNCS, volume 4323)


Most existing graphical user interfaces are usually designed for a fixed context of use, thus making them rather difficult to modify for other contexts of use, such as for other users, other platforms, and other environments. This paper addresses this problem by introducing a new visual design method for graphical users interfaces referred to as “visual design by (de)composition”. In this method, any individual or composite component of a graphical user interface is submitted to a series of operations for composing a new interface from existing components and for decomposing an existing one into smaller pieces that can be used in turn for another interface. For this purpose, any component of a user interface is described by specifications that are consistently written in a user interface description language that remains hidden to the designers’ eyes. We first define the composition and decomposition operations and individually exemplify them on some small examples. We then demonstrate how they can be used to visually design new interfaces for a real-world case study where variations of the context of use induce frequent recomposition of user interfaces. Finally, we describe how the operations are implemented in a dedicated interface builder supporting the aforementioned method.


User Interface Union Operator Visual Design Fusion Operator Composition Operation 
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.
    Brown, J.: Exploring Human-Computer Interaction and Software Engineering Methodologies for Creation of Interactive Software. SIGCHI Bulletin 29(1), 32–35 (1997)CrossRefGoogle Scholar
  2. 2.
    Morch, A.: Tailoring tools for system development. Journal of End User Computing 10(2), 22–29 (1998)Google Scholar
  3. 3.
    Calvary, G., et al.: A Unifying Reference Framework for Multi-Target User Interfaces. Interacting with Computer 15(3), 289–308 (2003)CrossRefGoogle Scholar
  4. 4.
    Ali, M.F., Pérez-Quiñones, M.A., Abrams, M.: Building Multi-Platform User Interfaces with UIML. In: Seffah, A., Javahery, H. (eds.) Multiple User Interfaces: Engineering and Application Framework, pp. 95–118. John Wiley, Chichester (2004)Google Scholar
  5. 5.
    Chu, H., et al.: Roam, a Seamless Application Framework. Journal of System and Software 69(3), 209–226 (2004)CrossRefGoogle Scholar
  6. 6.
    Göbel, S., et al.: Device Independent Representation of Web-based Dialogs and Contents. In: Proc. of IEEE Youth Forum in Computer Science and Engineering YUFORIC’01, Valencia, November 2001, IEEE Computer Society Press, Los Alamitos (2001)Google Scholar
  7. 7.
    Spriestersbach, A., et al.: Flexible Pagination and Layouting for Device Independent Authoring. In: Proc. of WWW’2003 Workshop on Emerging Applications for Wireless and Mobile Access (2003)Google Scholar
  8. 8.
    Watters, C., Zhang, R.: PDA Access to Internet Content: Focus on Forms. In: Proc. of the 36th Annual Hawaii Int. Conf. on System Sciences HICSS’03, Big Island, January 2003, pp. 105–113. IEEE Computer Society Press, Los Alamitos (2003)Google Scholar
  9. 9.
    Dery-Pinna, A.-M., Fierstone, J., Picard, E.: Component Model and Programming: a First Step to Manage Human-Computer Interaction Adaptation. In: Chittaro, L. (ed.) Mobile HCI 2003. LNCS, vol. 2795, pp. 456–460. Springer, Heidelberg (2003)Google Scholar
  10. 10.
    Eisenstein, J., Vanderdonckt, J., Puerta, A.: Model-Based User-Interface Development Techniques for Mobile Computing. In: Lester, J. (ed.) Proc. of 5th ACM Int. Conf. on Intelligent User Interfaces IUI’2001, Santa Fe, January 14-17, 2001, pp. 69–76. ACM Press, New York (2001)CrossRefGoogle Scholar
  11. 11.
    Ye, J., Herbert, J.: User Interface Tailoring for Mobile Computing Devices. In: Stary, C., Stephanidis, C. (eds.) User-Centered Interaction Paradigms for Universal Access in the Information Society. LNCS, vol. 3196, pp. 175–184. Springer, Heidelberg (2004)Google Scholar
  12. 12.
    Banavar, G., et al.: Tooling and System Support for Authoring Multi-device applications. Journal of Systems and Software 69(3), 227–242 (2004)CrossRefGoogle Scholar
  13. 13.
    Rugaber, S.: A Tool Suite for Evolving Legacy Software. In: Proc. of IEEE Int. Conf. on Software Maintenance ICSM’99, Oxford, 30 August-3 Sept. 1999, pp. 33–39. IEEE Comp. Society Press, Los Alamitos (1999)Google Scholar
  14. 14.
    Florins, M., Vanderdonckt, J.: Graceful Degradation of User Interfaces as a Design Method for Multiplatform Systems. In: Proc. of Int. Conf. on Intelligent User Interfaces IUI’04, Funchal, January 13-16, 2004, pp. 140–147. ACM Press, New York (2004)Google Scholar
  15. 15.
    Grundy, J.C., Hosking, J.G.: Developing Adaptable User Interfaces for Component-based Systems. Interacting with Computers 14(3), 175–194 (2001)CrossRefGoogle Scholar
  16. 16.
    Robertson, G., et al.: Scalable Fabric: Flexible Task Management. In: Proc. of ACM Conf. on Advanced Visual Interfaces AVI’2004, Gallipoli, May 25-28, 2004, pp. 85–89. ACM Press, New York (2004)CrossRefGoogle Scholar
  17. 17.
    Quan, D., Huynh, D., Karger, D.R.: Haystack: A Platform for Authoring End User Semantic Web Applications. In: Fensel, D., Sycara, K.P., Mylopoulos, J. (eds.) ISWC 2003. LNCS, vol. 2870, Springer, Heidelberg (2003)Google Scholar
  18. 18.
    Tan, D.S., Meyers, B., Czerwinski, M.: WinCuts: Manipulating Arbitrary Window Regions for more Effective Use of Screen Space. In: Proc. of ACM Conf. on Human Aspects in Computing Systems CHI’2004, Vienna, April 2004, pp. 1525–1528. ACM Press, New York (2004)Google Scholar
  19. 19.
    Leventhal, E., Grubis, A.: Composable User Interfaces. The MITRE Corporation, Bedford (2004)Google Scholar
  20. 20.
    Grolaux, D., Vanderdonckt, J., Van Roy, P.: Attach me, Detach me, Assemble me like You Work. In: Costabile, M.F., Paternó, F. (eds.) INTERACT 2005. LNCS, vol. 3585, pp. 198–212. Springer, Heidelberg (2005)CrossRefGoogle Scholar
  21. 21.
    Limbourg, Q., et al.: UsiXML: a Language Supporting Multi-Path Development of User Interfaces. In: Bastide, R., Palanque, P., Roth, J. (eds.) Engineering Human Computer Interaction and Interactive Systems. LNCS, vol. 3425, pp. 200–220. Springer, Heidelberg (2005)Google Scholar
  22. 22.
    El Bekai, A., Nick Rossiter, B.: A Tree Based Algebra Framework for XML Data Systems. In: Proc. of the 7th Int. Conf. on Enterprise Information Systems ICEIS’2005, Miami, May 25-28, 2005, pp. 305–312 (2005)Google Scholar
  23. 23.
    Lepreux, S., Vanderdonckt, J.: Toward a support of the user interfaces design using composition rules. In: Calvary, G., et al. (eds.) Proc. of the 6th International Conference on Computer-Aided Design of User Interfaces (CADUI’2006)., Bucharest, Romania, June 5-8, 2006, pp. 5–8. Springer, Berlin (2006)Google Scholar

Copyright information

© Springer Berlin Heidelberg 2007

Authors and Affiliations

  • Sophie Lepreux
    • 1
    • 2
  • Jean Vanderdonckt
    • 1
  • Benjamin Michotte
    • 1
  1. 1.IAG/ISYS, Université catholique de Louvain, Place des Doyens 1, B(1348 Louvain-la-Neuve (Belgium) 
  2. 2.LAMIH – UMR CNRS 8530, Université de Valenciennes et du Hainaut-Cambrésis, Le Mont-Houy, F-59313 Valenciennes Cedex 9 (France) 

Personalised recommendations