This page is a collection of the various forms which have been developed for the presentation of UI or HCI patterns. I started collating it after the CHI'00 patterns workshop. Clearly it already 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.

The page is not intended to show anything in particular about the content of the patterns presented here. They have not been selected for what they present, but for how they present it.

I have captured copies of patterns at a specific point in time, and have put as precise a date as possible on each. I have also indicated source and authorial attribution. If I have any of this wrong, or you have another type or variation which you would like added, please let me know

Sections in this page:
  • Patterns which follow an Alexandrian form
  • Patterns which include elements from a form devised for software design
  • Patterns which have differing forms for different levels or types of design activity
  • Patterns which reject the "traditional" Alexandrian problem-solution format
  • Playing Card forms. Not really patterns, but they share enough features for me to want to include them.
  • Some non-UI pattern forms which I think have interesting - even inspiring - things to offer
Other pages:


The Pattern Gallery

The first grouping here all display a form which is closely related to that devised by Christopher Alexander and his colleagues, and used in A Pattern Language, OUP 1977
Author and creation date Commentary Example
Todd Coram and Jim Lee
1996
This form uses the same structure and sections as in Alexander.
This pattern is one of a collection called Experiences which were presented in a paper at PLoP (Pattern Languages of Programming) conference, 1996.
Modeless Feedback Area (HTML)
Jan Borchers
1999
An HCI pattern presented in pure Alexandrian form. (Jan uses this form throughout his book A Pattern Approach to Interaction Design, Wiley 2001) Domain-Appropriate Devices (PDF)
The Usability Group
22nd September 1999
Their Pattern Collection also uses an unaltered Alexandrian form. Just Looking (HTML)
Jason Hong and James Landay
April 2000
A purely narrative form. (This is an early version which has subsequently been developed and extended and used throughout their book: The Design of Sites: Patterns, principles and processes for crafting a customer-centered web experience Douglas K. Van Duyne, James A. Landay, Jason I. Hong, Addison Wesley 2002. The book has its own accompanying website with a sample pattern available from the "About the Book" link). Custom 3-D Action Buttons (DOC)
Ian Graham
2003
Ian has collected A Pattern Language for Web Usability which has been published as a website and a book. He says "Each pattern is presented using the same layout, semantic structure and typographical conventions. These are very closely based on the structure pioneered by Alexander et al." so I've put these in this section.

An interesting feature of Wu, however, is that it distinguishes different type of patterns depending on their placement within the collection. The types are: Abstract, Concrete and Concrete & Terminal. "Patterns being terminal does not mean that design thinking stops with them - merely that the language considers the further design issues as beyond its scope or ambitions". An interesting concept which hints towards the possibility of separate but inter-locking collections.

Sense of Location
(HTML)
Mark Irons
8 July 2003
Mark's collection of Patterns for Personal Websites display a very minimal form. And although he distances from it in his introduction, definitely Alexandrian. And, in my opinion, also Alexandrian in two very difficult areas: in the careful and accurate naming of the patterns (with names that are resonant and meaningful), and in the fact that the practice they capture is "non-obvious" (I've written elsewhere as why I think this is a good thing). Secret Garden
(HTML)

The following patterns all, to a greater or lesser extent, include elements of the pattern form devised by Gamma, Helm, Johnson and Vlissides and used in Design Patterns, Addison- Wesley 1994.
Author and creation date Commentary Example
Jenifer Tidwell
17th May 1999
A "hybrid" pattern form, which has the basic elements of the Alexandrian form, but augmented.

(Note that Jenifer has developed one of the earliest, largest-scale and most influential HCI pattern collections, Common Ground).

Toolbox (HTML)
INTERACT'99
August 1999
At the INTERACT patterns workshop in 1999 a suggested form for UI patterns was devised. INTERACT'99 (HTML)

Martin Hitz has populated it with a real example. Distinguished Reference Objects (PDF)
Martijn van Welie
April 2000
A structured pattern form, which adds elements common in software patterns, such as "forces".

(Note that Martijn is continuing and expanding his work, which can be found in his Pattern Library for Interaction Design formerly the "Interaction Design Patterns" and even before that, the "Amsterdam Patterns Collection").

The Wizard (PDF)

