This is information about design patterns that can be used in the design of user interfaces. The patterns I’m particularly concerned with deal with the look, feel, and behaviour of modern interface elements, such as those found in browsing “the Web.”
Patterns are often employed in object oriented software development and engineering, much more so than user interface design. I believe that by applying patterns at the user interface layout and design level, employing a “top-down” approach, we can avoid some situations where deep-system code decisions impede usability of the resulting user interface.
More information on Patterns, and specifically in the context of software, check out Brad Appleton’s Essential Concepts and Terminology.
Really Good Pattern Libaries
These are my picks for sites to explore if you wish to develop your UI pattern vocabulary.
- Jenifer Tidwell’s Designing Interfaces.
- Sari A. Laakso’s User Interface Design Patterns.
- Yahoo!’s Design Pattern Library. There’s a really neat paper (PDF) that details the development of the Yahoo collection.
Van Welie + v.d. Veer does a good job elaborating on why a collection of patterns isn’t as useful as a full pattern language dedicated to a specific domain in this paper (PDF).
Specific Pattern Languages For Specific Domains
The following table lists some good pattern resources, organized by what problem domain they address.
| Problem Domain | Pattern Language Solution |
|---|---|
| User Interfaces (General) | User Interface Design PatternsExperiences – A Pattern Language for Interface DesignDesigning Interfaces … which replaces Common Ground. Interaction Patterns in User Interfaces (PDF) |
| The Web | Yahoo! Design Pattern LibraryPatterns for Personal WebsitesMartijn van Welie’s Web Design PatternsWebPatterns.org … very work-in-progress. Web Content Management Patterns (PDF) |
| Search | A Pattern Language for Search (PDF) |
| Games | Usability and Games … hellacool. learning patterns for the design and deployment of mathematical games |
| Interactive Graphics | Towards a Pattern Language for Interactive Information Graphics (PDF) |
| Prototyping | Hold Me Thrill Me Kiss Me Kill Me (PDF) |
| Colour Usage | Cyberpatterns – Examples |
UI Patterns In Print
- Jenifer Tidwell’s Designing Interfaces (2005), published by O’Reilly.
- Jan Borchers’ A Pattern Approach to Interaction Design (2001).
… or check out Hillside.net’s guide on writing your own patterns.
Good Reading
There are several academic papers on the subject of user interface patterns and their application in designing user interfaces. A Google Scholar search for user interface patterns is a good place to start, but here are some that are worth noting.
- Pattern Languages in Interaction Design: Structure and Organization (PDF), van Welie et al., 2003.
- Patterns for HCI and Cognitive Dimensions: two halves of the same story? (PDF) Fincher et al, 2002.
- A Pattern-Supported Approach to the User Interface Design Process (PDF) Granlund, et al., 2001.
Fitting patterns into your software design process. - Perspectives on HCI Patterns: Concepts and Tools (PDF), Fincher, Finlay, Greene et al, Molina, 2003.
The extended abstract from the CHI 2003 workshop on HCI Patterns. - A cookbook for using the model-view controller user interface paradigm in Smalltalk-80 (portal.acm.org), Krasner et al, 1988. One of the first academic publishings use of patterns in UI design.
… also check out the HCI pattern papers at CHI 2003.
At the 2004 CHI workshop, a markup language for pattern languages (PLML) was established. I love stuff that’s written in XML.
Pattern Conference
User Interface patterns are most likely to be workshopped and discussed at the following conferences:
- PLoP – Pattern Language of Programs conference. In 2006, in conjunction with OOPSLA.
- CHI – State-of-the-art patterns workshops 1997-2004.
Acknowledgements
Much of this content from stemmed from Tom Erickson’s The Interaction Design Patterns Page, which a really excellent resource.
