Website to Wonderful 2: Usability, or How not to make your visitors’ eyeballs bleed

November 7, 2011

Sometimes it's hard not to suck If you read Part 1 of the series, then you now should have a neat set of goals and wishes to think about. But before we go any further, let’s take a look at your site and see if there are any things which are actively preventing your site visitors from taking a promising relationship any further.

This is pretty much Usability in a nutshell.

To illustrate, I want to talk about my dog Alfie.

Usability lessons from pet sites

Alfie is a teenage dog now, about 8 months old. He is my first dog and so the past few months have been a flurry of training and problem-solving. And shopping: finding a vet, a dog groomer, dog training, more dog training, special types of harness, agility training, flea treatment. Obviously my first port of call was the internet.

Unfortunately, it turns out that the UK dog supplies world is pretty much stuck in a mid-1990s version of the internet. Most dog-related websites are absolutely horrible. My lovely vet’s website has had ‘Under Construction’ on it for the past 4 months. Many dog trainers don’t have a website at all. One (pretty successful) trainer near me does have a website: it’s done in tiny blue font on a bright yellow background. It has loads of spelling mistakes and none of the downloads work. It currently looks forward to the August bank holiday.

Don’t do this.

Usability doesn’t matter so much in the dog training world, because people find trainers through word of mouth, and dog trainers’ skills are all about their relationships with animals, rather than fancy marketing. So, a dodgy-looking website says very little about your skills as a trainer. (For now).

This is not true for the rest of the internet.

Here are the main things to check before we go any further. (And note: All of them sound really obvious as written here and yet we all have things on our sites which make life difficult for our readers – it can just be hard to spot them in our own work).

1.You get to the point quickly

Splash pages (those ones which auto-play a site introduction) are pretty much out of fashion, but I still see them from time to time and they are a killer. They are just about possible for high fashion/music websites done by leading edge web designers but for everyone else they are beyond horrible. Avoid.

2. Your text is readable by humans

Can a site visitor with ordinary vision and a short attention span read your website comfortably?

This is one of the biggest issues I see, especially on WordPress sites. Designers have become fond of using grey text without much contrast (often as part of default colour schemes), and it can make a site pretty hard to read.

Also:

  • The wrong font for the main text (body) can also give site visitors a headache. Yes, Century Gothic, I’m looking at you.
  • Handwriting fonts can be pretty when used for short headings, but if you use them for longer pieces of text, check that people can actually read them.
  • Avoid coloured fonts on clashing backgrounds, unless you know what you’re doing. Also scrolling text. Some people (like me) actually get migraine from moving sites.
  • You should break up long text into smaller chunks, so that impatient types can scan headings and understand the piece very quickly.

3. Visitors know where they are when they land on a page

In other words, you use various kinds of navigation to help people move around, and you make your signposting clear on every page. Before you remove the button that says ‘Homepage’, bear in mind that many people do not know about the convention that clicking on your logo or banner takes people to the home page.

  • Lots and lots of signposting (multiple menus, for example) can be overwhelming.
  • Hidden blogs are also popular these days, usually where people have renamed the blog to something fancy.

Captain Obvious is your friend.

4. Your links look like links

The classic advice was to use dark blue underlined text to show links; it’s possible to be more creative these days, but make sure that people do know where they can click on your pages through some sort of visual signal or colour change.

5. Your website looks acceptable in all major browsers

There are two parts to this depending on your perspective  a) make sure that your site operates outside Internet Explorer, and b) make sure that your site operates in common browsers of the day (including Internet Explorer).

There are some lovely features available to users of Opera and Chrome but do not forget the internet masses who just changed to Firefox last week and are feeling quite street.

(What’s a major browser? Internet Explorer, Firefox, Chrome, Safari and Opera – see this nice set of stats )

If you are using something like WordPress with a premium theme, this won’t usually be a problem. There are free site checkers which will submit your work to lots of browser versions, but you usually have to wait ages – it’s easier to just download the main ones and then view your site in each.

6. Everything works (video, PDFs, purchases)

This sounds obvious. None of us set out to create a site which doesn’t work, but for the most part (a) we create with a particular set of software tools and (b) we simply don’t see our own errors. So you can be the last to know if your site is breaking.   Get some friends or colleagues just to click around and report back any issues.

Remember that some people have Macs and some people have PCs. Yup.

7. Your transactions operate in a smooth, friendly, professional way

A lot of web instructions make the user feel as though they’ve wandered off-piste in an unfriendly dictatorship. Curt messages, bright red fonts, demands for bribes.

Be nice. Edit the standard wording, if need be, to reflect your own warmer, fluffier values.

8. Your spelling is good

Most people spot the honking great mistakes, it’s the subtleties which slip through. Too many and you start to look less than professional. Also, Be Consistent With Your Cases.

9. Your site appears up-to-date

Update, update, update.  The words ‘Copyright 2007’ are especially sad.

These then are the basics of good usability, but they’re not enough by themselves. There are some highly successful sites which break these rules, because (like the dog trainers) the site owners do offer something unique and highly valued. But on the whole, these are a good place to start.  Fix the broken windows, then we can look at redecorating the living room.

In my next piece, we’ll go beyond basic usability, to look at your site visitors and how you can start to develop more meaningful, happy, profitable relationships with them.

Email This Page

{ 4 comments… read them below or add one }

Lisa Garwood November 7, 2011 at 2:55 pm

Absolutely love your new Website to Wonderful blog series Alison :)

Good, to the point, no nonsense – this is how it is and how it should be stuff – fantastic!

Looking forward to the next one
Lisa

Reply

Ali Mac November 7, 2011 at 5:59 pm

Thanks very much Lisa, I appreciate it.

Reply

Isabelle Fredborg November 7, 2011 at 9:35 pm

Great post, Alison. Some great points that I’ll keep in mind as my new website is under construction. Are there some colours you should be extra careful with using in excess or is it more an issue of brightness? Earlier today I visited the website of a restaurant aimed at the young cool London crowd. It was so bright yellow that I had a hard time looking at it – and there’s nothing wrong with my eyesight…
Looking forward to reading the rest of the series! If this is the quality you get out of contentpalooza then I’m impressed :)

Reply

Ali Mac November 9, 2011 at 2:56 pm

Hi Isabelle.  Glad you’re liking it.

There can be differences between computer monitors, so that what looks garish on one monitor looks perfectly on another.  Colour choice can obviously link closely to branding, but I think if it hurts your eyes then it’s too much!  It’s the usual colour rules – contrasting colours can clash. However, a talented designer can create a very bright scheme that stops short of being painful.

It’s interesting that it was a restaurant – in my experience, sites that are less-used and more of a brand display than a working site, are more likely to go for eyewatering schemes.(and I’m sure there’s an age thing in there, just don’t want to think about it).

Reply

Leave a Comment

{ 3 trackbacks }

Previous post:

Next post: