Design patterns

See also: design guidelines, style guides

Introductory articles

  • An introduction to pattern languages for interaction design (PDF)
    The concept of pattern languages crossed over to the computer science field through the efforts of the programming community. The method of documenting invariant problems paired with their corresponding solutions was a convenient way to express repeating programming techniques. The software community started a series of Pattern Languages of Programming conferences to further creation and use of design patterns. It was in these conferences that design patterns were first created for interaction design.

Discussion articles

  • An introduction to using patterns in web design
    The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixel combinations for each page we make. There is a better way to manage this vast complexity than by making big decisions up front and hoping for the best. To make better sites--sites that are functional, beautiful, and "usable"--we have to break our design problems up into small independent chunks based on the real issues within our requirements. Christopher Alexander, who came up with this stuff, calls these chunks patterns.

  • A pattern language approach to usability knowledge management
    "Knowledge gained from usability testing is often applied merely to the immediate product under test and then forgotten—at least at an organizational level. This article describes a usability knowledge management system (KMS) based on principles of pattern language and use-case writing that offers a way to turn lessons learned from usability testing into organizational knowledge that can be leveraged across different projects and different design teams."
    (Michael Hughes - Journal of Usability Studies)

  • Common ground: a pattern language for human computer interface design
    There is plenty of good literature out there on the high-level principles of good interface design, and it is getting ever better as this young field matures.  We all know by now that we ought to use direct manipulation, immediate feedback, proper affordances, judicious use of sound and animation, protection from accidental mistakes, gentle error messages, and so on.  But if you're a  novice designer, it's hard even to remember all these principles, let alone use them effectively!  And it's difficult sometimes to make the tradeoffs among these principles when they come into conflict; we often have to figure out the best solution by guessing, or by resorting to other means.

  • Design patterns: an evolutionary step to managing complex sites
    When your organisation's web site or intranet has hundreds of contributors, how do you ensure that every page is high quality and extremely usable? Especially, if these contributors have never designed a web page before? This is a problem that many of our clients are facing and they've tried a myriad of solutions, such as centralised approval processes, standardised templates, and style guides, all without success. However, the one solution that really excites us is now gaining a lot of attention--design patterns.

  • Design patterns for information architecture with DITA map domains
    When a web site or help system lacks definition and structure, readers can get lost in the content. Information architecture is the practice of organizing and interrelating content so the reader remains oriented and gets answers. By defining formal design patterns for information architecture, content providers can apply tested architectures to improve the user's experience. Using DITA map domains, you can express these design patterns in XML so authors can reuse them consistently for many collections of content.
    (Erik Hennum, Don Day, John Hunt, Dave A. Schell)

  • Design patterns: introduction
    "In the Spring of 2006, a group of designers intimately familiar with the organization and development of design pattern resources got together to discuss the current and future role of design patterns in the real world. We talked about defining and documenting patterns, the context required to communicate how patterns should be applied, what it takes to develop a design language, and how disparate lists of patterns could converge. It’s our hope this conversation continues."
    (Luke Wroblewski - Functioning Form)

  • Don't write guidelines, write patterns
    This paper describes the use of pattern language, as developed by the architect Christopher Alexander, to document and disseminate HCI design knowledge, and argues that this will have advantages over guidelines.

  • Evaluating museum websites using design patterns (PDF)
    This report describes a detailed study of thee museum websites in order to determine the general characteristics and issues in museum site design. The sites of the Rijksmuseum, the Louvre, and the Guggenheim were analyzed in depth using an existing collection of design patterns as the main evaluation tool.
    (Martijn vab Welie, Bob Klaassen)

  • IA Summit: Design patterns in the real world
    "James Reffell and Micah Alpern presented eBay’s evolving body of solutions to Design Patterns in the Real World at IA Summit 2006. As their business and design teams grew exponentially over the past few years, eBay began to have problems maintaining design consistency within their products. Once the number of designers at eBay grew past “a number that could effectively coordinate amongst themselves” the complexity of the eBay platform and the rate at which products needed to be delivered contributed to lots of unintentionally inconsistent design work. People were reinventing the wheel and lots of information was being lost. To address these issues, eBay’s design team tried several approaches."
    (Luke Wroblewski - Functioning Form)

  • Implementing a pattern library in the real world: a Yahoo! case study
    "Yahoo's multiple business units, each containing decentralized user experience teams, have a natural tendency to design different solutions to similar problems. Left unchecked, these differences would weaken the Yahoo! brand and produce a less usable network of products."
    (Erin Malone, Matt Leacock, Chanel Wheeler)

  • The elements of a design pattern
    "Design teams are discovering that a well-built design pattern library makes the user interface development process substantially easier. A quality library means team members have the information they need at their fingertips. Choosing usable components that work smoothly for users becomes the developer's path of least resistance. Innovation, while not prohibited, is reserved for those times when it's really necessary, allowing the team to leverage the work already done by others."
    (Jared M Spool - User Interface Engineering)

  • The need for a lingua franca for design: from sacred places to pattern languages
    A central challenge in interaction design has to do with its diversity. Designers, engineers, managers, marketers, researchers and users all have important contributions to make to the design process. But at the same time they lack shared concepts, experiences and perspectives. How is the process of design-which requires communication, negotiation and compromise-to effectively proceed in the absence of a common ground? I argue that an important role for the interaction designer is to help stakeholders in the design process to construct a lingua franca. To explore this issue, which has received remarkably little attention in HCI, I turn to work in urban design and architecture. I begin by discussing a case study in community design, reported by Hester, that demonstrates the power of a lingua franca for a particular design project. I then describe the concept of pattern languages and discuss how they might be adapted to the needs of interaction design in general, and used, in particular, as meta-languages for generating lingua francas for particular design projects.

  • Webpatterns.org
    "WebPatterns is a place to discuss, document and collaborate on patterns for web design and development."

  • Web patterns: Q&A with John Allsopp
    "I recently had the pleasure of speaking with John Allsopp about Web patterns. John is the lead developer of the Style Master CSS Editor and founder of Webpatterns.org, a site focused on the intersection of design patterns and Web development. In John’s own words: 'The purpose of identifying patterns is to use them in our work as designers, information architects, and developers.' We chatted about doing just that."
    (Luke Wroblewski - Functioning Form)

