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

Last week I saw an advert by a well-known electronics shop advertising digital HDMI cables – you know, the sort you use to plug your DVD player into your TV. They had them listed under the headings: Good at $150, Better for $200 and Best for over $250. So what? Analogue cables vary hugely in price. Why not digital cables?

Digital is not Analogue!

That may sound like an obvious statement but people keep getting sucked in and think the old arguments which worked for analogue still work for digital. They don’t. Trust me. OK, don’t trust me … read on instead.

In the Angry Young Man column in Tone 62, Brett Gideon wrote how people neglect their speaker cables and that the cable quality can affect audio sound. That’s true, in the same way that translating the physical grooves on a vinyl record into an analogue electric signal has virtually an infinite number of ways of coming up with a slightly different sound from the same record.

This is due to the various wires, stylus needle, tone arm, electronics and physical construction all contributing to make the varying electric signal which represents the audio slightly different. This is because the audio is represented by a continuously changing electrical voltage which is quite susceptible to alteration.

Digital is not analogue!

Things are quite different in the digital domain. Digital is just numbers, ones & zeros, voltage or no voltage.

A CD has a smooth reflective surface with holes in it. The CD’s laser reads the surface and converts the holes and smooth bits (called lands) into ones and zeros. There are no ‘almost ones’ or ‘almost zeros’. Because CDs are essentially stamped out like a record, there is a lot of redundant information on them to recover from the odd wrong hole or a scratch on the disc.

This error correction will either work, or it will fail. When it works, the numbers read off the disc are identical to the numbers from the original source. When it fails (maybe due to a scratch) the player skips, doing the du-du-du-du-du-du thing, or it inserts a tiny bit of silence, which is less noticeable than the noise-like buzz of bad data.

It was crazy when, no so long ago, people were selling special pens, claiming that when you coloured in the edge of your CDs, it made them sound better by stopping internal laser reflections. Nope, sorry. The laser is designed to read those holes and smoothes bits fine by itself thank you very much. You don’t think the people who designed CD players wouldn’t have accounted for internal reflections if it going to jeopardise reading the disc?

I once bought a second hand CD that someone had attached one of those sticky plastic rings to the outer edge. It was claimed that they smoothed out and improved the performance of the disc. Nope, sorry. CDs often need to have their rotation speed changed very quickly and sticking extra weight on them makes them less able to do so. Manually attaching something to the disc also upsets the balance of a disc, making it vibrate a hell of a lot more and, if anything, making things more difficult for the laser to read.

You can sell anything if you wave your hands around and spout enough techno-babble. But I digress.

Where was I going with all of this? Well, once you have that string of digital numbers, ones & zeros, voltage & no voltage representing some audio and send them down a cable to another device, the ‘quality’ of that cable CAN’T SUBTLY CHANGE THE TONE OR QUALITY OF THE AUDIO THOSE NUMBERS REPRESENT.

They just can’t. Whether you post a letter in a standard size or an A4 envelope makes no difference to the contents of the letter (it’s just more expensive). Cables can’t subtly alter digital video either.

The numbers that go in one end of a cable are the same that come out the other end, so it doesn’t matter whether you connect your CD player to your amp via digital coaxial, optical or HDMI cable; if it’s digital they will all faithfully transmit the same correct data. If theydo change the data, then they are actually faulty and you will hear periods of silence, dropouts or possibly noise. Take the cable back and get a replacement.

But finish reading this first…

So why did that retailer advertise three different qualities of cable for three different prices?

Did you every hear of anyone buying a new computer and throwing the keyboard away, going out and buying the most expensivekeyboard they could find, just because it made their writing better? No. You press a key and the digital numbers representing that letter gets sent to the computer exactly as you type them.

Did you ever hear of anyone buying a printer and throwing away the USB cable, going out and buying the most expensive USB cable they could find, because it made the pages they print look better? No. The quality of a printer has nothing to do with the cable.

So one HDMI cable should be pretty much as good as another HDMI cable. The only way an expensive cable is ‘better’ is that it’s better for the retailer because they can charge more money for it. It was ironic that the expensive cables were one third of the length of the cheaper one. 60% less length for 70% more cost. Wow – a bargain!

Digital is not analogue!

