March 16th, 2017

Why Design Consistency Matters for your Website

illustration of different tablets and computers showing design consistency across applications

A consistent design isn’t just best practices, it’s best for UX as well.

What does it mean to have a consistent web design? When we discuss design consistency for websites, we’re talking about both internal and external consistency. Internal consistency means ensuring that your website remains the same from one page to the next: you’re not suddenly changing the location or layout of your site navigation, for instance, or changing up your image style. You use the same terminology throughout your site, so your visitors aren’t left wondering if they somehow navigated somewhere else.

External consistency has to do with how you look compared to other websites. On a very meta level: does your website look like a website? Does it have the features that users expect? Can a visitor land on your webpage know what to do, or are they easily lost?

Internal design consistency is fairly straightforward. It’s basically about not changing your mind all the time. But external design consistency tends to be slightly at odds with innovation. How do you experiment with new design ideas without losing visitors? And is there a danger in being so consistent that you become like everyone else?

Your design should feel intuitive.

Part of what makes consistent design feel good is that it also feels familiar. This Is one of the reasons why it’s important for a good user experience: we tend to like what feels familiar to us, whereas the unfamiliar must ride the line between novelty and alienation.

That said, a good site design can play with innovation, so long as it doesn’t stray too far from what feels familiar. A slight variation on a certain theme can still feel intuitive to most users, whereas a total overhaul can leave them feeling lost and confused.

So for instance, one innovation for mobile devices was to introduce hidden navigation—mostly in the form of the “hamburger menu.” This helped to save space and clean up a mobile design, both of which seemed like great ideas. Unfortunately, many users find the hamburger menu hard to use, resulting in poor user experience. This is because the hamburger menu is harder to find, and many of us are still not trained to spot it in place of our more typical navigation styles.

Design consistency matters to your subconscious.

Our subconscious makes a lot of our decisions. When we navigate to a website that feels off, we’re often turned away by it. For instance, research by Google showed that both visual complexity and prototypically (i.e. familiarity) were important factors in how users judged a website’s aesthetics. They found that users reacted negatively to overly-complex websites, especially when they appeared in an unfamiliar layout. Conversely, users responded more favorably to designs that were both simple and familiar.

We like familiarity because it means our brains don’t have to work so hard to interpret what we’re seeing. Just as a simple design with the appropriate amount of whitespace helps with usability by making a site more readable and easier to navigate, a familiar design keeps us from becoming lost.

Is your internal website design consistent?

Most of what we’ve talked about so far has to do with external consistency, or how to make sure your website meets user expectations for how a website should look and feel. However, internal consistency is just as important. When checking to make sure you keep a consistent design throughout your site, pay attention to these factors.

Typography.

Don’t switch fonts every other page. Stick to a limited number of fonts, and use them consistently in headers and sub-headers. Make sure your headers remain consistent from page to page, and from sub-page to sub-page.

Theme consistency.

If you’re using parent and child themes, pay attention to how they appear next to each other. When you navigate from a parent page to a child page, does it still look like you’re on the same webpage? Or does it look as if you’ve gone to a new site?

Color palate.

Don’t introduce a lot of new colors to your site. Stick with a single palate, and make sure you can access those colors when you format text. Things like hyperlinks and accent text should also fit into your color palate. If your users are used to seeing hyperlinks in one color, they may not realize a link is clickable if the style changes.

Image style.

Most brands have a certain type of image that fits their website: soft and warm, edgy, black and white, sepia tone, illustrations, etc. You may use a few of these in combination, but keep yourself from going all over the map.

Icons and elements.

Do your buttons all look the same? How about icons? Again: if your users see one type of button on one page, they may not recognize a different type of button on another. Icon consistency operates on the same principles: if you “like” with hearts in one place, don’t “like” with a thumbs-up in the next.

Writing style.

Think about the language you use on your site, and try to use the same style and terminology throughout. Don’t talk about “Remote Work” on one page and “Telework” on the next. There are exceptions, though: we talk about both “UX” and “User Experience.” This is to accommodate anyone who might be confused by the term “UX,” but also to help them become familiar with it in the language of website design.

Brand look and feel.

A lot of these points boil down to brand consistency: what tone do you use throughout your website? What are your brand colors, fonts, logos, etc.? If you’ve never developed a style guide, now may be a good time to pull one together.

As always, use UX testing to check for consistent design.

The more people use the internet, the more they become familiar with it. The definition of what is or is not “intuitive” varies drastically depending on a person’s computer literacy. The more accustomed we become to various web designs, the more familiar they feel. So the best way to know if your web design feels usable to your visitors is to check their behavior. Can they spot the buttons on your website? Do they use your navigation? It’s possible that in a few more years, even the hamburger menu will become “normal” and “intuitive” to most of the Internet. Until then, pay attention to user behavior, and focus your design on what feels comfortable to them.

Related Articles