Research articles

  • The connectivity sonar: detecting site functionality by structural patterns
    Web sites today serve many different functions, such as corporate sites, search engines, e-stores, and so forth. As sites are created for different purposes, their structure and connectivity characteristics vary. However, this research argues that sites of similar role exhibit similar structural patterns, as the functionality of a site naturally induces a typical hyperlinked structure and typical connectivity patterns to and from the rest of the Web.

  • Game Design Patterns Project
    The focus of the Game Design Patterns Project is on studying computer games in terms of interaction, components and design goals with the intension of creating the basis for a common language for game designers. As the basic building block for this language the project uses the concept of design patterns, originally developed by Christopher Alexander et al. Design patterns is a semi-structured formalism that has been used for similar causes in areas such as architecture, software engineering, human-computer interaction, and interaction design.

  • Interaction patterns in user interfaces (PDF)
    This paper discusses and presents interaction patterns in user interfaces. These patterns are focused on solutions to problems end users have when interacting with systems. The patterns taken an end-user perspective which leads to a format where usability is the essential design quality. The format is discussed and presented along with twenty patterns written in that format.

  • Improving web information systems with navigational patterns
    In this paper we show how to improve the architecture of Web Information Systems (WISs) using design patterns, in particular navigational patterns. We first present a framework to reason about the process of designing and implementing these applications. Then we introduce navigational patterns and show some prototypical patterns. We next show how these patterns have been used in some successful WIS. Finally we explain how patterns are integrated into the development process of WIS.

  • Pattern languages for usability: an investigation of alternative approaches
    The best way to ensure usability is to treat human factors as an input to design, rather than merely evaluating prototypes or design documentation. The capability of pattern languages to facilitate the design process, improve communication, and record design philosophies suggests that they may assist the user-centred design process. Researchers have not yet investigated in detail what a pattern language for usability would offer, or how it could be used. This paper explores several alternative conceptualisations of usability-oriented patterns. Patterns of tasks provide high-level detail about tasks users often perform and how they can be supported. User profile patterns help analysts ensure different kinds of users are supported. Relationships between user-interface objects can also be captured by patterns, assisting system implementors by providing information more directly. Patterns of individual user-interface objects, as well as entire systems are also considered, but appear to have more limited application.

  • Pattern languages in interaction design: structure and organisation (PDF)
    Now that individual patterns for interaction design have started to appear, the issue of structuring collections of patterns into a pattern languages becomes relevant, both from a theoretical and practical perspective. In this paper we investigate how pattern languages in interaction design can be structured in a meaningful and practical way.

  • Patterns as tools for user interface design (PDF)
    Designing usable systems is difficult and designers need effective tools that are usable themselves. Effective design tools should be based on proven knowledge of design. Capturing knowledge about the design of usable systems is important for both novice and experienced designers and traditionally, this knowledge has been largely described in guidelines. However guidelines have been shown to have problems concerning selection, validity and applicability. Patters are emerging as a possible solution to some of these problems. This paper explores how patterns for user interface design must be structured in order to be effective and usable tools for designers.

  • PoInter Project: patterns of interaction
    The PoInter project at Lancaster University is concerned with investigating the appropriateness of patterns as a means of communicating information about how people interact with each other through and around technology.

  • Using pattern languages in participatory design (PDF)
    This paper reports on the use of pattern languages and on the authors' experiences using pattern languages in participatory design.

  • User interface patterns - components for user interfaces
    Reusable components, known as user interface patterns, considerably simplify the development of consistent and ergonomic user interfaces. The first part of the following article describes the pattern approach used at SAP. The remainder of the article shows how the patterns are derived from generic user tasks and then mapped on the user interface.
    (Von Udo Arend)

  • Why patterns are not enough: some suggestions concerning an organising principle for patterns of UI design(PDF)
    Much previous work in the HCI arena has focussed on Capture of Practice, Abstraction and Presentation-- that is to say the writing of individual patterns--generally with the explicit rationale that these are the “building blocks” and an organisation for them will come later. However, we took the view that a pattern language is a gestalt product. Thus, the identification and selection of specific practice as patterns may be influenced (perhaps, even, should be influenced) both
    by the relationships between patterns--or pattern categories--and by the anticipated users (and use) to which the patterns will be put.

