Are visitors lost on your website?: Designing the Navigation System
Navigation, believe it or not, can play a major part in keeping those all important web users on your site. You should know from your own experience, if you can’t find what you’re looking for or it’s difficult to navigate your way around a site you won’t use it again.
It’s just the same as going to the supermarket and looking for a specific ingredient. You need to find out which aisle it will be in. So you head into the supermarket and start looking at the aisle names high up on the walls to give you an idea of where it will be. When you think you have the right aisle, you start looking at the individual products. You have a quick scan, if it turns out you’re in the wrong place, you look at the signs again and try another aisle until you find the right ingredient you were looking for.
Navigation is all around us, road signs, street names etc. It guides you through making sure you’re in the right place. In many ways you go through the same process when entering a Website, you’re usually trying to find something and you decide which section to browse first from the navigation system or go straight for the search box. So navigation is most definitely an important element to your website. So how do you create a clear, simple, consistent and not too confusing navigation system?
The purpose of navigation
Before you start thinking about the structure of your navigation system, you need to understand what the purpose of it is.
1. Obviously it’s to help us find what we are looking for and to tell us where we are on the site.
2. It also gives us a feeling that we are not lost in the site. Done right, navigation puts ground under our feet.
3. It tells us what the site contains. Navigation reveals content! It tells us how to use the site, instructions if you like.
4. Finally it gives us confidence about the site; navigation can be one of the main factors as to whether we should bail out and to ever come back. Clear, well thought-out navigation is one of the best opportunities a site has to create a good impression.
Where to start?
So the basic elements for your website should include:
Top Panel - Site ID, Sections – ‘You are here’ indicator, Utilities - Subsections
Side Panel - Page Name, Local Navigation (Things at the current level)
Bottom Panel - Small text version – what sections you are in, Your website services – Help, site directory, store locator etc.
Putting this content in a standard place lets us locate them quickly, with minimum effort; standardising their appearance makes it easy to distinguish them from everything else. We all take signs for granted, but without them we would be lost.
Having the navigation elements appear in the same place on every page with a consistent look gives you confirmation you’re still on the same site.
The site ID is like the building name for your website, this should be seen on every page. This is usually seen at the top of the page in the top left hand corner. Web pages are written from left-to-right, so it’s a good idea to put your site ID at the top, where it frames the entire page. The site ID represents the whole site; this means it’s the highest thing in the sections.
The sections are the primary navigation; they are the links to the main sections of your site.
Utilities are the links to your important elements. These either can help users use the site or provide information about your company and Contact Us page. The utilities tabs should be slightly less predominant than the sections. As a rule the persistent navigation can only accommodate four or five utilities. If you try and squeeze more in they tend to get lost in the crowd.
Take me Home
One of the most important navigation tabs is the Home Page. Having the Home Page tab in sight at all times offers reassurance, that no matter where you are in the site you can always go back to the Home Page with a click of a button. Always create a link in either the “Sections” or the “Utilities.”
A Way to Search
Many people prefer to use the search option box, instead of browsing the Sections. It’s essential to have a search option on every page. Keep it simple, don’t try and make it a fancy, people always look for the word search, so simply use that word!
Consider page names as looking at street signs, when you’re confident and know where your going you don’t pay much attention to the street signs but as soon as you’ve lost your bearings you start looking for street signs. This works the same way when on the web. You need to be able to spot the page name effortlessly in order to get your bearings. There are four things to consider:
1. Every page needs a name
2. The name needs to be in the right place, it needs to be visual on the page at all times, not hidden away.
3. Make the name stand out – You want the position, size, colour and typeface to make it clear that it is the heading of the page. Make it the largest text on the page (within reason).
4. The name needs to match what I’ve clicked – The name of the page should match the words I clicked to get there. Or if space is limited and you can’t match the word exactly, it needs to be a close match.
Where are you in the Scheme of things?
It’s important to highlight the current location (where you are on the site). So when you’ve gone into a section, then a sub-section, and then a category from the subsection. You need to make this current location stand out. A way for the current location to stand out is to apply bold text, put a pointer next to it or put in a different colour. This then gives you a clear indication of what your current location is within the website.
Breadcrumbs show you where you are, they are called breadcrumbs because it shows you the path you have taken from the homepage so you can always retrace your steps at any time. It shows you where you are in the scheme of things and how to get there! So if you ever wanted to re-visit a specific page you would know how to get the directions (breadcrumbs). The breadcrumbs appear right at the top above everything. They are like page numbers in a book, they’re out of the way but you know where they are if you want them.
When separating the categories, use the ‘greater than’ character (>). It seems to be the most satisfying and visually suggests forward motion down through the levels. It’s best to use a small font size just to make it clear it’s an accessory. Use the words “You are Here” - it doesn’t hurt to spell it out. Boldface the last item in the list; this will be the current page your users are on. Don’t use the breadcrumbs instead of the page name, you should still have your headings, they are equally as important.
You are here: Home > Women’s Clothes > Women’s Shoes > Heeled Shoes
We all love tabs
Tabs are very good for driving your sections up. Many sites have started using them. There visually nice and easy to look at and easy to open. No matter how computer literate you are, users will automatically know what they are; they are associated with file dividers. They are hard to miss and are distinctive and create an obvious division of sections at a glance.
For tabs to work correctly they have to create a visual illusion that the active tab is in front of the others. To create this illusion the active tab needs to be a different colour and has to connect with the space below it. Add a bit of colour – colour coding is a great to highlight each of the sections.
Yes it does seem at lot to take in, but we probably all take these things for granted when on a website. We automatically expect them to be there, so make sure you include all these elements in your website. People are expecting them to be there, it will throw them off route if they don’t know where they are (using the breadcrumbs) or they’ve looked around the sections can’t find what they are looking for and automatically look for the search function. Little things that you may have missed out may just throw users off track and feel lost if these small but important elements are there. Don’t make people feel lost and not want to return!
Based on Don’t Make Me Think, 2nd edition, Steve Krug, 2006
Re-produced by Steph Williams, National B2B Centre, 2 July 2008