Hotjar: UX and Conversion Tips
Whether online or off, businesses want to optimize their users’ experience to get more conversions, be it from an in-store display, a lead-generation form, or a multi-stage sales funnel. Unfortunately, it’s not possible to get every website visitor to convert. Eventually, businesses and UX experts will need to turn to analytics data and ask themselves one question: Why aren’t visitors turning into customers?
Google Analytics is the most popular analytics solution, but it can overwhelm designers with quantitative data about user behavior—page views, bounce rates, traffic sources, etc. While it provides a wealth of data, there’s no explanation of why people act the way they do on a site. It’s one thing to spot a problem like a high cart abandonment rate, but it’s another to figure out how to fix that problem. In that sense, Google Analytics lacks one crucial tool for UX designers: feedback collection from actual users.
Hotjar Benefits: Powerful Tools to Understand User Behavior and Gather Feedback
Hotjar allows companies to understand what people see and do on their website, while also helping them figure out how and why they’re using it. Thanks to Hotjar, there’s no need to speculate about user behavior. Thanks to a wide range of features, marketers and UX designers can get insights into exactly how people experience their website.
A heatmap is a screenshot of a web page with a warm-to-cool color scheme layered on top of it to show where people click, how far they scroll, and where they move their mouse. Just like on a weather report, red areas are hot or eye-catching, whereas blue areas are cold or unnoticed.
Heatmaps are Hotjar’s most popular tool and can be used with any page and any device. User behavior is summarized on:
- click maps, showing where visitors click or tap their screen
- scroll maps, showing how far down they scroll down the page
- move maps, showing their mouse path
By giving relevant visual insights, heatmaps help designers create better page layouts to draw user attention to the most important parts and convert at higher rates. One of the most common design improvements is to enhance and/or relocate call-to-actions to hotter areas to boost conversions.
While heatmaps summarize in a single document the behavior of all of the visitors on a specific page, session recordings allow businesses to experience individual journeys and understand how people interact with a site. Where do they go? When do they get confused or frustrated? Why are they not converting?
Hotjar’s recordings are an excellent alternative to usability tests as UX researchers and designers can replay dozens of real user experiences and see precisely how people browse pages and content. Plus, each session has a clickable timeline, showing key interactions.
Usually, it only takes a few recordings to identify behavior patterns and discover what’s working and what’s not. For example, several visitors repeatedly clicking or tapping an element suggests that to them it looks like a call-to-action (whether it is or not) or that there’s a broken link. Either way, this friction point can be fixed to make the overall experience more efficient and enjoyable.
When it comes to recordings, it’s always a good idea to get the expertise of a UX designer. Replays are time-consuming to review, so defining clear goals before actually watching the sessions helps maximize efficiency and the benefits. For example, SaaS companies might want to optimize their free trial subscription form, whereas eCommerce owners might want to focus on their checkout process. Defining these goals ahead of time allows designers to zero in on the most critical parts of the recordings without wasting time.
Business owners always aim to convert more customers. Whether it’s getting new subscriptions on a newsletter or selling more products, the goal is to turn visitors into customers through a funnel. On eCommerce platforms, the typical funnel has at least five different stages: Homepage > Product page > Cart > Checkout > Confirmation page.
Just like with an actual funnel, an online funnel narrows toward the end—meaning there are fewer customers at the end than at the beginning. But it can be hard to tell what’s happening between the stages or why visitors drop off where they do.
Hotjar’s funnel report is an advanced feature allowing businesses to learn how many people make it through each step versus how many don’t. By understanding when and where potential customers bounce, designers can optimize the funnel and the overall user flow.
An unseen required action (such as selecting a size before adding to cart), a misplaced call-to-action, a long form to fill—all are examples of conversion barriers that create “holes” in the funnel. These holes are usually located on high-exit pages. Once these holes are identified, UX designers can make design improvements to plug them and send more traffic toward the end of the funnel, increasing the number of likely conversions.
Conversion funnels often end with a form being completed and submitted, whether it’s a registration form, a checkout form, or a data submission form. Form abandonment is common and not always addressed as a significant UX issue. But it’s important to understand why a user who is seemingly ready to convert will suddenly abandon a form, since it’s generally because a negative experience has derailed their intention.
Hotjar’s forms report highlights a wide range of analytics, such as session count, average interaction time, conversion rate, drop-off count, and fields that are left blank. These insights, coupled with best practices—such as keeping fields to a minimum, providing clear labels and inputs, etc.—can help remove the triggers that caused customers to drop off in the first place, and lead to a higher form completion rate.
It’s easy to get wrong ideas about people’s interests or why they act the way they do. Assumptions about visitors are every business owner’s and UX designer’s worst enemy, often leading to marketing and design mistakes. Getting honest feedback from customers is not only the best way to avoid these mistakes, but it’s also the most direct way to find out how they got there, what they’re looking for, what they need, and what they fear.
Hotjar’s poll is an unobtrusive widget appearing at the bottom of a page that displays questions to get contextual information. These questions can be asked either on specific pages - for example, to learn what kind of content people are looking for, or based on behavior, such as when visitors are about to drop off.
Polls can be a particularly useful tool for eCommerce businesses trying to understand why customers haven’t yet hit the “Confirm Order” call-to-action at the end of the sales funnel. Questions such as: What is your biggest fear about purchasing this item from us? or What information is missing to make your decision to buy easier? can reveal relevant feedback, including lack of information about secure payments, shipping costs, delivery times, warranty details, or return policy.
Hotjar also offers a more playful quick feedback tool called “Incoming feedback.” This expandable widget allows people to rate and comment on a page or specific elements using emojis, which can be a friendly alternative to polls, depending on the target audience and how serious the brand is.
Nobody knows more about customers than the customers themselves. Setting up a survey is an excellent way of gathering more in-depth qualitative feedback from customers when they’re visiting a site, or after they’ve visited it. For example, eCommerce sites may be interested in both pre-purchase and post-purchase surveys to find out the main reason a user has or hasn’t completed a transaction.
Hotjar allows site owners to create personalized surveys that can be shared by email, link, or displayed in a pop-up on site. They can include open-ended, multiple-choice, or scaled questions. Open-ended questions almost always offer the most meaningful insights as people can share their experiences in their own words and express what could be improved.
Regardless of the type of questions used, they should focus on the customers’ needs and drives. They can also focus on a variety of concerns, such as content (Was this article useful?) or conversion (What nearly stopped you from buying today?). People are more inclined to take a survey if there’s something offered in exchange, so it’s essential to think about incentives.
Getting Started with Hotjar
Hotjar offers a free plan with basic features and traffic restrictions. It’s perfect for small websites that want to get a big picture of customer behavior and their needs. Larger businesses may be more interested in the premium plans that enable them to collect more data and fully customize polls and survey interfaces.
Hotjar is easy to set up as there’s only one tracking code snippet to be installed, either manually or through a plugin. Hotjar is compatible with hundreds of platforms, including WordPress with an official plugin and eCommerce platforms such as Shopify, Magento, and PrestaShop.
Once a website has signed up and inserted the necessary code snippet, Hotjar makes it easy to generate heatmaps, start recording sessions, or create polls and surveys. The admin panel is clean, results are presented visually, and information is summarized into simple, filterable tables.
Combining Google Analytics and Hotjar
As stated earlier, Google Analytics is a complex tool that only focuses on quantitative data, whereas Hotjar offers both quantitative and qualitative insights in an understandable way.
Hotjar is not as robust or detailed as Google Analytics when it comes to quantitative data, such as demographics or conversion funnel reports. Mark Zuckerberg once explained Facebook’s recipe of success: “We really listened to what our users wanted, both qualitatively listening to the words they say and quantitatively looking at the behavior they take.”
Instead of seeing Google Analytics and Hotjar as rivals—which they’re clearly not—it’s best to view them as complementary. Using both solutions provides more insights for UX designers and marketers.
Working with UX Researchers and UX Designers
Marketers and analytics experts can help companies understand quantitative data, but feedback collection and analysis require psychology and empathy.
Even though Hotjar’s interface is more straightforward than Google Analytics’, it may be useful for business owners to work hand-in-hand with UX researchers or UX designers to interpret its insights.
User experience experts can highlight friction points and uncover possible improvements, prepare session recording reports, think of relevant questions for polls and surveys, recommend appropriate content or design changes, and track A/B tests. These, among Hotjar’s features and benefits, can help businesses improve their customer journeys and thus their growth. It’s an investment that brings long-term value and ROI.
• • •
Further reading on the Toptal Design Blog:
Understanding the basics
What is Hotjar?
Hotjar is an analytics tool that combines both quantitative and qualitative data to give a “big picture” view of a site’s user experience. It uses a variety of methods, including heatmaps, user recording sessions, polls, and surveys to provide UX experts with actionable information.
How does Hotjar recording work?
Hotjar’s recording feature records a variety of user interactions, including HTML changes while the user is on a page, mouse movements, mouse clicks, scrolls movements, and keystrokes on whitelisted form inputs. Interactions are saved in a database with a timestamp, which is later used to replay each session.
How long should conversion optimization experiments run?
While there’s no hard-and-fast rule for how long to run a conversion optimization experiment, a minimum of 1,000 views for Heatmaps and 100 views for Recordings is recommended. This allows for enough data to be collected to provide meaningful insights, without delaying taking action based on those insights.
How do you integrate Hotjar?
Hotjar is integrated into a website via a tracking code inserted into the header of the site. Some platforms allow Hotjar to be integrated via a plugin or extension, including WordPress. Other platforms like Hubspot and Optimizely also have built-in integration options.
What is Hotjar used for?
Hotjar is used for gathering quantitative and qualitative data to get a “big picture” view of how visitors interact with a website. It offers website owners visual insights into user behavior that many other analytics platforms lack, and provides context for that behavior.
Located in Paris, France
Member since May 5, 2017
About the author
Laura is a senior UX/UI designer and a member of the prestigious Awwwards jury. She specializes in UX solutions for eCommerce.