A UML-Based Tool for Designing User Interfaces

A UML-Based Tool for Designing User Interfaces Pedro F. Campos and Nuno J. Nunes University of Madeira – Dep. of Mathematics and Engineering Campus Universitário da Penteada 9000-930 Funchal – Portugal Abstract. Existing software modeling tools are widely recognized to be hard to use and, hence, to adopt. We believe those usability problems are related to a legacy of formalism-centric tools that don’t promote the new challenges of modern software development. In this short paper, we briefly describe a new tool, under development, that tries to promote usability in modeling tools to support collaborative development of interactive software. It focuses on usable, real-world languages and a developer-centered design. 1. Introduction Many different approaches have been proposed to capture the presentation aspects of interactive systems [5]. These include sketches, content inventories, wire-frame schematics and class stereotypes. UML class stereotypes have become a very popular alternative to structure the presentation aspects of interactive systems. Popular objectoriented methods extend the concept of a class to convey the important presentation elements, those concepts are know as “views” in Ovid, “interaction contexts” in UsageCD, “interaction spaces” in Wisdom and “boundaries” in RUP (more recently “screens” in the new profile for web applications). For a comprehensive review of those concepts, please refer to [7]. However, all of the aforementioned techniques still leave a considerable gap between the inception level models of user intentions (task cases, use cases, scenarios and other requirements level models) and the concrete user interface. The center ellipse in Figure 1 illustrates this gap. A growing awareness of this conceptual gap lead Constantine and colleagues to develop a new language for User Interface (UI) specification, called Canonical Abstract Prototypes [1]. This language fills the gap between existing inception level techniques, such as the illustrated UML-based interaction spaces or visual content inventories, and construction level techniques such as concrete prototypes, as Figure 1 shows. Informal tools supporting natural input (such as sketching) also allow faster modeling while communicating unfinished designs to clients and developers. This encourages exploration and promotes a systematic approach to building a UI. Two examples of this class of tools are SILK [4] and DENIM [6]. Our approach differs from others like [4, 6, 8] in the sense that we began with a simple, easy to use drawing application and then added the necessary formalisms, applying real-world notations (UML and Canonical Abstract Prototypes) while also 2 Pedro F. Campos and Nuno J. Nunes seamlessly supporting multiple levels of abstraction (in terms of UI detail). The following section describes the languages and the semantic model of our tool. Section 3 briefly explains some of the tool’s features and Section 4 draws some conclusions and future lines of research. Figure 1: Prototyping techniques from inception to construction (adapted from [1]). 2. CanonSketch: the Languages CanonSketch’s main language is an extension to the UML for the design of interactive systems: the Wisdom profile [7]. The Wisdom UML view is at the highest level of abstraction: it is useful for drawing navigation and containment relationships without concern for details of layout or spatial positioning. The HTML concrete view is at the lowest level of abstraction: it shows a partiallyfunctional HTML prototype rendered in an embedded browser, thus allowing fast testing of the UI. The intermediate view is the Canonical Abstract Prototype view. The symbolic notation underlying Canonical Abstract Prototypes is built from two generic, extensible universal symbols or glyphs: a generic material or container, represented by a square box and a generic tool or action, represented by an arrow. Materials represent content, information, data or other UI objects manipulated or presented to the user during the course of a task. Tools represent operators, mechanisms or controls that can be used to manipulate or transform materials [1]. By combining these two classes of components, one can generate a third class of generic components, called a hybrid or active material, which represents any component with characteristics of both composing elements, such as a text entry box (a UI element presenting information that can also be edited or entered). Figure 2 shows a screenshot of a document being edited in CanonSketch. The left part shows the UML view and the right view shows the corresponding, synchronized, Canonical Abstract Prototype. We can see, for instance, that a containment relationship between two «interaction space» classes corresponds to a Canonical material nested inside a Canonical container. The complete, precise mapping between the three views can be found in [2]. A UML-Based Tool for Designing User Interfaces 3 3. CanonSketch: the Tool All the existing approaches to model the presentation aspects of the user-interface rely on standard modeling tools to create and manipulate modified class models. However, modeling tools are well known to be difficult to use. This lack of usability of modeling tools is in fact responsible for weak adoption and a decline of gross sales of modeling tools (much less than expected and predicted from reputable sources such as the International Data Corporation). From an initial user-centered approach to create a new prototyping tool, we incorporated the semantics and formalisms necessary to provide automated generation of concrete prototypes. Figure 2: CanonSketch’s screenshots, showing the same model at different abstraction views: the UML view (left) and the Canonical Abstract Prototype view (right). What makes CanonSketch a developer-centered tool, besides the languages and the multiple, synchronized views, are its features, which include: color coding, a search box that quickly navigates the model, a grid layout option for helping the design of the spatial layout issues, tool palettes, a customizable toolbar, semantic checking and XMI export that allows tool interoperability at semantic level. The search box highlights all elements containing part of the string being typed, thus acting like a filter. Combined with color coding, this feature can be particularly useful for things such as quickly finding and classifying model elements (e.g. components coded as red are subject to change, classes coded blue represent interaction spaces, etc.). Any change in the UML or Abstract Prototype view updates the other, e.g. if the user changes the name of an abstract component, that name is updated in the corresponding UML element. The HTML view is generated from the Abstract Prototype view. It is also possible to assign images or files to any kind of element. Another aspect we recently added to the tool and has not been described yet is the possibility of using gestures (already implemented) and rough sketches (in development). The idea is to take advantage of natural input modalities in a flexible way that is critical for early development stages1. 1 For more information, please refer to [2] or visit the tools’ website, which contains publications, videos and screenshots: http://dme2.uma.pt/canonsketch. 4 Pedro F. Campos and Nuno J. Nunes 4. Conclusions and Future Work This work shows that the UML semantic model can be used to support multiple levels of detail of an interactive system. The UML had a tremendous impact in software engineering but still remains quite far from achieving the promises of the late 90s. We still lack widely accepted notations to support user-centered development and userinterface design. We think that CanonSketch is a step towards that goal in bridging HCI and Software Engineering. We are attempting to change the way modeling tools are built and envisioned by focusing on achieving a flexible and usable tool instead of following formalism-centered approaches. Our preliminary evaluations with using the tool have been positive, and the approach seems promising. However, the tool will have to be carefully evaluated and we plan to perform an extensive usability study in order to refine the tool and notations according to the study, add support for requirements modeling and achieve integration with application development. Another effort is being devoted to support real-time collaboration between several developers working on the same model. It has been recognized that software design is a highly collaborative activity but few tools support that cooperation. This support will be done in our tool by using Rendezvous [9] communication technology that will allow concurrent synchronous/asynchronous editing of models in a (hopefully) engaging and user-centered way. References 1. Constantine, L. and Lockwood, L. A. D.: Software for use: a practical guide to the models and methods of usage-centered design, Addison Wesley, Reading, Mass, 1999. 2. Campos, P., Nunes, N. J., CanonSketch: a User-Centered Tool for Canonical Abstract Prototyping. In Proceedings of the EHCI/DSV-IS'2004, International Conference on Engineering Human-Computer Interaction / International Workshop on Design, Specification and Verification of Interactive Systems, Hamburg, Germany, 2004. 3. IBM, EMF-based UML 2.0 Metamodel Implementation: http://www.eclipse.org/uml2/. 4. Landay, J. and Myers, B.: Sketching Interfaces: Toward More Human Interface Design. IEEE Computer, pages 56-64, March 2001. 5. Myers, B., Hudson, S. and Pausch, R.: Past, Present and Future of User Interface Software Tools. ACM Transactions on Computer Human Interaction, 7(1): 3-28, March 2000. 6. Newman, M., Lin, J., Hong, J. I. and Landay, J. A.: Denim: an Informal Web Site Design Tool Inspired by Observations of Practice. Human-Computer Interaction, 18(3): 259-324, 2003. 7. Nunes, N. J., Cunha, J. F.: WISDOM: Whitewater Interactive System Development with Object Models, in Mark van Harmelen (Editor.), Object-oriented User Interface Design, Addison-Wesley, Object Technology Series, 2001. 8. Paulo Pinheiro da Silva and Norman W. Paton: A UML-Based Design Environment for Interactive Applications. In Proceedings of the 2nd International Workshop on User Interfaces to Data Intensive Systems (UIDIS'01), E. Kapetanios and H. Hinterberger (Eds.), Zurich, Switzerland, pages 60-71, IEEE Computer Society, 2001. 9. Rendezvous Zero-configuration networking. Apple Computer: http://www.apple.com.