Search icon Looking for something?

Hot, Hot, Hot: Using Heat Maps to Improve Usability
2008, Q3 (October 21, 2008)
By Rick Sapir, Chapter Webmaster

Rick Sapir
Rick Sapir
In the last issue of the Carolina Communiqué, we described some of the new features that we recently implemented on this website.

But simply adding new features isn't enough. We also needed to see how visitors interacted with the site. There are lots of tools that can be used to track visitors, clicks, and referrals (we already use Google Analytics, but we needed something more visual... in order to literally see what was going on.

What's a Heat Map?

For a website, a heat map is a graphical representation of where visitors interact with the page. The more interaction (i.e., clicks) the "hotter" that area is. This is especially useful in determining what parts of the page attract the most visitors.

Going Crazy

There are lots of heat map implementations available. For the Carolina Communiqué, we used Crazyegg (www.crazyegg.com). We have a "free" account that will track up to 5,000 visitors per month.

The implementation is quite easy: simply add a few lines of JavaScript code to the pages you want to track. That's it!

We decided to track the site's home page. After adding the code to our site's template there was nothing more to do except sit back and watch the results.

Interpreting the Results

Here is the heat map for the Carolina Communiqué:
Heat map
Heat map generated for the Home Page.

The darker (cooler) the area, the fewer the clicks; the lighter (hotter) the area, the more the clicks.

Here, we see that the bulk of visitors' clicks are in the box in the middle of the page that contains the current issue's table of contents.

Many of the things we saw were to be expected:
  • The Print buttons are quite popular.

    During the initial conversion to the web-based newsletter, our readers told us that the ability to print articles easily was paramount.

  • The Search box is heavily used.

    In the age of Google, many people expect to find what they're looking for through a keyword search.

  • The Current Issue contents area made it easy for readers to "jump right in."

    Previously, we had toyed with the idea of moving the table of contents to the left sidebar, or making it a sub-menu option.

We also learned a few new things
  • The newly added "Most popular tags" area did engage visitors.

    The "hottest" search terms included: career, employment, and job.

  • There were a number of clicks in "non-clickable" areas.

    For example, the masthead was a "warm" area. Even though it wasn't actually "clickable," visitors obviously expected it to be. As a result, it now is clickable (and directs to the Home Page). Likewise, the STC logo now links directly to the STC website.

Using Confetti

One feature that Crazyegg offers is called confetti. Instead of blending all clicks into a uniform map, each click is plotted as a different point. This lets you see exactly what is being clicked.

Each color represents a different referral URL. This means that you can break down these results even further. In these heat maps we can compare the clicks from all visitors against the clicks from visitors who arrived from Google:

Confetti map
Confetti map generated for the Home Page.

Confetti map
Confetti map generated for the Home Page for referrals from Google.

By getting a better "picture" of what visitors are doing, we hope to continually improve our chapter's newsletter.

Do you have ideas to improve the STC Carolina website? Let Rick know. Rick can be reached at webmaster at stc-carolina dot org. End

More articles like this...
Comments powered by Disqus.