But You can Learn how to Turn Your Website into a Place People are Happy to Stay (and Buy Your Services)

Now I haven’t actually seen your website, so how do I know this haemorrhaging is happening to you?

No, I’m not some kind of magician.

Well, studies indicate that when someone arrives at your website, you have less than 7 seconds to grab their attention and keep them there. You may even have as little as 3 seconds. That’s about the time it took you to read these last 2 sentences!

If you’re not telling those potential customers very quickly why they should stick around, they probably won’t. It is long known that a website’s homepage should answer the Who, What & Why Questions, yet very few sites actually address those questions immediately, directly and simply. They fluff around, mention ‘mission statements’ and use the word “we” a lot. And lose potential customers.

Does your website make this kind of mistake? Go and check it now … I’ll wait here

 

In my 16 years of web experience I’ve seen many, many website and very, very few do this right. Now the structure of a good homepage – and how to write one – would take too long to mention here but do make sure yours addresses those Who, What & Why questions.

Your customers will love you for it. Well, they will like you enough to stick around on your site longer, at least.

OK, here’s another question for you: What is the primary purpose of your website?

If you can’t answer that, how is a potential customer going to know? If you just want to have a ‘web presence’ (or brochureware site, as they’re known in the web design industry) because everyone else is on the web, that’s fine. But like those brochures that sit ignored on your receptionist’s desk, don’t expect your website to be viewed much either.

People have short attention spans and those are even shorter when on the web, so your website must be laser-beam focused on what you want to achieve with those potential customers. If the primary purpose of your website is to get potential customers to pick up the phone and give you a call, tell them to do it and give your phone number right there.

I am astounded by the number of sites which make it hard to find their contact details. Sure, this is often on the “Contact Us” page (and you’d better have one of these) but your phone number should really be on every page, in the header or in the footer, or both.

You could do worse than keeping the mantra “Don’t make my customers think” in your head when reviewing or creating your own site.

How easy is it to find your phone number on your website? Go and check it now … actually, finish reading this, then go and check.

As I mentioned in my previous post on How To Attract Local Customers via Google for Free, Google now shows local business listings for searches including a location. In that post I used the example search phrase “plumber auckland”. Google reports that there were over 6,000 searches per month in New Zealand for keywords related to “plumber” and almost 700 of those were people looking for plumber specifically in Auckland.

The numbers vary from industry to industry but does your website specifically target any of those groups of searching people relevant to you? If not, you should be. These are people who are searching the web for the answers and help you can give them.

What are you and your website doing to effectively capture a portion of those potential customers?

Have you thought about actively advertising with Google to capture those people and bring them to your website to sell your services to them? The Yellow Pages and traditional advertising is dying a slow death, by the way.

So if you know What the primary purpose of your website is, and everything on your site is geared towards achieving that goal and is customer friendly and focused, then  you’re already well ahead of the pack and ready for business in the 21st century.

P.S. If you’ve been thinking it’s time to update your website but aren’t sure where to start, here my blatant sales pitch: Take a look at my Website Warrant Of Fitness. It checks over 110 points on your website and gives you a full report on what issues need to be addressed.

It will save you time and money. Just recently an accountant had me check her ‘brand new’ website and I gave her my comments on what was required to bring it in line with what customers really want. The cost her web designer gave for ‘fixing’ her new site was almost the same as getting it built in the first place. Measure twice – cut once!

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

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.