Web Design: The Value of Consistency

Written by Wholegrain Team - May 11, 2016

There’s little sexy about consistency. It suggests monotony and routine, neither of which is particularly inspirational for designers. And yet when it comes to web design, it’s one of the most important factors to consider.

The reason for this is simple. As humans, we’re visual creatures, relying heavily on our sight to process and interpret the world around us. So when we land on a new website for the first time, we’re looking for visual clues to help us achieve what we want with the minimum of fuss. Which means minor lapses in consistency or, worse still, having to learn from scratch how to interact with a new website, heavily impacts on user experience.

The Beauty of Familiarity

The first time a user lands on a site, they form an instant impression of it. This is based largely on its visual design. Inconsistencies, such as changes in colour, font, layout, line spacing, icons, symmetry, etc., are unsettling and give an impression of disorganisation. Even laziness.

On the flip side, consistencies provide logic to a site. They suggest reliability and stability. If you’re designing a website for a well-known high street shop, sticking to elements that are in line with their branding, such as colour and font – things that instantly feel familiar to shoppers when they arrive there – is comforting. Users know they’re in the right place to get what they want.

And it goes deeper still. Even if the brand and website is a totally fresh experience, as humans, we’re attuned to identifying and understanding patterns. So when we land on a new website, we’re looking for clues to help us interpret and interact with it. The ultimate aim isn’t for users to spend ages trying to figure out how to use a site; it’s for them to truly engage with your content.

Intuitive Learnability

Landing on a new site and instantly knowing how to interact and find your way around is a great feeling. Incorporating effective systems that allow users to correctly anticipate how things work gives them control, and a feeling of satisfaction. Users don’t want to have to relearn how things work before they can use a website efficiently – the less they have to think and figure out how something works, the better.

However, the concept of intuitive design is a bit of a misnomer. It isn’t a purely intuitive thing – it’s learned behaviour. We didn’t grow up knowing that a magnifying glass symbolises search, that a hamburger menu hides a list of options, or that a right-facing triangle means play; we learned it from our previous experiences. And now elements like this are familiar to us, we know how to interact with them wherever we find them.

Saving Time & Money

Designing for consistency doesn’t only benefit the website’s users – it also benefits your clients (and sometimes your sanity!). For your clients, it means you don’t have to reinvent the wheel – something that costs time and money. If you have a consistent layout across the site, you only need to design a number of re-usable templates, which cuts down on your overall development time.

This cuts down on arguments over the look and feel of your site, so you spend less time in meetings and more time designing and building the site. What’s more, it’s easier to build off that core in the future when you want to adapt and develop it. And it means you don’t waste too much time trying to make things different.

Breaking the Monotony

However, there are dangers. Absolute consistency is repetitive, and repetition can easily become boring. If we’re not careful, the internet will become an extension of our high streets – filled with carbon copies of the same stores. So it’s essential to know when to break the monotony.

As much as you should be striving for consistency – both internal consistency within the site, and external consistency to more widespread conventions – introducing slight inconsistencies has a twofold effect: it helps to keep users engaged and curious, and it’s a great technique for drawing attention to specific elements of the site.

Like many things, inconsistency in a website should be used in moderation – otherwise it loses its impact. So you need to question what you can introduce to give your product an edge. Don’t blindly copy convention. Take the time to understand why something works in a specific way, and then challenge yourself to make it different enough to be new and interesting.

Your ultimate aim is to design something that’s consistent and familiar to people, something they can use with ease, and yet also provide them with something visually appealing, fun, a little playful, and memorable. You’re not reinventing the wheel, nor making a work of art, neither are you replicating precisely what has come before. You’re seeking a balance between the old and the new, aiming to provide familiarity and surprise.

How to Be Consistent

Fortunately, it’s pretty simple to design with consistency in mind. You should ensure you have a consistent colour scheme and keep it nicely balanced, with the focus and secondary colours the same throughout. Same with the typography, icons, visuals and size. Make sure everything is aligned nicely, with a strong visual hierarchy so the most important elements are big and bold. And don’t forget the content itself, which should maintain the same tone and style throughout.

When you do introduce inconsistencies, do it with a defined purpose, not for the sake of it and certainly not at the expense of your users’ experience.

For most people, our sense of sight has a large impact on how we interact with the world around us, even more so at a sub-conscious level. By ensuring consistency is at the heart of your design, you are communicating and connecting with your users, showing them that you care about their user experience. If you get the balance between consistency and structure right, without sacrificing beauty, you will produce a site that’s both easy and fun to use. Of course, only the best designers will themselves recognise this, but everybody who uses the product will appreciate it, whether they’re aware of it or not.

What are your tips for consistency in web design, and what techniques do you use for breaking the tedium and introducing interesting or playful elements? Join in the discussion below…