By Ronald Ng, Spring Term 2004
Even with the best possible design of any single page, your site will fail to attract visitors if not equipped with a neat, consistent, and intuitive navigational interface. This article addresses what navigational devices are and the main issues designers confront when choosing navigational devices.
4) Are devices good at leading to information?
5) Some Rules of Thumb for Navigational Design
All web users have encountered such devices. However some may not even realise they are even using them. Let’s have a look at some examples of Navigational Devices.
Links in fact are the basis of navigation in a website; they tell you what content it leads to (most of the time) and then takes you there when clicked. If you think about it, most navigational devices are just glorified links.
Some may argue that links are the basis of webpages. The world wide web can be seen as a separate world or dimension full of ‘magic doors’ (links) which transports you from one area to another. Therefore the phrase, ‘navigation is the basis of websites’ may not seem such a over-statement..
Collin’s English Dictionary Definition:-
An instrument which aids the process of plotting a route and directing a
ship, aircraft etc.
Clearly this definition was not produced with websites in mind. However before coming out with an adjusted definition let’s look at some of the characteristics of a navigational device are.
More experienced website users may have noticed that not all of these characteristics apply to every single website navigational device. However most will agree that all navigational devices found within a website at least aim to cover the first two characteristics.
Adjusted Definition of a Navigational Device (in context to Websites):
An instrument within which aids the user in locating content within a website.
In short, no. The reason why there is so much emphasis on navigation in website usability and accessibility issues is that there has been no such device invented which satisfies all navigational criteria. To help to explain this lets compare two common devices; menus and search boxes.
By comparing the two above it is difficult to say which one is ‘better’. It is evident that each device has its pros and cons. Therefore when choosing which navigational device to use, it is logical to choose them depending on the situation.
Choosing the 'right' device can be tricky, however there are some important issues to bear it mind.
Create your website with the Navigation in mind. Every device has its strengths and limitations. Therefore when producing a website why not create it to exploit the chosen navigation device strengths? For example, by creating webpages which can be easily categorised, it would make a menu far more accurate in terms of organisation of content.
You can use more than one device! Don’t think you are stuck with one device for your website, just look at Amazon’s website. How many navigational devices can you spot?
There are four main areas designers have to weigh up when choosing a navigational device.
In commerce, the customer is key; this principle also applies to websites. All decisions made should all stem back to a benefit to the target Users. In relation to navigational devices here are some important questions to aks yourself.
With the design philosophy of ‘form following function’, it is inevitable that the type and amount of content will have a bearing on the choice of navigational devices. Some types of content automatically tend to certain devices. For example online shopping baskets will want a simple hyperlink for the necessary credit card details etc. An online book will be expected to have a contents page of links.
Websites with large amounts of contents would tend to need more sophisticated navigation. Categorization of content is even more important here, otherwise content would be ‘hidden’ from users. Categorization is discussed more in depth later.
With links being the basis of navigational devices, at present there are only so many different types of devices available. However these devices do allow leeway in how they can be tinkered to fit within your criteria. For example:-
Realistically designers will have all kinds of constraints, whether it is time, money or coding skill. With navigation being so fundamental in websites, designers must try to ignore resource limits and to produce the best navigation possible.
On the other hand a surplus of resources may result in over-doing the navigation. The rule is not to add unnecessary features that the users will not appreciate or benefit from.
This question deals with the accuracy of navigational devices. In other words does the device should lead you to the information you expect to be there. Let’s look at some examples of devices which are bad at leading to information.
University of Greenwich Search Engine – If one searches for student union, you will get a set of unexpected results. This is only rectified if the search is made to find the “exact phrase”.
CD-WOW – Here in the indexing of CD album artists is done in alphabetical order. However try looking for an artist; they are listed not by their surname but by their first name. For example Bob Dylan would be under ‘B’ rather than ‘D’. With most record stores storing their CDs by surname, this can be confusing for some users.
You may have noticed that these errors are down to poor implementation of the navigational device. Categorization is important in order that users would be able to find the information they want. If you have ever tried accessing ‘free’ resources such as clip-art, many links just lead onto adverts or other websites rather than the resource that the link promised. This deliberate ‘poor-categorization’ frustrates users and prevents them from visiting the site again.
In regards to search engines, they are not exempt from the need of good categorization. After all they are just scan webpages for the key words you have entered in the search. By providing adequate headers and descriptions to each webpage, search engines will give more accurate results.
Below are some good practices for navigational design:-
The ‘3-Click’ Rule – This states that users should be able to be able to reach any part of a website from any point in a website within 3 clicks.
Rule of ‘5-Choices’ – This states that if there is a choice of links (e.g. in a menu) there should be no more than 5 items. Studies have shown that any more will deteriorate clarity of the which a user can find information.
Look at Similar Websites – What solutions are there at the moment? It is easier to criticise and to improve on an existing design than to come up with a completely new design. People do not like change, and this also applies to users. In fact the reason why ‘Tabs’ are so widespread is because of Amazon’s popularity rather from arising from usability studies. If users are used to navigating in a certain way due to experience on previous websites, think carefully if new navigational tools are used. Will they truly give a much better experience for the user?
Does the Navigation reflect real life scenarios? – Many websites represent a virtual alternative to real objects or processes; for example online papers and online shops. If users can relate the navigation to the real thing, the process of learning how to user the website would be quicker and easier. For example a real fashion store will have different sections for gender, footwear, accessories, brand etc. It is not surprising to find that online fashion stores have similar ‘navigation’. In fact online stores have an advantage over ‘real’ stores as they can offer many additional types of categorization, e.g. by price, special offers.
Test & Improve – The only way to find out whether a navigation system is to test it on real-life users. It is also important to act upon the results of the test and to go through the cycle again and again.
It is hoped that this article has given an idea of what navigation actually
is and shed light on some of the issues a designer should think about when implementing
navigational design. This article does not give a set structure on how to design
navigation for websites but as an aid to start the navigational design thought
process. As there is no ‘right’ way to build a house or to cook
a meal, there is no ‘right’ way to create navigation. What the designer
must try and do is to make the navigation as efficient and effective as possible
for the website’s users.
This article was written to accompany a seminar on 'Navigational Devices'. The Microsoft Powerpoint presentation is available to be downloaded (2.8 Mb)
Allan, S., (2003) Website Planning Lecture: Navigation
Clark, J., (2003) Building Accessible Websites [online] http://www.joeclark.org/book/sashay/serialization/ [Accessed 02/2/04]
Rosenfeld, L., (2002) WEB STYLE GUIDE, 2nd edition [online] http://www.webstyleguide.com/index.html [Accessed 02/2/04]
SiteNavigation.net (2003) Build your website navigation friendly [online] http://www.sitenavigation.net/snguide.html
[Accessed 03/2/04]