Interpreting Crazy Egg heatmaps
October 4, 2006 — With the billions of Web 2.0 analytics tools out there today, it’s both rare for something interesting to penetrate the saturated market, let alone have that rare tool actually do something useful. Just a few weeks ago, visualisation service Crazy Egg was pushed out of private beta to the public, and it came with this wonderful heatmap tool that allows a user to visualise where people are clicking links on the page. I’ve been running Crazy Egg on this blog for some time now, and the results are actually not too surprising, although in some cases novel.
An aside: The heatmap concept
For some reason, with the release of Crazy Egg, everyone went all ga-ga about the heatmap, thinking it was this cool new visualisation tool that hadn’t previously existed. While now everyone has the ability to build click-based heatmaps for their own blogs, the concept of the heatmap is far from new: heatmaps have been used in interaction design and human interaction studies for eye tracking for decades. Technically, the heatmap was most common in this use, with the hottest points being the places where the eyes of the user were fixed for the longest periods of time (either on a composite scale, where a collection of users generally focused, or on an individual scale, where one user spent the most time.) From this eye tracking, web usability addicts could then dictate what people were interested in, where identity and interface controls should go, what was working and what wasn’t. London-based usability firm Etre has a series of blog posts in which they show eye tracking heatmaps of common sites, such as Amazon, with their findings.
Technically, because of this, calling the Crazy Egg heatmap concept a heatmap is about as definitive as calling an SUV or F1 car an automobile; it’s a vague description of a concept rather than a definition of what’s going on. Crazy Egg’s heatmaps are better defined as clickmaps, as the heatmap actually defines where users are clicking.
Setting up a Crazy Egg clickmap
If you don’t have a CrazyEgg account yet, you’ll have to sign up for an account. If you really think Crazy Egg will be valuable, or are running a large, advertising-supported site, it’s going to be best for you to pay for one of Crazy Egg’s pricey monthly plans, as the free accounts are limited to 5,000 hits per month. Since many of my posts currently go well over that, I can max out my CrazyEgg account pretty quickly, so pick and choose wisely. I’m not a stats junkie, and Mint takes care of the majority of the stats I’m looking for, so I run a few limited tests per month with the Free account.
Once you’ve signed up, you’ll need to configure your site to use Crazy Egg. Once you login and are on the Crazy Egg Dashboard page, click Add New Page to add a new test page. From there, it’s pretty simple – insert the page’s URI (If you’re using WordPress, you can track individual entry pages by using their permalinks.) and then a title for your own use within the Crazy Egg system. For the Length of Test field, you can choose a timeframe (some weeks) or a visit cap; although weeks are the default, I recommend using the visit caps on your free account, since you only have 5,000 to use monthly. For example, run a test for 1,000 “visits”.
Caveat Crazy Egg’s idea of a “visit” is not the same that is commonly held in analytics (i.e., a visit is a “unique” visit from a unique IP address.) Instead, Crazy Egg’s idea of a visit is seemingly a hit, or a page access from any IP, including repeated requests from the same IP. Keep this in mind if you’re running a high-traffic site – you’ll go through those 5,000 visits really fast. (This was confirmed by Crazy Egg’s support staff. Crazy Egg’s Hiten Shah states that “Our ‘visits’ are ‘hits from any ip’.”)
Once you have things set up on Crazy Egg’s end, you have to copy and paste their code snippet into your site. That code should be available here if you’re logged into Crazy Egg. Just copy and paste this code at the bottom of your page, right above the as explained in the Crazy Egg instructions.
If you’re running WordPress, you can place this code directly in your wp_footer by adding it to footer.php, but do be aware that this will slow down your site across all of your pages, as the Crazy Egg JavaScript will be called by every page generated by WordPress, regardless of if you are running tests on the page or not. Although outside of the scope of this document, you could use WordPress’s built-in conditional tags to filter out the Crazy Egg code. Just nest the Crazy Egg code in a < ?php if(is_home()) : ?> < ?php endif; ?> to only have the Crazy Egg code load on the WordPress home page, for example.
Now, with stuff configured on both your end and Crazy Egg’s end, all you can really do is sit back and wait. A lot. If you’ve got a free account, Crazy Egg only updates your statistics every few hours, so you’ll have to wait at least a day to look at anything meaningful. Once you’ve been patient, go to your Dashboard, then to your test. Click the View Results button to open the Crazy Egg Windshield, and then click Heatmap in the upper right toolbar. Crazy Egg will load a snapshot of your page with the clickmap laid over it.
Interpreting the clickmap
Now that you have this document that looks more like a weather map than a website, what are we supposed to do with this? Although Crazy Egg tells you that there are some things that you can do, it’s extremely poor at explaining how all of this works.
First of all, don’t fret that the majority of your page is “cold”. Your clickmap is exactly that – a map of where people are clicking, and that does not necessarily correspond to what content they’re reading, how people are looking through the page, and how much time people are spending there. That data is the kind of data you get from eye tracking studies and other analytics, so don’t take the clickmap as some type of be-all, end-all format. It’s just another tool.
Once you’ve kind of taken a look around, find the hottest area on the page. This is where the majority of people were clicking, and the centre of the area is generally a hot white. Thanks to Matt Mullenweg of Automattic, I’ve got the Crazy Egg clickmaps of the WordPress family of websites to use for this demonstration. For this, we’ll look at two different sites in the WordPress family, wordpress.com, the hosted blogging service, and wordpress.org, the product page for the WordPress application.
WordPress.org and deliberate interaction
First, we’ll examine the clickmap for WordPress.org. Notice that on this page, there isn’t one absolute magnet for interactivity: the links that users have clicked are pretty well distributed across the page. It is obvious, though, that the things that people click on the most are links to download WordPress and then, probably secondary, what WordPress is. Okay, maybe Extensions are secondary. While I’m not trying to sound indecisive, this proves a point about the clickmap: after all, the clickmap is a qualitative measure. There are no numbers attached to things, but, in most cases, the actual numbers are more irrelevant than where people are going.
If you think about where people are clicking – Download, What is WordPress, and Extensions – you can get a very good idea of what the majority of people on this page are looking for. Since this is a clickmap, these hotspots are where the user is deliberately interacting with your page – users captive enough to click on things are clicking on these things. This concept of deliberate interaction offers a lot of meaning into the clickmap, as it shows you what the people that care the most want, and then you can optimise that content toward your captive audience. Meanwhile, the biggest downfall in the clickmap is that it will only offer little insight into why those others that didn’t click on things didn’t. Those people could be potential readers of your blog or users of your software, but something kept them from clicking. That data is just as relevant, if not more so, to improving traffic, and the clickmap will not give you any insight into why those users that didn’t click on things didn’t.
Meanwhile, if you notice that a lot of people are directing off to a certain subset of areas, that gives you vectors for optimisation. If a lot of your users are moving off to download the software, maybe it would be worthwhile to add a direct link to the download on the main page, thus reducing clicks to get to the intended destination. This is the same for the What is WordPress? link – it may suffice to say that your description on the front page does not adequately answer the question of what the software actually does.
At the same time, one can easily read too deeply into these flaws. By adding more content to the front page and reducing the number of clicks, you risk running people off as page load times increase and the page becomes cluttered. Unless you want a Party Tent City, one of the worst websites in existence, you’ll have to have some separation. It’s also necessary to note that people are going to click on your links anyway; it’s a natural progression of the hyperlink structure that drives the World Wide Web.
From my own perspective, this WordPress.org front page is actually pretty well balanced, as people are moving in a couple of primary directions. It may be worthwhile, however, to cut some of the links to lesser-clicked-upon items to focus on pushing users in targeted directions. If WordPress.org had a large amount of users clicking in one direction – as we’ll see next – it’s generally a good idea to fix the error and “balance” the clickmap. As for now, WordPress.org is doing pretty well and would only need minimal changes.
WordPress.com and directed interfaces
Crazy Egg also uses a WordPress family website for its own example  wordpress.com, the hosted WordPress solution. Note that unlike WordPress.org, WordPress.com has a serious amount of clicks concentrated in a few areas; primarily, users are clicking on the form fields for login, and then the first few top blogs on WordPress.com.
This interaction with the site — especially in the case of a clickmap — should make plenty of sense intuitively. WordPress.com has over 368,000 hosted blogs; to reach any of the administration panels for these blogs, an author is required to log in. The fields on the WordPress.com home page are one of two ways a user can login to their own hosted blog (the other is by navigating to username.wordpress.com/wp-admin, the administration login for a WordPress-based blog.) With 368,000 blogs and counting, it only makes sense that the most clicked thing on the page are the fields. If that wasn’t the case, a whole lot of people aren’t logging in, and something much more detrimental to the site is at stake.
This clickmap obviously shows us exactly where the majority of WordPress.com users are headed: they’re moving off to their own blogs on the network, logging in to perform administrative duties. This gives us a decent inference of what types of people are interacting with the WordPress.com homepage: most of them are existing users of the service. Note that I highlighted “interacting with”; this may not be particularly representative of who is viewing the page. For example, although the users that are clicking are mainly logging in, the site may still have a sizeable amount of users that are just reading what’s there and going away. If this seems to be the case (and it will require more knowledge of site statistics than just a Crazy Egg clickmap,) it may be worthwhile to figure out what would entice those not clicking around to be more interactive. This would most certainly be the case for sites that run advertising programmes, as the more pages the user visits, the more advertising impressions appear on your site.
Meanwhile, if Automattic wanted to direct more attention to getting existing users interacting in the WordPress.com community, it would most likely be worthwhile for the portal page to contain more data relevant to existing users of the system as opposed to the “meme trackers” currently present. Why not place more forums support data on the page, or possibly links to services catering to the WordPress.com author? While this may not be the case for WordPress.com (and most likely isn’t,) the questions are ones that one has to ask when making interface changes based upon clickmap data.
Making interface changes
If you notice glaring oddities in your clickmaps, it’s probably time to change your current interface. Something’s failing to work somewhere, and it may be as simple as changing the location of something on the page or as drastic as reworking your site’s information architecture to build a more comprehensive, efficient portal to your content.
Of course, you can – and should – use Crazy Egg to track your changes if you decide to change things based on clickmap data. For example, Mullenweg and friends may actually see an increase in WordPress downloads by placing the direct download link on the front page (much like the Mozilla Foundation does with its products, like Firefox.) It may decrease clicks off to the What is WordPress page if the introductory copy on the front page is revised. If you get it wrong, you can always revert, although it’s embarrassing.
If you have the developmental capabilities (and a userbase of sufficient size,) it could be a good idea to save yourself from the trial-and-error games and effectively run two interfaces side-by-side, tracking clickmaps with Crazy Egg on both. Sites such as Yahoo! have done this when redesigning their main portal sites, offering users the ability to switch between the tried-and-true interface or the subjectively-better beta interface. In setting up this dual-interface model, you’re able to work out bugs in your beta interface clickmaps without causing too much unfamiliarity in your existing audience, with a userbase that is using the new interface by choice. Generally, those trying out the new interface are also more prone to give feedback, so harnessing the power of these users when making your changes will result in a much better interface than you could have constructed by yourself.
Keeping statistics in check
Even after you’ve optimised and analysed, you’re not done with your site. You really never are; you can never have the perfect interface. Since Crazy Egg’s free service is somewhat limiting, it’s best to run new tests every month or so (or, if you’re a commercial blogger, it might be worthwhile and profitable to just pay for the service.) Clickmaps do give a good qualitative idea of user interaction, especially so if you are not a large enough entity to justify the costs of usability studies.
If you are finding Crazy Egg’s clickmaps to be a great help in designing your site and tailoring its content to your users, make sure you are also running regular statistics software on the backend. While I’d assume this is the case for most of Crazy Egg’s users, backend software, such as Google’s free, Urchin-based Google Analytics, give you another piece of the user data puzzle in which to make inferences about user-site interaction as well as traffic to certain parts of the website. Crazy Egg is far from a comprehensive site statistics solution by design, and to only look at its clickmaps would be undoubtedly narrow in scope.
Bug alert Having data outside of Crazy Egg is also useful at present because I’ve personally noticed that Crazy Egg’s own software is exceptionally buggy, especially so in peak hours. Nearly 20% of the time my visualisations fail to load at all, and I’m stuck with an error page (as well as an annoying audio file that’s played every time their error page loads.) I assume that these bugs will be worked out as time progresses, but as for now, think of Crazy Egg as a beta software product as to save yourself from the letdown when it, well, lets you down. A few bugs shouldn’t stop you from using the free service, though I’d wonder just how buggy the service becomes (or stops being) if you’re paying for it.
A recap
This entry is quite long for a Pilot Training entry, which is meant to be concise; however, making this shorter would cause a loss of relevant information. For those pressed for time (or short of attention,) I’ll leave you with a quick recap of things to look at while interpreting CrazyEgg clickmaps.
- CrazyEgg’s heatmaps are effectively clickmaps. Never forget that they are displaying user interaction, not where users are looking or what they are reading on the page.
- Don’t make rash inferences, but think critically about where users are going. Why are they going to one place more than the other? How will I make them go to where I want them to? (Or, in a worse case, why isn’t anyone going anywhere?) Although sometimes these questions can be answered by changing design or placement of an element on a page, sometimes the errors are much deeper than expected.
- If there are serious oddities, you most likely have more to fix than just simple things.
- Crazy Egg can be buggy. Do not rely on it as a sole source for data.
- For that matter, do not rely on any one site statistics package as a sole source for data, Crazy Egg or otherwise. Crazy Egg is mean to augment existing solutions, not replace them. Continue to use an application like Mint to maintain server-side statistics on more technical things such as user agents and most popular pages.
Comments?
Comments are closed on archived posts.