Model-based user interface engineering with design patterns

https://doi.org/10.1016/j.jss.2006.10.037Get rights and content

Abstract

The main idea surrounding model-based UI (User Interface) development is to identify useful abstractions that highlight the core aspects and properties of an interactive system and its design. These abstractions are instantiated and iteratively transformed at different level to create a concrete user interface. However, certain limitations prevent UI developers from adopting model-based approaches for UI engineering. One such limitation is the lack of reusability of best design practices and knowledge within such approaches. With a view to fostering reuse in the instantiation and transformation of models, we introduce patterns as building blocks, which can be first used to construct different models and then instantiated into concrete UI artefacts. In particular, we will demonstrate how different kinds of patterns can be used as modules for establishing task, dialog, presentation and layout models. Starting from an outline of the general process of pattern application, an interface for combining patterns and a possible formalization are suggested. The Task Pattern Wizard, an XML/XUL-based tool for selecting, adapting and applying patterns to task models, will be presented. In addition, an extended example will illustrate the intimate complicity of several patterns and the proposed model-driven approach.

Introduction

The model-based approach was introduced to support the specification and design of interactive systems at a semantic, conceptual and abstract level as an alternative to dealing with low-level implementation issues earlier on in the development lifecycle (Paternò, 2000). This way, designers can concentrate on important conceptual properties instead of being distracted by the technical and implementation details. As a result, the increasing complexity of the user interface is more easily managed. Moreover, the UI architecture is simplified, hence allowing for better system comprehension and traceability for future maintenance for different context of use.

Unfortunately, model-based methods are rarely used in practice (Trætteberg, 2004). One major reason for this limitation is that creating various models, instantiating and linking them together to create lower level models is a tedious and very time-consuming work, especially when most of the associated activities have to be done manually; tools provide only marginal support. This presents an overhead that is unacceptable in many industrial setups with limited resources, tough competition and short time-to-market. This crippling overhead can be partially attributed to the fact that model-based methods (MOBI-D, 1999, TADEUS, 1998, TERESA, 2004) lack the flexibility of reusing knowledge in building and transforming models. At best, only few approaches offer a form of copy-and-paste reuse. Moreover, many of these reuses involve the “reuser” merely taking a copy of a model component and manually changing it according to the new requirements. No form of consistency with the original solution is maintained (Mens et al., 1998). Copy-and-paste analysis and the concept of fragmented design models are clearly inadequate when attempting to integrate reuse in a systematic and retraceable way in the model-based UI development life cycle.

This practical observation motivates the need for a more disciplined form of reuse. We will demonstrate that the reusability problems associated with current model-based approaches can be overcome through patterns. Patterns have been mainly known as proven solutions to well-known problems that occur in different situations. They are usually presented as a vehicle to capture the best practices and facilitate their dissemination. Because patterns are context-sensitive, the solution encapsulated in the pattern can be customized and instantiated to the current context of use before being reused (Alexander, 1997). Nevertheless, in order to be an effective knowledge-capturing tool in model-based approaches, the following issues require more attention:

  • A classification of patterns according to models must be established. Such a classification would distinguish between patterns that are building blocks for models and patterns that drive the transformation of models, as well as create a concrete UI.

  • A tool support that can assist developers when selecting the proper patterns, instantiating them once selected, as well as when combining them to create a model.

These two aspects are the essence of this paper. After a brief overview of existing model-based approaches, we will introduce how we have been combining model-based approaches and several patterns to build a framework for the development of user interfaces. A clear definition of the various models used and an outline of the UI derivation process are also given. Furthermore, we will suggest how to enhance this framework using patterns as a reuse vehicle. We will demonstrate how HCI patterns can be used as building blocks when constructing and transforming the various models, and list which kind of HCI patterns lend themselves to this use. A brief case study is presented in order to validate and illustrate the applicability of our approach and the proposed list of patterns.

Section snippets

Model-based user interface engineering

Model-based UI development has been investigated for more than a decade. In most approaches, model-based UI design is defined as the process of creating and refining models (da Silva, 2000, Vanderdonckt et al., 2003). Many models exist in order to describe the user interface at different levels including task, user, presentation, dialog, and platform models. Until now, no consensus has been reached as to which models are the best for describing UI’s (da Silva, 2000) and which model can be

Basic concepts and terminology

PD-MBUI (Pattern-Driven and Model-Based UI) aims to reconcile and unify in a single framework the pattern-driven and model-based approaches, two powerful methods for UI and software engineering as in Fig. 1. It comprises the following components:

  • 1.

    A set of models including domain, task, user, environment, dialog, presentation and layout models. These models as well as the process of constructing them are detailed in Section 3.2.

  • 2.

    A library of HCI patterns that can be used, as building blocks, in

HCI patterns taxonomy and samples

Fig. 3 portrays which types of patterns are used to construct and transform each type of models and how this happen in the model-driven engineering process.

Patterns as building blocks within a model based methodology

The following are the major types of patterns we considered with our framework:

  • Task and feature patterns are used to describe hierarchically structured task fragments. These fragments can then be used as task building blocks for gradually building the envisioned task model.

  • Patterns for the dialog model are employed to help with grouping the

Examples of models construction using patterns

In previous sections of this paper, it was shown how patterns can generally be applied to models and how they can be aggregated. This section provides an in-depth discussion of how different categories of patterns can be used together when constructing the task, dialog, presentation and layout model.

