Business Benefits of UI Design Patterns

Many organizations haven’t embraced UI design patterns, despite their growing popularity among UX professionals. Those organizations are missing out on a ton of benefits for Product Management, Engineering, Marketing, UX and the business as a whole.

A UI design pattern is a good, reusable solution for a common but specific interaction design problem. For example, a Wizard is a simple pattern for guiding users through a linear process. Other pattern examples are Inspectors (for revealing metadata), Attribute-Based Search (for targeted searching), and Tag-Based Filtering (for navigating large data sets).

Our company’s own pattern library began in 2003 and contains more than 100 patterns. We use these patterns in designing complex applications and websites for our clients. We also create custom pattern libraries for other companies to use in their products and sites.

What Patterns Can Do for You

To expand on a point made above, if you were to gather all the benefits of a pattern approach, shove them into a huge container and roll it onto an industrial-strength scale, the benefits would weigh at least a ton. (Don’t forget to set the tare first.) Some benefits of UI design patterns that we have seen firsthand:

• Increased usability and user adoption. Visual style guidelines provide consistency and are good for your organization and your end-users. Similarly, UI design patterns provide consistency, familiarity, predictability and efficiency to users—within and across releases. This results in better usability, higher user adoption and other good things. For example, lead conversion for Ford increased by more than 100% when we incorporated patterns for contextual help and side-by-side comparison.
• Stronger brand. If usability, reliability and quality are important to your brand, then you should be using UI design patterns.
• Faster UX design and prototyping. Reinventing the wheel can be slow. UX designers can jump-start their designs and prototypes by first considering the proven design solutions in their own pattern library before designing from scratch. Even the most innovative products still rely on established patterns for certain interactions (for example, smartphones use Menus).
• Clearer, quicker communication across disciplines and time zones. If a UX designer says to a developer, “Let’s use a Wizard for this user story,” then everyone understands and is on the same page. Referencing patterns from your own library is a kind of shorthand that team members can use to be understood quickly. This is especially important when your team is spread across the planet.
• Better retention of organizational knowledge and more efficient training of new team members. If your organization’s UX design knowledge exists only in designers’ heads and sketchpads, then what happens if someone quits? And how will you easily bring a new employee up to speed on your organization’s best practices for UX design? A pattern library is one great tool for addressing these problems.
• Faster, less expensive development. If your pattern library contains code to make the patterns come to life (which we highly recommend), then you may see a huge benefit. Some of our clients have experienced as much as a 50% increase in product development efficiency, due in large part to reuse of code for patterns contained in their software products or websites. A pattern approach, which saves time for designers, also meshes very nicely with lean development processes such as Scrum.
• Improved quality of code and of the user experience. In general, a product that relies on reusable code (based on patterns) requires less testing time than a product that doesn’t leverage patterns. So it is easier to achieve a high quality of code with a pattern approach. Also, an interpretation step often occurs when a developer takes a UI design and implements it. Unfortunately, designs are easily garbled. We have found that prior to adopting a pattern approach, some companies saw more than a 20% loss in UX design quality as they moved from prototype or design spec to production. Utilizing patterns can significantly improve the quality of the final product.
• Expedited UX and product development maturity. We have noticed that our clients who adopt a pattern approach are able to mature their user experience and transform their businesses much more quickly than other companies. These pattern-adopters realize efficiency gains and other benefits earlier, which puts them in a better position to stay ahead of their competition (see the graph below for general trends).

Other Advice on Patterns

To realize the benefits of UI design patterns, organizations need to apply the patterns appropriately. So that people will know when to use or not use a specific pattern, each pattern should be described carefully. Each pattern in our library contains the following information:

• the pattern name
• the user need
• when to use the pattern
• when not to use the pattern
• how to use the pattern
• guidelines and constraints
• example screenshots
• related patterns
• a link to the code.

A final bit of advice: If people in your organization are scouring the Web for patterns to add to your library, be careful. The Web is full of bad pattern libraries and design ideas that designers simply made up without any user validation. (I know what you’re thinking—it’s hard to believe that the Web contains bad information. But remember not too long ago when websites had slow-loading Flash-based splash pages, before companies realized that users hate them?) Make sure the patterns you bring into your library have been validated as good design solutions for your end-users, preferably through research with representative members of your target user audience.