{"id":6625,"date":"2015-06-10T20:10:13","date_gmt":"2015-06-11T03:10:13","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6625"},"modified":"2024-09-09T19:47:55","modified_gmt":"2024-09-10T02:47:55","slug":"understanding-simple-heat-maps-smarter-ui-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/understanding-simple-heat-maps-smarter-ui-design\/","title":{"rendered":"Understanding Simple Heat Maps for Smarter UI Design"},"content":{"rendered":"

Traditional analytics provide you with an overall look at how your website or mobile application performs. Unfortunately, they fail to explain why<\/i> certain actions are taking place. <\/span><\/p>\n

In this post, we\u2019ll explain a more visual approach to analytics for better design decisions. <\/span><\/p>\n

<\/p>\n

Most websites rely on Google Analytics<\/span><\/a>. But do they use it effectively? Well, take a guess.<\/span><\/p>\n

Let\u2019s face it \u2013 people do not<\/b> understand<\/b> analytics. Most web design decisions are still based on a gut feeling or on the wrong data.<\/span><\/p>\n

The traditional methods show you the percentage of people who clicked that thing<\/i> and got to that page<\/i>, but they don\u2019t tell you why they did or did not do it<\/b>. If you knew the \u201cwhy\u201d behind the \u201chow\u201d, you could\u00a0 <\/span>revise your interface for better usability (and therefore conversions). <\/span><\/p>\n

Visual (In-page) analytics are different: <\/i>They differ from traditional web analytics as they focus on users\u2019 movement within <\/i>the page and not between them. These tools are generally used to understand behavior for optimizing a website\u2019s usability and conversion.<\/span><\/p>\n

\"Screen<\/a><\/p>\n

Visual analytics focus on what happens within the pages themselves.\u00a0<\/em><\/p>\n

The users of the tools can analyze the data successfully, as it is visualized in an intuitive and clear way. <\/span><\/p>\n

So what\u2019s the benefit? ? Faster and more accurate decision-making process.<\/b><\/span><\/p>\n

Of Clicks and Men<\/b><\/h2>\n

As described in the Guide to Usability Testing<\/span><\/a>, click tracking heatmaps are an incredibly useful tool when it comes to collecting data about your customers or visitors.<\/span><\/p>\n

They represent all clicks in the form of a heatmap, helping you see areas that receive most attention. With that information, you can judge which areas are attractive for your visitors\u2019 \u201cmouse\u201d.<\/span><\/p>\n

The biggest advantage is that heatmap studies are very easy study to conduct, and they do not require a lot of investment either in time or in money. <\/span><\/p>\n

\"Screen<\/a><\/p>\n

Source: Conversion Scientist<\/em><\/p>\n

Content Square presents a great case study<\/span><\/a>.\u00a0<\/span><\/p>\n

North Face launched an online Gift Guide to help shoppers in the gift-giving season. As that’s a major source of digital revenue they needed to carefully study whether some UX changes could be done to ensure high revenue from this project. After the evaluation, they found out that moving the CTAs above the fold increased their exposure by 50%!\u00a0\u00a0<\/span><\/p>\n

Another case study<\/span><\/a> on conversion optimization published by UsabilityTools<\/a> shows a perfect example of what you can gain from uncovering \u2018the why\u2019. <\/span><\/p>\n

OptimalEnergy, an online price comparison website, wanted to learn more about the conversion funnel on their website. Their website featured a slider with images, but they none of them were clickable. Data gathered with the<\/b> Click Tracking<\/b> tool<\/b> and heatmaps<\/b> revealed that 24% of people were actually trying to click these static images. Upon further inspection, they learned that some of the form elements made 81% of users abandon the site.<\/span><\/p>\n

\"Screen<\/a><\/p>\n

Heat map analysis revealed that 24 % of the clicks were going to wrong places.\u00a0<\/em><\/p>\n

OptimalEnergy made the images clickable and removed the troublesome form elements immediately. As a result, their conversions increased 123%.\u00a0 <\/span><\/span>What can you learn from it?<\/span><\/p>\n

If elements on a webpage do not<\/b> meet your and your client\u2019s expectations, then a problem arises. As it was shown before, heatmaps are an incredible way of portraying areas of interest that attract your user\u2019s attention. Every element on a website has its own purpose, and it is crucial that they do their job properly.<\/span><\/p>\n

However, you can also determine which parts of your web page are the most successful, and you can draw conclusions about your future web design decisions.<\/span><\/p>\n

1.Learn where people click <\/b><\/h3>\n

Heatmaps mostly show the clicks, so you can gauge effectiveness of CTAs (or even if people click on your logo). Most heatmap tools allow you to switch to a mode that only shows the most popular areas, which helps you quickly see what users actually care about.\u00a0<\/span><\/p>\n

\"Screen<\/p>\n

The whiter areas are \u2018the most visible\u2019 spots for your users\u2019 clicks.<\/i><\/p>\n

2.\u00a0Learn how they react<\/b><\/h3>\n

Sometimes you don\u2019t need a click to achieve your purpose \u2013 if your client reads information that you have an ongoing SALE and then proceeds to shop, then the text achieved your goal. <\/span><\/p>\n

But how do you check what people are actually thinking<\/b>? By looking at where cursors stopped, we can better deduce which areas were most interesting. Most heatmapping tools come with a \u201chover maps\u201d feature that show where the curious cursor stopped.<\/span><\/p>\n

\"Screen<\/a><\/p>\n

The title of the article and the white space below attracted visitors\u2019 hovers.<\/i><\/p>\n

3. See how they roll the scroll<\/b><\/h3>\n

The mouse isn\u2019t built of buttons only \u2013 the scroll wheel (and the bar for traditionalists<\/i>) is also a crucial part of the browsing experience. <\/span><\/p>\n

Certain websites began to experiment with long scrolls, but sometimes information gets hidden in the lower parts of a page. A scroll map shows you how far down users actually browse, which gives you a more accurate idea of engagement. <\/span><\/p>\n

If you find that people aren\u2019t clicking on important content below the fold, you might want to move it higher up (or revise your layout to shorten the scroll entirely).<\/span><\/p>\n

\"Screen<\/a><\/p>\n

The warmest colours show the areas that receive the most attention.<\/i><\/p>\n

4.\u00a0Filter the best<\/b><\/h3>\n

Heatmaps can be filtered as well,<\/b> depending on the date or source of traffic. User behavior can vary quite a bit based just on these two factors alone. <\/span><\/p>\n

For example, imagine a situation that you post an article on another site about \u201cHow Cookies and Our Tools Can Increase Your Conversion Rates.\u201d People coming from that article to your website will start clicking and browsing with the idea of using your tools and cookies together \u2013 segmenting these users will show what areas were interesting only <\/i>to them. If you find that particular audience converted very well, it might be worth examining the heatmap to see areas where you can better tailor your site for them.\u00a0 \u00a0<\/span><\/span><\/p>\n

\"Screen<\/a><\/p>\n

Photo credit: CrazyEgg<\/a> via AboutAnalytics<\/p>\n

5. Add numbers to analysis<\/b><\/span><\/h3>\n

Let\u2019s not devote ourselves to visuals only, though \u2013 statistics derived from clicks and movements are an extremely valuable source of data as well.<\/span><\/p>\n

With stats, you can check how many clicks were placed per view. A large amount of clicks might hint at high engagement. However, a high number of clicks may also signify that people struggle with the website, ( since they cannot get what they expect from a click).<\/span><\/p>\n

You can filter by clicks per view, then examine the behavior of that segment. If lots of clicks are landing on static areas, that\u2019s a red flag that you need to revise your interaction design. If those clicks are landing on prime content areas, then the results support your design decisions.\u00a0<\/span><\/p>\n

Helpful tools for heatmaps & usability testing<\/h2>\n

You can find many tools that allow you to gather all the information mentioned in the article:<\/span><\/p>\n

\u25cf Gemius Heatmap<\/span><\/a><\/span> \u2013 Heatmaps in their easiest form. Very basic and perfect for not demanding clients.<\/span><\/p>\n

\u25cf Crazyegg<\/span><\/a><\/span> \u2013 A well-known classic present on the market for some time (created by a cofounder of KISSMetrics).<\/span><\/p>\n

\u25cf UsabilityTools<\/span><\/a><\/span> \u2013 Offers a suite of tools supporting card sorting, web testing, click testing, and user surveys.<\/span><\/p>\n

\u25cf\u00a0 <\/span>Digital360<\/span><\/a><\/span> \u2013 Good for optimizing conversion.<\/span><\/p>\n

Conclusion<\/b><\/span><\/h2>\n

Just because analytics provide you with some additional data about your site doesn\u2019t mean it\u2019s actually <\/i>valuable to your design. You want to find the errors and holes within your website and fill them with additional functionality for your users and customers. <\/span><\/p>\n

To wrap up, by using visual analytics for your design choices you can:<\/span><\/p>\n