Putting it all together: the pattern wizard tool

Efficiently choosing and applying patterns requires tool support. In response, we have implemented a prototype of a task pattern wizard that is designed to support all phases of pattern application for the task model, ranging from pattern selection to adaptation to integration. After parsing the pattern, the tool guides the user step by step through the pattern adaptation and integration process. In what follows, we provide a brief description of how the Task Pattern Wizard is used. Particular

An illustrative case study

The management of a hotel is going to be computerized. The hotel’s main business is renting out rooms of various types. There is a total of 40 rooms available, priced according to their amenities. The hotel administration needs a tool capable of booking rooms for specific guests. More specifically, the application’s main functionality consists of adding a guest to the internal database and booking an available room for a registered guest. Moreover, only certified guests have access to the main

Conclusion

In this paper, we demonstrated how patterns could be delivered and applied within be model-based UI development approaches. Within our proposed framework PD-MBUI, patterns were introduced to overcome the lack of reuse in model construction and transformation. This represents one of the major limitations of existing model-based UI development frameworks. In particular, we illustrated how different kinds of patterns can be used as building blocks for the establishment of task, dialog,

Acknowledgements

This research was supported partially by a grant from the National Science and Engineering Research Consul of Canada. The first author thanks Nicole Li, Homa Javahery, Paul Ashutosh, and especially Mohamed Taleb and Daniel Sinnig all members of the Human-Centered Software Engineering group at Concordia University and who participated actively over 6 years in the development of the approach described in this paper. A special thank goes to Professor Peter Forbrig and his students from Rostosk

References (26)

  • D.C. Rine et al.

    An empirical study of a software reuse reference model

    Information and Software Technology

    (2000)
  • C. Alexander

    A Pattern Language: Towns, Buildings, Construction

    (1997)
  • H. Balzert

    From OOA to GUIs: The JANUS System

    Journal of Object-Oriented Programming

    (1996)
  • J. Borchers

    A Pattern Approach to Interaction Design

    (2001)
  • I. Breedvelt et al.

    Reusable Structures in Task Models

    (1997)
  • P. da Silva

    User Interface Declarative Models and Development Environments: A Survey in DSV-IS’2000

    (2000)
  • Gaffar, A., Seffah, A., Van der Poll, J., 2005. HCI patterns semantics in XML: a pragmatic approach, HSSE 2005. In:...
  • Granlund, A., Lafreniere, D., 1999. PSA: A pattern-supported approach to the user interface design process, July,...
  • C. Märtin

    Software Life Cycle Automation for Interactive Applications: The AME Design Environment. in CADUI’96

    (1996)
  • T. Mens et al.

    Supporting Disciplined Reuse and Evolution of UML Models. In UML98: Beyond the Notation

    (1998)
  • MOBI-D, 1999. The MOBI-D Interface Development...
  • Molina, P., Meliá, S., Pastor, O., 2002. JUST-UI: A User Interface Specification Model. In: CADUI 2002, Valenciennes,...
  • OliverNova, 2004. CARE...
  • Cited by (49)

    • Reusing UI elements with model-based user interface development

      2016, International Journal of Human Computer Studies
      Citation Excerpt :

      However, in spite of the plethora of available approaches, no MBUIDE has experienced wide adoption by the software industry (Trætteberg, 2008; Molina, 2004). As envisaged by some authors (Pinheiro da Silva, 2001; Ahmed and Ashraf, 2007) the poor reusability of UI model specifications can be argued to partially explain this lack of interest from the industry. More recently, Meixner et al. (2011) have supported this idea, pointing also to the lack of harmonization between the MBUID and MDE worlds, as well as the absence of real-world usage and case studies as important challenges to be faced by MBUID systems in the future.

    • End-user development by application-domain configuration

      2014, Journal of Systems and Software
      Citation Excerpt :

      General EUD environments based on task-tree diagram specifications have also been produced for customising service applications for web and mobile platforms (Paternò et al., 2011); a case study for genres of reservation applications is reported. Similarly, EUD languages and customisation support for a reservation/allocation task based on design patterns has been proposed by Seffah and Ashraf (2007). While these systems enable relatively easy development by menu/diagram-based interfaces, they do rely on extensive, prior configuration by domain experts or service component developers.

    • User Interface Transition Diagrams for customer-developer communication improvement in software development projects

      2013, Journal of Systems and Software
      Citation Excerpt :

      “The main idea surrounding Model-Based UI development is to identify useful abstractions that highlight the core aspects and properties of an interactive system and its design. These abstractions are instantiated and iteratively transformed at different level to create a concrete user interface” (Ahmed and Ashraf, 2007). The Model-Based User Interface Development Environments (MB-UIDE) are environments which provide a context within which user interface declarative models can be constructed and related as part of the user interface design process (Pinheiro Da Silva, 2001a).

    • Human and program factors affecting the maintenance of programs with deployed design patterns

      2012, Information and Software Technology
      Citation Excerpt :

      Using deployed design patterns to develop user interfaces is not new. For instance, Ahmed and Ashraf [1] develop a model-based framework that uses design patterns as the interaction cores and thus lets developers add user interfaces around such patterns. Hennipman et al. [19] further propose a new category of pattern language specific to human–computer interaction.

    • Multi-platform Framework for Pattern and Image Processing

      2023, Lecture Notes in Networks and Systems
    View all citing articles on Scopus
    View full text