A picture can paint a thousand words…
Words are free; it’s how you use them that can cost you.
Timeless phrases, all true, but…
…when it comes to your website, pictures and words are nothing without usability (UX).
A great website is the digital equivalent of walking into a boutique shop, having an attentive assistant carry your bags, bring you a glass of champagne, and ensuring you leave with exactly what you need. Plus maybe some things s you didn’t know you needed.
You might have Pulitzer prize-winning copy. A photo worthy of National Geographic’s photo of the year award. But if your website isn’t easy to use, you’re always going to finish runner-up.
Usability is the glue that holds your website together, converting customers, and attracting eyeballs.
And with so many connected devices, with so many different-sized screens, UX is only getting more important.
How to recognise a website that works
You need a different approach to measuring visuals or text.
Let me explain.
When it comes to visuals, you might not be a designer but you know the style you want.
You might not be a copywriter, but you can recognise powerful words when you read them.
But knowing a website’s usability? That’s a 64-million-dollar question.
After all, the only people who really know… are your users. And they probably have other things they’d rather do than give you feedback. And in any case, how would you know if they’re saying what they think, or what you want to hear?
Unless you’ve got a two-way mirror and plan to monitor how users interact, you need to think of alternatives.
A plan for launch
Gather five people you can trust to give you an honest opinion.
Get them to view your website for five seconds and ask their opinion. Did they understand what it offered? What do they remember about it? What emotions did they feel? Reassured? Roused? Revolted?
Get them to complete a transaction. For example, make a purchase, find your services and then contact you, or search for some information. Watch how they interact with your website. Look for any signs they’re struggling or unsure of what to do or where to click.
You need to know how to get your users from where they start, to where they want to finish.
Otherwise your users end up making a wrong turn, or getting lost. Your website has to be the guide.
Talking of guides…
These are road signs. Do you know what they mean?
If you’re a driver, then hopefully you do.
But if not, then you probably don’t.
How about these?
You don’t need to be a driver to know, or at least make a good guess.
Because alongside symbols, you have clues.
It’s the same with online.
Here’s a popular icon.
This is called a hamburger, and signifies a menu. People who regularly use mobile devices will recognise it.
But what if your target audience aren’t regular mobile device users? You may need to test. For example by adding ‘menu’ underneath.
Of course, after launch, you need to know if these changes are making a positive impact.
Have you ever seen Who Wants To Be A Millionaire?
Four possible answers per question. Starts off really easy, and then builds up the tension as you approach the one million prize.
You know the “phone a friend” lifeline? When it comes to usability (UX), Google Analytics is your phone a friend.
Here are some of the metrics you’ll rely on for the right answers:
If you have a high percentage of visitors arriving and then leaving without going anywhere (your bounce rate), this tells Google: “This website is not working well – don’t rank it highly.”
What causes a high bounce rate?
Maybe it’s not what your visitor expected to see.
They took a wrong turn and ended up on your website.
But if they arrived on your website after clicking on one of your ads, then review your messaging. Is it consistent? Is it clear? Even better, test out your funnel on a few people and get their feedback.
Check to see if the bounce rate varies between browsers. If you notice a particular high bounce rate on a certain browser, it may be that your website has a bug, preventing visitors from converting. Here’s how to check. Open up Google Analytics, click Audience > Technology > Browser. Look under the bounce rate column, and compare the percentages against each other, and against your site average. Notice anything unusual?
Your website visitors are impatient. If your website takes longer than 3 seconds to load, expect a large proportion to give up and go elsewhere. Use this free speed testing tool rate your website against the competition.
When is a high bounce rate good?
Maybe you’re giving visitors exactly what they want. For example, if a visitor wants to contact you, they might Google “company name phone number” and go straight to your contact us page. If that has a phone number, then your visitor has succeeded with what they want to do.
Are there particular pages where your visitors are dropping off? If the page is a thank you page, perhaps after completing a transaction, that’s no problem.
But if it’s high on a pre-conversion page, for example your “view checkout” page or a “contact us” page, it’s time to investigate.
Where do people land on your website, and which pages do they go to? Are they going to the pages you want? If not, it’s time to look at your funnels.
Prioritise your pages
That means deciding what are the main sections. And then analysing their visibility. Can you get there within one click from your homepage? Or is it buried under a pile of other pages? Ideally you should be able to get anywhere on your website within three clicks.
Make it easy to get around your website. That means hyperlinking to different pages within your text. Adding calls to action that show the user where to go, making use of sidebars to show off other parts of your website. This is also important for SEO, because it guides Google bots to all your pages, for better indexing and ranking.
To scroll or not to scroll
There’s an internet’s worth of discussion about whether users scroll or not. You might get told to keep content above the fold, give them the important information straightaway, clearly mark menus. All good solid advice, but what if you’ve got a one page design? Or what if you’re displaying a large portfolio, or collating content?
The Guardian website is a great example of how to do it. Some stories are aligned in a row, but look at the two bottom-left columns. These run at different heights, signalling that there’s more information underneath:
Colour me bad
What does the colour red mean to you? Stop? Danger? Love? You can find hundreds of colour theory studies that come to all sorts of conclusions.
But you know the problem with colour theory? It’s… well… theory.
And here’s the thing: your website is unique. And so are your visitors. So you need to forget theories, and run your own tests. Find out what your audience thinks of your colours. And then decide whether you need a rethink. Here’s a brilliant guide (from Forty Nine Stories to help start you off:
You can use colours to signify sections. For example if you’re running a property website, a for sale section is one colour, and the for rent is another. Subtle, but because you’re likely to receive lots of repeat visitors (at least, if you’re offering properties in an insane market like London), it helps guide your visitors.
Around 8% of males are colourblind (one in 200 women). Most people have some form of astigmatism. If your website gets 1,000 visitors a month, that’s potentially 80 male customers you’re turning away.
So make sure your colour schemes are accessible. White text on black background may look cool to some, but to others it’s impossible to read. Sounds simple, but if your brand relies on an unconventional colour scheme, here’s where you may need to make a judgement call.
For example, look at Nespresso’s website.
Branding is key to their success.White text (milk?) on rich dark colours (coffee). Not so good for accessibility, but essential for branding, particularly at the luxury end.
Try using a screen reader to get an idea of what the internet is like for a blind person. This reads what’s on the page, left to right (or right to left, depending on your language).
If you’re using tables for your products, avoid using <table> in your code, because a screen reader won’t make sense of it. Use div tags instead.
And if you’re using images, make sure you use alt tags. These describe the image, so if a user can’t see the images, or if their browser blocks them, they still understand what’s on your page
It’s a challenge to get this right, and with many websites it’s just not possible to recreate the same experience with and without a screenreader. But even the little things will make a difference. And it means that you open up your part of the web to more people. And that’s got to be a good thing, right?
SEO image tip
When uploading your images, save them with descriptive names. This makes them more likely to show up in images searches, and can bring you extra visitors.
And always compress images, ideally to below 100kb. This makes sure your website loads fast. If you don’t have Photoshop (go to File > Save for web) then use a free online tool, such as Image Optimizer.
The above is a lot to take in. And if you’ve got a business to run then you’ve got a million other things to deal with. But if you can get your head around the basics, and make use of some of the free tools included above, you are on the right track.
You definitely can’t afford to ignore UX. After all, your website designer may come up with a design that takes your breath away. But if it only works properly on 24” Apple screens, it’s also going to take your profits away.