Weekly Design Tools for 2020 – Week no.3 Heatmaps with Hotjar

This week’s design tool is a heat map tool for websites. Ok, you might be thinking, ‘how is a heat map a design tool.’ Well, if you’re a web, UI, or UX designer, then you may know that it is much more than the design style and aesthetics that gets the results. It’s the strategy, user flow, user experience, and interface. It’s finding out how the user behaves on a website and improving the design to enhance and maximize conversions and achieve the website’s goal. And this takes testing the design with real-life users.

Heatmaps for websites

Heatmaps allow you to see how website visitors are behaving and interacting on a website. They do this by recording and tracking where users click the mouse or tap on their mobiles. They also track the movements of a mouse cursor and page scrolling that shows where website users are leaving the website.

How can heat maps help web design?

Typically when creating the design, there are strategies already in place before the actual design begins. This includes wireframes, developing user flows, and identifying the goals, which usually is the main call to action. With this, the designer can build a funnel that guides traffic to the primary call to action.

The first phase of the design uses research and experience to give the website the best opportunity to maximize conversions. But still, it is a lot of educated guessing. Until the site goes live and has actual real-life users interacting on it, there is no data to show user behavior and the performances of the design.

This is where heatmaps fit into the design. By collecting user behavior data, the designer or design team can identify areas where design improvements and changes can be made. This will help optimize how users interact with the website and gain a higher conversion rate. Successful web design doesn’t just happen out of luck. Well, in a rare case, it might. But for high converting websites, there’s an ongoing testing process in the design, and a heat map is a powerful tool for testing and improving web, UI, and UX design.

How to use heat maps to improve the design

1. Clicking & Tapping

A heat map will show where the users are clicking and tapping. Are they clicking on the call to action? How are they using the menu? Are they clicking on something that makes them think its a button or link when it really isn’t?

All of these get answered from recording clicks and taps. If users aren’t clicking on the call to action enough, you can run tests by changing the call to action. It could be the placement, size, or button color. And see if that works to increase clicks. As the designer, it is my job to guide the user to where the right action is.

Are users clicking all over the place? Are they getting lost and having a frustrating experience trying to find the information they are looking for? Maybe the site map and menu system aren’t as user-friendly as we thought. And maybe other links attract the users and steers them away from the call to action. The heat map can help identify areas in the funnel that may be broken and losing the user flow. We need to get them back on track in the right direction.

2. Cursor Movements

By tracking the cursor movements, you will be able to see where most users linger. This helps to identify what is drawing their interests. For example, I had a client’s website that was in the medical field and used the word ‘Holistic’ in one of their infobox titles. This got a lot of movement. We tried it again on one of their landing pages for AdWords. And again, it got lots of movement. This showed us this is the language that grabbed the user’s attention for this particular brand. We began using it in the call to action and conversions increased!

3. Page Scrolling

By tracking page scrolling, this shows where traffic is dropping off. This is a very effective tool, and one of the first ones I started using when I began testing. I had a client that was getting 1.5% conversion rates on their e-commerce site. The page scrolling showed that 50% of their traffic was dropping off the website before they reached the products on the homepage. They weren’t getting past all of the content that came before the product grid. So what I did was move the product grid all the way to the top directly under the banner. Conversion instantly went up to 3.7%, and my client was starting to make a profit.

Scrolling recording will show where traffic is leaving, and from there, it is up to the designer to figure out why and find a solution.

When should you use heat maps

I would suggest starting right away. The more data, the better. If it is a new website and is just starting to get little traffic, then running Facebook and AdWords campaigns will help to begin collecting data.

This week’s highlight design tool – Hotjar. Getting started

When I started using heat maps, it changed how I looked at web design. I am a self-taught designer, and for the last 3 years, I have lived to design. My first year was learning the rules and principles, typography, spacing elements, etc. And just trying to make things look good.

But then, on the first project that I used a heatmap on, I was able to identify something that helped me make the right changes that resulted in a considerable conversion boost for my client, and everything changed for me. Yah, I want to make things look epic and get respect from other designers. But the most essential part of my job is helping my clients and their business. And when I can make a measurable impact on their business by delivering a website that gives them more business and sales, I get real satisfaction because someone trusted me with their business, and I came through for them.

Hotjar is my go-to for heatmap testing and is why I featured it in this week’s design tools. Now, I don’t work for Hotjar nor have an affiliate account with them. This is just the tools I use, and what has helped me help my clients and improve my designs. It is easy to set up and takes only a few minutes to connect and start collecting data. Also, there’s a free version, which is more than enough for someone starting off. There are also other tools that Hotjar provides. They have a video recording where you can view your user’s screen, funnels, and customer survey tabs.

You can get Hotjar here. I hope this article helps. I may do a tutorial later on, setting up Hotjar and how to read the heatmaps. If you think this will help, let me know in the comments.