Click vs Cursor Heat Maps
When you want to deliver an outstanding user experience, you have to know your users needs and preferences. A common approach in web is to use some analytic service, such as Google Analytics, to find out which screens have the most views. However, this does not help you much when it comes to usability and UI design. You need more fine grained information. In such cases click and cursor heat maps have been proven to be extremely powerful tools to understand the user behavior.
Click heat maps:
Click heat maps visualize where the users have clicked. The more the users click on a certain area, the hotter (more reddish) the area gets. Thus, the elements in the area are likely important for the user.
When you review click heat maps, you should see them in the context of your uses cases. Before you created the interface, you identified and prioritized user tasks and designed the interface accordingly. The primary elements should be easy to find and you expect them to be used a lot.
If the primary elements are hot your hypothesis was most likely right and the users behave as you expected. If the primary elements are cold, this usually indicates a problem. The users might not be able to find the elements or do not want to use the function. In the example below you can see that the user almost never click on the primary “Sign Up” button.
Unexpected hot areas indicate that the users behave differently than you thought. In the example above, the users were more interested in the pricing than in signing up. Unexpected hotspots can also be a sign of usability issues. The form below has for example a hotspot on the label (“I understood …” ) next to the checkbox. The users assumed that clicking the label would also trigger the checkbox, although it did not.
Cursor heat maps:
Cursor heat maps work different than click heat maps. The longer the cursor is over a certain screen estate, the hotter it gets. Research shows some correlation between the cursor movement and eye gaze. This means long hover times over a specific area can indicate strong user interest, but it can also mean that the user simply didn’t move the mouse. Let’s take a look at the following cursor heat map.
There are two big hotspots in the image, one on the left and one over the button in the dialog. The first hotspot is an example where the users did not move the mouse. The page was loaded and the mouse stayed for some time on the same position as it was on the screen before. The second hot spot indicates a different behavior. The users moved the mouse already over the button and waited a little before they clicked it.
More interesting are the blue and greenish areas over the text. They are the result of a “reading pattern” that one can often observe. While reading, the users position the mouse near their eye gaze to support them reading (Here is a screen recording).
Click vs. Cursor heat maps:
Usually it makes sense to compare the click and cursor heat maps as it might give you some interesting insights. In the following example the users were asked to rate the cuteness of several cats and to select one as their favorite. The list of cats extended roughly four screen heights, so the users were forced to scroll down to see all cats (You can find the application here at Quant-UX).
The click heat map shows that the star ratings are very hot, in contrast to the favorite buttons. This pattern is not surprising given the user tasks. But looking at the cursor heat map, you can see some interesting differences between the two elements.
First the star ratings are really hot again. This means the users needed some time to perform the rating, although they would just need one fast click and could move on. Instead they took some time to make the decision (See the screen recording of a typical rating interaction). Also you can see that there is no typical reading pattern above the texts. Only the left parts of the texts were hovered, exactly on the same vertical axis of the star ratings. This pattern was created because the users had to scroll down, but they didn’t move the mouse. The lack of the reading patterns gives us a clue that the texts were mostly ignored, and instead the rating seems to be based on the images.
Conclusions:
Click and cursor heat maps are well established methods to analyse the user interaction. Click heat maps are quite easy to understand and can confirm your idea about primary and secondary tasks. Also, they help you to spot unexpected behavior and other usability issues. Interpreting cursor heat maps is unfortunately not so straightforward. There is some correlation between eye gaze and cursor movement. If you can spot the typical reading pattern, this indicates that the users have actually read a longer text, whereas the lack does not necessarily imply that the users ignored the text. However, as the cursor heat maps measure time, they give us a very good indication how long the users interacted with certain elements and where they might had problems.
—
All experiments and screenshots were created with http://www.quant-ux.com
