Kyle Wiebers

Do you ever find yourself stuck on how a particular user interface element should look? This happens to me two to three times a day – until I learned about design patterns. Design patterns are useful elements to improve the speed of design and wireframing. Libraries like Pattern Tap, Yahoo! Design Pattern Library and Ember App are now large repositories of best practices for user interface elements. Not only that, but they also help reinforce user’s expectations when they are used across the web, thereby improving the overall usability of your site.

Tools

Yahoo! Design Pattern Library is part of the Yahoo Developer Network and is a great repository of quality design patterns. Their design pattern contains some unique sets such as; Talk Like a Person, Leaderboard, and Your vs. My. Patterns are not only organized into sets, but also categories. Categories are great to browse through depending on what you are developing. If you are developing a web application, check Rich Interaction patterns. If you are developing a blog layout, check out the Layout category.

Pattern Tap is updated much more frequently than Yahoo! Design Pattern Library in part to the user community around this site. Pattern Tap allows you to register, create your own custom pattern sets. Pattern Tap does have a great user community going for it, but this can also be it’s weak link. If you browse through their pattern sets, you’ll see that quality is varied throughout the sets. Some patterns are excellent while others are downright abysmal. This wide range of quality is due to the user community.

Ember is a social tool that allows you to view submitted tagged LittleSnapper images throughout their entire user community. This is by far my favorite tool due to its integrated experience with LittleSnapper. LittleSnapper allows you to keep a local repository of design patterns and Ember shares and combines this with other users of LittleSnapper. If you look at Ember, you’ll notice that many of the tagged images relate to design. Howerve, Ember suffers from the same problem as Pattern Tap with over saturation of patterns and dilution of quality but not to the same degree.  This is countered with the ability to follow users and see updates to their tags.  This feature is what puts Ember far and above the other design pattern libraries.

Usage

Design patterns can be used many different ways. I’ll cover inspiration, wireframe assistance, and polishing up the experience your current website below.

Spending thirty minutes browsing through either PatternTap or the Yahoo Pattern Library should speed up your design time and be well worth the investment. Design patterns can help you conceptualize how you want your final product to look. You can also choose patterns which you feel would be perfect and save them to always give you something to review in times of design need. These libraries can also help you pound through mental blocks and find a creative solution to the problem.

Where should my navigation be? How large should image x be? How much space should my contact box be? These are all questions that can be answered during a design’s wireframing. Using design patterns, these questions can be answered faster. Going through these repositories will give you a visual way of thinking how your design should be, instead of just a conceptual idea. Design patterns can help you decide placement and size of UI elements, how to handle different types of user interface elements and much more.

So you completed this kick ass web application and everything is going smoothly until one day you notice your conversion rate on signup drops. You feel it’s time to revisit your signup process. Here is where design patterns can assist you. A quick look on Pattern Tap, and you already have a ton of possible methods to assist your improvements. Let’s say you notice specifically that users are getting a high fail rate and unable to discern what they did not do properly. Head over to the Yahoo! Design Pattern Library and look at notifications, and you can start improving this aspect.

The Good Stuff

In short, design patterns matter because you are designing around your users expectations. Using the tools that are out there, you can get a leg up on fellow designers by building your own pattern libraries. Integrating design pattern research as a part of your initial design process will definitely lessen your design time while improving the quality of your deliverables.