Pattern-Based UI Design: Adding Rigor with User and Context Variables
Homa Javahery
1
, Daniel Sinnig
1
, Ahmed Seffah
1
, Peter Forbrig
2
and T. Radhakrishnan
1
1
Department of Computer Science and Software Engineering, Concordia University
Montreal, QC, Canada H3G 1M8 h_javaheencs.concordia.ca
2
Department of Computer Science University of Rostock
Albert-Einstein-Str.21, 18051, Rostock, Germany
ABSTRACT
In current practice, user interface development is often based on a vague and undocumented design process, relying solely on the
designer’s experience. This paper defines a pattern-based design process, which adds rigor to user interface design. The process is
based on the notion of user variables to capture user requirements in a formal manner – based on discrete values that are amenable
for tool support and automated analysis. Other context of use information is captured as context variables. Using these values as
input, design patterns are selected to leverage best design practices directly into user interface development. Pattern-
Oriented Design is then employed to derive a conceptual design, or early prototype, of the user interface. A case study with a
Bioinformatics information site exemplifies the feasibility and applicability of this process.
Categories and Subject Descriptors
H5.2. Information interfaces and presentation e.g., HCI: User Interfaces.
General Terms
Design, Experimentation, Human Factors.
Keywords
HCI patterns, pattern-oriented design, persona, user variables, design methodology, context.
1. INTRODUCTION
Over the last decade, the development of interactive applications, and consequently the user interface UI, has become increasingly
complex. Designers need to be aware of many different factors which influence UI design: a user analysis and their
characteristics, b environmental constraints such as platform and device characteristics, and c task analysis in the intended
place of use. Collectively these are referred to as the context of use [1]. Since the UI development process has become highly
context-sensitive, UI Design based on the intuition of the designer is no longer adequate. In order to cope with this multi-
dimensional complexity, we need to add rigor to UI development. To attain this feat, we require processes that are systematic,
traceable and practical for designers, but which also leave room for design creativity when appropriate.
In recent years, there have been considerable efforts to add rigor to UI development. One such approach is model-based UI
development. The main idea surrounding model-based approaches is to identify useful abstractions that highlight key aspects to be
considered when designing interactive applications [2]. Central to all model-based approaches is that all aspects of a user interface
design are represented using declarative models. In a model-based approach, the UI design is the process of creating and refining the
user interface models at different levels of abstraction [3]. In other words, model-based design focuses on finding mappings between
the various models [4]. Eventually, user interfaces are generated automatically or semi-automatically with the designer’s
interventions and decisions, from the model descriptions.
Model-based user interface development has been investigated and researched for more than a decade [5]. Even though its
potential and advantages are considerable, none of the model- based frameworks have been adopted by the mainstream
developer. Industry does not share the perspective of employing model-based techniques for UI development. On the contrary;
industry is still led by RAD Rapid Application Development tools, IDE Integrated Development Environments and authoring
tools like Macromedia Dreamweaver or Macromedia Flash [6]. The main problems of model-based UI development are the lack
of tool support, the immaturity of the process that transforms one model into another for refinement, and the lack of technology
which is capable of rendering usable user interfaces from the model descriptions [7].
Taking these arguments into consideration we investigate an alternative solution, which, similar to model-based UI
development, abstracts important requirements and context properties. However, in contrast to model-based UI development
where model transformations are the means for successive refinements, we employ patterns to derive a UI prototype. Our
development framework is based on Pattern-Oriented Design POD as a driving force for developers [8]. Design patterns are
proven solutions to common design problems, and have been successfully applied in many different domains [9, 10, 11]. In user
interface design, patterns have been introduced as a medium to capture, disseminate and reuse proven design knowledge, and to
facilitate the design of more usable systems [12, 13]. Patterns are presented in a specific format with defined attributes, and are
applicable at different levels of abstraction. These levels include the user-task model, navigation model and presentation model for
the concrete presentation of the user interface. Moreover, patterns are context-sensitive entities, which make them particularly
attractive as a tool to facilitate UI design.
In this paper, we propose to add rigor to UI development by using a clearly defined process; based on a finite set of variables
containing discrete values and best design practices captured as
patterns. We will define a pattern-based design framework, which helps designers derive an early UI prototype, or conceptual
design, from specified variables. These variables abstract important properties from the user and context of use. The
resulting UI prototype is then used for stakeholder evaluations and early usability testing. Design flaws are detected at a very
early stage within UI development and can be recovered with little effort. Finally the prototype serves as a basis for the actual
implementation of the UI.
2. Pattern-Based User Interface Development
