Writing a Design Pattern -- FAQ
Writing a UI Design Pattern - Questions and Answers
What is a user interface design pattern?
A design pattern is an expression of good design practice that addresses a problem that occurs over and over again in different situations. A user interface design pattern is a solution model for addressing a UI problem (presented from the user's point of view) based on established UI principles.
How are user interface design patterns used?
UI Design patterns are used by designers and developers to assist in creating user interface solutions. A design pattern informs the designer of what principles can be applied to a particular kind of problem, and what has been demonstrated to work well. The use of patterns can also enhance communication between designers. A well-known pattern can simply be referred to by name, without explanation of the design information it comprises.
Why should we use design patterns?
A design pattern is distillation of good design which provides a model solution to a recurring user interface problem. It is a package of proven expertise that informs the designer of what principles apply and what is known to work.
Where do design patterns come from?
Design patterns are often discovered when a designer notices how existing solutions to a common problem all employ the same good practices and are based on the same principles. The designer may record (codify) the discovery as a pattern and publish it to be used by others.
What are the main elements of a design pattern?
A well-expressed pattern will always contain a statement of the user's problem, a model solution, and a description of the contexts where the solution has been shown to work.
Can a design pattern contain other design patterns?
Design patterns can be composites built on or containing other design patterns.
I have a design pattern in mind. How do I write it up for the OSDPL?
In writing up a design pattern for the Open Source Design Pattern Library, you will want to capture all the essential elements of the pattern and to provide your readers with enough background information for them to use it effectively. The pattern submission process of the OSDPL makes this fairly simple. It presents an input form with tabbed sections that cover both the pattern description and guidelines for its use under the following headings:
1. Information
In the Properties section, enter the title of your pattern. Try to choose a title that is descriptive, but short enough to be used in conversation. This makes it easy for people to use the pattern name to refer to its functionality.
You can also enter tags or keywords that help classify your pattern for searches.
2. Problem
Here you provide a brief description of the problem from the user's perspective. For example:
The user needs to modify a simple text string on the current page, without losing track of the navigational position or obscuring what is being displayed.
Note how this statement reflects the user's situation, and frames the context for the solution.
3. Solution
The solution section captures details of how the solution can be effected, as well as further clarifying scope and context.
Solution Description
Make a brief statement of the solution in language that could be understood by the user. If a particular visual metaphor is to be used, describe it here.
Solution Image Sources
User interface patterns can often be best expressed with an image or set of images that show what the user will understand as a solution to the problem. Ideally, there will be a primary solution image that can be entered here.
Use When
Here is where the applicable contexts for the solution are described. As a pattern author, you need to explain to the reader the circumstances under which the solution will be most effective.
How
Here you must explain how the interaction design should be structured to best represent the pattern. This section may include a discussion of design choices and trade-offs as well.
Rationale
The rationale section is where you explain why this pattern works. List any applicable design principles, and reference published research or experimental results that justify the use of the pattern. In writing this section you should ask yourself, "what are the advantages of using this pattern?".
4. Examples
In this section you provide visual examples that will help the reader in understanding the pattern, how it is used elsewhere, and how it may be used in future designs. We encourage using free and open examples - for tips, please see the Contributor's Guide. Be sure to include the source(s) of your image(s), and you may also enter text descriptions if needed.
5. Accessibility
Accessibility is a critical dimension of usability. Address any accessibility concerns in this section, and explain to the reader how to overcome any restrictions or limitations.
6. Relationships
Published patterns rarely exist in isolation. There are often related patterns in the same collection as well as examples of this pattern in other collections, all of which can be documented here. If there is a Fluid Project component based on your pattern, enter a reference to the component description.
More About Design Patterns
A much more in-depth discussion of design patterns and how they are crafted can be found in the Fluid wiki at http://wiki.fluidproject.org/display/fluid/How+to+Create+a+Good+Design+Pattern.