Are you an agency specialized in UX, digital marketing, or growth? Join our Partner Program

Learn / Blog / Article

Back to blog

How we use Hotjar for interaction design: 4 practical use cases

We don’t just design and build Hotjar—we’re users, too. Insights from Hotjar regularly drive our decisions, keeping customer-centricity top of mind. 

This article unpacks how our product design team uses Hotjar for interaction design, a sub-discipline of user experience (UX) design.

Last updated

25 Jan 2024

Reading time

9 min

Share

Interaction design, or IxD, is a branch of UX design focusing specifically on the moment of use. It’s about improving the parts of your product that your users interact with so they can complete tasks quickly, easily, and intuitively. 

At Hotjar, we’re customer-obsessed, so it’s no surprise we’re big believers in the value of interaction design. We continually use Hotjar to analyze and improve the interactive parts of Hotjar (this is getting a bit meta, huh?).

Let’s find out how we do it.

Summary

Here are the four key ways we use Hotjar for interaction design.

  1. Surveys to get user feedback on important issues: for example, we ask users what they would improve about a page, or which new logo design they prefer

  2. Heatmaps to learn how users interact with page elements: these color-coded visualizations show us whether our visual hierarchies effectively lead users to CTA buttons and forms

  3. Interviews to recruit participants for usability testing: Hotjar Engage helps us test our prototypes with participants who represent our target audiences

  4. Recordings to uncover important opportunities for improvement: by replaying journeys, we see where users get stuck or deviate from usual navigation paths

UX, UI, and interaction design: what’s the difference?

All three disciplines are about improving users’ experiences with your product. They’re also interrelated—IxD is a sub-discipline of UX design, and UI design is a sub-discipline of IxD.

However, there are some key differences:

So, an interaction designer might improve a software app’s onboarding sequence, including the copy, UI design, sound effects, and overall user flow. But interaction design also looks at the feel and form of physical products, like smartphones and printers.

Here are some examples—can you guess the discipline?

Task

Discipline

Creating a homepage’s visual design, copywriting, and layout

UX design

Planning the site structure to help users navigate to popular pages

UX design

Choosing the typography and icons used in an app’s interface

UI design

Optimizing the search bar

Interaction design

Reordering the sequence of items in a drop-down menu to support user priorities

Interaction design

Improving a form that lets users enter their payment details

Interaction design

Notifying users with updates about the delivery of their purchase

UX design

Designing a user flow and content for a chatbot that delivers customer support

Interaction design

Choosing a chatbot’s icons, fonts, and visual elements

UI design

How Hotjar uses Hotjar for interaction design

Martina Pérez, Staff Product Designer at Hotjar, is one of our interaction design specialists. Below, she shares her own experiences using Hotjar to gather data and optimize interactions for our users. 

1. Surveys for user feedback on important issues

When making user-led improvements, we don’t want to do anything on a whim. Hotjar Surveys is one of our best tools for learning about user perspectives and understanding experiences within our platform.

We use Surveys in three ways:

  • Getting feedback on design and copy. We use on-page surveys to ask users about live designs, prototypes, and design concepts. Respondents tell us if they don’t understand copy, or if a design doesn’t resonate with them.

  • Prioritize changes based on user needs. When we’re in the process of prioritizing what changes to make next, we ask users for their opinions via quick multiple-choice questions.

  • Recruit participants for further research. Our surveys end with a question asking the user if they’d be willing to help us with more research. If the user submits their email, we follow up and invite them to a user interview via Hotjar Engage (our user interview tool) or a usability testing session.

🌟 Real-life example: using Surveys to improve widget design

Hotjar has recently been in the process of improving the design of our survey ‘widgets’—the boxes and forms users see when a survey appears. Our goal was to achieve a more modern look, improved mobile experience, and enhanced accessibility.

We started by exploring new design concepts based on feedback we’d gathered from user interviews. Next, we used Hotjar Surveys to run concept tests (also called preference tests), asking users to specify which design ideas they preferred.