Some pattern-authors find a single pattern form too restricting, and have identified various types of pattern which often have interlocking forms
Author and creation date Commentary Example
Asa Granlund and Daniel Lafreniere
July 1999
The "Pattern Supported Approach" (PSA) which they have developed has different types of patterns ranging from those for describing particular work domains to task and design patterns. The Pattern-Supported Approach (PDF)
Janet Wesson
April 2000
Janet takes a single pattern from Jenifer Tidwell's collection (see above) and modifies it with a series of "components-level sub-patterns" The Modified Form Pattern (DOC)
Barry Wilkins
March 2003
Barry (in his PhD) has developed a constrained set of visualisation-specific patterns which fall into three "categories": Structure Patterns (which focus on defining the form and content of the visualisation) Interaction Patterns (which focus on the interaction mechanisms that can be used to achieve tasks) and Composition Patterns (which provide solutions for the effective layout of multiple visualisations and the communication between them). All categories follow the same form, based on Borchers, above. Notably, he includes other authors' patterns (Tidwell, 1999, above) within his structure. This is the first time I have seen someone do this. 2D Representation (HTML)
a "structure pattern"
Ian Graham
2003
Ian Graham's WU language has different types of pattern, although they don't have different forms. See full entry in the "Alexandrian" section, above.
Matt Leacock
Erin Malone
Chanel Wheeler
Yahoo! Pattern Library
March 2005

Oddly enough, I think this is the first time I've encountered a collection called a "library". Footnote

Prettier, and fairly regularly updated, is their Design Pattern Library page.

A massively hybrid form, archaeologically Alexandrian, which includes elements from many other forms - van Welie, Tidwell II, and more.

