Love the web

Usability Uncovered

This series of articles starts with what lies behind the science of website usability and then explores some of the basic principles and techniques that can be applied to website design. Also see What is usability? and Why has usability has become such a big player in contemporary website design?

How can we help users find the information they are looking for? Some basic steps to good web design.

A well designed site does just what you expect it to, allowing you to find and focus on the content.

A badly designed site does the opposite. It takes your attention away from the content by behaving in unexpected ways. This immediately reduces the value of its information regardless of how well it's written or how pretty it looks. The user's confidence is undermined and they are highly likely to go elsewhere.

There are several guiding principles that can be applied to even the most basic websites. Most of it is common sense, but it's surprising how many sites fail to achieve even these simple goals.

Here are some basic principles:

Working with text

• Use language that the customers or target audience understand. In most cases this means plain English.
• Keep copy brief and to the point. People won't read more than a short paragraph when scanning pages online.
• Use bullet points to present lots of information. This doesn't apply if people have drilled down to a specific item to read more about it (e.g. this article).
• Make sure fonts are large and dark enough to read with ease. Remember not everyone's vision is 100%. Light text on a light background is an absolute NO.
• For more info and links see www.writing.co.nz

Site structure

• Before you start building or designing anything, map out a logical information structure (or site tree) and try to keep it simple. There's not always an obvious solution for big sites with lots of diverse content. Bear in mind a site tree that is too broad may present a confusingly large array of options at any one time. Conversely, if it's too deep, users will have to drill down many layers before reaching their goal.
• Use clear navigation labels so users have a reasonable idea of what can be found in each section. Avoid jargon and be as descriptive as practical.
• Make links look like links. There are two main methods for this:
  1. By context - i.e. navigation lists which are obviously presented to be links.
  2. By colour or style - Choose a link colour and stick to it, blue is by far the most clearly identifiable link color. This can be reinforced by an underline which is good for people who may be colour blind.
     • Blue and underlined with a different hover effect is the best.
     • Blue with an underline on hover is good.
     • Other colours are ok but should be used consistently and don't use your link color for any other text or headers (unless they happen to be linked themselves) www.righthouse.co.nz.
• Make sure the main navigation headers reflect the key words that users will be looking for.
• Don't be afraid to use secondary (often called utility) navigation for important but non core items. This allows for focus on the primary navigation while still providing top level access to things like; About us, Contacts, Support, Help etc.
• There is no fixed rule about how many main navigation items to have, but less is better - say up to about six or seven and be careful about using fly-open menus as some people find them very difficult to use. See www.elections.org.nz for an example of fly-open menus.
• If you have sub-navigation, try to ensure it's visually linked to the section you're in. For example, on this page www.nzhistory.net.nz/politics/treaty/the-treaty-in-brief it's not particularly obvious where we are in the site structure.
• Show your navigation consistently on every page unless you have a very good reason not to. Highlighting the current section or page in the navigation is a very good idea because it's easy to see at a glace where you are.
• Page headers and the navigation links to them should match. For example Contact us in the navigation should take us to a page called Contact us and not one called Get in touch. Consistency is important; it makes users feel at ease.
• Always provide a Home link. Also link the logo (usually placed top left) back to the homepage. This home link logo has become a pseudo web standard which many users expect.

Page design basics

• Always highlight the active navigation item. This allows users to quickly see where they are. Far too many sites don't do this and users become easily disorientated. People are more likely to explore and find what they're looking for, if they can see where they are in the site structure.
  1. A good example: www.kiwibank.co.nz/personal-banking/savings-and-investments/kiwisaver/
  2. A bad example: www.immigration.govt.nz/migrant/general/generalinformation/informationmatching.htm

User testing

Most of all put yourself in the shoes of someone new to your site. This person won't know the things you know so try to imagine what they will be thinking and doing. This kind of objectivity is often difficult to achieve if you've been working on the project for a while, so get some friends, family or colleagues in and watch them use your site - you'll be surprised what you'll learn.