Learn / Blog / Article
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 updated25 Jan 2024
Reading time9 min
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.
Here are the four key ways we use Hotjar for interaction design.
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
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
Interviews to recruit participants for usability testing: Hotjar Engage helps us test our prototypes with participants who represent our target audiences
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?
Creating a homepage’s visual design, copywriting, and layout
Planning the site structure to help users navigate to popular pages
Choosing the typography and icons used in an app’s interface
Optimizing the search bar
Reordering the sequence of items in a drop-down menu to support user priorities
Improving a form that lets users enter their payment details
Notifying users with updates about the delivery of their purchase
Designing a user flow and content for a chatbot that delivers customer support
Choosing a chatbot’s icons, fonts, and visual elements
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.
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.
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.
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.
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.
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?”
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.
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.
FAQs about interaction design
UX design and analysis
Design a homepage that delights your users in 9 easy steps (with tips and examples)
While product, UX, and marketing teams help shape a website or app’s homepage, a more powerful group holds the reins: the users. Their needs and preferences are key deciding factors in locking in an effective homepage design.
UX design and analysis
The anatomy of a stellar website: the dos and don’ts of design
Over the past five years, buyers have largely shifted their shopping habits to be primarily online. For brands wishing to remain competitive in the digital marketplace, this means an accessible and attention-grabbing website has become more important than ever before.
Consumers agree: respondents to Hotjar’s Coming in Hot report told us that they have higher expectations for brands’ websites than they did five years ago.
UX design and analysis
Coming in hot: the power of first impressions
Consumers have more than their fair share of vendors to choose from when shopping online. When attention is split between different brands and devices, ensuring your online presence stands out from the crowd hinges on first impressions.
But catering to the ever-changing habits and preferences of digital buyers is no small feat. That’s why Hotjar surveyed hundreds of US-based consumers—to reveal the insights you need to guarantee your website exceeds user expectations.