SUMLOW: early design‐stage sketching of UML diagrams on an E‐whiteboard

Qi Chen, John Grundy, John Hosking
2008 Software, Practice & Experience  
Most visual diagramming tools provide point-and-click construction of computer-drawn diagram elements using a conventional desktop computer and mouse. SUMLOW is a Unified Modelling Language (UML) diagramming tool that uses an E-whiteboard and sketching-based user interface to support collaborative software design. SUMLOW allows designers to sketch UML constructs, mixing different UML diagram elements, diagram annotations and hand-drawn text. A key novelty of the tool is the preservation of
more » ... drawn diagrams and support for manipulation of these sketches using pen-based actions. Sketched diagrams can be automatically "formalized" into computer-recognised and drawn UML diagrams and then exported to a 3rd party CASE tool for further extension and use. We describe the motivation for SUMLOW, illustrate use of the tool to sketch various UML diagram types, describe its key architecture abstractions and implementation approaches, and report on two evaluations of the toolset. We hope our experiences will be useful for others developing sketching-based design tools or those looking to leverage pen-based interfaces in software applications. Keywords: sketch-based user interfaces, E-whiteboards, CASE tools, unified modelling language, hand-drawn visual language recognition Related Work UML diagrams may be used at many times during the software lifecycle to aid design and documentation. During early design phases e.g. requirements engineering and high-level architecture analysis, diagrams are often more informal working sketches used to capture preliminary thinking. During detailed design and documentation phases, UML diagrams with more precise formal semantics are used to convey more details about software code. Model-driven engineering even uses such formal diagrams to generate code, possibly later modified in part by hand. Reverse engineering tools draw UML diagrams at low-level and high-levels of abstractions to show structure of target code. Many software tools have been developed that support UML diagramming [11, 37] , most of them to support modelling of software designs. Almost all of these tools adopt conventional mouse and keyboard input and standard monitor display of information [30, 31] . Take-up of such tools within organisations has been mixed at best [22, 5, 26, 15] . Empirical studies show that designers find conventional CASE tools to be overly restrictive, during early design phases in particular, often leading to poor utilisation of the tools [22, 24, 9] . A number of HCI studies have shown that developers will prefer sketching designs by hand rather than using a keyboard and mouse, especially in the early stages of software design [9, 23, 29] . Goel [12] and Black [5] have shown that designers reject tools employing conventional mouse-driven click-and-edit operations during early design-phase work. Diagram editing constraints can also be very distracting and offputting to users, especially during creative design work [7, 22] . Many approaches have been adopted to support collaborative work in conventional CASE tools and other design environments [16, 17, 33] . Most of these approaches have focused on same time, different place (distributed synchronous) or different time, different place (distributed asynchronous) collaboration. In general these tools have also not had very successful uptake to date. Several studies have shown that use and sharing of hand-drawn sketches can better-support collaboration during early-phase design [39, 13, 9] . In particular, same time, same place collaborative early design phase sketching approaches have proved to be successful in other domains [9, 39] . A number of design tools have been developed using a pen/sketch-based approach, in order to overcome some of the problems of mouse-based design environments. One of the earliest examples, SILK [23], provides a tool for software designers to sketch a user interface design using an electronic pad and stylus. SILK attempts to recognize the sketched user interface elements as soon as they are drawn and to formalise them. This approach is not intrusive, however, and users are only made aware of the results when they choose to experiment with the design elements. The user interface element recognition algorithm uses Rubine's single stroke gesture recognition algorithm [32] . SILK can transform the sketches of user interface elements into standard Motif widgets and graphical objects when the designer has completed their sketching work. The designer can switch the sketch into run mode to test the interface. Annotation and editing are also supported by SILK to allow designs to be marked up to facilitate discussion and for sketched designs to be modified easily. However, SILK only recognizes a few ways of drawing each widget and does not support specification of widget behaviour. Other related user interface work includes web-based user interface design in Denim [25] and prototype gesture-based document manipulation tools [1, 28] . Electronic whiteboards have become increasingly popular to support a number of design-related activities. These include facilitation of meetings with collaborative document display and annotation [38] ; computing education [4];
doi:10.1002/spe.856 fatcat:onla3ilmavcrfbboohrnkgl2ra