Website launches: How usable is your website? – part 2

map

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:

Bounce rate

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.

Usability

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?

Speed

Your website visitors are impatient. If your website takes longer than 2 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.

Exit rate

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.

landscape-mountains-nature-rocks

User flow

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.

Hyperlink

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:

guardian

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:

brand-colour-chart

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.

Visual impairments

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.

Accessibility

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.

html

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. For example, take this image of  Instead of image003b, use . Always add hyphens in between words, not underscores. Why? Because Google says so.

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.

And breathe…

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.

Did you miss part 1?

 

0 comments on “Website launches: How usable is your website? – part 2

Leave a Reply

Your email address will not be published. Required fields are marked *