Stratus Interactive

STRATUS BLOG

Optimizing your Website Design with Heat Mapping

By Amanda Dzwill · Oct 10, '13

← Back to Blog

Last week, we talked about how people judge your website in 3-5 seconds with what is referred to as “The Blink Test”. There are a lot of factors that contribute to whether your website has the potential to pass the blink test but how can you evaluate your current site to see what’s working and what’s not?

shutterstock 117410959 resized 600

Metrics systems like Google Analytics or HubSpot can tell you what your bounce rate is and whether or not visitors are converting but heat mapping programs can tell you why. Perhaps the most well-known heat mapping tools is Crazy Egg which allows you to track visitor clicks, pinpoint hotspots, see where visitors stop scrolling and connect clicks to the types of traffic.

Heat mapping has the potential to teach you some really important things about your website including:

Where People are Clicking – You can easily determine which of your products or services is most appealing to your visitors. You might even be surprised at what you find.

What People Don’t Care About- Are your headlines capturing the audience? How far into your paragraph do people read? Do people completely skip over your contact information or your call to action (CTA)?

Where to Draw Attention- If you find that certain important pieces of information are being overlooked like your contact form or your CTA, you can easily determine where to put it to get better visibility. You can also determine how to optimize your navigation by showing what areas are most clicked or viewed. You can then move important pages to that area in the navigation.

eye tracker heat map for website usability testing resized 600

Image Credit

Heat maps can be developed around eyetracking or mousetracking. Mousetracking heatmaps are probably used most frequently because they are more price effective but their accuracy is around 85-90%. Eyetracking heatmaps have an accuracy of close to 100% but they come at a higher price. However, there is a key distinction between mousetracking and eyetracking: Mousetracking uses data from actual visitors whereas eyetracking data is determined based on a sample group of people which may distort results. Regardless, there have been numerous results obtained from heat mapping and some general findings have been published regarding visitor behaviors. ConversionXL highlights some interesting pieces of information learned from heat mapping. Here are 5 of our favorites:

Stay above the fold.

The content most important to your target visitor should be above the fold. A study found that users spent 80.3% of their viewing time above the fold.

eyetracking fixations above fold vs below resized 600

The left side is the right side.

Several studies have been done on which side of the page is most viewed and the results tend to say that the most attention is paid to the left side of the page. People also tend to look at the left side first.

People read in an F shape.

A Nielsen Norman Group study found that people skim pages in a certain pattern. They initially look at the start of the text and then selectively move down the page in a pattern that resembles the letter F. Note: this is not necessarily true for picture-based websites.

f reading pattern eyetracking resized 600

Banner blindness is real.

Visitors subconsciously ignore portions of your site because they look like advertisements.

banner blindness examples resized 600

Follow the Eyes.

There have been a number of heat mapping studies that have found that the position of a person’s eyes in an image matters. People tend to follow the direction of the person’s eyes so make sure they are looking at the most important parts of your site! 

 

Download Lean Mean Traffic Machine Ebook

 

The number of studies and conclusions reached based on heat mapping (whether mousetracking or eyetracking) is pretty incredible. Remember to always consider the visitor behaviors reached from heat mapping when designing your website or uplifting your current site.