Home > Usability > Layout and Navigationprinter version

Usability - Layout and Navigation

By sticking to established conventions with layout and navigation you make it easier for your site visitors to find and digest the information on your site - and this will help to make your site more successful.

Layout

People feel most comfortable in familiar surroundings and this holds true for website visitors. If your website follows common layout conventions then a visitor will feel comfortable and find things where they expect to find them. This helps to build trust, avoids confusion and allows the visitor to find what they want quickly.

The most common conventions are for a site logo with a tag line below it at the top left of the page and a site search box near the top right. Below this the site navigation and page content, with either horizontal navigation and content below it or vertical navigation with the content to the right of it.
Typical web page layouts

The choice of which to adopt depends on how many pages the site will have. If the site is large, or may become large, then vertical navigation can be easily extended. With horizontal navigation this is more difficult since it may cause the page to be wider than the browser and trigger the dreaded horizontal scroll bar which site visitors hate.

Links on Navigation Menus

When labelling navigation links try to use language that means something to the user as opposed to language that means something to you.

For example a navigation link to a page about a product that allows website owners to edit the site themselves (usually called content management) could be labelled as "Content Management". But this is a term used by web designers and it might be better to label the link "Websites You Can Update".

Don't use marketing language or made up words that forces users to work out the meaning of a link.

For example a link to a page about how to build a house that says "Dream, Plan & Realise" may sound catchy but doesn't say it as well as "Plan Your Home".

If users don't understand the language they won't click through. Or if they click through to a page that doesn't display what they expect they may feel they have wasted time and exit the site.

Links within Pages

Try to briefly state what a link leads to within the link text and avoid repeating the same word or phrase at the beginning of each link.

For example "Mycompany products", "Mycompany special offers", "Mycompany services" etc. Users tend to only scan the first few words of links so these tend to appear the same.
Try to avoid using "Click Here" or "More..." as link text. They don't tell the user anything and those using audio page readers will find them frustrating.
If possible try to make it obvious that links actually are links by having them underlined (except on a navigation menu where the context is obvious). It's also best to have visited links change to a different colour from unvisited links.
The best colours for links are the default colours (blue - unvisited and purple - visited) since these are the ones that users are most accustomed to - although this isn't always possible if background colours don't provide sufficient contrast.
If you provide a link to a document download (such as pdf), as opposed to a link to another page, then warn the user of that fact and tell them the file size of the document. Document download may be unfamiliar to the user and if the file is large may take some time for the download to complete.
Don't provide an active link to the page the user is viewing. If users click on a link that reloads the page they are already viewing they will lose patience.
Avoid using obscure icons as links for navigation. They may mean something to you but probably won't to users and if they have to guess the meaning they may not bother to click them.

Site Search

If you have a large site then a search facility is desirable since many users rely on this for navigation.
Studies show that users prefer simple searches as compared to ones with complicated search controls. They also prefer that the search box is available on all pages as opposed to a link that clicks through to a dedicated search page.
The best position for a site search box is the top right of the page but below where any banner might be located - it's where most users expect to see it.
Try to make the search box wide enough to allow users to view their query without scrolling - not less than 25 characters wide.
Avoid using buzzwords on the search button - "Search" or "Go" are more recognisable.
Don't place a "search the web" search box on your site - it will take users away from your site and why should you advertise for someone else (unless you're being paid for it).

Breadcrumb Links

These are useful on a large site since they display a hierarchical path that can assist users in orienting themselves within a site as well providing a means to move between different levels of the site.

Previous - Basics Next - Page Content Style