Design talk given at numerous Internet Unmasked events, 2008
Note: Lots of images to load on this page. Presentation has been modified for the web.
If you’d like to read this article off-line or print it out, you can download a nice PDF version of it here: Great Website Design Tips - 17 Essential Design Tips That Your Customers Will Love You For
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!”
A Popular Website
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 Car
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.
Car Controls
I could show this one, but where’s fun in that.
Modern Car Controls
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.
Classic 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.
Complex 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!
How Not To Parallel Park
You’ve actually rented a helicopter, not a car. Get out before you kill someone.
A User Interface
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.
Another 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.
Layout Study Results Summary
Two researchers at Wichita State University did a usability study and asked 140 people to place 5 cards on a 5×5 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.
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.
Amazon and TradeMe Page Layout
Here’s Amazon again. Their website follows that expected layout fairly closely. Here’s TradeMe – same deal. Now, back to cars.
Under The Hood
To legally drive your car on the road, it needs certification – 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…
Official Certification
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!
Website WOF
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.
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)?
Amazon, TradeMe & Fishpond Logo Layout
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.
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:
- Increase user frustration – they waste time.
- Reduce credibility – they look very old fashioned.
- Reduce search engine rankings – unless of course you’re searching for the term “splash page”.
- Increase bailout rates – I didn’t even go further ont this website.
- 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.
Who you are?
What you do?
Why I should do business with you?
And then: How do I start?
5 Do your web pages fit on a 800×600 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:
There are an estimated 1.5 billion internet users, so 14% of that number is a potential 210 millions people you could be annoying.
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.
Cup of goodwill
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.
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 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 this was just the tip of the iceberg. 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, and people asking “where can I start to make my website better?” 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.
The report is a document which you can give to your web designer and say “fix this stuff” and know that your customers will find your website much easier to use.
Thanks for your time.
If you thought this document was useful, you can download a nice PDF version of it here: Great Website Design Tips - 17 Essential Design Tips That Your Customers Will Love You For
