User Interface Design Patterns

Durée : 1 journée

Langue : anglais

Ashraf Gaffar et Ahmed Seffah

About this Tutorial

This full-day tutorial is designed and continuously updated using feedback from previous presentations and tutorials as well as by researchers in the Human-Centered Software Engineering (HCSE) Group at Concordia University. It includes the results of several years of research and development on patterns-assisted engineering and integration as well as issues for integrating UCD best practices, user experiences and designers knowledge in the whole software engineering lifecycle. It brings the results of several workshops organized on UCD and user interfaces design for software engineering including ECOOP'99, UPA'99, INTERACT'01 and the IFIP WCC'02.


The following are the main topics:
  1. Introduction
  2. HCI Pattern Catalogs: A Critical Analysis
  3. Tracing the Evolution of Pattern-Oriented Engineering
  4. Upgrading Interactive System Architectures with Usability Patterns
  5. Migrating a Graphical User Interface to Multi-Platforms and Contexts
  6. Patterns-Oriented Design Illustrated: The Case of Complex Web Applications
  7. Patterns Capture, Storage, Delivery and Evolution
  8. From Human Experiences to Empirically-Validated Patterns
  9. Process-Sensitive Patterns and Patterns-Supported Integration
  10. Patterns and the Other UI Engineering Approaches


The user-centered design (UCD) has been introduced by the HCI community as an approach for developing usable products (Norman, 1998; Mayhiew, 1999; Constantine, 1999). Unfortunately, even if software development teams largely recognize the potential of UCD techniques, they often run into problems. One problem derives from the fact that if a software team member has experience in user-centered design, she may see similarities between the two approaches – for example use cases and task analysis - and try to substitute one for the other, while both UCD and traditional software engineering techniques each have their own strengths and weaknesses. In addition, their objectives overlap in some areas but differ in others. User-centered design should be a core part of every software development activity.

Yet, despite its well-documented paybacks, it has yet to be widely adopted. In this tutorial, participants will learn how to discover, describe and apply interaction/user interface patterns. The tutorial gives the relevant theory, and also provides methodology and practical tips for pattern-assisted design as well as for integrating patterns into the software development lifecycle. Participants will be exposed to an innovative and comprehensive framework.

Participants will be provided with a background on patterns, and experiment with the discovery, description and application of patterns through hands-on experiences and real world examples. The tutorial will show how we can apply the ideas underlying a pattern to the design of a large variety of user interfaces including traditional GUI, Web applications, PDA and mobiles applications. In particular, we discuss how pattern can be engineered in such a way to be an ideal vehicle for gathering best design practices and user experiences, and transferring -by means of CASE tools- the knowledge of usability experts to software engineers unfamiliar user interfaces design.

Architectural, Software and Usability Patterns

The architect Alexander (1979) has introduced design patterns in early 1970. He defines a pattern as having “…a three-part rule, which expresses a relation between a certain context, a problem, and a solution". He goes on explaining the nature of a pattern: "Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over”. The concept of patterns became very popular in the software engineering community with the wide acceptance of the book "Design Patterns: Elements of Reusable Object-Oriented Software" (Gamma, 1995). Since then, the software engineering community has generalized this concept by using it in different areas including software architecture, requirements, analysis, and more recently in software process reengineering and improvement (Schimdt, 1996; Ambler, 1998). During, the last five years, the human computer interaction community has also adopted patterns as a user interface design tool. Tidwell (1998) describes a user interface pattern as possible good solutions to a common design problem within a certain context, by describing the invariant qualities of all those solutions. Using patterns should be like asking your experienced colleague in the next room for advice (Lafrenière, 1998). Recently, the concept of usability pattern has been introduced and discussed in different workshops (CHI 1999; INTERACT 1999; UPA 2001, CHI 2003). In this tutorial, we define pattern as a proven design solution or best HCD practice for a user problem that occurs in several context. The primary goal of an HCD patterns in general is to create an inventory of solutions to help user interfaces designers resolve UI development problems that are common, difficult and frequently encountered (Loureiro & Plummer, 1999).

Tutorial Objectives

The material of this tutorial is organized around the following idea. There is a general lack of specialists in user interface development, so most software user interfaces are designed and built by software engineers. These engineers need training and effective design about how to build usable and useful user interfaces, but the scarcity of user interface specialists is correlated with the lack of design tool ready to be used by user interface developers unfamiliar with usability engineering. The content focuses on an iterative development lifecycle of practical cost-effective patterns for the analysis, design, implementation, and evaluation of user interfaces. There will be treatment of lecture material, motivating demonstrations, and reinforcing exercises. Widely available interaction patterns will be discussed with references to usability engineering best practices. The tutorial provides background and practical experience on patterns for the user interface world, explaining how to discover, describe and apply patterns. The tutorial gives the necessary theory, but also goes beyond explaining, providing hands-on experiences of the patterns-assisted design approach. The participants will be exposed to an innovative and comprehensive framework for:

Who should attend this tutorial?

Any person concerned with user interface development and interaction design in the software development community will get significant benefits from this tutorial. There are no prerequisites other than an interest in the topic of user interface development. This tutorial is best viewed as intermediate level because it assumes some general knowledge in software engineering. The intended audiences include:

IHM’06, École Polytechnique de Montréal, C.P. 6079, Succ. Centre-ville, Montréal, Québec