Concept tests allow you to gauge user preferences from large numbers of users

Because Hotjar Surveys allowed us to get user input at scale, we were able to achieve a volume of results that was statistically significant. The process not only saved us time, but also helped us make informed design decisions and create widgets that align better with our users’ preferences and needs.

Martina Pérez
Staff Product Designer at Hotjar

Understand every user interaction

Use Hotjar Heatmaps to see behavior trends on any page, then view recordings to see interactions through your users’ eyes.

2. Hotjar Heatmaps to learn how users interact with buttons, forms, and navigation elements

Hotjar Heatmaps is a crucial tool for evaluating interaction design, giving us an aggregated view of what our users do on each page. This helps us identify potential issues with button placements and other aspects of the user experience.

Heatmaps combine data from groups of users, rather than individuals, to reveal trends in how they behave. There are three main types of heatmaps:

  • Click maps show where users click (or tap on mobile)

  • Scroll maps reveal how far down a page users tend to scroll

  • Move maps show where users move their mouse (which is a good indicator of what they’re interested in)

📝 Note: Hotjar provides another heatmap type, Engagement Zones, which combines all the data from the three maps above to reveal the most (and least) engaging parts of your page. 

#Scroll maps show how far down a page users scroll, while click maps show the ‘hotspots’ where users frequently click
Scroll maps show how far down a page users scroll, while click maps show the ‘hotspots’ where users frequently click

We use heatmaps in two key ways:

  • See how users interact with digital products. Click maps show us what users do when using tools—for instance, whether they click on search bars or the tool’s ‘back’ button.

  • Evaluate visual hierarchy and placement of interface elements. Scroll and move heatmaps help us understand whether users are actually noticing key elements, like call-to-action (CTA) buttons. 

With these insights, we can discover what grabs users’ attention, what they interact with, and what they’re not seeing.

💡 Pro tip: Hotjar senses rage clicks, which are instances of users clicking (or tapping on mobile) multiple times in quick succession—a typical sign of frustration. Hotjar Heatmaps also generates rage click heatmaps to show places where users frequently rage click on any given page. Use them to find broken links or confusing elements in your interface.

🌟 Real-life example: using Heatmaps to optimize a user resource

Hotjar offers users a range of survey templates to save time when launching surveys. Heatmaps helped us figure out how to optimize the template gallery to make it more intuitive for users.

We had originally arranged the template gallery based on our assumptions about what would be helpful to users. However, Hotjar Heatmaps showed us that users weren’t scrolling through the page and were only viewing the first ten templates.

To optimize the user experience, we examined each template’s performance, focusing on conversion rates. Based on our findings, we reordered the templates to put the highest-converting ones first.

#Hotjar’s survey template gallery
Hotjar’s survey template gallery

This data-informed approach allows us to better assist our users. By presenting high-performing templates upfront, we facilitate users’ access to valuable resources and ensure they have a more efficient and productive experience when creating surveys.

Martina Pérez
Staff Product Designer at Hotjar

3. Interviews to recruit participants for usability testing

Hotjar Engage is our user interview tool that helps you automate your interview processes. As well as hosting, recording, and transcribing calls, Engage helps you find interview participants from a broad range of industries and locales—a life-saver for a busy team like ours!

Here’s how we use Engage:

  • Schedule interviews with users who filled out our surveys. If a survey respondent says they’re willing to help with more research, we send them a Hotjar Engage link. The user then books a free time slot when our researchers are available.

#Hotjar Engage lets you set your availability, then schedules calls at times you’re free
Hotjar Engage lets you set your availability, then schedules calls at times you’re free
  • Recruit new participants from specific audience segments. Hotjar has a network of 200,000+ users that we recruit from to match our user personas. Engage lets us specify the user requirements—like industry and job role—and then screens and invites relevant participants for us.

  • Analyze interviews and usability testing sessions. Engage records the calls and generates a transcript for us. This is super handy when we’re reviewing usability testing sessions, because we can quickly find and analyze parts of the session relating to key interactions. 

4. Recordings to discover important opportunities for improvement

