{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/pages/heatmaps/heat-map-software.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["Banner","styled","div","media","mobile","title","desc","style","className","signUp","secondary","center","sourceID","defaultProps","undefined","withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","heatmap","node","childImageSharp","alt","ganalytics","mixpanel","goptimize","survicate","lc","src","arrow","module","exports","list","res","el","name"],"mappings":"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","file":"component---src-pages-heatmaps-heat-map-software-js-2882eba19230f2a274c0.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Banner = styled.div`\n width: 100%;\n padding: 64px 73px;\n text-align: center;\n background: #f8f8f8;\n border-radius: 4px;\n margin: 80px 0;\n ${media.mobile} {\n padding: 24px 16px;\n margin: 40px 0;\n }\n & .banner-title {\n font-size: 36px;\n line-height: 45px;\n margin-bottom: 24px;\n margin-top: 0;\n font-weight: 800;\n }\n & p {\n margin-bottom: 40px;\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from 'components/ui/button';\nimport * as Styled from './styled';\n\nconst Banner = ({ title, desc, style }) => {\n return (\n {desc || 'Test all LiveSession features for 14 days, no credit card required.'}{title || `Improve usability testing with LiveSession`}
\n
\n One of the distinguishing characteristics of the best heatmap software is the variety of\n tools they integrate with. Below are a few types you should particularly show interest in.\n
\n\n Simply said, session recording and{' '}\n \n heatmap\n {' '}\n software are like a match made in heaven, as they complement each other ideally. While heat\n maps give you a bird’s eye view of all user actions within a given page, session recording\n software lets you dive in and replay each user activity.{' '}\n
\n\n\n To give you a sense of how it works, let’s consider a scenario for an eCommerce store. Your\n heatmap indicates that a lot of users click on the “proceed to checkout” button, but only 5%\n of them finalized the purchase within the last week. If your{' '}\n \n heatmap analysis\n {' '}\n rules out any broken buttons or rage clicks, it’s time for further investigation. After\n watching a couple of recordings, you notice an error – the items keep disappearing from the\n cart. After trying two or three times, most users simply lose motivation and give up.\n
\n\n\n We encourage you to try out{' '}\n \n LiveSession\n \n , as it offers both session replay and heat map software. The best part is you get to see a\n 3-in-1 view, i.e., as you watch the recording of a user’s session, you also see a\n semi-transparent overlay of the areas with the overall highest number of activities and\n clicks on the site.\n
\n\n\n If you’d like to see this in the works, you can try LiveSession on a{' '}\n \n free trial\n \n .\n
\n\n Website analytics tools are essential if you want to make the most of your heat maps. How\n so? They store key website stats such as each page’s bounce and conversion rate, CTR, and\n session duration. This means they help you decide which pages – other than your homepage and\n pricing – would make good candidates for a heat map.\n
\n\n\n In your website analytics platform, you might, for instance, find an important landing page\n that has very few signups or notice that your entire blog has exceptionally high bounce\n rates. By setting up a heat map on them, you might be able to notice whether your CTAs are\n getting notices and clicks, or how far down the page readers scroll before dropping from it.\n
\n\n Source:{' '}\n \n Content Marketing Institute\n \n
\n\n\n As far as website analytics are concerned, we recommend going for two tools from the\n G-Suite, i.e., Google Analytics and Google Search Console. While the first gives you access\n to both general and in-depth website and audience insights, the latter focuses on your\n site’s traffic, SEO ranks, and performance.{' '}\n
\n\n\n As your business, customer base, and website complexity grow, you might be interested in\n implementing customer analytics, which we discuss next.\n
\n\n Customer analytics tools give you a more sophisticated view of your client base. By diving\n deep into your customers’ on-site behavior, psychographics, and purchasing history (among\n many other data), they help you better tailor your offer, increase on-site engagement, and\n boost conversions.\n
\n\n We recommend looking into two customer analytics leaders –{' '}\n \n Mixpanel\n {' '}\n and{' '}\n \n Segment\n \n .{' '}\n
\n\n\n The first tool is famous for its ‘\n \n innovation loop\n \n ’ functionality – it collects data from various tools, notices emerging trends, and helps\n you find out the reasons behind new behaviors so that you can use it to your business’s\n benefit. Segment, similarly to Mixpanel, collects data from various sources and can be used\n by your product team to make data-informed decisions on your product and UX.\n
\n\n {' '}\n Source:{' '}\n \n Mixpanel\n \n
\n\n\n Which one is a better choice for you depends on your specific needs; nevertheless,\n regardless of your choice, you’re e able to integrate both of them with LiveSession for an\n all-in-one-tool customer analytics experience.\n
\n\n A/B testing tools are yet another type of software that works perfectly with heat maps. They\n let you trial two versions of your site and decide which one drives better results. You can\n use this type of software both when you’re putting out a new page and when you’re looking to\n fix a current one.\n
\n\n\n Let’s assume that a heat map on a landing page shows that it’s getting very few CTA clicks.{' '}\n
\n\n\n Your product team draws up a hypothesis, for instance, that adding a fixed CTA banner to the\n top of the page will increase conversion by 15%. You set up heatmaps on two versions of the\n site – version ‘A’, which is the one you already have, and version ‘B’ – with the new\n concept. You can compare the results from both versions and either confirm or overthrow your\n hypothesis. Pretty neat, right?\n
\n\n While there are a number of A/B testing tools on the market, we recommend going with{' '}\n \n Google Optimize\n {' '}\n – not only does it integrate with your other tools within the G-Suite, but also the majority\n of heat map and session recording software, including LiveSession.\n
\n\n {' '}\n Source:{' '}\n \n Google\n \n
\n\n While heatmaps are a great source of insights on what is happening on your site, you might\n need to hear directly from users as to why they’re interacting with it in a certain way.\n Here’s where website feedback tools such as survey software come into play.\n
\n\n Surveying your users will give you both quantitative and qualitative data to supplement your\n heat map analysis. For instance, you can ask your site visitors why they won’t scroll\n further down your page, or why they ignore the CTA.\n
\n\n\n Set up a survey on the exact pages you’re using your heatmaps on. For pages where you’ve\n noticed an issue, you can ask a very specific question based on the user’s on-site activity.\n Alternatively, on crucial pages such as pricing or your homepage, you can always keep a\n general survey running, asking people whether they’d found what they were looking for.\n
\n\n Some customer communication or CRM tools, such as Intercom and Hubspot, offer built-in\n surveys. However, bear in mind that they have lower customizability and follow-up logic than\n dedicated survey solutions. If you’d like to add custom questions or create complex\n follow-up question paths, we recommend using a tool like{' '}\n \n Survicate\n \n , which integrates with LiveSession.\n
\n\n Source:{' '}\n \n Survicate\n \n
\n\n\n Last, but not least, you should use heat maps with customer support software. While they’re\n not, per se, related to optimizing the on-site experience, they certainly influence the\n customer experience. Chances are, you’ll find the reflection of the issues users report in\n your heatmap data in your conversations. For instance, if you were wondering why many people\n click on an image, by checking your customer conversations, you might learn that a number of\n users expect them to be clickable and take them to another webpage.\n
\n\n That said, by integrating CS and heat map software, you’ll also be able to link heat maps to\n specific customer query tickets. As a result, your support team will be given more context\n on the issues and user behavior on each page.\n
\n\n There are a number of great tools out there – two which we can wholeheartedly recommend are{' '}\n \n LiveChat\n {' '}\n or{' '}\n \n HelpScout\n \n . Both platforms allow you to integrate customer communication from various touchpoints into\n one panel. That said, LiveChat also gives you the ability to set up a chatbot, which can\n relieve your support teams of answering recurring questions.\n
\n\n Heatmaps are a great source of user intent and website usability insights. Among others,\n they let you conduct an audit of your site’s UX and better understand user activity. That\n said, they deliver the best results if used with a few other tools.\n
\n\n\n First and foremost, the best heatmap software comes with other usability testing\n functionalities, such as user session recordings. Here’s where LiveSession might come\n especially in handy, as not only does it let you see the click and most noticed parts of the\n site, but also replay each user’s on-site behavior.\n
\n\n\n Secondly, it’s worth using your heatmap solution with software such as website and customer\n analytics, A/B testing tools, surveys, and live chat. By cross-referencing your heatmaps\n findings with data from these platforms, you’ll be able to fill any information gaps and ace\n your website usability and CX.\n
\n\n\n To give you a sense of all the types of tools you can integrate with heatmaps, refer to our{' '}\n \n Integrations\n {' '}\n catalog.\n
\nChapter 8
\n11 experts share the UX improvements they achieved with heat maps
\n