{"version":3,"sources":["webpack:///./src/pages/heatmaps/heatmap-analysis.js","webpack:///./src/img/ui/arrow_white.svg","webpack:///./src/helpers/transformImages.js"],"names":["withUsabilityTestingTemplate","edges","useStaticQuery","allFile","images","transformImages","href","target","rel","fluid","ganalytics","node","childImageSharp","alt","title","width","height","autoPlay","muted","loop","src","type","scrollmap","eye","woocommerce","className","arrow","module","exports","list","res","el","name"],"mappings":"+FAAA,0HAsQeA,uBA9PS,WACtB,IACaC,EACTC,yBAAe,cADjBC,QAAWF,MAsBPG,EAASC,YAAgBJ,GAC/B,OACE,oCACE,4EACA,sHACA,0FACA,6QAG2D,IACzD,kBAAC,IAAD,CAAMK,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,WAEQ,IANV,wQAWA,kBAAC,IAAD,CACEC,MAAOL,EAAOM,WAAWC,KAAKC,gBAAgBH,MAC9CI,IAAI,yFACJC,MAAM,iDAER,uDACA,uOAKA,mFAEA,uDAC4B,IAC1B,kBAAC,IAAD,CAAMR,KAAK,gCAAgCC,OAAO,SAASC,IAAI,uBAA/D,mBAEQ,IAJV,uWAQ8F,KAE9F,sKAIA,sEACA,+EACA,4BACE,4BACE,wFADF,6GAIA,4BACE,4EADF,gSAMA,4BACE,oEADF,mRAOF,iLAIA,2BAAOO,MAAM,OAAOC,OAAO,OAAOC,UAAQ,EAACC,OAAK,EAACC,MAAI,GACnD,4BACEC,IAAI,2GACJC,KAAK,gBAGT,uFAEA,+OAG+B,KAG/B,sTAIc,KAEd,kBAAC,IAAD,CACEZ,MAAOL,EAAOkB,UAAUX,KAAKC,gBAAgBH,MAC7CI,IAAI,kDACJC,MAAM,2DAER,8PAGiD,KAEjD,yGAEA,4TAIe,KAGf,wXAIwE,KAExE,kBAAC,IAAD,CACEL,MAAOL,EAAOmB,IAAIZ,KAAKC,gBAAgBH,MACvCI,IAAI,yEACJC,MAAM,8EAGR,sKAIA,oGAEA,0QAGqD,KAGrD,2JAIA,kDACA,qqBAUA,kBAAC,IAAD,CACEL,MAAOL,EAAOoB,YAAYb,KAAKC,gBAAgBH,MAC/CI,IAAI,cACJC,MAAM,uBAGR,qCACU,IACR,kBAAC,IAAD,CACER,KAAK,2DACLC,OAAO,SACPC,IAAI,gCAHN,gBAQF,6EACA,2BACG,IADH,iQAIwE,KAGxE,gVAIqC,KAGrC,qEAEA,2MAEqF,IACnF,kBAAC,IAAD,CAAMF,KAAK,sBAAsBC,OAAO,SAASC,IAAI,uBAArD,qBAEQ,IALV,yaAYA,uEACA,oHACA,4BACE,2SAKA,mHACuF,KAEvF,gHACA,iIAKF,kRAGwE,IACtE,kBAAC,IAAD,CAAMF,KAAK,IAAIC,OAAO,SAASC,IAAI,uBAAnC,eAEQ,IANV,2BAO2B,KAE3B,yBAAKiB,UAAU,gBACb,kBAAC,IAAD,CAAMnB,KAAK,gCACT,6BACE,wCACA,kFAEF,yBAAKc,IAAKM,IAAOb,IAAI,QAAQC,MAAM,uB,mBC/P7Ca,EAAOC,QAAU,sT,u4BCEV,IAAMvB,EAAkB,SAACwB,GAE9B,IADA,IACA,EADMC,EAAM,GACZ,IAAiBD,KAAjB,aAAuB,CAAC,IAAbE,EAAY,QACrBD,EAAIC,EAAGpB,KAAKqB,MAAQD,EAEtB,OAAOD","file":"component---src-pages-heatmaps-heatmap-analysis-js-6ce3ad8ce5245adfb291.js","sourcesContent":["import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport { transformImages } from 'helpers/transformImages';\nimport withUsabilityTestingTemplate from 'hoc/content-cluster';\nimport Link from 'components/ui/link';\nimport Img from 'gatsby-image';\nimport arrow from 'img/ui/arrow_white.svg';\n\nconst HeatmapAnalysis = () => {\n const {\n allFile: { edges },\n } = useStaticQuery(graphql`\n query HeatmapAnalysis {\n allFile(\n filter: {\n extension: { regex: \"/(jpg)|(jpeg)|(png)/\" }\n relativeDirectory: { eq: \"heatmaps/heatmap-analysis\" }\n }\n ) {\n edges {\n node {\n name\n childImageSharp {\n fluid(quality: 95) {\n ...GatsbyImageSharpFluid_withWebp\n }\n }\n }\n }\n }\n }\n `);\n const images = transformImages(edges);\n return (\n <>\n

Heatmap analytics – best practices explained

\n

Below, we share a few tips which will help you make the most of your heatmap analytics.

\n

Identify the pages that you’ll run the heatmap analysis on

\n

\n You might be wondering – is there such a thing as a ‘Google Analytics heat map’? Not quite!\n However, Google Analytics is a great starting point in your heatmap endeavors, as it helps\n you decide which webpages it would be worth setting up a{' '}\n \n heatmap\n {' '}\n on. Among others, these can be pages that have a disturbingly low conversion rate or a\n bounce rate well above your industry standard. The general rule of thumb is to focus on\n pages with sufficient traffic to ensure that your analysis is statistically relevant.\n

\n \n

How to read a heat map?

\n

\n Assuming that you’ve set up a heat map, you may now be wondering how to read it. Here’s an\n explanation of the general rules and those relevant to specific heatmap types, such as click\n and scroll maps.\n

\n

Understanding heatmap colors and what they indicate

\n\n

\n In the most simple terms,{' '}\n \n heat map colors\n {' '}\n indicate areas on your webpage which are “hot” (i.e., get a lot of engagement, such as\n clicks, looks, or scrolls) and those which are “cold” (get the fewest notices or interaction\n from site visitors). The “hotter” the area, the warmer the color – think of yellows,\n oranges, and reds (with the latter colors pointing to the most noticed parts of your page).{' '}\n

\n

\n Respectively, areas with few interactions will be marked in green and blue (to remember,\n it’s good to think of blue as being ice-cold).\n

\n

Notice where people click (click map)

\n

Using a click map can help you do the following:

\n \n

\n Here’s where a usability tool like LiveSession will come to the rescue, allowing you to\n easily spot customer frustration in your heatmap analysis.\n

\n \n

Learn how far down the page people scroll (scroll map)

\n\n

\n Another benefit of using heatmap analytics is assessing the relevance of your content. To\n learn if people lose interest you can turn to scroll maps – they’ll help you check how far\n down the page people scroll.{' '}\n

\n\n

\n It’s worth bearing in mind that just because someone stops scrolling at half the page,\n doesn’t mean they aren’t interested in your content or your offer – it’s just one of the\n possible scenarios. It might also indicate they got answers to their questions and are ready\n to convert.{' '}\n

\n \n

\n To find the reason why people stopped scrolling, you should ask additional questions, like\n did they click on any CTA’s? To get a detailed overview of how visitors behave on your\n website you should turn to session recordings.{' '}\n

\n

Noticing which parts of your page users ignore (eye-tracking & click map)

\n\n

\n One of the ways of creating a good user experience for site visitors is paying attention to\n the elements that are frequently ignored. You must find the reason behind any unexpected\n behavior – are there any areas that get zero clicks, or parts of the page where people don’t\n look at all?{' '}\n

\n\n

\n Eye-tracking is also handy in spotting eye fixation – it might tell you where to place your\n CTAs, as it shows what elements people spend the most time looking at. It can also indicate\n the same for written content – for example, something you wrote on the page is too difficult\n to understand, which is why people spend too much time looking at it.{' '}\n

\n \n\n

\n Bear in mind that eye-tracking is, however, a method that requires a special device, which\n means it’s mostly used in a lab environment.\n

\n

Avoiding heat map bias – where and how to cross-refer your findings?

\n\n

\n Now that you know how to read a heatmap, it’s worth addressing the issue of heatmap bias. As\n you can see from the above section, heat maps will tell you a lot about what is happening on\n your site. However, it will not always reveal why.{' '}\n

\n\n

\n For this reason, you should supplement your heatmap analysis findings with data from other\n tools. We particularly recommend:\n

\n

Session recordings

\n

\n Unlike heatmaps which show you the bulk of interactions, session recordings allow you to\n watch recordings of specific users. Let’s assume a scenario where you notice on your heatmap\n that your “add to cart” button gets a high volume of clicks, but it doesn’t translate to the\n number of people who proceed into the purchase finalization user path. To find the reason,\n you might decide to turn to session recordings. After watching, say, 10 videos of various\n user sessions you notice that an error is to blame – people click on the “add to cart”\n element on their wishlist page, but the button doesn’t work, so users simply decide to leave\n your site.\n

\n \n\n

\n Source:{' '}\n \n WooCommerce\n \n

\n

Customer surveys – qualitative & quantitative

\n

\n {' '}\n As mentioned earlier, while heatmaps can help you spot problematic pages or areas, it might\n be difficult to draw any conclusions solely based on heatmap data. If you want to understand\n the ‘why’ behind user behavior, then we recommend turning to surveys.{' '}\n

\n\n

\n You can include a survey directly on your page, asking ‘Did you find everything you were\n looking for’ or ‘Could you please tell us what we can improve?’. Alternatively, you could\n send out a survey to your users asking them a few questions related to the problematic areas\n you have identified with heatmaps.{' '}\n

\n\n

Usability testing sessions with users

\n\n

\n Sometimes, nailing down the reasons behind UX or conversion-related issues requires closer\n user investigation than any online software can give. Here’s where you can turn to{' '}\n \n usability testing\n {' '}\n sessions, which let you ask a group of people to complete a task on your website (for\n example, finalizing a purchase or finding a category in the site menu). While they do so,\n you can either watch them live or even ask follow-up questions to understand what they’re\n doing. This creates a great opportunity for what many other user-related tools lack, i.e.,\n the chance to note down a decent volume of qualitative feedback.\n

\n

Heatmap analysis – concluding thoughts

\n

In order to make the most of your heatmap analytics, we recommend the following tips:

\n
    \n
  • \n take a look into Google Analytics to identify the pages with decent traffic, select those\n that have low conversion or those that perform well (understanding why those pages are\n successful will help you improve your poorly performing ones) and set up a heatmap on them\n
  • \n
  • \n pay attention to different colors – it’s worth placing your CTA’s in the ‘hot spots’{' '}\n
  • \n
  • notice which areas get the most clicks and how far down the page visitors scroll
  • \n
  • \n don’t ignore elements that get a lot of clicks, as they might be considered rage or error\n clicks\n
  • \n
\n

\n Remember that in order to avoid heatmap bias, it’s worth cross-referencing your findings\n with data from other tools like user recordings or surveys. If you’re searching for a\n platform that combines session recordings and heatmaps then check out{' '}\n \n LiveSession\n {' '}\n – we offer a free trial.{' '}\n

\n
\n \n
\n

Chapter 6

\n

The top benefits of using heatmaps on your website

\n
\n \"arrow\"\n \n
\n \n );\n};\n\nexport default withUsabilityTestingTemplate(HeatmapAnalysis);\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTMuNUgxOC4yMjRMOS44MjQwMSAyMS45TDEyIDI0TDI0IDEyTDEyIDBMOS44OTk5OSAyLjEwMDAxTDE4LjIyNCAxMC41SDBWMTMuNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"","/* eslint-disable no-restricted-syntax */\n/* eslint-disable guard-for-in */\nexport const transformImages = (list) => {\n const res = [];\n for (const el of list) {\n res[el.node.name] = el;\n }\n return res;\n};\n"],"sourceRoot":""}