So don’t let anyone pull the wool over your eyezkg(#DG4kdo@djs+-…

Damn those cheap USB cables!

When you jump into a rental car, you don’t want to play “Where’s Wally” to find the brake when travelling at high speed.

There are certain things you expect – and I’m not just talking about that chemical cleaner smell unique to the motor industry or the fact that the radio can never get a decent station. You expect the steering wheel to be in front of you, the pedals on the floor and the control dials behind the steering wheel. You might even expect to sit on the left or the right to drive.

If you jump into a car and find the gear-stick between your legs, no steering wheel and the brake handle on the wrong side – surprise! You’ve actually rented a helicopter, not a car. Get out before you kill someone.

Web users have similar expectation for where things should be. Instead of the steering wheel, they need navigation links. Instead of the brake, they need a Back to Home button. Like car designers, web designers need to be aware of what users are expecting of the web.

Two American researchers have produced some interesting research on where users expect to find key navigation elements. Using a 5×5 grid, they asked over 140 participants to indicate where they would most expect to find the following elements:

• Back to Home link
• Internal Site links
• Site Search Engine
• Advertising
• About us link

Over 80% of the participants in this study had used the web for over 4 years and 50% used it for 2-6 hours per week. These users are no newbies and know what to expect out on the web. So what did they think?

Back to Home Links

The majority of users expected to find the Back to Home link in the top left corner, as shown below. Now if you think about it, most web pages have a clickable logo in that position which links to the Home Page. This 44% figure was the actually highest value of the entire test. This indicates that uses are very confident that there will be a link to the home page in that position. The 15% who indicated the middle of the bottom of the page are probably used to seeing the text-only links which many website have in that position.

If you have a site logo in the top left position and it isn’t clickable and there’s no other Home link there, how about making it so and keeping the users happy?

Internal Links

Participants were given the option of indicating twice where they thought internal links would be available. 60% did indicate twice and they very strongly expect to see links along the left edge of web pages. Top left and bottom centre also show up as likely places for Internal Links. There is certainly a strong expectation for links to appear on the left hand side.

The right hand side of a page is also a perfectly valid place to have internal links, just bear in mind that users are expecting to find them on the left first.

Site Search Engines

The expected position of a search engine is less coherent. The top right area was the most popular, however the entire top edge is a likely candidate and, again, the area near the expected Internal Links was popular. This is perfectly sensible as searching is a more specific type of navigation.

Best to check your search engine works too. It’s embarrassing when Google can find a document on a website, when the website’s own search engine can’t. In my experience, this happens a lot.

Advertising

Advertising is very much ‘front and centre’, taking the most prominent position at the top of pages. From print media, the centre top of a page is expected to contain important information, such as titles, chapter headings, etc. On the web, users expect to see advertising here, which greatly devalues the position for important information, particularly when banner blindness is taken into account.

The right hand edge of the page was also a popular place to expect advertising. Many website employ a three column layout, containing (left to right) Navigation, Content, and Advertising or supplementary links. The users know this. So if you’re going to put important information in these spaces where users expect adverts - Make sure they don’t look like advertising.

About Us Link

The centre bottom of the page is a common choice, particularly as this is where the text-only for many site appear. However, there are no strong user preferences, with all expected areas containing links gathering some support. Bear in mind that there were no existing visual clues in this test for users to go on. If the question was “All the navigation links are on the left hand side, where would you look for the About Us link?”, the result would probably be more coherent.

Composite Web Page

By combining the most popular and distinctive choices into a composite page (the colours above do not indicate any particular preference), we can get an idea of the web page that a user is most expecting to see. This strongly matches common layout used by many, many websites out there. Am I surprised that this is the case? No.

Does this mean that at all websites should be designed to follow this standard layout? No.

It just means that if you know a user is expecting to see a link in a certain location, there should be good reasons for not putting it there. “Because it looks funky elsewhere” is probably not a good enough reason.

The composite below shows a strong user preference for links on the left-hand side of the page, but they don’t have to be there. This simply indicates the expected position of those links – and probably indicates the first place a user will look for them.

Users will almost immediately catch on to a website with a right oriented navigation structure and have no problem navigating the site – as long as the site is consistent in having navigation links place there. Tabbed based page layout is becoming more popular and may change users’ expectations for link positions.

Happy layout.

Original research article.