Eliminating Clutter in Web Design

Written by Wholegrain Team - July 9, 2015

Is your website struggling to perform? Do you want to increase sales and conversions, and reduce your bounce rate?

If you’re less than impressed at your ability to keep your visitors’ attention, there’s one critical thing you could be overlooking: the amount of clutter that’s built up on your site.

You see, it’s very easy to keep adding things – ads, social media buttons, widgets, etc. – but take a step back and look at your site with fresh eyes and you may find that your primary message has become somewhat overlooked.

The Power of Less

Think how well you work when your desk is filled with clutter, or how easy it is to cook when you can’t find a clean work surface in your kitchen.

Pretty difficult, huh?

Well, it’s no different with your website. If people are overwhelmed by clutter when landing on your site, they will assume a lack of product or service, or simply find it too difficult to find what they’re looking for, and they’ll navigate away in their droves. Which will cost you sales and conversions, and won’t do much for your bounce rate either.

Plus, when a website is filled with clutter, all those unnecessary elements will be adding time to your page load speeds. And if your website is slow to load, that’s another thing that will add to your bounce rate – because people hate to wait.

Simplicity, however, is a wonderful thing. By removing everything non-essential, you leave people with only one option: to focus on what’s really important.

But where do you start? Here are some helpful tips to eliminate the clutter on your website.

1. Establish Your Focus First

Start by going back to basics. Identify the main elements of your site and ensure they are the ones that immediately capture your visitors’ attention when they land on your site.

DrinkKoa Screenshot

This can be a difficult step. Some website owners have a fear of oversimplifying. They worry they might miss something important, or that their visitors might not understand if they don’t explain enough. Or they have a desperate desire to convince people this is right for them.

It can be difficult to be objective and prioritise the elements of your site. The trick is to use the 80-20 rule or Parato principle. This states that approximately 80% of the effects of something come from 20% of the causes. So identify the 20% of your website that delivers 80% of its value, and focus on those elements on each page. If you’re unsure which elements are the most useful, experiment with A/B testing until you’ve found your magic formula.

2. Eliminate All Unnecessary Elements

Burlington National UFO Center Screenshot

Too many elements, even those that are important in their own right, will ruin your design and dilute your message. So you need to remove them. This includes sidebar elements, social media sharing widgets and blog post meta data.

To help keep the main content of the page free from distractions, include a useful footer to display the important bits, such as social media links, contact details and a site map. And include plenty of white space around images and other artwork.

And as for those annoying auto-play videos and animations or pop-up messages – they are woefully outdated now and only serve to annoy. Replace them with a summary page, or a short video if you need to convey a complex idea.

At this stage, take a look at your content. It’s well known that website users scan a page to find the most important content, or the information they require. So make it easy for them to find. Use short sentences and paragraphs, and make sure they are laid out clearly with plenty of white space in between. Then save some of the more complex ideas and information for your blog posts.

If possible, reduce the number of pages too. I mean, do you really need an About Me page and an About the Site page? Probably not. They can be fused together for simplicity, which will also help to simplify your navigation menu.

3. Establish a Clear Hierarchy

The next stage is creating a clear hierarchy for your site, which will help to lead your visitors on the path to conversion. For this, try to get into the mind of your target audience and work out what information they’re trying to find.

Make sure your most important message is above the fold, because this is where people spend the majority of their time. Ensure they can see what you are about at a glance, and include your main CTA. Remember, you don’t want to overstimulate your visitors, but help them to focus on your main message. If necessary, you can reduce the height of your logo and menu to achieve this.

GiftRocket Screenshot

When designing your navigation menus, keep them simple. People become overwhelmed by too many choices and will bounce off your site if they can’t see quickly and easily where they need to go to find the information they require. Limiting people’s options will make the site simpler, friendlier and easier to use.

4. Limit Your Colour Palette and Fonts

It’s pretty easy to get carried away with colours – it’s only natural when you’re presented with an infinite choice. But you must resist. Including all the colours of the rainbow on your site will only serve to distract your visitors’ attention from the important stuff.

To keep things simple opt for 2 or 3 colours, in line with your branding materials, and choose complementary colours to balance the site. If you need a little more variety or texture to your design, use different shades of your chosen colour for menu items, headers, etc.

The Big Top Screenshot

Likewise, keep the number of fonts you use firmly in check, sticking to 2 or 3. This will improve readability and help you achieve a simple, stylish effect. And make sure the fonts you’ve chosen translate well to a range of screen sizes and mobile devices. Which brings me onto my final point.

5. Make It Responsive

With a huge range in screen sizes, mobile devices and the choice of browsers people can choose to access your site, it’s essential your website is responsive. In other words, suitable for all screen sizes and layouts.

Because if your page feels overloaded when viewed on the largest screen, just imagine what it’s going to look like on a tiny one. You’re aiming for simplicity across the board.

EyeQuant

One of the most popular tools used by designers to optimise conversions is heat maps, and here at Wholegrain we have a firm favourite: EyeQuant. Using an algorithm developed from real-life eye-tracking studies, EyeQuant is able to predict, with a high level of accuracy, what people see when they arrive on your site. There are three different types of heat maps available:

  • The Perception Map: what people see in the first few seconds after landing on your site.
  • The Attention Map: which areas of the page gather the most, and the least, attention.
  • Regions of Interest: this allows you to choose specific elements, such as CTAs, to see how much they stand out from the rest of the page.

EyeQuant Screenshot

One of the real bonuses of this system is that you don’t have to wait for your website to be complete before checking it. You can upload an image of the design before it’s been coded to discover any potential problems, saving you time and money in the process.

The Beauty of Simplicity

Eliminating clutter from your website is about removing the cognitive load for your users, so they have less information to process and can easily understand the main point of your site.

As a result, your website will look sleeker and your visitors will be able to navigate to the information they require quickly and easily. All of which will help to achieve your desired goals and results.

So fight the temptation to showcase all your designer tricks on one site, and keep it simple if you want to build a sophisticated, efficient website.

What elements have you removed from a website to eliminate clutter and what effect has this had on your conversions? Tell us below.