Anthony Mcloughlin

Usability is the most important aspect of any website design; for it is the key to achieving conversion goals.

If your website isn’t converting at the rate you’d expect it to be, then there are probably usability issues somewhere within your user flow – causing friction for your visitors.

While we’d always recommend a thorough website usability audit (recommended reading here) to discover and remedy usability issues, we understand that time and resource constraints can often make this difficult.

So in this post we’ve highlighted five key areas of a website that are often overlooked in terms of usability.

Our advice here would be to consume the content of this post and absorb the best-practice techniques before going away and scrutinising these areas of your own website.

The goal is to identify some quick win opportunities, implement some easy tweaks and ultimately boost those conversions!

1. Simplify Menu Navigation

We recommend keeping menus short and concise so that they serve the user’s needs. The temptation to include the latest funky trend and over-complication should be avoided at all costs. After all, your customers are on your website to do something, so the navigation should help them do that thing as quickly and as pain-free as possible.

Here’s some tips for simplifying your navigation menu:

Use clear, short words

Look to reduce the word count while retaining the core focus. Use words your users are familiar with; short and to-the-point terminology that’s easy to digest. For example:

Original: “Make a donation”               New: “Donate”

Why this works: 

  • Users tend to scan content looking for keywords that point them toward what they actually need;
  • “Donate” is a verb – describes an action and conveys meaning;
  • Single words free up space helping to declutter the menu.

Visualise the navigation

Sometimes, it makes sense to use icons in a website navigation, as it adds another layer of clarity for user when figuring out which navigation link is most correct for their needs. Be cautious though, using icons for the sake of using icons can clutter up the navigation and impact on aesthetics: Use them sparingly and only if you are sure that they will assist in navigating users from A to B.

Apple is a great example of a company that uses visual navigation to its icons in menu navigation

Include a search form

We always recommend including a search field on your website, especially for websites with lots of content such as eCommerce stores and informational websites. Being able to do a quick site-wide search is a real time saver for the user and will undoubtedly improve usability instantly in those scenarios.

Easy accessible site search by HiB. Site designed by Tone

Consolidate menu items

Just UX Design recommends grouping similar topics into single categories to reduce the number of items in your visible menu. Consolidating in this way will not only reduce the number of items in the top tier of your website’s navigation, but will allow you to add more important pages to the main navigation and will help to shield the user from content that isn’t relevant to their particular needs while ushering them into the section of the site most suitable to them.

2. Let your website breathe – use white space

White space, or ‘negative space’ as it is sometimes referred to, is the portion of a web page that is left purposely empty. It is the space between the content, forms, modules, graphics, margins and other elements on a web page. It exists to ensure that the information on a web page is nicely structured and easily consumed.

Using white space effectively will allow your website to breathe. What’s more, research suggests that white space in web design is a key factor to building online trust with your users.

google homepage use of whitespace

Use of white space example by Google.

Effective use of white space is all about enhancing the content on your web pages. You can use white space to improve the legibility of content, to promote user interaction, to highlight your call-to-actions (CTAs) and to create balance in your website’s design.

3. Make your CTAs stand out

A CTA exists to facilitate engagement from users. They are there to encourage an otherwise-passive visitor to perform a meaningful action.

However, CTAs also assist in improving usability on the site. If a website visitor arrives on the site with the sole intention of making an enquiry or getting in touch, it would make sense to offer them an easy way of achieving that goal; via a “Get in Touch” CTA.

The methodology behind a CTA is simple: Clearly call out an action for the user to undertake, and the user will be more inclined to perform said action.

To ensure your CTAs stand out as much as possible (to maximise usability), here are some quick design tips:

  • Placement is key: Above the fold CTA’s work for some designs, but not all. Test out different CTA positions and find one that works for the layout of the website. This article on CXL Institute provides a sound introduction to CTA placement.
  • Excite with words: The words you choose for your CTA text/buttons has a direct influence on user engagement. Choosing the right words will incite action; conversely, choosing the wrong words will discourage users from performing the action.
  • Utilise colour: Colour has the power to unlock the true potential of a CTA. Test different CTA button colours as certain colours can evoke a variety of subconscious feelings. Think about the message that you want to portray to the user (trust, experience, intelligence) and complement those with carefully selected colour palettes.

clear cta example

Clear CTA example. Designed by Tone. 

4. Streamline web forms

The ultimate friction of any website is its web forms. If you have any aspirations of encouraging website visitors to fill in your website forms, you need to ensure they are as pain-free as possible. Filling out forms is laborious for the user, so help them out – doing so will improve user experience and negate frustration.

Here are some tips for improving the usability of web forms:

  • Reduce fields: The simplest way to streamline forms is to reduce the number of required fields that the user must input. Condensing the number of form fields reduces effort on behalf of the user and ultimately shortens the time required to fill out the form. Every time a field is removed (within reason), the form’s conversion rate will increase.
  • Pre-fill information: Another simple way to make forms more user-friendly is to dynamically pre-fill field values. An example of this is the location field – pre-populating the field with location information collected from the user’s smartphone makes a typically tricky form field effortless to fill in.
  • Labels should sit outside of form fields: Labels prompt users to supply the correct information; without them the user would be unsure on how they should enter the information. Our advice here is to resist the temptation to focus purely on form design, as often in doing so, web masters will remove the ever-present visible label from the outside of the field and add it as a placeholder on the inside of the field instead. Although better visually, usability takes a hit in this instance, as the label is removed when a user begins to fill in the field. If a user then forgets what the label was, they are forced to delete their input to reveal the label before going ahead and re-filling the information. We recommend that hints and instructions should also be permanently visible and placed outside of the field.
label outside form field

5. Improve page load speed

Did you know that 30% of mobile web customers expect a one second or less page load, while 18% of customers expect instant page load? These statistics collected by Google show that website speed matters.

mobile site speed stats by google

Image source: think with Google

Page speed is often reported as being directly related to conversions. Here are two stats to consider:

  1. 79% of shoppers would be less likely to purchase from a website again if they were dissatisfied with that website’s performance (Kissmetrics)
  2. A one second delay in web page loading time means a 7% reduction in conversions and an 11% reduction in page views (Hubspot blog)

Making your website faster is a sure-fire way to improve it. A fast website delivers a better user experience than a slow one. Here are three quick-wins to improve page speed:

Reduce the number of images on a page – and/or compress them

Images are the biggest bandwidth sinks on a server. Images should be resized and compressed. Saving a photograph as a JPEG rather than a PNG can cut its file size by more than half. Meanwhile saving a flat graphic/illustration as a PNG rather than a JPEG can cut its file size by over 90%.

fewer images per page create more conversions

Image source: think with Google.

Clean up your elements and reduce HTTP requests

80% of a website’s load time is determined by HTTP requests. The more HTTP requests that are needed, the slower that website will be. Streamline the number of elements on your page by combining style sheets, reducing scripts and using CSS.

Leverage browser caching

Browser caching stores webpage resource files on a local computer so that they can be loaded without the limitations of a server. Put simply, the web browser stores elements of a web page, such as the logo and CSS files locally, and loads them instantaneously.

The bottom line…

The importance of delivering a good user experience on your website cannot be understated, since your user experience will literally define how your website performs.

If implemented correctly, the quick fixes in this post will improve your website’s overall usability and improve conversion rates considerably.

Share this post

Was this article useful?

Subscribe to our monthly mailing list to receive more articles like this.

Anthony Mcloughlin

Posted By Anthony Mcloughlin

Anthony is a key member of the digital team at Tone, helping dig deep into stats to further understand user behaviours. Follow him on Twitter @anthony_mac85 and on Google+