How to Include Usability in Your Style Guides and Pattern Libraries

We expect detailed business, functional, and accessibility requirements documentation from our clients these days.  Web applications tend more and more to be weighted on functional components and limitations, and it seems that the more advanced browsers become, the more complicated it is to build and deploy an application.

With so much focus on the functionality and limitations, we often see the visual guidelines for application development suffer and result in inconsistency. But just because functional capabilities expand, it does not mean that the visual approach should be less important than other customer facing web properties.

Web applications are different from lead generation or marketing focused websites and need specific guidelines that help maintain consistency. Many website guidelines often fall short of detailing the approach needed in order to provide an intuitive and extensible system.

The Problem with Style Guides

More often than not we will receive a corporate style guide when we begin the visual design process. Style guides tend to be delivered as a PDF file that outlines logo usage, color palette, and typography guidelines.

Guidelines like these generally address both print and online implementations and may contain basic examples of web implementations that designers can use for inspiration. However, we find that most don’t consider the challenges a complex web application will present when applying a brand/visual system. They fall short in identifying how functionality should be presented and the rules for when and where certain mechanisms should be used.

For example, a typical guidelines document will demonstrate how to address the primary action of a web form (submit) with a consistent visual treatment. A complex web application may feature several primary actions the user can take on one screen.

To solve for this, we often see designers using other colors and treatments outside of the established visual system in order to put more focus on the other elements. This results in a dilution of the brand. It also results in a dilution of the navigation system and makes it more difficult for the end user to scan the page in order to easily understand what components are active and what next steps they will need to take in order to accomplish their tasks. In this case we often recommend using a primary navigation color for all things actionable and provide several different treatments for both primary and secondary actions.

Patterns are Great, but They Still Need Rules

Many of our clients have established pattern libraries of user interface (UI) design elements for online implementations. The idea is that designers and developers have access to a set number of functional components and widgets that can be used to address user needs across their entire enterprise. A pattern library is a great way to establish consistency across an enterprise when there has been a good strategy employed for how and when to use the existing patterns and when there may be a need to create a new one.

One of the big mistakes we often see is using a pattern library like a PDF style guide. A pattern library is not a static document, and it needs to evolve while maintaining consistency. A pattern established 2 years ago may not provide the level of accessibility needed today or it could feel dated and inefficient to end users. Conducting regular user research can help to identify where improvements and upgrades can be made in order to maintain a modern and consistent approach.

Many of the applications we design often require new patterns that are not included or available in an existing pattern library. Trying to force functionality into a container that is “kinda close” will result in compromises to the user experience and often decreases the overall usability of the application. Having a clear understanding of the limitations of an existing library along with defined technical and functional requirements is the first step in determining when it is appropriate to recommend that a new pattern is introduced into the system.

A good second step is providing a clear definition about when, how, and where existing or new patterns should be used. Many of the pattern libraries we’ve been given access to demonstrate the components but don’t provide a reason why each is effective and what business goals and user problems they address.

When establishing a pattern library from scratch, be careful not to assume that you’ll cover all the components needed for your entire enterprise by designing one brand new, complicated application and pulling out the patterns with in it.

“We are going to use this application to create our pattern library and all new and existing applications will conform to it.” This strategy is a great way to begin the process and will help to establish consistency. Complex applications, however, tend to need some level of customization and variance in order to be most effective.

What About Usability?

One of the biggest challenges with corporate style guides is that they do not consider usability best practices. For example, one of our clients rebranded and they established a new color palette. The colors looked great in print but were limiting to use in online applications. They landed on a palette that consisted of several shades of gray, one primary blue, and an accent color. The guidelines indicated that the blue and accent colors could not be used for navigation which left only gray as an option. Another rule was that tints of the colors were not allowed.

It created an extremely limiting system to use and many of the online implementations were drab. The pattern library examples that were provided addressed simple online implementations with very limited functionality. Unfortunately, many of their web properties are extremely complex and highly functional web applications. When the directive came to “reskin” all of the existing applications, they were unable to deliver a consistent, thoughtful and user-centered approach. Their design teams started freelancing in an attempt to solve the usability problems on a case-by-case basis.

They hired Crux Collaborative to re-evaluate their guidelines and establish a cohesive system that both remained in brand and contained enough variation to offer choices based on the business and user problems the sites and applications were trying to solve.

When guidelines are being developed it is important to apply the rules to a number of different types of implementations in order to determine where there may be pitfalls. Your lead generation site is going to take a different approach from your customer portal and your guidelines should be able to accommodate both in a consistent, thoughtful and strategic way.

If you would like to learn more about how we help companies optimize visual guidelines to provide their customers with a seamless user experience or if you’d like to see in real-time how we approach comprehensive pattern library development, contact us – we’d love to chat.