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) one two

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.