Eye Tracking And Heat Maps To Improve Website

By Mash Bonigala (869)

The Importance of Eye tracking

Eye tracking, the process of measuring eye movements to test how people read websites, is not a new concept. More importantly, the results of these tests provided a strong guideline for a creative and effective Web design.

Unfortunately, many Web sites have either failed to understand this concept or ignored it for the sake of creativity. I hope this post will help you understand its significance.

The F-Shaped Pattern
The multiple tests conducted by Web usability guru Jakob Nielsen show that majority of users follow a dominant reading pattern resembling the letter F. Here are some samples from Nielsen and its interpretations:

website design

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

It basically means that the attention span of online readers is very short so they only scan your contents. So, it is very important to put the key elements of your Web site like logo design and company information within the said pattern to get grab attention quickly. Using bullet points and sub-heads are also very helpful.

How Heat Maps Can Help Your Ecommerce Website

Heat maps are one of the most powerful tools an ecommerce website owner can have at their fingertips. These literally give you an insight into your customers’ minds as they peruse your website. Here is a short introduction to heat maps along with tips for making them work hard for your ecommerce website. Heat maps will certainly help your ecommerce website.

What are heat maps?

A heat map is a visual picture of your website as it is viewed by visitors. This tool usually shows the most important web pages in question as a color map, with red being the area most viewed and blue and violet as the least viewed. This allows you to see exactly where consumers are looking when they open a given web page, which then allows you to place the most important elements in these places. While it may seem like a gimmick, a heat map is actually a valuable and effective tool. There are many programs that will allow you to heat map your website and see how it can be improved.

Heat maps can be developed both for eye tracking and for click tracking. Click tracking is similar to eye tracking, except that it looks at where your visitors are clicking the most. This again can help you to move around important page elements so that the ones that generate sales are given prime placement. 

Using Heat Maps

Heat maps are nifty, but they work best when you approach them in a scientific way. Here are a few tips for getting the most out of this tool.

  • Start with a specific question. There are several things you could look at, like: Do customers look at my call to action? Do they see the sidebar? Are they looking at my photographs? Do customers scroll below the fold? Each of these questions is easy to answer with heat maps, and all can contribute to the success of your company.
  • Choose your panel wisely. Customer research is a huge investment and it is one that needs to be spent wisely. Make sure your panel is made up of people from your target audience, not just anybody within a broad demographic.
  • Be specific. Your panel needs to have very specific instructions regarding what they are looking for and the goal of the study. In addition, you need to have a defined set of outcomes for your test and know ahead of time what they will indicate. Thinking about these factors ahead of time can help you to design a test that will give you the answers that you seek.
  • Consider testing an alternate design. Sometimes the flaws in a design can be seen best when there is another one available for comparison. It may pay to develop a new and very different design to be tested side-by-side with your real one.
  • Don’t stop at the data. While looking at aggregate data is important because it gives you an overview of the test results, you need to look deeper in order to get the in-detail information that you need. Analyze individual sessions as well as playback videos; often these have the answers that you really need.