Navigation is of utmost importance to your site: visitors expect to achieve their goals in very few clicks, whether those goals relate to contact information, products, or services. If that information isn’t reachable in a short space of time, you are not only wasting your own time, but that of your visitors!
I highlighted examples of well-thought-out navigation in a previous post, illustrated by a handful of sites that were a mix of e-commerce and blogs.
Since then, we have seen a number of new trends in site navigation. We look at three of the most interesting.
Megamenus
Example: www.festoolusa.com
You might not be initially blown away by this DIY site, and the top-level menu links look like those on a lot of other sites. But clicking ‘Products’ doesn’t simply take you to a new section: it presents you with what’s been christened a ‘megamenu’ – a list of all the products offered by the company.
Providing a one-click route straight to products increases the chances of converting that visitor into a customer. The expanding and collapsing nature of the panel also solves the problem of home page real estate – all content levels are brought up but can be easily hidden without perplexing the user.
However, this feature further underscores the bothersome aspect of fly-out menus, which disappear if the mouse moves out of the clickable area.
Clickless navigation
Example: www.dontclick.it
This site from the Institute for Interactive Research showcases a new approach to navigation design. It also attempts to immediately change your habit of clicking active elements such as links. Moving your mouse over an element immediately calls new content into centre stage.
Despite the ‘wow’ factor, there is a certain lack of clarity in what is actually linked. When you eventually find something that brings up new content, that element and its “siblings” have a tendency to go flying off in all directions.
It does make life simpler in a way, but the W3C don’t recommend banishing the click and I agree with them: if it ain’t broke, don’t fix it. People know how to click with the mouse – it is ingrained in their online behaviour – and this won’t be changing any time soon.
Visual / Spatial Navigation
Example: www.whitevoid.com/portfolio.html
Imagine doing away with horizontal and vertical bars altogether and presenting your site as a 3d environment made up of departments and products. This site feels like a virtual shop, stepping through departments of products and services. It reminds me a bit of the systems used in Minority Report. I can see customers really relating to this.
A particularly neat feature is that, although you might be deep within a section, you can still navigate to back to a higher level as those items remain in the background of the visual space. You can also view the interface in full screen, so that the (limited) text is more readable.
Again, there is a ‘cool’ factor at play here, but this time the visual appeal isn’t undermined by a glaring accessibility issue.
Unfortunately, this could only be implemented in Flash, although the latest developments in CSS3, jQuery and HTML5 could provide developers with the tools to create something similar.
So what do these trends mean to you?
As ever, function should win over fashion. The latter two examples above demand a shift in the way a user interacts with a site, so they need to be particularly well-implemented to be worthwhile. The megamenu, however, is rapidly gaining popularity and can be found on the sites of many businesses.
We can expect to see a lot of experimental features appear all over the web, but their long-term usability and accessibility is always worth discussion. Watch this space!
