How eye tracking is informing our navigation design

Update, 2nd August 2009: It's worth noting that this article isn't suggesting that in-page navigation is the only navigation worth considering. Design is never that straightforward. We'll continue to test our navigation to ensure that whatever we design works best for users. Here's the article:

I've been preaching the virtues of in-page navigation for a few years now. This is where the most important navigation links sit within the 'content' area of a web page (rather than the 'hockey stick' approach of a top navigation bar plus left navigation bar permanently on display).

My argument was based on what I'd seen in user testing. For instance, in our designs for car websites, we found it was more effective to let users click on a picture of a car than to look at the picture and then hunt for a navigation link in a left-hand menu.

User testing told us that people weren't reading important links in navigation menus. That meant some of their most important questions went unanswered; at worst it meant not being able to complete the task at all.

How did eye tracking help then?

What eye tracking has shown us, is not only do people not read sub-navigation, they don't even look at it.

A few days ago, armed with a large coffee, I went back over 28 eye tracking videos from a recent study and looked back over heat map and plot data from other reports.

The results are striking. It's as though there's a brick wall stopping users shifting attention from the content to the navigation menus.

In fact out of the 28 videos there were only four occasions when users when users' gaze moved into the navigation menu, and only one actually scanned the contents of the menu.

There are exceptions to this type of behaviour: notably when users become experts at navigating around particular sites - which is why design teams (who are experts at using their sites) like navigation bars so much.

What is content based navigation?

The idea of in-page navigation is very straightforward. Rather than erecting navigation furniture around the sides of the page you place each link in the content area of the page where it is most contextually relevant.

The key thing is to think about the scent of information - the cues that draw users along the task they are completing, like Scooby Doo being drawn by the smell of roast chicken.

As long as the navigation draws users along this journey (which you've thoroughly researched) then this works perfectly. Don't assume you know what the user task is or try and include irrelevant tasks (such as sales messages or even cross-selling another content area) as this will throw people off.

To get back to previous pages users navigate using the back button (the most likely option and users feel in control of the behaviour) or via a breadcrumb. The latter is also useful for people who drop into a deep page of the site from a search engine. (But if users need to go backwards, then you probably aren't leading them in the right direction.)

How effective is it?

At cxpartners, we try measure everything we do to prove the return on investment (ROI) of our work. On a recent project we were tasked to increase conversion rates by leading users from a homepage to product pages and then to sign-up forms.

Using eye tracking we benchmarked the existing site with some design concepts. The design concepts had exactly the same content but the layout and design was rationalised into clearer content blocks. We removed left hand navigation. Instead, each content block linked through to further pages. And finally the product messages were rationalised to make them clearer.

Watching the eye tracking live we could already see the difference in how the designs were working. In the original site users were almost randomly scanning around not knowing where to look and what to focus on. In the redesign, users were far more controlled, scanning content blocks more easily.

It was great to see the impact of the redesign in the eye tracking - it also gave the client a huge amount of confidence when explaining the design to his team.

Show us the money

So did it work when it went live? Yes. Clicks into the product pages were up by an additional 40% and clicks onto the calls to action were up by an extra 80%.