User experience (UX) is a key part of any website. By studying and considering how a visitor of a website interacts with the design, we can create websites that perform better.
Having poor UX creates frustration for your visitors. It jars their experience and can cause them to leave your website, abandon a purchase, and can impact your brand’s reputation.
UX is all about making life easier for your website users. And who doesn’t like an easy life?
In this article, we cover some common UX problems that we see time and time again, the impact of them, and how you can solve them.
1. Low text contrast ratio
Let me ask you a question, can you read this text?
What about this one?
You might be able to make out the text, but it is difficult. This happens when there is a low text contrast ratio.
Having a low text contrast ratio not only makes it difficult for people to read your website content, but it can also hinder people with visual impairments from accessing your content altogether.
How do you solve low text contrast ratio?
Thankfully, it can be quite an easy problem to solve. The internet is full of tools to check whether the contrast ratio of your text is high enough. At Epix, we like to use the tool Colorable by Jxnblk because of its clean interface.
Simply input the hex code for your text and the hex code for your background and – voila! – you will be greeted with the results there and then!
If the contrast ratio is too low, it’ll tell you it’s failed.
Ideally, you’ll want to be aiming for a ‘double-a’ rating at a minimum. The perfect score is a ‘triple-a’ rating which should be your target.
Some contrast ratios will only be suitable for large text (such as headings) and unsuitable for body text. Here, the results will show AA Large.
My brand colours are coming up as having a low text contrast ratio. What should I do?
Surprisingly, this is something that happens quite a lot. It is the result of brand colours being designed without considering the accessibility of the colours or contrast ratio.
If you find that your brand colours do have a low text contrast ratio, there are a few options:
- Alter your brand colours to be accessible – sometimes you’ll only need a little tweak
- Use your brand colours in other ways – use it as an accent colour and steer clear of using your colours for text
- Extend your colour palette – find colours that work with your existing brand colours that you can use online
What about text on photos though – is that ok?
Having text on images or photos is one of the biggest areas we see low contrast ratios. This is because images can have such a wide range of different colours. Whilst the text might look OK on one part of the image, it might completely fail on another part of the image.
This becomes even more difficult once you consider the responsive nature of websites these days. Because the screen size can change, you have very little control over what part of an image the text might overlay on. As a result, it could look absolutely fine on your desktop screen, but on your mobile phone, look a complete mess.
Because of this, we strongly recommend avoiding having text overlay on images or photos unless it is absolutely necessary. One solution you can employ is to add a solid-colour filter over an image to ensure there is a consistent colour.
2. Being too gimmicky
Brands like to push their personality – and there is no harm in doing that. However, when applied to a website, you need to consider it alongside usability.
A common area we see these gimmicks being applied to is section names in navigation bars.
Your navigation helps users travel across your website – i.e. you expect products to be under the section name ‘products’.
The problem is, it is common for a business to try and spin their brand personality underneath these section names.
For example, they may decide to title their ‘About Us’ section ‘Company Experience’. The problem is, no one knows what ‘Company Experience’ means and, thus, do not click on it.
The Nielsen Norman Group did a great write-up on the problem with gimmicky section names. They found a sizeable number of websites with poorly named sections.
For example, this one from a company called Jenn-air uses a category name ‘Inspired Living’:
But… what does it mean? A section name (or any link for that matter) needs to help the user determine what they will get on the other side of that click.
This example for Queen’s University fails three times on their navigation. What does ‘discover’, ‘learn’ and ‘live’ mean? They create a mystery that causes people to guess their path across the website.
How do you avoid being too gimmicky?
Admittedly, it isn’t fun being boring. It can make your brand feel like everyone else’s. But sometimes, following convention is justified, it makes the experience easier for your users and reduces any chances of creating unnecessary frustration.
Avoiding gimmicks is relatively easy:
- Use descriptive terms for section titles – even if they sound boring.
- Choose function over form – if a website element helps user navigation or interaction, don’t apply gimmicks to it. Keep it simple and to the point.
- Avoid made-up names – if you need to educate your users, you’ve already lost. Use terms that will be understood instantly.
But this doesn’t mean you can’t ever be gimmicky on your website. The important difference is to apply your brand personality where it doesn’t hinder navigation and usability.
Mailchimp is a great example of blending brand personality with usability. For example, this is what greets you when you’re about to send out an e-shot:
As you can see, this page is bursting with brand personality. However, the functional elements of the page are still incredibly clear and direct with a ‘send now’ button and a ‘cancel’ button. You know what you need to press, and you know what will happen when you click.
3. Lack of Visual Feedback
“What the devil is visual feedback?” I hear you cry!
Visual feedback is one of the differences between good web design and poor web design. Typically, it’s so subtle that you don’t even notice when it happens. But, without it… well, it can lead to serious frustration.
Have you ever been on a website and clicked on a button and… nothing? Nothing happens. So, you click it again. Nothing. You start hammering that button. Click. Click. Click.
Then, suddenly, the next page loads.
Yeah… that’s poor visual feedback.
Put simply, visual feedback tells you what’s happening.
The most common places you will see this is buttons changing colour as you hover on them:
What the website design is doing here is giving you, the user, visual feedback that this is something you can click on, and that your mouse is in the target area.
But you can go further.
Active states provide visual feedback that a user’s action is being processed.
For example, let’s look at the visual feedback for a simple button:
- Firstly, the button indicates a hover state by going from a ghost button to a filled button
- When clicked, the text saying ‘submit’ grows and then contracts by a small amount
- The shape of the button then changes into a processing circle
- A grey outline of the circle is then slowly changed into green
- Once the outline is fully green, the button expands outwards again
- A tick icon is revealed with a green background
All in all, there are 6 steps in this visual feedback to help the user understand that their action has had a reaction.
How do you improve your visual feedback?
The most basic way you can achieve visual feedback on your website is to look at ensuring that every button, link and navigation icon has a hover effect.
This helps users identify when actions can be taken.
Beyond that, explore active state feedback. How further information can be provided to ensure your users stay informed. This can be far more time consuming, as you need to understand what every action is and how it needs to present to your users.
4. Tiny Click Areas
Ever tried to click on a tiny text link on a mobile phone. Clicking everything around it but never what you want to click on?
Annoying isn’t it?
I hate it personally.
But having tiny click areas on your buttons/links don’t just hamper your user experience. They can also affect your SEO because Google now ranks sites based on the size of your clickable buttons and links.
In fact, Google recommends that a link on your website has a clickable area of 44 pixels.
Why 44 pixels? With websites having to be responsive for mobile, we need to consider how basic human physiology matters to user experience. Research by MIT Touch Lab finds the average fingertip pad to be between 10 – 14mm. Turns out, 44 pixels is just above 10mm.
How do you improve tiny click areas?
It’s important to note that it’s not the actual buttons, or links, or icons that need to be 44 pixels. It is the click area around them that needs to be 44 pixels.
What the devil are you on about?
Let’s take a step back. If we weren’t going to consider the clickable area of a link, a menu of text links might look something like this:
The areas highlighted in yellow show the clickable areas. As you can see, you need to be incredibly precise to target just the text with your mouse or finger.
Alternatively, if we were going to look at a clickable area of 44 pixels, we’d get something a bit like this:
Here, we see that the menu itself still visually looks the same. We haven’t increased the text size at all. What we have done is increased the clickable area around (the highlighted part in green) which would, in fact, be invisible.
5. Lack of purpose
Website purpose is something we’ve talked about previously here at Epix Media. And I’m going to bring it up again because it’s quite vital to the delivery of successful website UX.
Having, and understanding, the purpose of your website – how it fits into the grand scheme of your business – is key in appreciating how your website should function.
Understanding the purpose allows you to:
- Know what content on your website is the most valuable
- Prioritise call-to-actions in the right way
- Be able to communicate succinctly to your audience
In an ideal world, your website should have one main purpose. Is it to sell, to generate leads, to build brand credibility or to be an information repository for your customers? Pick one, and stick to it.
This will give your website greater focus and make it easier for you to make content decisions.
How do you improve a website’s purpose?
Improving a website’s purpose doesn’t happen overnight. It is a task that involves a lot of research to identify how your website can best benefit your business.
Here are a few activities we typically undertake when starting a website project, to help determine the purpose:
- Where does the website sit in the customer journey? – Is it their first experience of your company and brand? Or would they hear about your company through other marketing or sales activities?
- Does the website need to achieve sales or help with sales? – Do sales or leads need to come from the website, or is the website there to help educate users about your company, brand, products, and services?
- What do the current analytics say about the website? – How are people using your website currently? Are they typically drawn to one area of your website?
- Creation of website customer personas and journey flows. – What does your ideal customer look like? What are their pains & gains? What are they hoping to achieve from your website and how will they go about doing that?
These steps help identify the purpose of your website.
From here you can do an audit of your website to ensure that you’re meeting the goals of the customer personas and this objective. If you’re not, then there is an opportunity to revise how your website works for the benefit of your users.
These common mistakes are just a few in a whole host of different areas a website can trip-up when it comes to UX. As you can see, mistakes can happen from both the technical side (clickable areas), right through to the strategic understanding of your website.