User Interface Design Patterns
Welcome Back
It's been a ridiculously long time since I last posted to Code Scents. Since returning to the Adaptive Technology Resource Centre in December, I've been pleasantly busy becoming a member of the Sakai community, reading a lot about usability and accessibility, and writing plenty of music. It's been a bit of a blur.
One of the projects I'm currently involved with for Sakai is creating a library of User Interface Design Patterns with a group of designers from around the world. It's an experience that promises to teach me not only a lot about design, but also about the potential and pitfalls of doing collaborative work remotely with a disperse group of contributors. Given my interest in agile software development, I'm quite pleased to be working with people in the Sakai community who have a lot of experience with this sort of thing.
Design Patterns for User Interface Design
Interest in pattern languages has grown among interaction designers in recent years, and there are a number of books and Web sites dedicated to the subject. Design Patterns were first described in the work of Christopher Alexander, an architect who built a catalog—or pattern language—of general solutions to recurring architectural problems which could be adapted by other architects for their particular situations. His pattern language identifies patterns in both small- and large-scale structures, from the size of trim in a house to urban planning designs. More recently, design patterns have been widely adopted as a way of describing effective object-oriented software architectures. Kent Beck's article A Short Introduction to Pattern Language provides a great overview of Alexander's work and Beck's own intentions in constructing a pattern language for sofware architecture. Given my interest in both software patterns and usability, the notion of applying patterns to user interface design seems to me a very useful—if potentially incomplete—way of communicating design knowledge and practices.
In her book Designing Interfaces, Jenifer Tidwell describes what a design pattern is in the context of interaction design:
"... patterns can be a description of best practices within a given design domain. They capture common solutions to design tensions... and thus, by definition, are not novel. They aren't off-the-shelf components; each implementation of a pattern differs a little from every other. They aren't simple rules or heuristics either. And they won't walk you step-by-step through an entire set of design decisions—if you're looking for a complete step-by-step description of how to design an interface, a pattern catalog isn't the place!"
Sakai has a very good Style Guide which documents a number of practices and guidelines for building consistent user interfaces. However, the diversity of appearance, internationalization and behavioural needs of Universities from across the world have caused some degree of contention around the notion of an entirely prescriptive approach to user interfaces. The Sakai community has identified a need for more general or customizable advice on user interface design, and this is where the design patterns work comes in. They have the potential to provide, as Tidwell said, a description of best practices for user interface design in Sakai, rather than a prescription for exactly how these solutions should look. I see these design patterns as a way for the community to pool its knowledge and experience around UI design into a single library of patterns which are flexible enough to accommodate the diverse range of needs. Nonetheless, behavioural and appearance consistency is an essential quality of a useful interface, and design patterns by nature don't address consistency, nor do they grant authority to a single design. My hope here is that the design patterns library will provide a rich source of solutions to common UI design problems in Sakai, and that a renewed Style Guide or similar replacement will take these patterns into account when defining specific directions for maintaining consistency across the constellation of Sakai tools.
Documenting the Existing Pattern Libraries
I've been researching the topic of design patterns for user interfaces and found several of resources that are worth looking into:
Yahoo!'s Design Patterns Library
http://developer.yahoo.com/ypatterns/atoz.php
Jenifer Tidwell's Designing Interfaces
http://designinginterfaces.com/
Martin van Welie's Web Design Patterns
http://www.welie.com/patterns/
Sari A. Laakso's User Interface Design Patterns
http://www.cs.helsinki.fi/u/salaakso/patterns/index.html
Coram & Lee's A Pattern Language for User Interface Design
http://www.maplefish.com/todd/papers/Experiences.html
... and the team of grad students at UC Berkeley who created the Web Patterns Project
http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php
I particularly appreciate the detailed content and comprehensive set of patterns in Jenifer Tidwell's book (her Web site is unfortunately more brief) and the clarity and concision of the Yahoo! Design Pattern Library. The inclusion of an Accessibility section in the Yahoo! library is fantastic. We're still in the process of refining the format of Sakai's design pattern library, but I hope it will reflect the amount of detail provide in Jenifer Tidwell's "Why" section while maintaing the simplicity of Yahoo!'s structure.
It's been a ridiculously long time since I last posted to Code Scents. Since returning to the Adaptive Technology Resource Centre in December, I've been pleasantly busy becoming a member of the Sakai community, reading a lot about usability and accessibility, and writing plenty of music. It's been a bit of a blur.
One of the projects I'm currently involved with for Sakai is creating a library of User Interface Design Patterns with a group of designers from around the world. It's an experience that promises to teach me not only a lot about design, but also about the potential and pitfalls of doing collaborative work remotely with a disperse group of contributors. Given my interest in agile software development, I'm quite pleased to be working with people in the Sakai community who have a lot of experience with this sort of thing.
Design Patterns for User Interface Design
Interest in pattern languages has grown among interaction designers in recent years, and there are a number of books and Web sites dedicated to the subject. Design Patterns were first described in the work of Christopher Alexander, an architect who built a catalog—or pattern language—of general solutions to recurring architectural problems which could be adapted by other architects for their particular situations. His pattern language identifies patterns in both small- and large-scale structures, from the size of trim in a house to urban planning designs. More recently, design patterns have been widely adopted as a way of describing effective object-oriented software architectures. Kent Beck's article A Short Introduction to Pattern Language provides a great overview of Alexander's work and Beck's own intentions in constructing a pattern language for sofware architecture. Given my interest in both software patterns and usability, the notion of applying patterns to user interface design seems to me a very useful—if potentially incomplete—way of communicating design knowledge and practices.
In her book Designing Interfaces, Jenifer Tidwell describes what a design pattern is in the context of interaction design:
"... patterns can be a description of best practices within a given design domain. They capture common solutions to design tensions... and thus, by definition, are not novel. They aren't off-the-shelf components; each implementation of a pattern differs a little from every other. They aren't simple rules or heuristics either. And they won't walk you step-by-step through an entire set of design decisions—if you're looking for a complete step-by-step description of how to design an interface, a pattern catalog isn't the place!"
Sakai has a very good Style Guide which documents a number of practices and guidelines for building consistent user interfaces. However, the diversity of appearance, internationalization and behavioural needs of Universities from across the world have caused some degree of contention around the notion of an entirely prescriptive approach to user interfaces. The Sakai community has identified a need for more general or customizable advice on user interface design, and this is where the design patterns work comes in. They have the potential to provide, as Tidwell said, a description of best practices for user interface design in Sakai, rather than a prescription for exactly how these solutions should look. I see these design patterns as a way for the community to pool its knowledge and experience around UI design into a single library of patterns which are flexible enough to accommodate the diverse range of needs. Nonetheless, behavioural and appearance consistency is an essential quality of a useful interface, and design patterns by nature don't address consistency, nor do they grant authority to a single design. My hope here is that the design patterns library will provide a rich source of solutions to common UI design problems in Sakai, and that a renewed Style Guide or similar replacement will take these patterns into account when defining specific directions for maintaining consistency across the constellation of Sakai tools.
Documenting the Existing Pattern Libraries
I've been researching the topic of design patterns for user interfaces and found several of resources that are worth looking into:
Yahoo!'s Design Patterns Library
http://developer.yahoo.com/ypatterns/atoz.php
Jenifer Tidwell's Designing Interfaces
http://designinginterfaces.com/
Martin van Welie's Web Design Patterns
http://www.welie.com/patterns/
Sari A. Laakso's User Interface Design Patterns
http://www.cs.helsinki.fi/u/salaakso/patterns/index.html
Coram & Lee's A Pattern Language for User Interface Design
http://www.maplefish.com/todd/papers/Experiences.html
... and the team of grad students at UC Berkeley who created the Web Patterns Project
http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php
I particularly appreciate the detailed content and comprehensive set of patterns in Jenifer Tidwell's book (her Web site is unfortunately more brief) and the clarity and concision of the Yahoo! Design Pattern Library. The inclusion of an Accessibility section in the Yahoo! library is fantastic. We're still in the process of refining the format of Sakai's design pattern library, but I hope it will reflect the amount of detail provide in Jenifer Tidwell's "Why" section while maintaing the simplicity of Yahoo!'s structure.
posted by Colin Clark at 5:38 PM