Pattern collections

  • Brighton Usability Pattern Collection
    A collection of patterns for the design of usable software, maintained by The Usability Group at the University of Brighton, UK.

  • Design pattern library
    "The Yahoo! Design Pattern Library is an evolving set of sophisticated design guidelines for building web pages and applications."
    (Yahoo Developer Network)

  • Diemen repository of interaction design patterns
    Patterns help us solve design problems - problems that occur time and time again, and are being solved time and time again by designers. Patterns describe practical solutions to these problems and how to apply them in different situations. With this interaction design pattern collection we are creating and extending patterns for screen design, with a focus on interaction design and usability.

  • Experiences: a pattern language for user interface design
    Here are the beginnings of a pattern language that can be used to generate software designs which are user centered. By user centered, we mean software designs that place the user's experience first and foremost. We will be concentrating our patterns on the place where a user interacts with the application: the user interface. Even if a software system is architected in such a way that its internal structure and operations are efficient, elegant and correct, it is ultimately the interface by which the end user judges its usefulness.

  • GUI design patterns
    A collection of patterns from Martijn van Welie.

  • HCI patterns for safety-related environments
    This collection presents a pattern library especially designed for touch screens used in safety-relevant environments.
    (Thomas Zahler)

  • Hypermedia design patterns repository
    An initiative of ACM-SIGWEB in collaboration with the University of Italian Switzerland, its goal is to allow a larger community to reuse design experience gathered by other designers of hypermedia and web applications and systems, by providing useful design patterns.

  • IBM patterns for e-business
    Patterns for e-business are a group of reusable assets that can help speed the process of developing Web-based applications.

  • Mobile UI design patterns
    A collection of patterns from Martijn van Welie.

  • Patterns for personal web sites
    A collection that distills the best qualities of personal web sites into design patterns.

  • Patterns in interaction design
    An extensive set of design patterns for websites, GUI applications, and mobile user interfaces.

  • Search patterns wiki
    This wiki serves as a gateway to the Search Patterns Library on Flickr and as a Book Collaboratory that supports work on a new book about designing the future of search and discovery to be written and illustrated by Peter Morville and Jeffery Callender.
    (Peter Morville, Jeffrey Callender)

  • The pattern gallery
    This page is a collection of the various forms which have been developed for the presentation of UI or HCI patterns. It shows the richness and diversity of the field and may also (over time) act as an archive, to capture and detail the various forms, their creation, divergence and emergence.

  • Two patterns for dynamic websites (PDF)
    In this paper we present two hypermedia patterns for websites to explore solutions that have been adopted to face common problems about the information available on the user and the website sides. One aspect of this problem is analysed on the News pattern to handle the problem of what do the users know about the changes on a website. Another aspect is analysed in the Dynamic Configuration pattern from the website perspective, regarding the activities that are carried out by users and how these activities can be validated.

  • UI patterns and techniques
    Each of these patterns (which are more general) and techniques (more specific) are intended to help you solve design problems. They're common problems, and there's no point in reinventing the wheel every time you need, say, a sortable table--plenty of folks have already done it, and learned how to do it well. Some of that knowledge is written up here, in an easily-digestible format. These patterns are intended to be read by people who have some knowledge of UI design concepts and terminology.

  • Usability patterns for applications on the World Wide Web (PDF)
    The World Wide Web has dramatically changed the look and feel of graphical user interfaces, sometimes for the better, sometimes to the user's detriment. There are solutions to the usability problems introduced by the web. This paper presents an initial collection of patterns that describe these solutions.

  • User interface design patterns
    This collection consists of user interface design patterns (interaction patterns). The collection tries to outline the recurring design problems faced when trying to create good design. Our method is Goal-Derived Design (GDD) that is based on simulation of the user's goals. The pattern collection does not include all the characteristics of good design we know so far, but only the design knowledge that we have found appropriate to describe as design patterns.

  • Web design patterns
    A collection of patterns from Martijn van Welie.

  • Web design practices
    This site examines design practices on the Web. The data presented are intended to inform design decisions, not dictate them. Common practice does not necessarily equate with best practice--and the relationship between consistency and usability on the Web is remains a lightly researched area. A goal of this site is to encourage and highlight related empirical research.

Conference workshop proceedings

Books and book reviews

  • Review: A Pattern Language for Web Usability
    The notion of "patterns" and of a "pattern language" comes from the work of Christopher Alexander, a contemporary architect who proposed the use of collections of architectural patterns to address deficiencies in modern building design. The Web usability pattern language described in this book resulted from the collaborative efforts of attendees at a workshop hosted by the author in 1994. It is a collection of recommendations for the design of usable Web sites. While it will be of particular benefit to designers of Web sites designed for commercial or informative purposes, it also provides useful advice for sites intended purely for personal use or as creative outlets.

  • The Design of Sites
    Companion website to the book The Design of Sites by Douglas van Duyne, James Landay and Jason Hong.

Resource collections

  • HCI patterns.org
    A collection of resources for and by people interested in pattern languages in human-computer interaction and user interface design. Includes information about mailing lists, workshops, people working in this field and more.

  • The interaction design patterns page
    An impressive collection of articles and resources on patterns in interaction design.

  • Website patterns
    From IAWiki, a collection of links to pattern repositories and articles on using design patterns.