They categorise the patterns by four types - partly as a finding aid, partly as a structuring principle (the importance of which I've written about elsewhere) although they also seem to have a second, nascent, structuring principle with the inclusion of "parent" patterns.

They use the single form for all types.

The Yahoo! Pattern Form (HTMl)
Narrowing History (GIF)

A new departure is the rejection of the "traditional" Alexandrian problem-solution form
Author and creation date Commentary Example
The PoInter Project
Patterns of Interaction: a Pattern Language for CSCW
September 2001
The approach that this group (from Lancaster University) take is fuelled by ethnograhic fieldwork. They call their patterns "descriptive patterns" and each one has a two-stage format which necesarily includes "vignettes" - real examples from their own or others' work.

There is a very nice paper describing their approach Finding patterns in the fieldwork, available from the publications section of the project homepage

Artifact as an audit tool:
Pattern-level form (HTML)
Vignette form
(HTML)
Andy Crabtree, Terry Hemmings, Tom Rodden
Pattern-based Support for Interactive Design in Domestic Settings
June 2002
This group (loosely associated with the Pointer project, above) also use an adapted pattern-form to identify and codify "patterns of action and technology usage" to support designers in analyzing domestic space and use, and in formulating design solutions. Whilst they have different aims and purposes for their work, they nevertheless map each section of their form against the pure Alexandrian form.
(see also: John Hughes, Jon O'Brien, Tom Rodden, Mark Rouncefield and Stephen Villar (2000) Patterns of Home Life: Informing Design for Domestic Environments Personal Technologies, 4 (1) : 25-38, available from the Pointer project publications page. This paper uses Alexandrian form, but is clearly a precursor to this more adapted approach.)
Template with mappings to Alexandrian form and example entries from "Making Breakfast for Small Children" (.doc)

Making Breakfast for Small Children (HTML)

Jenifer Tidwell,
UI Patterns & Techniques
May 2002

Designing Interfaces
Nov 2005

Jenifer devised a second collection, separate from Common Ground (above) originally called UI Patterns and Techniques. It used an extremely minimalist form, with only four sections: Use When, Why, How, and Examples - which are screenshots from a variety of sources.

This is the form which she used in her book Designing Interfaces published by O'Reilly, so I predict (Feb 2006) that this will become a pretty influential form. The book has its own accompanying website with many sample patterns

Illustrated Choices (HTML)
Mary Zajicek,
July 2003
A collection of patterns in a very specific domain Patterns For Speech Dialogues For Older Adults, Mary follows the same minimalist form as Tidwell, above, augmenting it with a "tradeoffs" section - which I think might be functionally analagous to "forces" in software design patterns, or "context" in PLML. Talk Through Message (HTML)
Sari Laasko,
September 2003
Sari's collection of User Interface Design Patterns explicitly states "We have not tried to apply the format of Alexander's design patterns". The collection "tries to outline the recuring design problems faced when trying to create good design". There is almost no form at all. In an opening section each pattern has a description of some characterising features and an indication of use. This is then followed by several examples, which are always screenshots. Finally, there is a reference section. Continuous Filter (HTML)
Mike Hughes,
A Pattern Lanuage for User Assistance
January 2007
Although Mike describes his work as a pattern language he actually only gives a single example of a pattern form with no larger structure, organising principle or "grammar". His form has some familiar components (Trigger, Context, Forces) but also the unusual "Claims Analysis" which can contain negative consequences for deploying the pattern. The goes against the more common assumption that a pattern is a good way, a positive way, of resolving a design problem. Pattern form (jpeg)
Dan Lockton, David Harrison
& Neville A. Stanton
Design With Intent Toolkit
April 2009
A problematic collection (for this page) for two reasons.

Firstly, it only partially deals with HCI. The focus of the toolkit is on designing for Behaviour Change, and it encourages designers to do this by examining the problem through different "lenses" drawn from different disciplinary traditions. The 6 lenses are: Persuasive, Security, Visual, Architectural, Errorproofing & Cognitive. An interesting organisation.

Secondly, the form is so minimal as to be practically non-existant. Each "pattern" has a name, followed by a quote - or speech snippet - apparantly to explain, or illustrate the name (so Interlock is followed by "that doesn't work unless you do this first"). Then there are two paragraphs which describe the intent. These are followed by examples, which are always formed of a photograph and a textual description of what the photograph shows. Each pattern is illustrated with a diagram that categorises it as enabling, motivating or constraining behaviour. I cannot find (Nov 2009) any explanation of the form and its constituent parts by the authors. However, Dan's blog reports that a card-deck version of the toolkit will be available in December.

Toolkit v0.9 (pdf)

Playing Card Forms
I see that these have similarity to patterns, and so include them here. If you think this is a dilution of the intent of this page, (or that they are an otherwise daft inclusion) let me know and I'll move them off.
Author and creation date Commentary Example
IDEO
Method Cards
2002
Each of the 51 IDEO method cards represents one of the "diverse ways that design teams can understand the people they are designing for". I see their similarity to patterns (and hence their inclusion here) in these ways:
  • each card has a pictorial sensitising example on the face (see INTERACT'99 form, above),
  • each method is given a name,
  • each card has sections on "how" you would use the method and "why" you would use the method,
  • each card has a specific example of the use of the method described, thus powerfully linking the abstract principle with concrete example. As Tom Erickson says "... the concrete prototypes in pattern languages make direct contact with users' experiences. Anyone who has experience with the situation can begin to understand, discuss, and contest Alexandrian patterns."
And, indeed, IDEO methods.
IDEO Card (jpg)
IDEO Suits (HTML)
nForm
Trading Cards
2007
A slightly different metaphor here - "Gotta get 'em all" - but a similar form. Each card has a sensitising example, "What" and "Why" sections. Additionally, they reference some external sources, and there is provision for community commentary. nForm Card (html)
nForm List (HTML)
Value Sensitive Design Research Lab
Envisioning Cards
2008
This 30-card deck was constructed to assist long-term (5-, 10- or 20- year) design incorporating environmental sustainablity. Each card has:
  • a sensitising example on the face (they call this an "evocative image"),
  • a name (they call this "the title of a concept"),
  • a brief description,
  • an activity "to assist a design team in considering that particular concept".

They are collected into four suits of "four critical envisioning dimensions": Stakeholders, Time, Values and Pervasiveness.

(All quotes are taken from: Lisa Nathan, Batya Friedman, Dave Hendry (2009) Information System Design as Catalyst: Human Action and Environmental Sustainability, Interactions, 16 (4): 6-11, available from the ACM Digital Library)

Envisioning Cards (jpg)
Art Center College of Design
Mobility Vision Integration Process
2008

This is a large collection. 109 cards in 11 suits - Energy, Society, Technology, Economy, Ecology, Policy, Enterprise, Axiom, Customer, Constraint and Wildcard. Each card has a label (it's not really a name - more an encapsulation of an issue), a short description of that issue, and an "impact question" - a starter question to think about what impact the card might have in the scenario in question.

The connection with patterns here is less obvious, perhaps, but they stick more closely to the playing card metaphor with suggestions for "rules of play", to augment the internal structure of the deck. This idea of generative re-combination for design is something that pattern languages have long sought.

Anatomy of an mvip card (jpg)
Online Flash Version
Rules of Play (pdf)
Different Games (pdf)
Hasso Plattner Institute of Design, Stanford University (d.school)
Method Cards
2013
The d.school at Stanford have made a collection of their methods available (called Bootleg Bootcamp). They do not claim them to be patterns, rather they call them "method cards", but they have elements of a pattern form (and, more clearly, a pattern intent). Each card has a sensitising example and then "why" and "how" sections. The cards are collected into five suits (which they call "modes") reflecting their take on the design life cycle: empathise, define, ideate, prototype, test. The resemblance to, and debt to, IDEO method cards is unsurprising. Bootleg Bootcamp (pdf)
Group Pattern Language Project
Group Works
2014

A deck of 91 cards, organised into 9 suits for “bringing life to meetings and other gatherings”. Their pattern-form is not especially distinctive. On each card there is: Title; a sensitising image (always credited – they call it a “visual depiction”); a 50-word description – which they call the pattern “heart”; an indication of suit; the names of up to 7 closely related patterns.

However, the structure and the expression of the organising principle(s) is unusually thorough and, in the context of The Pattern Gallery, of keen interest. Firstly, the categories are not interchangeable, but ordered: “the categories are listed in the order in which they might naturally be considered in event design” this represents an elusive element of the Alexandrian PL that has been particularly resistant to replication. Second, each of the nine suits has a “keystone” card which captures the sense purpose of that category: the nine keystone cards together can be used as a subset. Thirdly, they provide extensive examples of usage, including an online tool, for selecting subsets of patterns that exemplify specific ways of doing something, or which relate to particular re-occurring circumstances.

(I know this doesn't wholly belong – it‘s a stretch to consider it HCI – but there is a lot I like about this collection and its approaches that I’d like to see considered in HCI pattern endeavours. And, hey. I'm the curator).

Key Card (jpg)

Inspiring work from other domains
Author and creation date Commentary Example
Noah Falstein
The 4OO Project March 2002
The 400 Project aims to explicate The 400 Rules of Game Design. These are not really patterns (which they describe as "a welcomed allied analysis"). But they have a very interesting contribution to the conceptualisation of the relationship between patterns (or "rules" in their parlance) with the idea of "trumping". I like this because it doesn't invalidate the "over-ruled" pattern, but says, in effect, "in this circumstance, this rule takes precedence". I find this a more sympathetic and useful expression than "trade-offs" or "forces". The 400 Format (HTML)
Short Term Goals (HTML)
Jens Bennedsen and Ole Eriksen
November 2003
Jens and Ole do not work in the domain of UI or HCI, but rather within pedagogy. Their form of pedagogic patterns, is described in Applying and Developing Patterns in Teaching. I think their approach - to make the set of values which their patterns are based on absolutely explicit, leading to what they call "value-based definitions" - is a very exciting development. Template
(HTML) (although you really need to read the paper for proper context)
T.J. Leone
June 2004
In a similar vein (and domain) T.J. Leone has "mined" design patterns from the theory and practice of Montessori education. It may be (as I've written elsewhere, I think it should be) that education is a particularly rich and appropriate field for this approach: but Leone takes back from UI design the work models of Hugh Beyer & Karen Holtzblatt (as expounded by them in their book Contextual Design) and uses them as a structuring principle. Very neat. Montessori Design Patterns
(PDF)
Mining Montessori Design Patterns
(PDF)

Mary Lynn Manns & Linda Rising
2005

Mary and Linda's 49 patterns are collected in their book Fearless Change (Addison Wesley, 2005). They are concerned with organisational change (specifically "introducing new ideas"). The patterns take a fairly elaborate form, although they use fairly standard sections.

  • The Opening Story (in italics)
  • Summary (in bold)
  • Context (in body text)
  • Problem (in bold)
  • Forces ( in body text)
  • Essence of the solution (prefaced by "Therefore")
  • More on the solution (in body text)
  • Resulting context (in body text)
  • Known uses (in italics)

The reason I include them here is that this is the first time I've seen the sensitising example rendered as a narrative. I think that is a compelling feature, which may be well worth considering in other contexts. Certainly in HCI we've kept within the box defined as "image" for too long. (On the other hand, the alphabetical organisation of their patterns by name is irritating and functionally useless).

Tailor made (in two jpgs)


This collection compiled and maintained by Sally Fincher. It was created on the 3rd of August 2000, and last updated on the 3rd of October 2014. It is available from http://www.cs.kent.ac.uk/people/staff/saf/patterns/gallery.html
This work is licensed under a Creative Commons License.