About the Author

Rick Sapir is Chapter Webmaster for the Carolina Chapter of STC

STC UUX Community Newsletter
Usability Interface

Hot, Hot, Hot: Using Heat Maps to Improve Usability

By Rick Sapir, Carolina Chapter Webmaster

Introduction from the Editor

Last year the Carolina Communique, the newsletter for the Carolina Chapter of the STC, described features that had recently been implemented on the chapter web site. In their next edition, they followed up with a review of those features using heat maps. Following is their case study:

In the last issue of the Carolina Communique, 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.

Rick Sapir

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 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 generated for the Home Page	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.