Website standards and usability

I am so glad that you are taking the time to read this article. People, especially programmers and webmasters, often underestimate the importance of standards and usability. But, by implementing good standards and usability techniques, you can increase your sales by orders of magnitude.

How many times have you visited a website, not been able to work out where to find the information you were after, then just given up and tried another website. It happens to me all the time and it's possibly the number one reason for failed sales on the internet. Research shows that you have less than five seconds to convince your visitor that they have found the page that they are looking for before they go back to the search engine and try another site. Your visitor has got to work out your navigation method in less than five seconds and they have to work out your page layout in less than five seconds. All the fancy javscript, flash, intro pages, etc are just reducing the amount of time that you have to influence your visitors and hopefully get a sale.

I'm sure that, just like me, you visit these almost unusable websites every day, and it's embarrassing to watch. Sometimes, you'll be using a website that you know has the information you are after because you've seen it before, but you just can't find it this time. I want to show you how to stop your own website falling into this trap. You want to know how to give your visitors exactly what they want and in the shortest time possible. You want your visitors to be able to recommend your website to their friends and to return to your website automatically. Standards and usability are the key.

Standards and usability are very closely related but they are not identical. Usability isn't just about having a standards compliant website and implementing industry standards doesn't just improve your usability. But they certainly have a strong impact on each other.

Designing Web Usability* by Jakob Neilsen is an absolutely fantastic book on web usability and a real eye opener for how your website may be turning away potential customers. Jakob Neilsen has been in the usability industry for decades and knows his stuff, his book espouses all the things I've been trying to convince people for years and many more concepts too. I think he explains a lot of it more thoroughly and more convincingly than I do too. He uses screen shots of good and bad websites to explain his points in a way that makes you say "Oh yes, of course".

Navigation

This has to be the most important area of usability. If a visitor arrives at your site on a page that doesn't quite give them exactly what they are after, or they arrive at your generic homepage, then it must be obvious to them how they can navigate to where they want to go.

Only use one navigation method. I am frequently asked to give feedback on websites and one of the biggest problems is an inconsistent navigation method. Maybe they will have a list of major navigation links across the top or down the left hand side, but then they will have another set of navigation links somewhere else on the page to navigate to other parts of the website.

Your visitors will naturally look for a navigation menu and once they have found it, they will usually stop looking for other navigation methods. Visitors will look at the top of the page and on the left hand side of the page for the navigation menu, so these are the two obvious places to have it. Some websites have the navigation on the right hand side, which is OK, but it is reducing those five seconds while your visitors are trying to parse, or understand, your navigation method.

If, on top of this, you have other links elsewhere, they are likely to be missed altogether and your visitor will go elsewhere if they were looking for something in your secondary menu.

Some websites have a navigation menu across the top and another down the side. But which is the main one? People need to know which is the main menu an anchor it in their mind. It's OK to have your main menu across the top and a submenu down the side providing it is completely obvious which is the main menu and which is providing the direct links to particular pages. In general, avoid it if you can. The only time I have done it was to have my main menu across the top, and some direct links to my shop categories down the left hand side to make sure visitors elsewhere on my site where aware of the shop, which was the main revenue earner. It's not perfect, but I felt the ends justified the means in this case.

Having said all that, what is acceptable is to have a set of non-navigational links at the bottom of your page. Websites normally have a link to their copyright statement on the bottom of the page or a link to their external links page. Nobody really looks at external links pages so nobody will be interested in seeing it in your main navigation menu. Maybe a testimonials page could be linked to from the bottom because if anybody is really interested in testimonials, they'll have already read everything else on your page and so will see it at the bottom anyway. As an aside, you may be better having your testimonials spread around your website instead of on a page on their own.

Put "Contact Us" at the end of your main navigation menu. I frequently see the "Contact Us" link in the secondary menu and this is just not good enough. Your "Contact Us" should be in your main navigation menu because you want to be able to make sure your customers know that they can contact you at any time. Sometimes, a visitor may really like your site but just not be able to find what they are after so they will try to contact you to help them find it. They will look for the last link in your main navigation menu to contact you so don't put it anywhere else.

Put "Home" at the start of the main navigation menu. Your "Home" link is your "main menu". If people feel that they are getting lost on your site, they may want to start again, and you do this by going back to the homepage, which they will look for at the start of your main navigation menu. So put it there.

Put your main navigation menu on every page. Consistency is the mother of usability. Make sure that you use an identical navigation menu on every single page in your website. Don't have a different one on the homepage or any other page. People will get used to your navigation method (even if it is really crap) providing it is identical on every page. Don't just provide them with the links that you think they will want from that page, you will be wrong, so provide them with all the options.

Link your logo to your home page. If you have your logo on every page, link it to your home page. People expect to be able to click on your logo and it will take them to your homepage. Never link it to any other page. At worst, don't link it, but never link it to something other than your homepage. It's expected and it takes no effort, so just do it.

Page Layout

