/Culture/ Designing with patterns
10/08/2006 | Filed under Design > Culture
Yahoo!’s AJAX evangelist Bill Scott explains what Yahoo!’s design pattern library can do for you
Recently, the Yahoo! User Experience & Design (UED) team began releasing portions of its internal design pattern library as a publicly available site (developer.yahoo.net/ypatterns). According to the definition at Information Architect’s Wiki (www.iawiki.net/WebsitePatterns), “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.”
In 2004, Yahoo! created a central clearing house for internally generated design patterns. Because we used Drupal (www.drupal.org) as our CMS it was easy for designers to add new patterns by simply filling out a form. The pattern library was initially seeded by the central UED team within Yahoo!. Wider participation was generated through an awareness campaign that included iPod giveaways. In addition, pattern authors are recognised by management and clearly noted on each pattern page. At a basic level, our patterns contain the following data:
- Title
- Problem summary: states the user’s problem or designer’s dilemma.
- Sensitising example: shows an image or clip that illustrates the pattern.
- Use when: provides the context in which to use the problem.
- Solution: a concrete set of steps for creating a working solution to the problem.
Other data includes accessibility notes, special cases, related patterns and related code. The pattern library specifically contains interaction design patterns and not other kinds of design patterns, such as software architecture design.
Patterns as design vocabulary
Patterns really act both as a design vocabulary and as a way to capture emergent best practices within the context of a specific design problem. With the recent advent of AJAX and the resurgence of Fl ash within the page, there are a number of new (and old) idioms that are now appearing on the web. As these idioms emerge, it’s handy to have a common terminology across Yahoo! for referring to them. One example is the Inline Text Edit pattern. You see this pattern employed on sites such as the photo sharing portal Fl ickr. Just above a photo is its title. In traditional web sites you would normally click a link or button for editing the title and maybe the description of this photo. On a separate page you would submit the changes to your title. By using AJAX technology you can design a solution that enables the user to directly click on the photo title and it becomes immediately editable within the same page.
In order to cue the user that the Inline Text Edit pattern is available, Fl ickr uses another pattern – the Invitation. An invitation invites the user to engage in an interaction. Fl ickr actually uses three types of invitations – a Cursor Invitation, a Hover Invitation and a Tool Tip Invitation.
Note that a yellow background in Fl ickr (Hover Invitation) denotes the object has some interaction property (for example, edit). The tool tip (Tooltip Invitation) now reads ‘Click to edit’ and the cursor has changed to an I-Bean (Cursor Invitation) style of cursor. When the Save button is finally pressed, text appears momentarily in place of the photo title and the new title displays when the save is finished (Progress Indicator).
In this simple interaction we’ve used five specific patterns: Inline Text Edit, Hover Invitation, Cursor Invitation, Tool Tip Invitation and Progress Indicator. These names now become part of the shared vocabulary of our design and engineering teams. Because they’re easily digestible and individually named, these patterns tend to get reused more than traditional style guidelines. Their visual nature also means they become part of our visual consciousness.
Patterns vs traditional guidelines
Unlike the world of the desktop in the 1980s and 1990s, the web tends to be a dynamic place for innovation, and patterns enable us to experiment with ideas. Some patterns can be more experimental, while others can be a very clearly defined standard that enumerates how to implement a specific idiom. Patterns also lend themselves well to code libraries because their specific functionality can be captured in smaller snippets within a larger software framework. This enables us to associate specific code examples with a design pattern, creating more incentive for site designers to read and use your pattern.
During design conceptualisation patterns work well to communicate concepts to marketing teams, other designers and engineers (whether on-shore or off-shore). They also work well during the design documentation phase. This is because they become a shorthand for documenting interactions, creating reusable design assets for including patterns within a design wireframe tool.
However, teams must realise that simply shopping for patterns and putting them into action on a web site does not make a good design. Instead, site designers and engineers still need to understand good design principles, know the user and their goals and provide user-centred research and testing to validate an approach. In addition, style guidelines still have their place. At Yahoo! we have companion Visual Design Specification patterns that capture specific visual style guidelines.
The Yahoo! Pattern library will continue to be populated from what is emerging from our internal pattern library. We hope that by sharing this library with the world we can help both advance the dialogue of design, as well as learn from those who have pioneered patterns before us. For other pattern libraries visit yuiblog.com/blog/2006/02/13/yahoo_patterns_released.
Bookmark with:
