Navigation Guidelines

The most common form of getting from one place to another on a website is the navigation bar. It’s not the only way though, you could have a search box, breadcrumbs, tag clouds, site map and so on. But whichever system you decide to use, there are a few ground rules for each that you need to consider.

The Navigation Bar

This navigation bar normally describes the links to the primary areas of the website. Ideally it should use simple text anchors that fully describe the target page.

The first link in your navigation bar should be to your home page and the last one to your contact page. In between should be no more than 4 or 5 links. Each one of these needs to be clearly labeled with a description of the target page:¬† ‘Gardening Equipment’ for example rather than just ‘Equipment’. There are two reasons for this:

1. It provides more information to the visitor (who may be new to the site).

2. The search engines can link the anchor text to the target page.

Ambiguous or confusing links can put potential customers off – so make your link text as clear as possible. Unlike this site:

Screen Shot 2015-10-30 at 17.59.03

Move your links to the ‘about us’ page, privacy policy, legal and so on down to the footer. They may be very interesting but since they are secondary to the¬†primary aim of the site (to sell something or provide information) move them out of the way.

Be Responsive

More people use tablets and phones to browse the internet than use desktops. So you must make sure your navigation system works on all devices and all orientations. There are all sorts of ways you can do this – the method you can see on this site is just one of them.

Advice on responsive navigation systems

Location

Because of the popularity of mobile and small screen devices the old ideas about locating navigation systems on the left or right have fallen by the wayside. Put your navigation bar at the top of the screen – it’s simple and effective and works on all devices. And you can use a sticky header like I do if you want.

You will find your own system but do not make it too radical – Internet users don’t like surprises.

Dropdowns

Complex websites sometimes make use of dropdown menus to provide further options from the navigation bar. Whilst this makes the job of the webmaster easier, it doesn’t always help the visitor. Unless they are aware of the dropdown they won’t know to ‘hover’ over the link to see the options. And if the visitor is using a mobile phone or touchscreen then it is likely that the drop down won’t work. Some dropdowns do work though. The ‘mega menu’ used by sites such as John Lewis are very easy to use:

Navigation mega menu

In general though, if you can build a navigation system without dropdowns so much the better – especially if most of your visitors are using a touch screen.

Site Search

This is often considered the most usable method of finding information within a site providing that it is used properly – the visitor does not have to worry about which link to activate – all they need do is enter a search word and press GO or SEARCH. This is how search engines like www.google.com or www.ask.com work. The downside is that it can take time to set up, will often need to advertise the site search provider and may not display the results in a manner that matches the site style.

Consider the position of the search box as well. People often put it way up at the top on the right. This is in the dead zone. Put the search box where people are looking. This means in the main content just above (or below) your blurb.

Remember: Some users choose a search facility before using any other navigation feature, other users will use a search facility as a last resort – so make sure you do not use the search facility as your only form of navigation.

Breadcrumbs

On some sites you will a ‘breadcrumb trail’ near the top of the page that usually looks a bit like this:

Home > Products > Computers > Peripherals

There are two types of breadcrumb. The first tells the visitor where they are in the site. The second is more dynamic and shows the path the visitor has taken to get to that page. If you want to add them to your site that’s fine but when was the last time you used one to navigate around a site?

Tag Clouds

Now very popular with social networking and information site, a tag cloud is just that: a cloud of links the size of which indicates the popularity of that link. A useful indicator of what other people are looking at, tag clouds only really work if you have a lot of articles and posts to tag. They won’t help your navigation if you have a small site dedicated to cream cheese.

Inline Links

These are the links you place within the main content of the page. There is no law that says links have to be blue and underlined but there is increasing evidence that sticking to the convention will increase your Click Through Rate (CTR).

Make sure you provide plenty of textual links within the page content to allow the visitor to cross reference information. Note however that too many links within text can slow down reading flow.

Ensure as well that your inline links are sufficiently different from the rest of the page – nothing worse than trying to click on a link that isn’t.

You should also differentiate between internal links (links within the web site) and external links (links to other web sites). If you are linking within the web site, simply add the link to the appropriate text. If you are linking to an external web site, try to include the full web site address (e.g. www.website.com) in the text so users know they are going to a different web site before they click on the link.

Resources:

Making your Links Work: www.seoresearchlabs.com

Link Colours: www.marketingexperimentsblog.com

The Footer

This is where you need to bung all those ‘corporate’ links. The about us, privacy policy, legal etc. These are the links you may need but are secondary to the main purpose of the site. It is worth repeating the primary navigation links here as well – visitors do occasionally get to the bottom of a page and it is nice to give them something to do when they get there.

Coding

The most effective navigation systems use simple text links. Add a bit of CSS to make them look pretty but underneath all they are is a bunch of text links. Almost nothing can go wrong, they will work with every operating system/browser combination and they are easy to maintain.

If you want to open external links in a new window then it can be useful to include a note on the page to that effect, ie: ‘external links open in a new window’.

But if you really want a JavaScript or Flash driven navigation system then remember that not all browsers support these options, some users turn it off and they make it difficult for the robots to index your site. And the increasing use of mobile computing (tablets and mobile phones) means that you may be limited to the text-only option.

There are also accessibility issues; screen readers for example cannot process JavaScript or flash. But if you still think it is worth the hassle then don’t let me stop you.

And Finally

Keep your navigation system the same across the whole site and make sure it works on all devices and all screen sizes. Do not change colours or styles or heaven forbid the location of the links. Users will soon get fed up and leave.

Make sure the HOME and CONTACT links are on every page – it can be very frustrating to a visitor to read something interesting and have to go hunting for the email link.

Are you struggling with ranking, attracting visitors, generating leads or getting sales?

Or are you just stuck not knowing what to do next?

Call me on: 01252 643927 or 07921 859802 or Send me an email.

Or fill in this form which will appear as if by magic

Web Statistics