Using Heatmaps to Improve Site Layout & UX

Posted by Don Elliott on Mar 2, 2023 9:00:00 AM

illustration of person holding magnifying glass against heatmap
We updated this popular post from 2015 to be up-to-date

As web designers, your focus can't remain strictly on aesthetics. Functionality must be the framework of whatever you produce. If you can't get your audience to do what you intended them to do, you need to go back to the drawing board. By the way, you should expect to go back to the drawing board, but have a plan! In order to understand how to improve your site layout and your design, you'll need data, and that's where heat maps and other user activity tracking tools can come in handy.

What is a heat map?

Heat maps allow you to track mouse movement, scrolling, and clicks to determine what areas of your layout are receiving the most attention. This can help you make intelligent decisions about the placement of items within your site. Never assume that just because you and your colleagues love the design and get how everything is related, your audience will too.

The nice thing about heat maps is that the data you get is visual, so you can literally see how users are navigating a page. Running a heat map for your homepage using Hotjar, for instance, will show you where folks are clicking (which is often really surprising!), how far down they scroll down the page, and how long they stay in one place. Accumulated data will show you 'hot spots,' and you can watch selected recordings of users on the page. 

Ultimately, a heat map will show you what's working, but more often, it shows you what isn't. The clickable elements you thought were obvious turn out to be largely ignored by visitors, and images or other items that aren't clickable are the things most users are tapping on. This is the data you'll need to make adjustments to the design for better user experience. 

How Do I Create Heat Maps?

There are a number of tools out there that track user activity in a number of different ways including heat maps. Most of them have some cost associated with them, but the benefit of knowing and understanding your users' behavior could end up easily offsetting the price.

We use Hotjar at Tribute Media, and we've also used Lucky Orange in the past. There are plenty of other options, too—a quick google search will give you a whole lot of free and paid sites and software to check out. 

None of the data these tools provide are without flaws, but the insight they provide is a valuable addition to a web designer's arsenal.

 

New call-to-action

Don Elliott

Written by Don Elliott

Don holds a degree in Multimedia and Web Design from the Art Institute of Seattle and has worked in web design for nearly two decades. He is also an award-winning illustrator.