Not every web page stays the same, all the time; some pages are designed to change substantially during a single user interaction.
So can a heatmap actually tell you anything meaningful about such pages?
The answer is yes: the smarter heatmap tools like SessionCam can handle these more complex pages.
Let’s look at a couple of ways they do this.
Some webpages use expand/collapse (also called show/hide) to reveal additional content to the user.
Let’s imagine that you have an FAQ page.
To make the full content seem less overwhelming, and to make it faster for users to spot their own question, you’ve chosen to display only a list of questions and all of the answers are hidden behind a click.
When the user clicks on a particular question, the answer is revealed just underneath, which has the effect of pushing the rest of the questions lower down the page.
But when you generate a heatmap, how can you know what part of the page the hot areas relate to?
What question (indeed, if any) did the user expand?
Which page states do clicks on a heatmap refer to?
A good heatmap tool will let you set up different ‘states’ for each page. You can define a different state for each expand/collapse, and generate a separate heatmap for every state.
To understand what a single-page application is, let’s take the example of a checkout funnel.
Having chosen their purchases, the user will create an account (or sign in), provide delivery details, enter payment information, and possibly even go through a few other steps, as well.
Often, these processes are managed by separate webpages. But what if they’re all done on a single page?
CSS overlays let you consolidate these multiple steps within a single webpage, making the process much more fluid for the user (ideal on mobile devices, when patience and attention span may be in shorter supply). But what can a heatmap tell you if the page has been designed to change dramatically during every session?
The way around this is to use your heatmapping tool – as long as you’re using one like SessionCam that supports this function – to create a virtual page for each overlay version of the page.
These will then show up as separate URLs, so you can see precisely how users interact with each overlay