Posted 7th May 2013 | By Nick Evans, Chairman

Getting people to the information they need in the shortest possible time is an exercise that combines psychology, user interface design and topology. Bad navigation hinders the user's ability to move smoothly from interest to enquiry to result: a flow that underpins our interactions with much of the web.

So where do we start in order to get to grips with site navigation?

The key elements are:

  • The top level categories - those which end up being the main menu items that are visible in the website's navigation bar
  • The second level categories - subsidiary elements that have a navigation purpose of their own but which are ultimately dependent on the level above
  • The navbar itself - the medium that translates a menu choice into an information page which, itself contains the word or words that form the clue to what lies beneath and the technology that makes the navigation element perform the way it does: rollovers, dropdowns and more

First, we need to understand the top levels - what are the categories of information, product or facility that will populate the site. This will be evident from the original site planning - but what do we call them?

Some are easy and are almost default conventions: Home, About, Contact. Semantically, describing in one or two words the facilities that lie underneath any given element is a challenging exercise. Is what you think "Shop" means, the same as your website visitor will think? Given that it's a moment's decision for a visitor to "bounce" out of your site and on to another, being clear about what is available under the navigation is critical. If "Shop" actually means "Online store where you can purchase our goods" then that's fine. If it means "Our premises at 14a High Street" then you have probably seriously misled the majority of visitors.

Some sites like to use icons to represent the menu choices - great if you are a visual communicator. Awful if you have no sense of the meaning that lies behind your artfully designed images. And then again, you can associate the icon with the words, but isn't that just taking up rather a lot of space in the real estate that is your website interface?

Then there is consideration of the mechanics of the navigation. First of all, where does it sit? Along the top, below the logo banner, down the left side, down the right side? Echoed at the bottom? Much of this decision has to do with the complexity of the top level categories: do they feature long names (for example, Members' Directory) or are there actually many top level elements? In which cases, the navigation needs to be to the side in order to accommodate the space that the elements will take up, particularly if the menu features sub-categories in dropdowns.

Menus across the top take up less real estate in theory, but again, if the sub-categories feature drop-downs then we need to take into account how that will appear when the dropdown occurs: what will it drop over, how will it look, how readable would it be (for example if the dropdown box is semi-transparent).

Or, we abandon the whole metaphor of pointing at words and create icons that form part of the design of the site and are fully integrated yet clear to the user - check out siebennull.com below.

Finally, what technology drives the navigation bar and will it work consistently on all platforms? The wildly extravagant Flash-based animation navigation systems that used to populate many sites have now fallen by the wayside as certain devices do not support Flash. In addition, sites that are responsive need to flex their navigation to move from point and click with a mouse to point and jab with a finger. That change has to be consistent within the design of the site, yet functional for the user.

All of this is not to say that navigation cannot be fun. Here are some great examples - a bit wild for me, but what do I know?

http://tntrailsandbyways.com
http://www.siebennull.com

Or for something really out there:

http://benthebodyguard.com/

Thanks to Smashing Magazine for leading me to these examples! Here's their showcase.

Nick Evans from ExtraMile

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

nick

About Nick | Meet our Chairman

Shirty Chairman