Patterns of HCI Design and HCI Design of Patterns
(2015)

This chapter introduces the concept of human–computer interaction (HCI) design pattern—also called UI design pattern, interaction design patterns, HCI patterns, user experience pattern and usability engineering pattern. In this book, we mainly use the term HCI Design pattern, but we also use all these terms interchangeably to refer to HCI design pattern. HCI design patterns—have been introduced as a medium to capture and represent users’ experiences as well as to disseminate it as design knowledge. Patterns have the potential of transferring the design expertise of HCI designers to software engineers, who are usually unfamiliar with UI design and usability principles. What is the difference between design patterns and HCI design patterns? Why are they important among HCI designers and SE practitioners? Why design patterns have been considered as a HCI design tool? Why and how HCI design patterns can make a difference? This chapter provides a first answer to these questions that are the key objectives of this book. 1.1 Original Ideas About Design Pattern Among the early attempts to capture and use design knowledge in the format of design patterns, the first major milestone is often attributed to the architect Christopher Alexander, in the late 1970s. In his two books, A Pattern Language (Alexander 1977) and A Timeless Way of Building (Alexander 1979), Alexander, the father of patterns, discusses the avenues to capture and use design knowledge, and presents a large collection of pattern examples to help architects and engineers with the design of buildings, towns, and other urban entities. To illustrate the concept of pattern, Alexander proposes an architectural pattern called Wings of Light (Alexander 1977), where the problem is: Modern buildings are often shaped with no concern for natural light—they depend almost entirely on artificial light. But, buildings which displace natural light as the major source of illumination are not fit places to spend the day. Amongst other information such as design rationale, examples, and links to related patterns, the solution statement to this problem is: 1 The Patterns of HCI Design 2 Arrange each building so that it breaks down into wings which correspond, approximately, to the most important natural social groups within the building. Make each wing long and as narrow as you can—never more than 25 ft wide. According to Alexander, every pattern has three essential elements illustrated in Fig. 1.1, which are: a context, a problem, and a solution. The context describes a recurring set of situations in which the pattern can be applied. The problem refers to a set of forces, i.e., goals and constraints, which occur in the context. Generally, the problem describes when to apply the pattern. The solution refers to a design form or a design rule that can be applied to resolve the forces. It also describes the elements that constitute a pattern, relationships among these elements, as well as responsibilities and collaboration. All of Alexander’s patterns address recurrent problems that designers face by providing a possible solution within a specific context. They follow a similar structure, and the presented information is organized into pattern attributes, such as Problem and Design Rationale. Most noteworthy, the presented solution statement is abstract enough to capture only the invariant properties of good design. The specific pattern implementation is dependent on the design details and the designer’s creativity (Dix et al. 2003). In the example above, there is no mention of specific details such as the corresponding positions of wings to one another, or even the number of wings. These implementation details are left to the designer, allowing different instances of the same pattern solution. In addition, Alexander (1977) recognized that the design and construction of buildings required all stakeholders to make use of a common language for facilitating the implementation of the project from its very beginnings to its completion. If organized properly, patterns could achieve this for all the participants of a design project, acting as a communication tool for design. The pattern concept was not well known until 1987 when patterns appeared again at Object-Oriented Programming, Systems, Languages & Applications (OOPSLA), the object orientation conference in Orlando. There Kent Beck and Ward Cunningham (1987) introduced pattern languages for object-oriented program construction in a seminal paper. Since then many papers and presentations have appeared, authored by renowned software design practitioners such as Grady Booch, Richard Helm, Erich Gamma, and Kent Beck. In 1993, the formation of Hildside Group (1993) by Beck, Cunningham, Coplien, Booch, Johnson and others was the first step forward to forming a design patterns community in the field of software engineering.