Using Patterns to Capture Design Experience

by James Hobart

February 2003

Design guidelines have been used, with some success, to capture design knowledge and help make the best decisions when creating user interfaces. We have long been a fan of this approach and have provided the software industry with a very robust set of design guidelines integrated into a web-based knowledge portal.

This portal allows developers to improve software interface designs and helps them avoid making the same design mistakes over and over again. Despite all this effort, applying guidelines to individual projects still has its challenges. Because of the growing complexity of interface design, the guidelines that must be adhered to and followed are numerous. It is often difficult to select the right set of guidelines that apply best to a particular situation. A few key people in your organization may have acquired these skills as part of a usability team. However, this knowledge is rarely held among the vast majority of your design and development staff. The reality is that they are often too busy writing code and testing for bugs!

To address this issue, we believe that the next evolution in capturing and implementing design knowledge will be the use of visual design patterns. A design pattern is a structured textual and graphical description of a proven solution to a recurring design problem. Patterns offer a powerful new way of focusing on design solutions in a specific context by telling the designer when, why, and how the solution can be applied successfully. We feel that patterns can be a very powerful way to leverage your existing guidelines as tools for developers. An important goal of any design team is to capture the reasons for design decisions and the experience from past projects -- in essence, to create a corporate memory of design knowledge that can be easily accessed and contributed to while developing projects.

Effectively capturing design solutions:

• Ensures that the best solutions of the past are saved and implemented in future projects.
• Helps avoid repeating design errors from previous projects.
• Can introduce new team members to the design decisions of past projects.
• Can be used to train and educate less experienced designers or team members to the best practices of user interface design within your company.

A strong business case can be made to invest in capturing visual design patterns. Because departing employees often take most of the memory and experience from their projects with them, the enterprise often can no longer refer to that knowledge to more efficiently handle similar design problems in subsequent projects.

How to Implement Design Patterns

Creating patterns from scratch is challenging. The secret is to develop a framework for defining patterns and to build more robust patterns from a core set of fundamental designs. A solutions framework using design patterns must be developed based on best practices for your deployment platform and specific vertical industry needs. High-level design patterns must be created to address large-scale design issues and reference lower-level patterns to describe their solution. For example, an advanced search pattern will likely reference lower level patterns like a results list pattern and simple search pattern.

If you are going to adopt this approach, what makes an effective pattern?

Patterns must reflect real-world examples. - Patterns are more effective when supported with guidelines and real-world examples. Get your design team to real examples, where experiential learning can take place, and they can play with and test the potential solutions in the context of their specific situation. Support the patterns with proven guidelines, case studies, examples of known usage, checklists, and code examples to bring them to life. Constantly validate and improve the patterns, as a result of real-world user experience and usability testing. If you have a usability team, this approach highly leverages your existing team experience among the entire corporate development community.

Don't make patterns too abstract. - Many existing patterns that have been documented in the software engineering world are written at too abstract of a level to be easily understood and embraced by users of a typical design team. This is an area in which we differ from others in the design world. Some pattern proponents believe in keeping patterns at a high-level to ensure their 'timeless' nature. In theory, this sounds good; however, developers ultimately are looking for coded examples of a pattern. The closer you can come to showing them a solution for their specific implementation, providing examples, and then linking them to actual code, the better chance you will have at being successfully with this approach.

Use a common pattern language. - A common approach to documenting patterns will be emerging in the coming years using a 'common pattern language'. This will allow a broader range of people within your organization to consume, contribute, and create new patterns, ultimately growing your design knowledge base. Currently, the most common language has been based on work by architect Christopher Alexander and his book, A Timeless Way of Building.

Classic System Solutions has been creating visual design patterns for clients now for over two years and are excited to now be including these solutions in our consulting practice, training, and design knowledge products. Give us a call or e-mail me, jimh@classicsys.com, and we'll give you a sneak preview of our next release of GUIguide, our design knowledge portal that is now centered around this 'solutions driven' approach to capturing the knowledge and experience of designing more usable software.