No matter how well you know your users, they’ll keep you on your toes by doing things you didn’t expect at every turn. (And we love ‘em for it.) Seeing users in action makes all the difference. So, at Hotjar, we turn to Recordings for vital insights about how users behave when using our tools. 

We do this in three main ways:

  • Learn how users interact with a platform. What happens before users hit ‘cancel’? What do they struggle with the first time they use a tool? Session recordings are the easiest and most effective way to answer questions like these.

  • See if users deviate from expected flows. Users don’t always navigate your tool in the paths you create for them. By learning how they deviate, you can support the paths they actually take and improve their experiences.

  • Get clarity on problems and negative experiences. When we discover that users have problems with certain pages, recordings give us a closer look. We replay individual users’ journeys to see if they’re encountering a bug, a UX design issue, or something else.

💡 Pro tip: use Hotjar Feedback to get more context for your recordings.

Hotjar Feedback is an ever-present widget that invites users to share feedback about your page (it’s that little red box on the right of this page! 👉 Why not drop us a line?).

When a user leaves negative feedback, zoom out to find the companion session recording of their specific journey—then replay it to find out what happened.

Simply click the play icon to view a recording of the user who left feedback

🌟 Real-life example: using Engage + Recordings to identify a ‘hidden’ interaction design issue

We recently launched a brand-spanking new feature, Hotjar Hotjar AI for Surveys, empowering users to create tailored surveys in less time by generating questions based on specific research goals.

When users create surveys, all they need to do is type their survey goal into the field, and Hotjar AI generates appropriate questions. For example, if your goal is to learn about user pain points, it would generate questions like “If you could change anything about our tool, what would it be?”

#Hotjar generates survey questions with AI, then gives you the option of fine-tuning the questions
Hotjar generates survey questions with AI, then gives you the option of fine-tuning the questions

Discovering a key issue

After launching Hotjar AI, we wanted to evaluate and improve it. Our next step was to carry out interviews and usability testing sessions with people who used the AI function. With Engage, we were able to recruit a relevant user persona: individuals who create surveys.

After the sessions, we reviewed session recordings and identified an issue with the ‘survey goal’ form field.

Hotjar AI was originally designed for pretty short goal descriptions—like ‘discover user pain points’. However, Recordings revealed users entering longer descriptions that didn’t fit in the existing text field. This uncovered a clear need for improvement—an insight we couldn’t have gained without Recordings.

Thanks to the capabilities of Engage, we efficiently planned, recruited suitable participants, and conducted the research in less than one week. This enabled us to gather valuable feedback directly from the users, helping us identify key pain points and improve the survey creation process based on real user experiences.

Martina Pérez
Staff Product Designer at Hotjar

Why is having the right tools important for interaction design?

As you’ll have seen in the examples above, like most of the UX field, IxD is a discipline driven by user insights. To improve interactions, you need to research your users’ preferences, perspectives, and behaviors—and that’s where a platform like Hotjar comes in.

With Hotjar, you’ll gather useful data to answer questions like

  • How do users interact with interactive elements (like buttons and drop-down menus)?

  • What confuses them or makes them get lost?

  • What design changes would make an interaction more intuitive?

Answering these questions requires a range of data from different tools—and everything you need is available within the Hotjar platform. When you bring the right data together, you’ll be better positioned to make well-informed decisions and awesome-ize your product interactions.

Combine the right user insights to optimize your interactions 

You might have noticed a key trend in the examples here: we’re not using any of these tools in isolation. For instance, we used insights from interviews to develop new survey widget designs, then used Surveys to find out which designs users preferred. 

The key takeaway here is that, like all of UX, interaction design is a process. It involves deciding on specific research questions, then combining different UX research methods to answer them. And this is where Hotjar really shines—by using a single platform to gather multiple datasets, you streamline your process and get a complete view of what your users need.

Get a 360-degree view of your users

Survey your users, discover behavior trends, host interviews, and more—all from a single, collaboration-friendly platform.

FAQs about interaction design