Why would you want to record your users’ mouse movements? Mouse recordings give you a deeper view of user behavior than click-based heatmaps and scrollmaps. As well as knowing what a user clicked on, mouse recordings let you see all their movements on the page before and after. That leaves you in a better position to guide users to what you want them to do. And like each new layer of real user insight, it comes with surprises. First-time users of Crazy Egg’s heatmaps and scrollmaps often find that users are clicking on non-clickable assets like images, scrolling past CTAs…
Bitcoin is the most disruptive technology of our age. These powerful words, written by Dominic Frisby, author of “Bitcoin: the Future of Money?”, are more agreed upon and understood each passing year. And the actual creator of Bitcoin, an unknown genius who goes by the moniker Satoshi Nakamoto, is regarded as the most disruptive entrepreneur of our generation in this Virgin Entrepreneur article. Frisby continues: “This internet money system which involves neither banks nor government will do to finance what email did to the postal service and what the internet did to publishing.” These strong sentiments are actually more true…
I’m sure you’ve heard the proverb, “A chain is only as strong as its weakest link,” probably many times. Its written origin dates back to the 18th century, but I wouldn’t be surprised if it was much, much older. And though the work we do has little to do with actual chains, this proverb is every bit as relevant to us.
Remember when Azer Koçulu unpublished more than 250 of his modules from npm (Node Package Manager)?
Before we talk about visuaanalytics, let’s talk people. There are two kinds in the world.
Those who see A/B testing (and CRO by extension) as gambling and those who see it as science.
Gamblers want quick wins; they resort to best practices without bothering with research. The scientists, however, are methodical; they follow a structured process that’s designed to get results.
I won’t call one wrong and the other right, but I’m helplessly biased towards the scientists.
Unfortunately for the gamblers, statistics, too, seem to be biased towards the scientists. On average, just one out of every seven tests produce a statistically significant result. Now force contrast that with a figure of one out of every three when a structured approach was followed. To create winning A/B tests, we need a shift in the way we approach testing. Here’s a brief look at what can be called a structured approach:
Problem Statement: What metric are you trying to improve, on what pages? Establish a baseline and evaluate the possible improvement.
Research: Understand current user behavior through analytics and usability testing. How long should you run a test for statistically significant results?
Hypothesis: Based on the research, zero in on ideas that would improve your preferred conversion metric.
Test: Test the changes to see if the hypothesis is right
Repeat the process
Analytics To Discover What’s Wrong Where Along The Funnel
Let’s talk about Research. It forms the backbone of testing, giving you hard data to reveal where exactly the copy or design might be costing your business.
Let’s delve deeper. The question of ‘Where’ has two parts to it:
Which page along the funnel?
Where (and what — copy or design?) within the page?
You already know how to figure out the answer to the first part. There’s Data Analytics for that, it’s sorted.
Data analytics, such as Google analytics, helps you answer which stage along the funnel you should test. It reveals the macro view — what percentage of your visitors abandon their journey at each stage (page) of the conversion funnel, or which pages engage visitors least.
Okay, great! Now you can prioritize based on what pages need immediate attention.
Bang! It hits you that you are not entirely sure what exactly to test on the page.
But, no matter! What are instincts for anyway? Who doesn’t mind endless testing, guessing and double-guessing what might work!
Or, if you want to start finding winning A/B tests more often, shake hands with visual analytics.
With the help of heat maps, visual analytics show how users engage with a webpage. It tells you what your users see on the page, what they react to, what affects them..a poet might even say, heat maps help you read customers’ minds.
Data analytics can show what pages require attention, but it does not show what part of the page needs mending. For instance, a high bounce rate on a page (that forms a part of the conversion funnel) shows that there might be something off with the page because users are exiting the funnel from these pages.
Visual analytics sheds light on why visitors leak off of your website.
Two Types of Visual Analytics
‘Heat map’ is a way to visually represent user activity on a page. It uses highlights of varying intensities to depict the density of user activity at each point of the page; typically annotated with data. For instance, number of clicks on elements and other useful ratios like clicks/hovers. Broadly, there are two kinds of heat maps:
Eye-tracking: A form of user testing where you select a sample size of your website’s user population and track their eye-movement as they engage with the flagged webpage. It’s fairly expensive and since the test itself is done only on a sample of your population, the results might not always be reliable.
For this reason, most businesses resort to a cheaper alternative:
Mouse-tracking: Mouse-movement and activity of all visitors to a site are tracked over a period of time and represented graphically. One question that pops is how good an approximation mouse-movement is of eye-movement. Studies comparing mouse-movement and eye-movement have found that the average distance between cursor and eye gaze is 90 pixels, and 40% of those times the distance was less than 35 pixels.
Mouse-tracking heat maps are more popular because it’s cheaper, and does the trick well
How Do Heat Maps Help In Creating Winning A/B Tests
Depending on what you are trying to discover, you can employ different heat map tools. Here we look at the most popular of such heat maps and how they help in identifying barriers to conversion.
It’s the closest alternative to an eye-tracking test. Mouse-movement tracking tools track mouse-movement of all your users and then represent the data visually over the page. It reveals patterns behind how users read and navigate the page. Here’s a look at how the mouse map looks for VWO Features Page, as generated by Navilytics.
Most mouse-movement maps also give analytic data like how many visitors hover over a particular area of the page, which is an indicator of the attention such page-areas command.
How Mouse-Movement Maps Help
Mouse-movement maps reveal how users are reading content on your page. What do visitors who convert do differently from the visitors who don’t? Such knowledge can validate, even spawn, your A/B test hypotheses. For instance, for an eCommerce product page it could help answer questions like:
Are guarantee badges getting enough attention? Should they be moved closer to the add-to-cart and/or checkout button?
Are users failing to see the ‘free delivery’ promise, with little to no activity in that area?
Do visitors hover over the product recommendation carousel?
2. Scroll Map
Scroll maps help you understand to what point of a page users scroll and where they abandon the page.
How Scroll Maps Help
Depending on the scroll behavior of users, you can adjust the length of your webpages for maximum effectiveness. For instance, the Nielsen Norman Group have continuously found that 80% of visitors’ attention is spent above the fold.
Does that mean your conversions will suffer with a long page? No, it’s best to test. Text-intensive pages like product pages are often lengthy. By analyzing the scroll-map of such pages, you can answer questions like:
Are visitors missing your painfully designed CTA button that is below two folds?
At what depth of the page is most drop-offs happening? Is the content in that part of the page relevant? Should it be rewritten or removed?
Where exactly does the page fold lie? Should other critical content be moved up the page to get more attention?
Forms are the sanctum sanctorum of webpages. It’s where a user becomes a prospect, and later, a paid customer. Your landing page content might be the best in the business, but unless your form is just as good and commands attention and inspires trust, conversions will suffer.
How Form Testing Helps
Form tester tools help understand how users interact with the form — where on the form they spend the most time hovering, where they click and how they engage with it. Think mouse-movement maps, but for a form.
Perhaps, users are hovering over form labels longer than you expect: this might indicate that the label text is difficult to read.
Are users spending longer than expected on the form fields? This might indicate poor contrast between the field text and field background color.
It’s not just these minor tweaks, form testing can help uncover major issues with form layouts as well. Here are some pointers on optimizing form layouts from Baymard.
5. Visitor Recording
While heat maps represent recorded data visually, visitor recordings capture actual videos showing a user’s interaction on a page.
Visitor recording helps you virtually see over the shoulder of users as they interact with your webpage. It tells you where exactly on the page a user faces issues and what they are most attracted towards, so you can see the visual hierarchy as it seems to a visitor.
6 Heat Map Tools To Help Ease Your Decision Process
Surveys and other usability tools aside, Usabilitytools has a neat Click Tracking tool that records clicks on page, clicks on elements and hovers (something they call the ‘attention map’) on a page. You can get a price quote by filling up a form on the website.
Mouseflow also has the entire suite of heat map tools with an offering specifically for eCommerce stores where it’s important to capture visitor interaction with dynamic page elements, too. They offer a freemium plan and you can start a free plan for upto 100 recorded sessions/month.
Navilytics packs the whole punch and more, with features like Area Stats that lets you select specific areas of the page and receive mouse interaction data and the ability to do data segmentation. Navilytics, too, offers a free plan for upto 50 recorded sessions.
Clicktale, largely an enterprise solution. probably the most well-known of heat map tools. The spread is not limited to heat map tools; on offer are specialized tools to help improve site efficiency and conversion funnels. They recommend signing up for a free demo only if there is a minimum of 500,000 page views per month across your website.
Okay, I’ll blow our trumpet now.
VWO too, includes a heat map functionality that provides both mouse maps and click maps. The functionality comes bundled along with any of the testing plans that we have.
Ptengine is another product that offers all typical heat map functionalities and some additional features like multi-device monitoring. They offer a free plan too.
Have we missed something? What other ways are you using visual analytics? Be sure to let us know in the comments section below.
PS. If you liked this piece, you will probably love our other posts. Subscribe to the blog to get research-driven original content delivered right to your inbox, fresh and warm.
Responsive design is about more than just layout; it’s about designing for the Web, which means, mostly, for people with browsers. And that’s just about everything we know about the people who visit our websites: they are probably using a browser. All the rest we just don’t know.
Up until not so long ago, we used to base our designs on some rather general assumptions about screen size and input type.
Have you ever wanted your users to click a link but didn’t know how to get them to act? When some designers run into this problem, they’re tempted to use the words “Click here” on their links.
Before giving in to the temptation, you should know how using these words on a link can affect how users experience your interface. Not to mention that having proper link titles is a major accessibility requirement since the term ‘click’ is irrelevant to many assistive technologies and isn’t descriptive enough for screen readers.
When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.
In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques.
I spend a lot of time buying and testing iPad apps for kids. To be more specific, I lovingly do this for a certain two-year-old girl who is currently on a very successful #OccupyiPad mission in my house. Through extensive observational research, I’ve discovered what works and doesn’t work for my daughter, so I’m going to shamelessly generalize my findings to all children and propose four essential guidelines for developers who work on iPad apps for children.