Path // www.yourhtmlsource.comAccessibility → WEBSITE NAVIGATION

Website Navigation


There‘s an art to effectively guiding your readers around your site, so that they know how much content is available, and where to find things when they want them. The easiest way to make a site easy to navigate is simply to not surprise the reader: put things where you would expect them to be positioned. This tutorial will review the best practices that have resulted from years of practice.

Clock This page was last updated on 2012-08-21



Navigation and its importance

The importance of your navigation structure cannot be over-emphasised. Without some sort of navigation, a site loses all sense of structure and organisation. There are many ways of presenting your navigation: in a bar down one side of the screen, along the top and bottom, or in a frame that stays with you throughout your visit to a site. It is important to allow access to the rest of your site from anywhere. Ideally, you should be able to go to any page in a maximum of two or three clicks, with your main pages accessible in one.

A navigation bar can give readers immediate knowledge of the depth of your site. Just glancing over your navigation links should give them an idea of what's on offer and what's here that they definitely want to see. Having a fully-featured navigation bar assures the reader that there's lots to see and do, and encourages them to explore a little bit.

Navigation Layers

A website’s navigation scheme will usually be achieved through many layers of links between pages.

Primary navigation must be clear, structured and intuitive. This means breaking your site’s subject areas into categories and groups and presenting them in the most logical way possible. Commonly found to the side or at the top of a layout, primary navigation should hold 4–15 links to the main sections of your site. Any more and you’ll overwhelm people. Enclose your navigational links into small groupings of four or five links at a time, with headings so that scanning your navigation bar can be performed faster.

Remember that the majority of your visitors will not land on your homepage — they’ll often arrive on a page deep within your site from a search engine — and therefore must be able to pick up your navigation immediately.

Secondary navigation will usually include commonplace links like contact, about us and copyright information. These sort of things should be left out of your primary navigation, and placed at the bottom of a page, freeing up your main navigation areas for the important stuff.

Links between the pages of your site in the content of the page are the final way to tie your pages together. Whenever you write about something that is discussed elsewhere in your site, you should make the relevant words into a link to the other pages. This makes related content available when it is most relevant, and encourages visitors to read more.

The words that make up the link should be descriptive of the target page — never use links that read “click here.” You can use the title attribute to give a brief summary of the page’s content, which’ll help readers to decide if they want to load the page up.

Required Navigational Elements

There are navigational elements that just have to be present if your site is going to be easy to get around. Here’s the stuff that every page should have:

First and foremost is a link back to your homepage. This is the most essential link on any page. If you've done it right, your homepage should be a central hub that connects to all the other parts of your site. The homepage link is an escape route. If someone has gone deep into your site, away from what they were looking for, they can return to the homepage and look again; or if they found what they wanted, to find something different.

If you're using a graphic or logo as your homepage link, the established place to put it is in the top-left of your layout. Users now expect graphics in this position to behave a certain way.

A ‘breadcrumb trail’ is a row of links that show how your site is structured. I place it at the top of the page, which is probably where it is most useful, although it could also be used at the bottom as well. This is another way to prevent people feeling lost in your site. If they take a wrong turn, they know they can go back up the site hierarchy to any of the higher-level sections. If they hit upon a page that they find relevant and want more content along similar lines they can get into the correct section. This means that each page will make more sense in the context of the site as a whole. This is especially helpful when someone arrives on a page deep in your site from a search engine and has no idea where they are in relation to the rest of the site.

Page jumps (links to sections of a single page) are necessary on all long pages. Certain parts of your readership may not scroll very far down a page. In these cases only the very tops of your pages are being read. A group of page jumps at the start of a document can act as a miniature table of contents, allowing readers to quickly get to the sections they’re most interested in.

A Full Index or Site Map is essential on even a modestly-sized site. Make sure there is a link to this on all pages, and that it's as prominent as your homepage links. Not only do indexes offer a gateway to every other page of your site, but they also impress your reader with the depth of content available and will encourage them to stick around and see the sights.

