Heatmaps from Clicks: How Crazyegg improved our website overnight

Joy of Heatmaps
Have you seen those awesome heatmaps where eye-tracking equipment records exactly how people look at web pages?  It teaches us where people look first, where they dwell, how they read, and generally how to optimize page layout.

Some examples:

• The Eyetrack III group shows that the top-left corner of your website is viewed first and most frequently, that people just read headlines, and that people read about five headlines per page regardless of how many headlines there are (so make ’em count!).
• An Eyetools study quantifies the value of being ranked 1, 2, 3, or more in a Google search and the relatively low value of appearing in a Google ad.
• Another Eyetrack III study shows how placement, styling, and size affects advertisement effectiveness of by a factor of 8.

Fun stuff!  But of course you can’t afford retinal scanners for your website.

Clicks aren’t eyes, but it beats blindness
We can’t track eyeballs, but there is something we can record: mouse clicks.  Enter Crazyegg, an on-line service that records all mouse clicks on your website and produces pretty click-heatmaps.

Of course the question is: It is useful to know where someone clicks?  If you had that information, how would you use it to change your website for the better?

Answer: Heck yes it’s useful. Here’s how it helped us.

Show, don’t tell
The first revelation came from our book-ordering page.  We have a yellow box near the top of the page with the obvious options: Order the book or view sample chapters.  Here’s what it looks like:

The click-heatmap of this section looks about like you’d expect; plenty of clicks on the clearly hyperlinked text:

Now it gets interesting.  This yellow box is followed by a list of subjects covered in the book, then the book order form, then the table of contents with sample chapters.  Hence the yellow box, allowing you to jump over the subject matter.

The subject matter list was not hyperlinked.  Oops:

We should have just listed clickable sample chapters instead.  (Which also would have satisfied the usual benefits vs. features rule.)

The click-heatmap made this error clear.  Don’t just talk about your product, show it!

Tweak the menu
The next insight came from our side-bar menu.  Here’s the heatmap:

Our observations:

First, people are most interested in “Features & Screenshots,” “5-minute Demo,” and “Licensing.”  People are interested in seeing it work and finding the price.  Probably these links should be repeated on other pages, especially the product’s main page.

Second, no one wants to sit through a 40-minute demo.  This valuable real estate could be promoting some other page — “Why review code” or “Whitepapers” or “Pricing” or “ROI” or anything else.  We’ll keep trying things until the click-test proves people are interested.

Third, people do see and interact with the sidebar menu.  That sounds obvious but with previous website designs we had trouble with people not noticing the sidebar or not understanding that the main sections expand. Now we know the current design works.

Bigger click areas
An interesting feature of Crazyegg is that you can separately view clicks that were “successful” (i.e. hit a hyperlink) and “unsuccessful” (i.e. un-linked text, images, or whitespace). When we compared the two types of click we discovered that some areas of our website weren’t nearly as clickable as they ought to be.

Take these info-boxes on the front page of our website:

The heatmaps of successful clicks show that readers want this information:

Now compare with unsuccessful clicks:

Our error is clear: People click everywhere in these boxes, not just the teeny hyperlinks at the bottom. They clicked on box titles, images, descriptive text, even blank space. This evidence shows the entire area is important.

In fact this was a general trend across the website: The larger the clickable area, the better.

Filter the noise
Then again, some highly-clicked areas should not be hyperlinked.  Here’s a normal, no-graphics, not-hyperlinked paragraph of prose from our Code Collaborator main product page:

It’s full of clicks!  This looks more like eye-tracking than click-tracking.  When I first saw this I thought something was wrong with the Crazyegg software.  Then I thought maybe “ensure reviews” ought to be a hyperlink since so many people clicked that phrase.

But once this image got around the office, about half of us said “Oh yeah, I click on words while I read too.  Nervous habit.  Or when I’m reading to someone.”

So this turns out to be noise.  Interesting noise, but not actionable.

The downside to Crazyegg
Not all of my experience with Crazyegg was positive.  The gripes:

1. Your website takes longer to fully load with Crazyegg.  In my tests with a home broadband connection, it takes between a third to a half of a second to load their 20.5k Javascript code.This is mitigated around this by putting their Javascript snippet at the end of the page, right before the </BODY> tag.  This way you incur the delay after the page had fully rendered where a user wouldn’t notice it.  [Thanks to Hiten from Crazyegg tech support who supplied the correction to this section.]
   
2. The Crazyegg management interface is really slow.  It can take minutes for a page to appear.  On some occasions the pages never load.  It took me about an hour to retrieve the screenshots for this article.  This doesn’t affect your live website.
3. If your website has dynamic content, the heatmap is meaningless.  This isn’t a technical failing of Crazyegg so you can’t count this against them.  Still, it limits its applicability.  Hopefully your more interesting pages aren’t constantly in a state of flux.  Perhaps you can freeze them for long enough to collect some data.

In the end, these problems are just a nuisance, not deal-breakers.  The advantages in improving our website vastly outweigh these minor pains.

Conclusion
You really have no excuse not to try a click-heatmap technology on your website.  It’s inexpensive, it’s easy to set up, and the information is invaluable.  So get started!

Do you see something in these heatmaps that I missed?  Do you have a favorite website analysis tool you’d like to share?
Leave a comment!