Page layout is something that will vary on every website and you have a lot of free reign, but you should also be aware of how your visitors look for things and what will distract them and annoy them. The Designing Web Usability* book covers this topic very well with some screen shots of some good and bad websites to show exactly what he means.

Keep your main content in the middle of the page and above the fold. People expect to see what they were after in the middle of the page. It's ok for it to extend all the way to the right or all the way to the left, providing it can be found in the middle of the page. Don't have a load of adverts or links in the middle and the content over to one side. Also, don't take up too much room with adverts or links. Your content should be at least 50% of the area of your page. A lot of websites are full of adverts with a little tiny bit in the middle of the page for what the user was actually looking for. Whilst it make generate a few more clicks on adverts, it increases the chances of your visitors going to a competitor if their usability is better. In short, adverts and other peripheral activity reduces the general perceived usability of your site and should be minimised. Find a good equilibrium that doesn't make your website look like it's "full of ads".

If your navigation menu or adverts take up so much space that the main content has dropped below the fold (the bottom of the screen), it might as well not be their at all. A lot of people will not scroll down unless it is to continue reading some text that they have already found. They are unlikely to scroll down to find something. Remember that different browsers and different computers will have the fold at different places. A safe rule of thumb is to make your main content start at least 200 pixels down the page. This ensures that it should be above the fold on pretty much everybody's computer and also gives it enough space that it should take up at least 50% of the screen and therefore identify itself as the main content immediately. Anybody with a smaller screen will be so used to scrolling down to find what they want that you could stick the main content anywhere and they'd still find it.

Peripheral data below the fold will not be seen. People will scroll down once they have started reading the main content. Once they are reading the main content and scroll down, they will not notice your adverts or links on the left or right hand side of it. They are scrolling down to read the content, not look at your adverts. The users may also scroll down if your main navigation menu goes below the fold but they'll stop scrolling at the bottom of the main navigation. So if you have a standard format of a header across the top, menu down the left hand side and adverts down the right hand side, then the page that your visitors will effectively see will be a T shape. They'll see all of the page above the fold and just the main content, in the middle, below it. I used to place my newsletter subscribe bar underneath the main menu on the left hand side and found that very few people signed up. When I put at the top of the page where I could guarantee everybody would see it, my subscribers increased significantly.

Download Speed

You have only about 5 seconds to convince your visitor to stay. The first page that they see should, therefore, download in less than five seconds. And this means over a dial up connection. Just because you might have broadband, doesn't that all your visitors do yet. You should keep the number of images to a minimum because images dramatically increase your download times. Don't use images where words would suffice and never use an image of text, that's just pointless. For any images that you do use, specify the height and width attributes so that the browser can draw your page before they've been downloaded. Always use the alt attributes too so that even without the image, the user can see what's meant to be there too.

Use standard buttons to submit forms instead of image submits. Using standard buttons improves the download times and also make it more obvious that it is a submit button. Again, this is just keeping everything as the user would expect instead fo trying to be different.

Animations

This is easy. Avoid it. Animations catch the eye and so are distracting and annoying. Don't annoy your visitors.

Other Standards

Underline your links and nothing else. Underlining has a special meaning on the web, it means it is a link. If you underline text to show that it is important, people will try to click on it. It sounds stupid, but they do. If you've used CSS to remove the underline from your links, your visitors will not realise they are links so they won't click on them. It's OK to remove the underline from links in your main navigation menu because it's obvious (or it should be) that these are links, but everything else should use underlined links. Jakob Neilsen is a stickler for this one. It's a web standard so don't drop it.

Do not deviate drastically from the standard colour scheme. The default colour scheme is a white background, black text with blue links that turn red after they've been visited. I'd avoid changing the colour of the background unless it is vital for your company branding, and even then, I'd seriously think twice. It is much easier to read black text on a white background than any other colour scheme. Never, use a dark coloured background and light text, you will definitely lose customers. Many people just hate it and will leave without reading anything.

A lot of websites now use different colours for their links to fit in with their company branding so this isn't so important any more. Jakob Neilsen discusses it in his book but I don't think it's as important as it used to be. You should make sure that whatever colour you use is used elsewhere on your pages so that it fits in nicely and is aesthetically pleasing. I tend to make the links match my company colours so that it all fits in nicely and is fairly obvious to the visitor. Don't make the links the same colour as the standard text, that'll confuse your visitors; is a link or is it just underlined?

Don't make your visited links the same colour as normal links except in the main menu. People can generally remember what they've clicked on in the menu but links in text and elsewhere on the page should change colour when they've been visited and should stand out. It's just nice. Some websites try to stick to their colour scheme but choosing the company's second colour or by choosing a different shade of the same colour. I'd avoid this because it doesn't really stand out. Choosing the second colour may lead to visitors getting the two mixed up and thinking the visited ones are the unvisited links and vice versa. Using two different shades of the same colour usually doesn't stand out enough. You may think that making visited links not match the websites other colours will make your website look bad, but it's quite the opposite, visitors expect it so give them what they want.