Design

Design Patterns

Overview

A design pattern is a proven design solution to a common design problem documented in a standard format. Design patterns support design by providing:

  • A shorthand way and common language for referring to common design problem/solution pairs
  • A means to initiate novices to the profession
  • A means for experienced professionals to record and share their insights
  • A means for a profession to build a repository of knowledge and encourage reuse of best practices.

Examples of widely used Web design patterns include:

  • Shopping cart: a solution for temporary storage of selected items on a site
  • Double tab: a navigation pattern that shows the two topmost levels of a site
  • Bread crumbs: a solution that shows users where they are in a hierarchical structure of the site (van Welie, 2005).

A typical design pattern is one half to two pages long and consists of sections such as:

  • A statement of the problem the design pattern addresses
  • A description of situations where the application of this pattern is appropriate
  • A detailed description of the solution
  • One or more examples of designs that illustrate the pattern

Survey of HCI/UCD Design Pattern Collections

A design pattern language is a collection of design patterns which are structured so that patterns cross-reference other patterns in the set. There are between 5 and 20 significant collections of HCI design patterns. Typically these collections are the work of single authors or small teams and contain 20 to 100 patterns.

Collections vary widely in their focus: some are very general (e.g., web design) and others are more specialized (e.g., design of interactive musical exhibits).

Place of Design Patterns in UCD/HCI

The idea of design patterns originated with the work of the architect Christopher Alexander (1977), but it has since been adopted by both design and software engineering professionals. The value and emphasis that Alexander placed on involving users in design resonated with early proponents of UI design patterns (Erickson & Thomas, 1998), who sought to adopt his seminal work. Between 1997 and 2002, the first generation of UI design patterns was written (Borchers, Tidwell, van Welie). By 2005, there developed a critical mass of design patterns sufficient to be a useful design resource.

Conceptually, design patterns are close relatives of other forms of design guidance such as design guidelines and style guides. Compared to UI guidelines, design patterns typically provide more detail and structure, deal with design issues that are larger in scope, and address a more specific context.

Read More About It

Authoritative References

Borchers, J. (2001). A pattern approach to interaction design. John Wiley & Sons.

Van Duyne, D.K., Landay, J.A., and Hong, J.I. (2003). The design of sites. Addison-Wesley.

Web Sites

van Welie, M. http://www.welie.com/
Good selection of design patterns on GUI, Web, and mobile UIs

Tidwell, J. UI Patterns and Techniques http://time-tripper.com/uipatterns/
Jenifer Tidwell's pattern collections

HCI Patterns http://www.hcipatterns.org
Links to other resources for design patterns

Other References

Alexander, C. (1977). A pattern language: Towns, buildings, construction. Oxford University Press.

Erickson, T. and Thomas, J. (1998). Putting it all together: Towards a pattern language for interaction design. SIGCHI Bulletin, 30(1). http://www.acm.org/sigchi/bulletin/1998.1/erickson.html

Tidwell, J. (2005). Designing interfaces: Patterns for effective interaction design. O’Reilly.