A search facility is also very helpful. It is a feature of your site that guarantees your readers results, whereas clicking through a load of pages might not find them what they were looking for. Google offer an excellent site search that you can customise to a degree to look like your site.. If you have a lot of pages it might be worth activating the advanced search feature too.

If you have the patience, tweak your search until you are confident the most relevant results are popping up at the top. A search is useless if it doesn't work efficiently. Use <meta> tags and some of the options integrated into your search engine to improve its accuracy. Keep records of what your readers want.

Familiarity

Most often, it's the sites that have a new, different interface and navigation structure that users find hardest to find their way around. This is why you should base your design around accepted layout and navigational standards. This is not to say you can't be original — originality in the right places is a great thing — but the fact is, the most popular sites are the ones that don't ask the user to figure out how they work. No one cares how your site works. They just want to read what you're offering them.

You still have plenty of freedom to personalise your navigation structure through use of colour, icons and text-formatting, but keeping to a basic underlying framework will ensure your site is simple to navigate no matter how you dress it up. Your goal should always be to create a navigation structure that is intuitive, that a user can get to grips with without thinking. This can be accomplished by sticking by some well thought-of design paradigms.

On his » Alertbox usability column, Jakob Nielson made the astute observation that “Users spend most of their time on other sites.” So when they arrive on yours, it would help them if it worked the same as the sites they know and love.

Familiarity is the key word here. If the site has a familiar feel to it, the users can be more sure of what they are doing. They feel safe clicking on links, knowing that something unexpected won't happen.They get the feeling of control.

The following are some simple guidelines which, when followed, should ensure your site does not deviate too much from a user’s expectations.

Use common structures

When readers see a column of links down one side of the screen they know exactly what it's there for. The side navigation bar is utilised by millions of websites, and it's a good model. The jury's out on whether navigation performs better on the right or left of the screen — personally I think it's more logical to follow the content with navigation on the right, next to the scrollbar, but that's a preference more than anything.

The side navigation bar isn't the only common navigation structure. You can use a row of links along the top, the oft-imitated folder-tab metaphor from » Amazon, or any combination of the common systems in use across the web. If multiple successful sites use it, you can feel pretty safe if you decide to design your own site around it.

As your site and content evolve you may want to adapt your navigation to the changing needs of your work. The more content you have, the greater the need for clear and fast navigation. Consider a redesign from time to time to keep everything flowing well.

Don’t mess with defaults

You will often find websites making things like links very hard to spot in the pursuit of ‘style.’ The most usable configuration for things like links is to leave them as your reader’s default settings (usually blue for links and purple for visited links). Making unnecessary changes like removing underlines only serves to confuse people. Design simple styling schemes, and use default behaviours such as all web browsers’ ability to change a link’s appearance if it has been visited. Features like that are there for a reason.

Similarly, don't underline text that isn't a link. You'll just confuse people. If you need to emphasise some text, use bold, italics or colour.

Keep the design continuous

A well-accepted idea is to keep one design the whole way through your site, and do not sway from it. You may think this would lead to a more boring, monotonous site; but in practical use this is a very simple way to keep everything easy to use, because everything is consistent. When a user moves to a new page they shouldn't have to immediately figure out a new way of moving around. Plus, it reassures them that they have not moved away from what they were reading without their knowledge.

Negative aspects of Navigation

It is when designers go overboard on navigation that a problem arises. Too many links overwhelm readers and they then skip over most of them in an effort not to waste time reading a lot of irrelevant stuff. There is no need to link to every other page on your site from any one page (with the exception of an index). This approach will hinder a reader more than aid them.

If you aim to give a group of links at the end of a page, don't pick random or (un)popular links. Pick ones which are relevant or topically related to the information that is being read at that moment. Readers are much more likely to be interested in them and therefore click on.