Quality Navigation
“If it’s hard to find…
… it might as well not be there”
Last month I wrote about how Human-Computer Interaction (HCI) (Read the article here) and how creating an inspired design can improve the overall usability of your website. Today I’m going to be writing about the other half of HCI – designing and developing a website with quality navigation. Now while this sounds like a boring and dry subject, website navigation defines how Users interact with your website – it is the roadmap that allows Users to drive around your website and go exactly where they want to go. With the internet age where it is today, Users expect information to be available at their fingertips when they need it.
And with navigation in particularly – not only will you improve the User Experience of your website – inherently you will end up designing your sites using a more structured, logical, and thought out process.
This is because the first step to developing a solid Navigation scheme should actually be taken while planning your website i.e. developing a Sitemap or a User Experience flow chart – I have too often seen site developers begin looking at Navigation during the later stages of development, only to create convoluted and confusing sites. Sitemap’s can be drawn up either on any flowcharting program (my personal choice is Microsoft Visio) or even using pencil and paper (which is how my site maps usually begin) and is where the entire structure of the website is defined. Starting from the Home Page connect it with a line to every page that a User can directly access from this page. Repeat this process for every single page that you expect to have in the final website. The end result will be a flow chart where each node is a web page, and each line connecting these nodes is a path that allowing a User to navigate from one page to the next. Neither technical nor involving too much effort – the small amount of time you spend developing a Sitemap before your site is developed will translate into time saved later in the development and delivery process, and will probably decrease it overall.
Next you want to analyze the sitemap for your website, and ensure that your design is the most efficient way of moving people around the page. Two Particular points that can now be observed are:
• Navigation Types: By looking at the amount of links that you have, you can now make a well informed decision with regards to the type of navigation you will use throughout your site (i.e. a Hierarchical Navigation Scheme arranged as a tree and divided into drop down menus with sub categories are great for websites with lots of pages, for a website with less pages it might be more User friendly to use a Global Navigation Scheme i.e. have a main navigation bar for all major sections and then internal (subsidiary and secondary) navigation for internal sections, etc.
• The Three Click Rule: With hundreds of TV channels and billions of websites, the attention span of Users is in seconds. Make sure your Users can get from any one page to another within three clicks – four is just too much.
This sitemap can now be handed to your designers or developers, to be used as part of their Functional Specifications to help define what the finished product should look like and how it should operate.
One last thing that should not be forgotten while discussing Quality Navigation – at every step of the way your Users should be able to answer two questions instantaneously:
-
Where am I Now? This question is solved through Location Indicators. Though there are many types, my personal favorite and commonly used are “Cookie Crumbs” i.e. Home > Books > Fiction > …
-
How do I get somewhere else? This question is to be answered by the type of navigation controls you have on the pages of your site. Navigational controls on page can be broadly categorized into three types:
a. Main Navigation: Appears on All Pages in the same style and location
b. Subsidiary Navigation: Navigation specific to a section of a page
c. Secondary Navigation: Special pages / features devoted to navigation i.e. site map page, search boxes, drop down list of all pages, etc.
At the end of the day, don’t get confused or turned off by the terminology. These are just names given to concepts that as web browsers we all know well and understand – what’s important is the application of these concepts during the actual development of your website. Give yourself or your client better expectations of what they can expect, make the lives of your developers easier, and give your Users an experience so that they never have to stop and ask for directions.
This article was originally published in the January 08 issue of ICT Business Magazine