Eyetracking a Navigation Bar -- how many elements are read? Well, it depends...

Note: This page is now redirected to a related article since Jared Spool targeted the original article, which was intended to focus on a very basic point, as a show-case for "why eyetracking is useless"... which seems a bit unfair in our view. So, we hope you enjoy the redirected article which better addresses the value of eyetracking and what Eyetools can offer (which is a lot...). (redirected to: http://blog.eyetools.net/eyetools_research/2005/02/how_eyetracking.html )

Update: A couple people recently misinterpreted this entry (Hi, Jared!). The ONLY point made below is that making a change to a webpage can have a huge effect on how people look at unchanged areas of the page (and, we can track that)... don't go reading all sorts of stuff into this blog entry beyond that -- remember that part of the goal of this blog was personal -- I wanted a vehicle to get to share interesting findings (interesting to me :-)... and I thought, at the time, that it was interesting that something could be looked at completely differently when nothing about it had actually changed other than the images next to it.

And just incase you're wondering whether eyetracking is valuable (especially since people who are against eyetracking seem to like to pick on this entry), I stand by the claim that eyetracking can have a huge impact on user interaction and revenue (one example, with pictures) from websites, and that it is complementary to other usability techniques in that it adds additional information to understanding users.

Changing one part of a webpage can affect viewing of other unrelated parts of the page (obvious, yes, but interesting to quantify the effect). This Eyetools before / after test showed that a right-hand navigation bar received significantly increased viewing (and usage) despite the fact that it did not change at all.
This post was originally posted here, but upon seeing this analysis, I wanted to take a second try at it, which you are now reading.

The Navigation Bar	Old Page Design	New Page Design
	·
Eyetools Heatmaps™ showing group viewing trends on each web page (Eyetools Heatmap Legend)

The San Francisco Police Department redesigned their homepage (see eyetracking heatmaps below for each site). Overall, the new homepage increased reading and time-on-page, while promoting more of the department's numerous services, both in terms of what people clicked on as well as the number of elements viewed and read.

The surprising thing was the effect the redesign had on their right Nav (which didn't get changed at all).

The behavior on these two identical navs on two different pages was strikingly (and statistically significantly) different: the nav on the new page was clicked by 64% of our test participants as opposed to only 14% on the old website. People looked at the new site's right nav longer, more often, and read more — despite there being no change to the design of the right navigation bar at all.

The moral of the story: A change on one part of the page can impact other, unrelated elements on the page. The right navigation bar was used completely differently on the new re-designed website because the content to the left of it changed.

Is this good or bad? Ultimately, that's up to the client to decide as it relates to the business goals of the page.

Comments

[Aaron Cooper]

As a designer, I contemplated the reasons behind the eyetracking shift. Here are some thoughts:

- The old design was weighted more heavily on the left side in question. This visual weight (including that thick blue box) grabbed my attention more readily, distracting me from the navigation.

- The old design had an image containing a face well above the fold. I propose that this photo would tend to draw attention (we're human after all, and constantly use facial recognition).

- The new design offered little of value (that I could tell) well above the fold (some might say it didn't offer much "scent"). As such, my eye drifted to the top, then right to get a sense of content.

Is it safe to assume that users will default to navigation if the page content doesn't satisfy their need for relevant content? Also, does right side navigation present a problem?

Thanks for the interesting observation.

[Greg]

Hi Aaron,

Thanks for your comment, it's great to hear other people's thoughts on this.

I agree that in the new design there wasn't as much informative information in the center, which causes people to look around more. It's interesting to see when scarcity of information causes problems, as well as when too much clutter does.

The effect of design is very strong on what is seen or not seen, and so designers have a lot of opportunity to guide eyes effectively. The use of a right-hand nav is less common, but it's effectiveness is dependant on the design of the page -- we've seen right-hand navs that work and those that don't.

Thanks again for you comments,
-Greg

P.S.: your website is nice looking