|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
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:
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
|Todd Coram and Jim Lee
|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)
|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)
22nd September 1999
|Their Pattern Collection also uses an unaltered Alexandrian form.
|Just Looking (HTML)
|Jason Hong and James Landay
|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 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
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.
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).
|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
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).
|At the INTERACT patterns workshop in 1999 a suggested form for UI patterns was devised.
|Martin Hitz has populated it with a real example.
|Distinguished Reference Objects (PDF)
|Martijn van Welie
|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
|Asa Granlund and Daniel
|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 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 (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's WU language has different types of pattern, although they don't have different forms. See full entry in the "Alexandrian" section, above.
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.
Yahoo! Pattern Form (HTMl)
Narrowing History (GIF)
|A new departure is the rejection of the "traditional" Alexandrian problem-solution form
|Author and creation date
Patterns of Interaction: a Pattern Language for CSCW
|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)
Andy Crabtree, Terry Hemmings, Tom Rodden
Pattern-based Support for Interactive Design in Domestic Settings
|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)
UI Patterns & Techniques
|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)
|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'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)
A Pattern Lanuage for User Assistance
|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
|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
|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
|IDEO Card (jpg) IDEO Suits (HTML)
|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
This 30-card deck was constructed to assist long-term (5-, 10- or 20- year)
design incorporating environmental sustainablity. Each card has:
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
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)
|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
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
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
|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)
|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 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 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.