6 mistakes you’re hopefully not making on your website

December 13, 2016
 
by
 
Adam Babajee-Pycroft
,
 
Managing Director (UX)
 
, in
 
UX Design
hands using smartphone with a teacup on a saucer and a laptop

If you work in User Experience, I hope this article is of no use to you whatsoever. When we begin to work with a new client, one of our first tasks is usually to carry out an Expert User Experience Review. These point by point evaluations draw on the expertise gained over the years and help resolve the really obvious stuff before we start user research or interaction design. During these reviews, we tend to encounter the same issues over and over again. To make our lives more interesting and to save us repeating ourselves here are 6 mistakes that other people have made, for you to learn from.

1. Click Here (aka “switch on the light by pressing the light switch”)

Have you ever been asked to switch on a light? Have you ever been told how to switch on the light when asked? No, you haven’t. So why do so many websites still use the anchor text “Click Here” on their links and buttons? The chances are, you learnt how to use a light switch long ago. The overwhelming majority of people have used the internet before and understand that the underlined blue text is probably clickable. However, apart from being patronising, there are some great reasons not to do this:

  • Around 56% of your users are probably on a mobile device (and won’t be “clicking” anything), so it’s the wrong verb anyway.
  • It’s unnecessary; people know how to identify a clickable link or button and what to do with it.
  • It breaks up the sentence and worsens readability by making it more difficult to process
  • It has no context, and Google won’t like that (unless you’re trying to rank for the keyword “Click Here”)

What should we do instead?

Instead of stating the literal action (click here), describe the purpose of the link (e.g. buy now) Your links and buttons should describe what clicking the button (or link) will do, or the information it will take the user to, not the action taken to get there. So, if a link is to authority website about a piece of research that you’re citing, try using the name of the study as the anchor text in place of “click here to read more”.

2. Non-descriptive button text

This one isn’t as bad as using “click here” as it follows the rules outlined above, but it’s still not optimised to its full potential. Text such as “submit” is a common example often found on contact forms or payment gateways etc. Instead of the non-descriptive text, consider using something like “continue to payment”, “pay now” or “filter” to give users more information about what the consequences of the clicking will be.

What should we do instead?

Try imagining what the next step after clicking the link or button will be, where will it take the user or which action will it perform? Then, consider whether the text you’re using appropriately conveys this. If not, then maybe consider amending it to be clearer. People like to know exactly what will happen if they complete an action, especially on payment forms or the checkout page, where security and confirmation could be an issue for them.

3. Poor Colour Contrast

Colour-blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain, this means that there are approximately 2.7 million colour-blind people (about 4.5% of the entire population), most of whom are male. We doubt you’d be willing to accept a 4.5% decrease in sales, but poor contrast on your website may mean that you’re already losing out on that 4.5% It might look perfectly fine to your designer, but consider that the average resolution of the average user’s device may not be the same as the shiny Mac used by your designer. Colours can be represented slightly differently on different screens (hence the common disclaimer about the colour of an item differing slightly to the image shown). Aside from being slightly inconsiderate, excluding people from being able to use your service based on a disability they have (such as colour-blindness) can mean you’re in breach of the Equality Act 2010 in the UK or similar legislation elsewhere.

How do we check colour contrast?

Check your colour contrast against the Web Content Accessibility Guidelines v2 to ensure your text is legible. Our team tend to use the WebAim Contrast Checker.

4. Tiny touch targets

Designing for smaller screens doesn’t necessarily involve shrinking every element.  Icons and other touch targets must be large enough for users to interact, if they find they can’t click on something because it’s too small, they won’t stick around forever trying.

What size should buttons and links be?

The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm or 48 CSS pixels on a site with a properly-set mobile viewport. Apple makes a similar recommendation of 44px in the iOS human interface guidelines. In our own research, we’ve found that 44px is sufficient for the majority of users, providing there’s space between touch targets. It’s worth remembering that the button design doesn’t need to be this large, just the tappable area.

5. Text embedded in images

Have you ever gone to highlight a line of text to copy and paste it, then realised that you can’t because it’s embedded in an image? Thankfully, this trend is decreasing, with the adoption of responsive design, but still occasionally rears its ugly head. There are several other great reasons not to do this:

  • The content is not accessible for those using screen readers, even when the text is in the alt text as you can’t include paragraphs or emphasis.
  •  If people using assistive technology can’t read the text, then Google’s search bot won’t be able to either. This means your content won’t benefit your SEO.
  • Text embedded in images tends to be pixelated and therefore less legible. Alternatively, you have to increase the image file size which in turn increases your loading times, annoying users and harming SEO.
  • With the growing popularity of smart assistants such as Siri and Alexa, we’re regularly using voice recognition technology to retrieve snippets of information from the web. If the content isn’t marked up using HTML and is hidden in an image, the robots won’t be able to read it.

How should we put text over an image then?

With HTML and CSS.

6. Inconsistent behaviour

When a user first lands on your website, they’ll begin to build a mental model of how it works.  A mental model is a person’s intuitive understanding of how something functions based on his or her past encounters, exposure to information, and sound judgment. Simply put, they’ll guess the consequences of clicking a button based on their past interaction with similar buttons. Inconsistency is commonly experienced through navigation and icons. Icons such as those used to share something on social media are often the same as icons intended to like a page (or otherwise complete a different action). Your icons should convey suitable meaning to your users, allowing them to identify their purpose.  For instance, a Facebook icon intended to share a blog post on social media should be different to the Facebook icon intended to like your company’s page. When they’re the same, the user either won’t know what to expect when they click the button, or they’ll feel misled after expecting a different action to the one which actually occurs.

How do we maintain consistency?

There are a number of tools and techniques we use to maintain consistency. These range from creating style guides to printing off examples of pages and templates then highlighting inconsistencies. Typically, these are difficult to spot if you’re very familiar with the website so we recommend getting a fresh pair of eyes. These sort of issues regularly crop up on user journeys which take place across multiple technology platforms, which have been stitched together by a single company. For example, many companies buy off the shelf portals for careers websites or integrate with third-party customer help tools. As a rule of thumb, if the user is likely to interact with these third-party services during a normal journey, there’s potential for inconsistency and mistakes.

Adam Babajee-Pycroft

Managing Director (UX)

Our founder Adam has over 13 years of experience in UX. He’s fuelled almost exclusively by coffee (using one of his seven coffee making devices),curry and heavy metal. Before founding Natural Interaction in 2010, Adam managed UX for AXA Life’s UK business. Since then, he’s worked with a range of clients across the automotive, eCommerce and tech startup sectors, delivering impressive results for brands including BMW, Mini, The Consortium and National Trust.

Get in touch

To find out more about how our UX services can help your business, contact Alex now.

Contact us