Using Heat Maps to See Exactly Where Visitors Are Clicking On Your WordPress Site
Heat maps show you precisely where people are clicking – and not clicking – on your site. While Google Analytics is a popular choice for real-time information like how many people are visiting your site, how they found it and your bounce rate, only heat maps can help you understand how visitors interact with your site.
Armed with this information, you can improve your pages to show visitors what they want to see, and tweak things like navigation and call to action buttons to make them more visible and, ultimately, more clickable.
What is a Heat Map?
It’s literally a hot map. No, not some treasure map that’s been set ablaze, but rather a map that indicates how a visitor’s activity is distributed across the browser window, with the areas of the most activity being condensed into “hot zones” akin to what the Predator might see.
Confused? I like the definition provided by TechTarget.
A heat map is a two-dimensional representation of data in which values are represented by colors. Heat maps allow users to understand and analyze complex data sets.
I like that definition because it’s concise, but it still might not illustrate my point. This is a heat map:
See how it has those color blobs all over the place? Blue areas are where the visitor’s cursor hovered and/or clicked the least amount of time. Red areas are where the visitor’s cursor hovered and/or clicked the most. This paints a picture of how a single visitor interacted with the site, what captured their interest, and what they wanted more of. It shows you what parts of your site are “hot” and what parts are “not.”
The best heatmaps capture the moments a visitor was on your site, giving you something better than any standard analytics package can provide – a glimpse over that visitor’s shoulder.
What Can Heat Maps Tell You About Your Site?
I’m a visual learner. Someone could walk me through a set of instructions for completing a task verbally and I wouldn’t remember a thing they said. But give me a print out of those words and show me a diagram and I’m good.
I think that’s why I find heat maps so awesome. They’re targeted toward the visually inclined among us. And since I’m speaking to a bunch of site builders and web developers right now, I’d bet I’m not the only one.
Heatmaps tell you how a visitor moves around on your site, yes, but what you can glean from that information is a lot more complex than that. A good heat map can show you:
- What visitors are interested in. Those orange to red areas on a heat map give you a concrete visual cue as to what your site visitors want to know about. This is essential for creating a site that speaks to your audience.
- If there’s navigation confusion. If there’s a bunch of clicks on an area that’s not actually a link, you should probably reconsider how that page element looks so it’s less link-like. Or, you might want to actually make it a link, after all.
- If visitors are distracted. If there’s no clear flow to how a visitor works through a page, you have a problem. One item should flow to the next, to the next, and so forth. Without flow, you don’t have a good shot at converting.
- What’s working and what’s not. A broad generalization to be sure, but heat maps can show you if people are clicking on what you want them to click on. If your lead capture form is cold, cold, cold, then you know something in this area needs to be addressed.
- How conversion ready it is. A lack of clicks on your signup form, “find out more” buttons, or product links is a surefire sign your site could use some work in the conversion-readiness department.
- What images are resonating the most with visitors. According to a case study cited by SumoMe, heat maps can help to determine what images speak the best to your site visitors. For instance, Lindsey Martin, a marketing consultant, uses heat maps on the testimonials pages of her clients’ sites in order to see what images visitors are most interested in. They then highlight these images on the website more, use them in advertising campaigns, and use the subject matter and style to inform future image selections.
How to Put This Info to Good Use
According to David Aguilera over at the Nelio A/B Testing blog, heat maps have allowed them to make several accurate generalizations about the way people browse websites that they can now apply to future redesign efforts. Some of the lessons he’s learned include:
- Banner blindness. Most site visitors are “blind” to the banners at the top of websites nowadays. If you want a visitor to pay attention to something, don’t put it in the banner.
- Summaries are great. Gone are the days when including full articles on your blog’s homepage is a good idea. Now, summaries are the most effective way to relay your content to visitors. It gives them a brief glimpse at a wider selection of your content, which means they’ll a) see more of your content, and b) be more likely to engage with it.
- Left preference. Content that’s on the left-hand side of a page tends to be read more often than that which appears on the right-hand side. This shouldn’t be that much of a surprise—those of us in the west read from left to right, after all.
- Scrolling sucks. We’ve all heard the tip that you should put your most important info above the fold on your website—in the area that a visitor sees without having to scroll. But heat maps have proven this point. People don’t like to scroll to find what they’re looking for. Don’t make them work for the info. Give it to them upfront, on a silver platter.
- Images rule. Photos and graphics have always done wonders for increasing site engagement, so it should come as no surprise that they actually get your visitors to pay attention.
The information you get from using a heat map is only so good as the objective you’ve put behind it. Another case study SumoMe highlights is on its own homepage. Their objective was to get visitors to install their plugin or code snippet.
I love this case study because it shows you exactly what works, what doesn’t, and what should be changed to increase conversions.
The clicks are clear, right?
The majority of clicks are on the already prominent “Get Started” and “Watch Video” buttons, which is good. That’s what they want.
And each tool gets a lot of clicks, too, but those tools featured on the right side of the screen get fewer clicks. That plays into the “left preference,” featured as one of Nelio’s lessons mentioned above.
With this visualization in hand, SumoMe was then able to reevaluate their homepage and make some test changes including updating the content behind the “Watch Video” link and moving the tools to the left side of the screen.
This falls right in line with the concept of the “F” pattern identified by Nielsen in 2006. This study evaluated Google search results, focusing on where people click the most. It showed that people click on the left-hand side of the screen and along the top to some degree.
But the farther down the page you get, the more concentrated the clicks become on the left-hand side until they taper off completely. Well, maybe it’s just better you take a look at what I’m talking about to the left.
According to Optimizely, this shows that visitor behavior hasn’t really changed in the past ten years.
Which is reassuring. It means, at least so far, online user behavior is somewhat predictable. And where there’s predictability, there’s an opportunity to optimize your site to fit those assumptions.
Optimizely also points out the importance of perspective. That is, the images, graphics, and even text on your site should help to direct the visitor’s eye in the direction you want them to look. You could quite literally have a picture of a person looking at your signup form, for instance. Or, you can take a more figurative approach and ensure the graphics are oriented toward your opt-in or product links.
Depending on the type of heat map tool you use, you can gain access to different information. For instance, Hotjar offers several tools that allow for comprehensive site analytics including one for registering clicks and taps for mobile visitors, one for recording where the cursor moves on the screen, and one for identifying how far down a page a visitor scrolls.
Tools as varied as these can first show you how visitors behave on your site from the moment they land to the moment they click away. Then you can modify your site’s design to ensure visitors complete the action(s) you want them to. The concept sounds simple because it is. But putting it into practice can be a bit intimating.
Rest assured, however, you can create heat map tests to accomplish a multitude of objectives then revise your site based on that information, even if you’ve only just heard of a heat map for the first time today.
What follows is a list of heat map plugins and services that are compatible with WordPress. They aren’t ranked, but free options appear first.
Integrating Heatmaps with WordPress
Hotspots Analytics is a plugin for adding analytics to your WordPress site. It goes beyond the standard analytics offerings by including heatmaps, user activity, and event tracking. It can work alongside Google Analytics or on its own and is ideal for evaluating responsive and touch-based design.
This plugin overlays a heatmap of clicks and taps on any page you specify on your website. You can easily view a heatmap for a specific page within the dashboard. It works on every page of your site and you can also track user activity, page views, taps, and even Ajax actions. All of the data collected by this plugin is stored within your site’s database and you can view the results from within the dashboard. Hotspots Analytics is HTML5 dependent and totally free.
heatmap for WordPress is another free plugin that provides realtime analytics and mouse tracking, allowing for greater site optimization. The heatmaps are automatically overlaid on your site’s pages and provides support for touch and responsive-based designs. It won’t bog down your site’s speed and updates automatically when a new visitors drops by.
It includes user privacy and HTTPS support. Plus, it’s tag based, so you can set up a new heat map just by inserting a tag. This one’s not all that feature-rich but it’ll get the job done in terms of giving you a baseline impression of what visitors are interested in.
SumoMe is a very popular paid service but they also offer a free plugin designed to increase site subscribers by giving you insights into how your signup forms are working. The free tools included here are a List Builder that lets you create a lightbox popup for increasing subscribers and a Share tool for making social shares convenient.
It also comes with Heat Maps for a visual guide into what people are clicking on, a Scroll Box that triggers when a visitor scrolls down to a particular point on the page, a Smart Bar for encouraging subscriptions, and a Welcome Mat that acts as a fullscreen CTA.
Now let’s dive into the premium services. Crazy Egg is perhaps the most well-known heatmap solution that’s compatible with WordPress. It was founded by Neil Patel and is widely used across many industries. It’s very well-known, largely because it was one of the first places to offer heatmap user data.
Crazy Egg offers several different kinds of heatmaps. First, there’s the standard click-based heatmap. But there’s also a scrollmap that shows you how far down a page a site visitor has scrolled before bouncing. You can also segment visitors based on the traffic source, look at several domains, and more. A free WordPress plugin is available for integration with your Crazy Egg dashboard, but you will need to pay for the service to make use of it.
Pricing for Crazy Egg starts at $9/month for the Basic plan, which allows you to track 10 pages. It is billed annually, however.
ClickTale is another heatmap service that lets you key into the way your visitors use your site so you can take better advantage of their wants and needs. It includes advanced heatmaps that provide link analytics. Individual visitor session playback is included as well that comes with many features like analysis for desktop sites with four separate heatmaps that record mouse movement, clicks, attention, and scroll reach. It also comes with mobile analysis that shows you where visitors tap, what amount of the site is exposed, and where visitors focus their attention.
ClickTale also comes with conversion tools like form analytics and conversion funnels along with several site efficiency tools like JS errors reports, a page console, and a bounce rate report. Now, ClickTale is targeted to the enterprise-level set so it’s not the right solution for everyone. Still, it’s worth mentioning for its ease of integration and robust toolset.
SessionCam offers all the things you’d expect from a traditional heatmap service with the addition of user tracking. User tracking allows you to see precisely where a visitor moved his or her cursor while on your site. This can tell you a lot, like what they thought about clicking but didn’t and where their focus rested while reading.
This service creates a report for each site visitor and you can replay their actions. This gives you a play by play of how a user interacted with your site. It can also show you problems users had with links or if they clicked the wrong place. It’s really valuable for troubleshooting that way.
Best of all, it comes with a WordPress plugin for easily integrating SessionCam into your site. A free trial is available that allows you to test out the service’s features. After that, there are small website plans that can be paid monthly and enterprise-level plans, though you’ll need to request a quote from the company for both.
Inspectlet is another heatmap service that allows you to playback everything a site visitor does while on your site. The session recording feature lets you watch what each person does while navigating through your content. You can playback their time on your site over and over again, watching each mouse movement and click, each keystroke, and scroll.
This sort of info is invaluable for improving your conversion rate. It also comes with filtering features that enable you to narrow down which users you observe. It comes with a funnel analysis tool, a conversion funnels tool, and the ability to tag sessions and users. This means you can identify individual users based on this tag (anonymously, of course) so you can use their info later for case studies and further evaluation. The heatmaps included here measure several things including eye movement, clicks, and scroll activity.
There are several plans available. The Free plan costs nothing and offers 100 recorded sessions on one website per month with numerous features to test out. The first paid plan is called Micro and offers 5,000 sessions for one site per month. The pricing scales up from there, offering more sessions, on more sites, with more features until you hit the Accelerate plan, which offers 125,000 sessions on 20 sites per month. Enterprise plans are also available.
The last heatmap tool I’ll talk about here is called HeatMap.Ca. It offers a dashboard tool that isn’t integrated into WordPress, unfortunately, but it is incredibly feature-rich so it might be worth that minor inconvenience to your workflow. With it, you can view click and tap data, playback visitor sessions, view heatmap reports, and more.
It also includes robust filtering tools so you can see precisely the data you want, no more, no less. It includes filters for monthly, weekly, and daily visits, geography, the day of the week, a specific HTML element, a type of mobile device, one page or multi-site funnels, mobile and desktop, dynamic content, click paths, bounce rates, real time view, and more.
There is a free trial that lets you create a heat map for one page with every single feature. The Plus plan costs $9 per month and lets you test up to 10 pages. Then there’s the Premium plan, which costs $22 per month and allows for up to 100 pages.
Heat maps turn a mountain of data into a visual you can interpret at a glance. And while there are more heat map tools out there, this should give you plenty of information to get started with integrating this incredibly useful feature into your websites.
What do you think of heat maps? Are they essential or can you skip them? What is your favorite way to generate them? Let us know what you think in the comments below.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.