Using User Interface Models in Design

Abstract

We introduce a framework for classifying user interface design representations, and argue that multiple representations are must be used in the design process, and that modelling languages must support the transition between them. We present languages for modelling domain, task and dialog and show how they provide increased support for design, through flexibility and integration. Design patterns based on model fragments from these languages are suggested as a design and engineering tool.Keywords: user interface model, task model, dialog model, design pattern INTRODUCTIONWith the standardization of UML and its emergence as a de-facto industrial standard, modelling of systems and software artefacts seems to be accepted in the engineering community. User interface modelling and model-based user interface design has however, not reached the mainstream software developer [1]. Red Whale's MOBILE [2] cover several models but lack integration with software engineering tools, while database-oriented tools like Genera's Genova [3] have a more narrow focus on concrete interaction object selection and layout. It seems that lack of tool support for going from comprehensive visual model diagrams to executable code may be a reason for this difference. But very few UML diagramming tools provide full codegeneration support, yet developers are using these tools to draw UML diagrams, e.g. for communication purposes. The lack of penetration of model-based user interface design methods may instead be due to pragmatic aspects of UI modelling languages, e.g. they are difficult to understand, inflexible and impractical to use and lack the appropriate integration with each other. Although formality in itself is important, it 1. This work is part of a Dr.ing study funded by The Research Council of Norway.may be that the focus should be language usability rather than theory, if the goal is reaching the mainstream. A uniform user interface modeling language must integrate sub-languages for domain, task and dialog modelling, be unconstraining and flexible, i.e. provide support for expressing design ideas, suggestions and decisions throughout the design process.In this paper we will first introduce a framework for classifying design representation. The framework provides a means for understanding how they are utilized in the design process, which in turn has implications for language design and usage. We then briefly present modelling languages for tasks and dialogs and discuss how our understanding affected their design. We then turn to how design knowledge can be represented in the same languages in the form of model-based user interface design patterns. Finally, we suggest how these modelling languages may be integrated with UML, to provide better integration with contemporary methods. DESIGN PROCESS AND REPRESENTATIONSTo better understand how design representations are used and the role they play, we use a model of organizational knowledge creation as a starting point [4]. According to this theory, there must during product deve...

A Systematic Lightweight Approach for Natural User Interfaces Prototyping

“…Informal prototyping, on the other hand, uses quick and flexible ways to describe and illustrate the interface morphologically (how it looks) and functionally (how it works). Examples of informal methods are sketches, scenarios, snapshots, storyboards, and natural language in Traetteberg (2002) and Carter and Hundhausen (2010).…”

Visibility Matrix: Efficient User Interface Modelling for Low-Code Development Platforms

“…Heimann [21]. A more practical approach, supported by examples of applications, is presented by Christophe Kolski, Jean Vanderdonckt, and Henry Lieberman [22][23][24][25][26][27], Jano van Hemert, Jos Koetsier, Livia Torterolo, Ivan Porro, Maurizio Melato, and Roberto Barbera [28], and P. Bocciarelli [29].…”