Web Design & Usability

Hi there I'm Chris Anderson - the guy in the picture. You can read some of my background on the About Us page.

Rather than go by this title - which is a bit dull, I'm going to call this talk "Websites that don't Suck or Annoy People".

Or maybe even "A Warrant Of Fitness for your Website".

Or, "18 Things You can check Your Website for".

Or, "Enough with the subtitles - get on with it!"

Here's a website. You've all seen and used websites before, and Amazon is a popular one. Some of you may know how they work behind the scenes and a few of you may know something about why the good ones are designed the way they are.

A Popular Website

But I want to start by talking about cars - here's a car. It's red, sporty and goes like the clappers. If I'm going to show a picture of a car, I may as a well show a pretty one.

A Popular Car

I could show this one, but where's fun in that.

A Populist Car

The reason why I bring up cars is that just about everyone is familiar with them and how to drive them. Here are the controls of a modern car: instantly familiar.

The steering wheel, pedals and dials etc.

When you jump into a rental car, you you're speeding down the motorway at ... the speed limit of course, you don't want to play "Where's Wally" to find the brake when you need it.

Or where's the radio in this car.

Modern Car Controls

There are certain things you expect - and I'm not just talking about that chemical cleaner smell unique to the motor industry. You expect the steering wheel to be in front of you, the pedals on the floor and the control dials behind the steering wheel.

Classic Car Controls

If you jump into a vehicle and find the gearstick between your legs, no steering wheel and the hand-brake on the wrong side - surprise!

Complex Controls

You've actually rented a helicopter, not a car. Get out before you kill someone.

How Not to Parallel Park

OK, so the reason I'm talking about cars is because of their user interface. The controls. When you're driving a car, you don't really notice how you interface with the car, you just do it.

It's when things don't work the way you expect them to, that you notice - like when the indicator stalk is on the wrong side and you wipe your windows whilst turning a corner a feel like a complete idiot.

A User Interface

It's the same with the web. Users have certain expectations about how websites should look and work. Ignore them at your peril. Here's an example of what people can expect.

Another User Interface

Two researchers at Wichita State University did a usability study and asked 140 people to place 5 cards on a 5x5 grid - real high tech - to show where they would expect to find the Back to Home Link, Internal Site Links, Site Search Engine, Advertising and About Us Link. These are the results.

Layout Study Results Summary

When we combine all these expectations, we end up with a website which looks like this. Look familiar? It should do, as there a loads of website out there which have this layout.

Expected Web Page Layout

Here's Amazon again. Their website follows that expected layout fairly closely. Here's TradeMe - same deal. Now, back to cars.

Amazon and TradeMe Page Layout

To legally drive your car on the road, it needs a Warrant Of Fitness, which verifies that it meets minimum requirements.

Unless you're a mechanic, you probably don't know what your car might fail its WOF on - and why should you? That's what the people who do WOF testing are there for.

Unless you're involved in the web, you probably don't know where your website might fail on usability, or its Website WOF - and why should you? That's what web designers are there for, surely?

Not necessarily...

Under the Hood

Unlike the Land Transport Authority who specify the standards a car must match to be legal on the road, there is no authority for standards websites must match. Maybe that's why there are so many websites out there that are ugly or annoying to use.

There are well understood and documented standards for web design, however web designs are under no compulsion to match those standards, are not tested against those standards, and might not even know what they are!

Official Certification

So it your website a sports car or a lemon? We're going to blast through 18 points you can check yourself to get a basic idea of how your website is performing.

And notice this rusty old Trabant doesn't even have a Warrant Of Fitness.

Website WOF

First up, here are 6 Page Design and Layout rules.

1 Does your website pass the Squint Test?

No, do not adjust your set. This is where you squint at your website's homepage and see if you can identify all the major blocks of information. Remember - that study on screen layout I mentioned earlier? I have built-in auto-squint of course by just taking off my glasses.

Here on TradeMe, we can see the areas for the logo, navigation tabs, search, advertising, content and extra navigation.

2 Is the Logo always top left (or at very least top centred)?

A real basic one this. All these website have their logo top, left on all pages. That's where people look to see what site they're on.

Amazon, TradeMe & Fishpond Logo Layout

3 Have you avoided having a Splash Page?

A splash page typically is a homepage which tells users nothing about the site but they are required to go through to get into the site. Typically they contain just a few large images.

Splash pages are so last century. The effects for a splash page are to:

1. Increase user frustration - they was time.
2. Reduce credibility - they look very old fashioned.
3. Reduce search engine rankings - unless of course you're searching for the term "splash page".
4. Increase bailout rates - I didn't even go further ont this website.
5. Reduce website performance - big, useless images lead to slower download times.

"Splash pages are useless and annoying. In general, every time you see a splash page, the reaction is 'Oh no, here comes a site that will be slow and difficult to use and that doesn't respect my time.' " Jakob Nielsen - Usability Guru

