Five Design Mistakes That Kill Conversion Rates

Good web design is usually simple and intuitive. That doesn’t mean web design is easy or that design mistakes don’t occur. This is why it’s important to bring together specialists. Such as UX design, conversion optimisation and user research to help create a great user experience that delivers a high conversion rate.

Design mistakes occur because even with the best intentions things are missed or compromises are made that can have a huge impact on the user experience and conversion rates. That is why it’s important to track user behaviour and monitor the customer experience on a continuous basis. A heuristic evaluation of a site will often uncover a multitude of sins and areas of interest that need further investigating.

Here are a five common mistakes that can affect your conversion rate.

1. Dead end:

Providing additional resources or tools is a great way of engaging visitors and encouraging them to return to your website. It is still important though to include relevant call to actions to guide users where to go next after they find the resources they are searching for.

For example, the insurer Vitality Health offers users calculators and tools, including an age calculator. This is a great idea given their target audience. When visitors complete the age calculator they are taken to a page without any call-to-action. This is a dead-end for the user and a lost opportunity to give visitors clear guidance on where to go next.

Image Source: Vitality.co.uk

2. Unnecessary Friction:

When users are trying to complete a transaction on a secure page it is important to avoid unnecessary friction. Users may get frustrated and abandon the page. Here Tesco asks users to verify their account before completing a purchase using Clubcard vouchers. Customers are asked to enter three digits from their sixteen digit account number. This may be straightforward if customers have a Clubcard. If they have a Tesco credit card it is more of a challenge as the account number is using a small low contrast font at the bottom of the card.

Image Source: Tesco.co.uk

A simple text message or email with a verification code would be much easier for users to deal with here. However, when I first completed this process I couldn’t understand why I kept being asked to order a new Clubcard. That’s because I naturally clicked on the CTA that is just below the image of the Tesco credit card.

The primary CTA is tucked away on the far left and not immediately below the input boxes. Users will naturally click on the CTA that is closest to their mouse position on a form. We associate items that are close to each other as being related. Furthermore, in the West when faced with multiple CTAs users will naturally click on the CTA on the right. Ensure your primary CTA is where users expect to see it as they don’t anticipate searching for a form submission CTA.

3. Excessive Negative Space:

Excessive negative or white space can push engaging content below the fold and create the impression of a false bottom. The flooring site Atrafloor.com below uses so much negative space on its “Our Story” page it looks like the page is broken and has no content. This is wasteful and reduces engagement. It also discourages users to explore the page further.

Image Source: Atrafloor.com

4. Breaking web conventions:

Web conventions are the designer’s friend because they allow users to navigate and learn from experience. This means they don’t have to re-learn how to browse around a site provided it conforms to basic web conventions. Yet many sites appear to ignore this benefit of web conventions and don’t locate their primary navigation at the top of their page or down the left hand-side of the screen. See below a few examples of homepages where the primary navigation is not located where users expect it to be.

Does it really matter? Well, yes it does as lots of studies and tests have shown breaking strong web conventions reduces usability and often adversely affects conversion rates. Below is an A/B test on partypoker.com. In the default experience the secondary navigation was on the right hand-side of the page. In the challenger variant the navigation had been moved to the left hand-side of the page to conform to the web convention. The variant was the clear winner with clicks on the secondary navigation up by 17% and clicks on the primary CTA (which varied according the page) up by 12% and 27% respectively.

Image Source: Conversion-Uplift.co.uk

5. The Hamburger Icon:

Sometime we see something so often we assume that it must be working because of its popularity and we may even adopt it for our own site. This is called the bandwagon effect and unfortunately this can lead to design trends that have no evidence to support them. That’s what happened to the hamburger icon on mobile and why it can be classed as a design mistake.

Facebook adopted the hamburger icon for its mobile side menu in 2010 and after that many designers assumed it was an approved design element. However, most A/B tests and usability studies have shown that the hamburger icon reduces discoverability and conversion. A study by Whatusersdo confirmed this is 2016. For this reason companies that have testing culture have tended to either remove their hamburger icons or add a label to clarify its purpose (see Netflix below).

Image Source: Netflix.com

Another recent trend that lacks any real logic is using the hamburger icon on desktop sites. Apart from being a stupid idea, it is totally unnecessary as on a desktop screen there is no need to reduce the primary navigation down to single icon. I suspect this trend may reflect an obsession for consistency of design between mobile and desktop sites. But as I explained in a post about commitment and consistency, consistency for its own sake is not a good reason to strive for it. Consistency needs to have a benefit as otherwise it can harm the user experience.

Conclusion:

Conversion optimisation is not a simple process. It requires a culture of experimentation and evidence based decision making. However, you can prevent unnecessary problems by ensuring you always give users a clear call-to-action at the end of any user journey. Don’t let account verification create unnecessary friction through poor design and difficult tasks. Automated account verification makes this process simple and painless.

Negative or white space can be a powerful directional cue to draw the user towards a desired action. However, excessive white space creates the wrong impression and can hinder browsing activity. Web conventions assist user navigation and browsing and so avoid breaking them unless your idea improves the user experience. Breaking conventions relating to navigation are especially problematic and so should be avoided at all costs.

Finally, avoid following new design trends unless you have evidence that they improve conversions. Many design trends only become popular because designers and web masters jump on the bandwagon without first testing their impact on user behaviour. This approach to web design can seriously damage your conversion rate. If you don’t have the expertise internally consider hiring a conversion rate optimisation consultant to help guide you and transfer skills to your staff.