About the Pattern Library

What's a Pattern?

A pattern describes an optimal solution to a common problem within a specific context.

From the IAWiki:

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern.

Each pattern has four primary components:

1. a title
2. a problem
3. a context
4. a solution

Because a picture is worth a thousand words, the patterns also have a "sensitizing example" that visually represents the pattern. Rationale and Accessibility concerns are also captured in the pattern.

Additionally, each pattern will have a corresponding blog entry (located at yuiblog.com). This is where we encourage feedback and conversations around the individual patterns. RSS subscriptions per pattern are also available.

The Lifecycle of a Pattern

At Yahoo!, a pattern most often comes into the library via the traditional design process. Within the context of a product design cycle, a solution to the common problem is created.

The solution, within the context of a property or specific product is tested and iterated. Design research and designers collaborate and will test the range of low-fidelity prototypes to final product usability testing. Data is collected and those results inform the solutions offered in the pattern.

The designer of the solution, or the curator of the library, recognizing solutions to common problems across the network, writes the pattern for submission to the library. Specific research supporting the pattern is flagged in support of the solution. Additionally, the central UED design research team periodically reviews research from all across Yahoo! and makes recommendations for refinements to the pattern. Our User Experience Researchers also conduct baseline research on many of the UI components available via this library and the Yahoo! User Interface Code Library.

The pattern is then edited, published, reviewed and labeled with an adherence rating.

Our ratings have three levels:

• Beta
• Working Solution
• Best Practice

The adherence rating gives the design team a sense of the maturity of the design solution as well as the flexibility for deviation from the pattern.

As designs evolve and technologies change that enable new solutions to emerge, the pattern library evolves as well.

What Are You Waiting For?

Need some help getting started?