Embrace (in)consistency

Consistency is a powerful thing. As humans we subconsciously expect harmony and order in our everyday interactions. There’s a reason every stop sign around the world looks pretty much the same. When I visited Australia, learning to drive on the other side of the street was hard enough. Imagine if every city had its own custom stop sign—neon purple stop signs—what! In a way, we depend on consistency to make us feel normal and comfortable.

We take notice when things are inconsistent. It can be frustrating and confusing. But sometimes it can be refreshing and engaging. I love Starbucks. I can robotically go through the motions of ordering my coffee, and I don’t flinch when I’m handed my venti white cup. Then all of a sudden it’s November, and I’m handed an enchanting red holiday cup with a wintery mix of graphical coziness. Nothing against the classic white cups that Starbucks uses year-round, but sometimes mixing it up is good. It captivates and engages customers in ways they’re not used to.

All of this carries over to our relationships with technology. As designers we should embrace the power of consistency. There are great benefits to knowing when to follow style guidelines diligently and realizing when to creatively break the rules.

We take notice when things are inconsistent. It can be frustrating and confusing. But sometimes it can be refreshing and engaging.

Building consistency

Design is hard, especially around the beginning of a project. So many ideas, so many typeface combos, color schemes, icon and button styles, layout trends, and photo treatments to sift through. Ideally all of these elements work together to communicate a clear message to your audience, but using them appropriately in relation to each other can get tricky.

Although it may be obvious, lets do a quick Consistency 101 review. Some elements we want to keep in mind in order to create consistency:

• Color: primary, secondary, tert. color scheme
• Typography: headline, body, script fonts and the hierarchy, positioning between them.
• Visuals: icon sets, buttons, photo treatment, and illustrations.
• Layout: nav/menu positioning, grid structure, and responsive flow
• Interactions: form elements, dialogs, animations, transitions, menus, etc.

Here’s a couple examples of well-executed pattern libraries and style guides:

Building consistency into your designs helps strengthen your brand and keep the brand message clear. Defining consistent relationships between color, photography, typography, illustration, icons, etc., dictates how a user associates with your brand, how they feel about it and how they use it.

Once these frameworks and patterns are developed and established, designing with consistency in mind should be quite simple. And this makes our audience happy. A consistent interface requires less learning because users can carry over their knowledge from one page to the next, making the whole experience more fluid. This ease of understanding develops trust and comfort, which will keep the audience more engaged (read: convert to a customer).

Building consistency into your designs helps strengthen your brand and keep the brand message clear.

Don’t forget about the user

There have been arguments against consistency in design. One being that too many designers are focusing on whether or not their new designs are consistent with their outdated ones, rather than focusing on ensuring their new designs are in line with their target users current knowledge (Spool, 2005).

Does every primary button need to be blue? Do you need a search bar on every page? Does the footer need to be identical everywhere? Does the body font size always have to be 14px? It depends on what the situation is. User context should most often trump consistency.

The style guides and pattern libraries we build should not be used all the time without question. There are interface design principles other than consistency, and sometimes these principles should trump those of uniformity. The bottom line is: We should strive to deliver the optimal experience for our users, and sometimes that means sacrificing consistency for something else.

It’s less about “is what I’m designing consistent with the other things we’ve designed?” and more about “will what I’m designing match the users expectations that we’ve already set forth?”. Consistent design allows a user to be confident—they can expect it to behave like something they’ve encountered before.

There are interface design principles other than consistency, and sometimes these principles should trump those of uniformity.

Break the rules

There is an evil force out there that fights against consistency, and that is the natural impulse of designers to be creative. We want to express our creativity all of the time, and working within the confines of an established style guide or pattern framework can be downright frustrating. Don’t worry, we can use this to our advantage.

Before we go and make our entire interface cookie-cutter uniform, let’s keep in mind that utilizing inconsistency has value. Inconsistent elements or behaviors spark attention—which can be a good thing when you want specific items or elements to be noticed. Using a new color or erratic layout can smack a user out of the habits of their subconscious. I like to call these strategic inconsistencies.

Using inconsistent elements can be most effective on the sales side of a platform or in areas where one’s looking to convert customers. Some easy things we can do to mix up the experience:

• Adding new illustrative elements
• Varying layout and hero section
• Drastically changing headline font size
• Introducing new photo treatments
• Go crazy with color

At Classy our signup and login pages look entirely different from the layout and styles established on our homepage, tour, and company pages. On these pages we can assume the user’s intention and don’t want to clutter the interface with unnecessary elements. It would be foolish to include a full top navigation, search, and footer just to maintain consistency between other pages.

Some other strategic inconsistencies around the web:

For Campaign Monitor, only the Customers page uses animation in the hero area of the page.

The interactions and animations on Mailchimp’s SNAP app page differ from the rest of its product tour.

Final thoughts

Great designers use consistency intelligently. Most often designers must strive for coherence and uniformity to leverage the most usable interface possible. However, the rules of consistency should not be followed blindly. A skilled designer will not only learn to follow these principles, but test them thoroughly and learn when to violate them in a purpose-driven and meaningful way.

Our good friend Ralph Waldo Emerson said it best—”Foolish consistency is the hobgoblin of small minds.“