• The inventors of eyetracking heatmaps, experts in eyetracking analysis

Eyetracking a Navigation Bar -- How Many Elements Are Read? Well, It Depends...

A historical note regarding this post

Back in 2005, people were talking about how "important it was to have a blog" and so we started one, writing this first entry you see below, which was originally posted on February 2, 2005. But as we posted it, we realized that we (along with most of the world at the time) didn't have any particularly good idea about how blogs should be written. And so we decided to do "eyetracking analysis" on it (it wasn't yet popularly called "eyetracking heatmapping" back then, since the term "heatmapping" was only used by us with clients and didn't start to grab hold in the marketing world until July of 2005 when Jeanniey Mullen wrote about us in ClickZ (thank you, Jeanniey)). You can see the blog entry where we posted the eyetracking results of how people read this entry (which back then didn't have this comment on it, of course). And, if you check out the comments on that blog entry, you will see the original comment and link by Steve Rubel at Micro Persuasion that truly launched this blog into the public eye, and resulted in eyetracking becoming a common word and tool in the marketing world. Now, jump back to 2005, and read the blog entry below...

— Greg Edwards, founder, and CTO in 2005, now CEO since 2007

This right-hand navigation bar was the final motivator that got this blog started. When I first saw it, it wasn't doing so great.

People interacted with this nav differently depending on other page elements.

Plain_nav_1

It was on the (old) San Francisco Police Department website, which, some might say, was "cluttered" before the homepage redesign. I know that context plays a big part in how web elements are viewed, but when I saw it in a follow-up study on the (new) re-designed website, I at first thought it was a completely different right nav!

Old Page Design New Page Design
Sf_old_heatmap_3   Sf_new_heatmap_3
Eyetools Heatmaps™ showing group viewing trends on each web page
( Eyetools Heatmap Legend )

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.

Written by Greg Edwards

Other articles written by Eyetools

Examples

Common Email Layouts B2C Electronics Template
Eyetracking Circuit Citys Email Template
Branding Effectiveness Sports Illustrated And Footaction
Css Zen Garden An Eyetools Eyetracking Analysis
Is The Washington Post Wasting Money On The Bottom Half Of Their Homepage
The New Washington Post Homepage Design: An Eyetools Eyetracking Analysis
Blog Analysis And Optimization With Eyetracking
Eyetracking a Navigation Bar How Many Elements Are Read? Well, It Depends

Basics of Eyetracking

Understanding Eye Tracking, Part 1:  Misinterpreting Data
Understanding Eye Tracking, Part 2:  What You Can Learn From Eyetracking Data
Understanding Eye Tracking, Part 3:  What Is a Heatmap Really
Understanding Eye Tracking, Part 4:  What Is a Scan Path
Understanding Eye Tracking, Part 5:  Time And Heatmaps

People can't click on what they don't see

Small Decreases In Viewing Can Decrease The Probability Of Being Clicked By More Than 50 Percent
Wasting Money On Content In Visual Dead Zones

Success stories

Eyetools Doubles Conversion Rate for Fortune 100 Client
How Eyetracking Helps Website Redesigns: An Eyetools Case Study

In the Press

Yahoo Search Assist Uses Eyetools Eyetracking To Optimize Design Based On Eyes And Where People Look
Eyetools In Wall Street Journal: Benefits Of Heatmap Testing For Ibm Ogilvy Cisco
Eyetools In Adage About Ogilvy Using Our Eyetracking For Its Email Clients
The 3rd kind of conversion problem: the most exciting one

Eyetools eyetracking and SEO / SEM

Eyetracking Google Search Results Eyetools Research: This One Should Help With Search Engine Optimization SEO/SEM Planning
Eyetracking Google Checkout Button Does Not Increase Viewing Significantly But...
Google Eyetracking Study Of Search Results On Sale
Version 2 Google Golden Triangle Eyetracking Search Report