4 Does the home page answer the three big questions?

These are three basic questions that users want answered in a hurry on your homepage and if they like those answers, they want to know how to get going. That's the call to action.

5 Do your web pages fit on a 800x600 monitor without scrolling?

Although 14% of users doesn't sound like much, there are two main reasons for designing web pages to fit this size:

1. There are an estimated 1.5 billion internet users, so 14% of that number is a potential 210 millions people you could be annoying.
2. As displays get wider, it actually becomes harder to read text that gets too wide. This is why newspapers use columns for text. An 800 pixel wide screen is a good upper limit for one line of text. In fact many websites use columns and fit with 800 pixels.

6 Is your homepage (& associated graphics) under 50KB in size?

Last year the number of kiwis accessing the internet via broadband overtook the number using modems for the first time. But it is still only 55% of users. Other than being a poor reflection on our telecommunications infrastructure, it means that 45% of your potential customers are going to have to wait 10 seconds for your home page to download - which can seem like a very long time on the web.

This is how much of this website for a well-known retailer downloaded in about 10 seconds for me - and I have broadband! I won't shame the company, particularly because their logo hasn't even downloaded yet.

The interaction of users with your website can be thought of like this: Every visitor to your site has a 'cup of goodwill'. Every time you annoy a users, a little of that good will gets poured out. Depending on the particular user, when the cup reaches a certain point, you will have used up all your goodwill and the user will leave. And no, there are no endless refills on the web.

Cup of goodwill

7 Does your website logo link back to the home page?

I thought I'd better bet the WDANZ site in the talk somewhere to keep on Dennis' good side. Logo linking is an expected action for users. If they click on the logo and it doesn't take them to the homepage, or anywhere at all, you're annoying them. Pour out some goodwill.

8 Are there text-only links at the bottom of every page?

If users can't find what they're looking for at the top, the bottom is often a fall-back for links. Particularly for the About Us links mentioned in the usability study.

9 Do the buttons and links provide feedback?

If links are made to look like buttons, they'd better act like buttons and have some kind of rollover state.

10 Is the navigation clearly labeled?

Along with standard tabbed navigations of sections, Fishpond have a labelled section for browsing.

Now we've got 4 rules for text and remember: Content is King, and text is your major content.

11 Is there good contrast between the text and the background?

Grey text on a white background has been an annoying trend in the past. Designers love the look despite the fact that it makes the content hard to read - particularly for people over a certain age or with not-so-great eyesight. You can pour out a load of goodwill with this one.

12 Are Your links clearly defined and different from plain text?

Users need to know what is a link and what is plain text, so disguising links is shooting yourself in the foot. Similarly, making text look like a link is confusing when a user tries to click it and it doesn't work. Most people expect blue underlined text to be a link.

13 Are embedded, organic links provided where applicable?

The web is all about linking as well as information, so providing relevant organic links within content is great. Organic links are links which occur naturally with a piece of text. Organic links also reduce the danger of having links around phrases such as "Click here" or "this document".

14 Is Your content written specifically for the web?

Writing for the web is not like other styles of writing, and yes, I finally got my site in the slideshow. People don't like to read too much on the web, so sentences need to be short and to the point. Paragraphs need to be short and remember bullet points are your friend.

Now I'll finish up with four miscellanoius rules.

15 Does Your site display properly in all popular browsers?

I'm still amazed at the number of sites I come across which don't look correct if you're not using just he right version of Internet Explorer. Only just over 50% of people are using IE 6 or 7. Firefox and Safari have about 40%. Remember those 1.5 billion internet users? You don't want to annoy 750 million people because of ... well ... laziness, basically.

16 Is Your website sensible when viewed with a text browser?

This might seem like a weird one. Yes there are people out there with vision problems who use screen readers to surf but I think the biggest reason is how you site appaears to search engines like Google. If you can't make sense of your website using just text, what hope does a dumb automated search engine web crawler?

17 Are Your graphics are optimised and fast to download?

Don't assume everyone has the latest broadband connection. You need your page downloaded and displayed as fast as possible. I find it crazy that some sites have such bloated graphics that all the advertising on their site downloads first and fast, while everything else crawls. Of course the people designing the adverts know that their graphics need to be as small as possible.

18 Does the colour scheme compliment Your logo?

Last point here - the content and images on your website should compliment your logo and company colours. A web designer who has come up through graphic design should know about this stuff. A web designer who has a technical background may not. A mis-mash of colours just looks unprofessional.

Now I've blasted through these 18 points at top speed and there are many more usability and design rules and guidelines we can check website against.

Because of the lack of knowledge about what is good, usable web design, I'm now offering a Website Warrant Of Fitness.

We check your website against over 100 points like the ones I've covered today and can give you either peace of mind that your website is Web Worthy, or highlight the parts of your website which could do with some improvement.

Thanks for your time.