Editor’s Note: In the first post in our series on good design, Yahoo! interface developer Yu Shan Chuang gives us some tips and tricks on how to help create a consistent user experience using “patterns,” and points us to some great (and free) Yahoo! resources.

Say you have a large web site with lots of functionality and content that has grown organically over time. You might have a team of designers and developers with different team members working on different parts of it.  After a while, you may find that similar challenges crop up in different sections of the site—such as how a menu should function or a page grid should be laid out—but that these are being solved in different and sometimes inconsistent ways, making for a kludgy experience. The result? Your users find the experience irritating, and they click away to a competitor’s site.

To help create a consistent experience across your site, consider using what interaction designers call patterns.

What is a Pattern?
At Yahoo!, we use patterns to help us solve common design problems in a consistent manner. Like software design patterns, our information design patterns, according to IAWiki.net, “describe things that work together and the rules that govern [them].” Basically a pattern is a description and an example of how a given item or group of items (usually called a collection) should work.

A pattern has four basic components:

1. A title or name that describes the solution
2. A statement of the problem
3. A context, which describes the environment in which the problem exists
4. A solution to the problem

Here’s an example of a finished pattern that’s publicly available from the Yahoo! Pattern Library, a site that holds a plethora of patterns that publishers are free to use, provided they follow the terms and conditions:

When would you create a pattern?
As an interaction designer, I see a problem in a particular context. The problem might be, how to page through search results. The context might be paging through these results on a mobile phone. I would then propose a solution for this problem based on existing UI paradigms and interaction models. The solution might be utilizing the physical buttons, or soft keys, to access the previous page and the next page.

If the problem and solution are common occurrences, then I might create a pattern for it. This allows me to share my pattern with other others, promoting consistency.

How and when should you use patterns?
Whenever I encounter a behavioral or information architecture problem I head to the Yahoo! Pattern Library, mentioned above. These patterns have gone through baseline research and peer review, so I’m confident in them. Sometimes my problem won’t be all that similar to the ones in the pattern library, but the patterns I find can provide me with a starting point.

Let’s say you have a site that reviews digital cameras. You might want to use our module tabs pattern to help you sort your data. Putting your entire review on one long scrolling page might be tedious for users to read, so you might consider sorting your review into three tabs. The first might be your rating and give a quick summary of the camera, the second tab might be the review itself, and the third tab might contain the tech specs of the camera. This pattern can help clean up your site and make it look more professional.

Take a look at the Yahoo! Pattern Library and see if we have any solutions to the problems that you face.

Resources:

• Yahoo! Pattern Library
• Yahoo! User Interface Blog

• Yahoo! User Interface Library, which offers publicly available interface code that will work with many of the patterns in the Yahoo! Pattern Library

—Yu Shan Chuang, Interaction Designer, Yahoo! Publisher Network