Cùng tìm hiểu cách sử dụng Hotjar heatmap để tối ưu trang đích quảng cáo. Việc tối ưu trang đích là việc rất quan trọng cho tất cả những ai đang thiết kế website, một trong các công việc để tối ưu trang đích đó là trải nghiệm khách hàng trên trang đích. Hiện nay có rất nhiều phương pháp cho phép chúng ta nghiên cứu tương tác của khách hàng trong đó phổ biết nhất là heat map, bài viết này sẽ giới thiệu về heatmap của Hotjar và cách sử dụng nó để tối ưu trang đích.
Source: https://learning.hotjar.com/
I. Course: How to find patterns in Heatmaps (Khóa học: Cách tìm mẫu trong Bản đồ nhiệt)
1. Are users seeing important content? (Người dùng có nhìn thấy nội dung quan trọng không?)
a) Explore our scroll map (Khám phá bản đồ cuộn của chúng tôi)

b) Case Studies
(Bạn đã ra mắt một ứng dụng mới và mọi người đang đăng ký. Nhưng bạn nhận thấy tỷ lệ rời bỏ khách hàng cao do mọi người phàn nàn rằng ứng dụng này không thân thiện với người dùng và họ không thể tìm thấy bất kỳ hướng dẫn nào.
Bạn biết rằng có một hướng dẫn trong ứng dụng mà người dùng có thể kích hoạt thông qua nút kêu gọi hành động trên trang chủ. Vậy tại sao không có ai sử dụng nó?
Khi bạn phân tích bản đồ cuộn cho trang chủ, bạn có thể thấy sự thay đổi màu sắc rõ nét ngay phía trên CTA của phần hướng dẫn. Có thể người dùng nghĩ rằng đây là phần cuối của trang và rời đi trước khi họ nhận ra CTA.
Nhóm của bạn đang thiết kế lại nút CTA. Giờ đây, nó xuất hiện ở đầu trang chủ để người dùng mới nhìn thấy lần đầu tiên họ đăng nhập. Tỷ lệ rời bỏ của bạn giảm ngay lập tức, giúp bạn có thời gian nỗ lực cải thiện hơn nữa các công cụ điều hướng của ứng dụng.)
2. Are users clicking key page elements?
a) Explore our click map (Khám phá bản đồ nhấp chuột của chúng tôi)
Try comparing click maps before and after you have made a recent change. What did you notice? Was there an improvement in the user experience?
Are your most important CTAs showing red and orange shades? If so, great, your page is working! If not, it means users are ignoring key elements of your page and you may need to make some changes.
(Hãy thử so sánh bản đồ nhấp chuột trước và sau khi bạn thực hiện thay đổi gần đây. Bạn đã nhận thấy điều gì? Có sự cải thiện trong trải nghiệm người dùng?
Các CTA quan trọng nhất của bạn có hiển thị màu đỏ và cam không? Nếu vậy thì tuyệt vời, trang của bạn đang hoạt động! Nếu không, điều đó có nghĩa là người dùng đang bỏ qua các yếu tố chính trên trang của bạn và bạn có thể cần thực hiện một số thay đổi.)

b) Case Studies
You have a free demo that potential customers can download before they commit to paying for your product. To download a demo, customers must submit their details via a sign-up form.
You want to see how people are interacting with the signup page, so you turn to the click map. You see straight away from the shades of blue on the heatmap that the ‘Sign up’ button is mostly being ignored. Meanwhile, the heatmap is red and orange over the link to ‘Sign in’, showing that customers are accidentally navigating away from the page by clicking this link instead.
Streamlining the form to place more emphasis on the ‘Sign up’ button is a quick job, and you start to see an increase in conversions.
(Bạn có bản demo miễn phí mà khách hàng tiềm năng có thể tải xuống trước khi họ cam kết trả tiền cho sản phẩm của bạn. Để tải xuống bản demo, khách hàng phải gửi thông tin chi tiết của họ thông qua biểu mẫu đăng ký.
Bạn muốn xem mọi người tương tác với trang đăng ký như thế nào, vì vậy bạn chuyển sang bản đồ nhấp chuột. Bạn có thể thấy ngay từ các sắc thái xanh lam trên bản đồ nhiệt rằng nút ‘Đăng ký’ hầu như bị bỏ qua. Trong khi đó, bản đồ nhiệt có màu đỏ và cam trên liên kết ‘Đăng nhập’, cho thấy rằng khách hàng đang vô tình điều hướng khỏi trang bằng cách nhấp vào liên kết này.
Hợp lý hóa biểu mẫu để nhấn mạnh hơn vào nút ‘Đăng ký’ là một công việc nhanh chóng và bạn bắt đầu thấy tỷ lệ chuyển đổi tăng lên.)
You’re overseeing the blog on your company website. Each blog post is designed to encourage readers to start a free trial of your product.
To better understand how your readers are interacting with the blog, you take a look at the click map.
You can see from the hot spots on your heatmap that readers often click the anchor text for backlinks into your site, which is great for increasing the overall time a customer spends exploring your content. It also suggests that readers are finding the content itself to be insightful.
However, the CTA to sign up for the free trial isn’t getting many clicks. So, you test different placements and improve the design of your CTA buttons to make them more enticing.
(Bạn đang giám sát blog trên trang web công ty của bạn. Mỗi bài đăng trên blog được thiết kế để khuyến khích người đọc bắt đầu dùng thử miễn phí sản phẩm của bạn.
Để hiểu rõ hơn cách người đọc tương tác với blog, bạn hãy xem bản đồ nhấp chuột.
Bạn có thể thấy từ các điểm nóng trên bản đồ nhiệt của mình rằng người đọc thường nhấp vào văn bản liên kết để tìm các liên kết ngược vào trang web của bạn, điều này rất tốt để tăng tổng thời gian khách hàng dành để khám phá nội dung của bạn. Nó cũng gợi ý rằng người đọc đang nhận thấy nội dung đó rất sâu sắc.
Tuy nhiên, CTA để đăng ký dùng thử miễn phí không nhận được nhiều nhấp chuột. Vì vậy, bạn thử nghiệm các vị trí khác nhau và cải thiện thiết kế của các nút CTA để khiến chúng hấp dẫn hơn.)
Your company wants to provide exceptional 24hr customer support. But to do this, you need to make sure that customers know exactly how and where to get in touch.
You take a look at a click map for the customer dashboard, which is the first thing users see after they sign in. There is a ‘Help’ button on this page, but the cool spots on your heatmap show that it isn’t getting much attention.
You create three new clickable icons for the dashboard, including a phone, an email, and an instant messenger.
The next time you look at the click map, you can see that the instant messenger icon gets lots of attention. Using the click map as evidence, you prioritize improving the UX design for the instant messenger first, since it’s the customer’s favored form of contact.
(Công ty của bạn muốn cung cấp hỗ trợ khách hàng đặc biệt 24 giờ. Nhưng để làm được điều này, bạn cần đảm bảo rằng khách hàng biết chính xác cách thức và địa điểm để liên lạc.
Bạn hãy xem bản đồ nhấp chuột cho bảng điều khiển khách hàng, đây là điều đầu tiên người dùng nhìn thấy sau khi họ đăng nhập. Có nút ‘Trợ giúp’ trên trang này, nhưng các điểm thú vị trên bản đồ nhiệt của bạn cho thấy nút này không hoạt động. nhiều sự chú ý.
Bạn tạo ba biểu tượng có thể nhấp mới cho trang tổng quan, bao gồm điện thoại, email và tin nhắn tức thời.
Lần tới khi nhìn vào bản đồ nhấp chuột, bạn có thể thấy biểu tượng tin nhắn tức thời nhận được rất nhiều sự chú ý. Sử dụng bản đồ nhấp chuột làm bằng chứng, trước tiên, bạn ưu tiên cải thiện thiết kế UX cho ứng dụng nhắn tin tức thời vì đây là hình thức liên hệ ưa thích của khách hàng.)
3. Are users confused by non-clickable elements? (Người dùng có bị nhầm lẫn bởi các yếu tố không thể nhấp vào không?)
a) Not all clicks are a good thing!
Are there any non-clickable elements that are causing user friction and frustration?
Can the user experience be improved by better differentiating between clickable and non-clickable elements?
(Có bất kỳ yếu tố không thể nhấp chuột nào đang gây khó chịu và thất vọng cho người dùng không?
Trải nghiệm người dùng có thể được cải thiện bằng cách phân biệt rõ hơn giữa các yếu tố có thể nhấp và không thể nhấp vào không?)

The first area of interest is a button, and our Heatmap analysis tells us the user behaviour is exactly as we’d expect.
The second area of interest is a group of logos. After analysing Heatmap data, we can conclude that users are expecting to click on the logos, perhaps expecting to go to a testimonial site, however, the logos are NOT hyperlinked!
(Lĩnh vực quan tâm đầu tiên là một nút và phân tích Bản đồ nhiệt của chúng tôi cho chúng tôi biết hành vi của người dùng chính xác như chúng tôi mong đợi.
Lĩnh vực quan tâm thứ hai là một nhóm các logo. Sau khi phân tích dữ liệu Heatmap, chúng tôi có thể kết luận rằng người dùng đang mong đợi nhấp vào biểu tượng, có thể mong đợi truy cập một trang web chứng thực, tuy nhiên, các biểu tượng KHÔNG được liên kết!)
b) Case Studies
Your company developed a productivity app for professionals to use when planning workflows and organizing files. You want to release an update that allows collaboration between users from the same workplace.
When you look at the click map for the web app, you notice a concentration of clicks on a banner of non-clickable avatars showing which users from the same workplace are currently logged in.
You start to wonder if users are looking for in-platform chat options. Based on the click map data, you tailor your market research surveys even further and discover that users would like to chat, share files, and have the option to update their activity statuses during the working day.
(Công ty của bạn đã phát triển một ứng dụng năng suất dành cho các chuyên gia sử dụng khi lập kế hoạch cho quy trình làm việc và sắp xếp tệp. Bạn muốn phát hành bản cập nhật cho phép cộng tác giữa những người dùng từ cùng một nơi làm việc.
Khi bạn nhìn vào bản đồ nhấp chuột cho ứng dụng web, bạn nhận thấy sự tập trung của các nhấp chuột vào biểu ngữ có hình đại diện không thể nhấp vào cho biết người dùng nào từ cùng một nơi làm việc hiện đang đăng nhập.
Bạn bắt đầu tự hỏi liệu người dùng có đang tìm kiếm các tùy chọn trò chuyện trong nền tảng hay không. Dựa trên dữ liệu bản đồ nhấp chuột, bạn điều chỉnh khảo sát nghiên cứu thị trường của mình hơn nữa và phát hiện ra rằng người dùng muốn trò chuyện, chia sẻ tệp và có tùy chọn cập nhật trạng thái hoạt động của họ trong ngày làm việc.)
You’re using a web analytics tool to track conversions from your landing pages. What you can’t tell from those numbers is the experience your customers are having when they visit your site—or why certain pages perform better than others.
When you compare click maps, you see that there are significant numbers of clicks on the banner of non-clickable partner logos. It looks like your customers are getting confused and think they can find out more about your partners.
You decide to move these logos lower down on the page and put them in grayscale to be less eye-catching. Now, the focus of the page is on your CTAs.
(Bạn đang sử dụng công cụ phân tích trang web để theo dõi chuyển đổi từ trang đích của mình. Điều bạn không thể biết từ những con số đó là trải nghiệm mà khách hàng có được khi họ truy cập trang web của bạn—hoặc tại sao một số trang nhất định hoạt động tốt hơn những trang khác.
Khi so sánh bản đồ nhấp chuột, bạn sẽ thấy rằng có số lượng nhấp chuột đáng kể vào biểu ngữ của các biểu tượng đối tác không thể nhấp vào. Có vẻ như khách hàng của bạn đang bối rối và nghĩ rằng họ có thể tìm hiểu thêm về đối tác của bạn.
Bạn quyết định di chuyển những logo này xuống thấp hơn trên trang và đặt chúng ở thang độ xám để kém bắt mắt hơn. Bây giờ, trọng tâm của trang là CTA của bạn.)
Your company has a web app for data analytics teams to build user-friendly reporting dashboards for their non-technical colleagues to use.
You take a look at the click map for the dashboard builder to see how people are getting on with the software.
You notice that there are lots of clicks happening just above the different blocks that make up the dashboard, as though the creators were trying to select or move the block.
You release a beta version of the software that allows users to drag-and-drop blocks to build their dashboards more intuitively. The feedback is fantastic, and users love the freedom the update provides.
(Công ty của bạn có một ứng dụng web dành cho các nhóm phân tích dữ liệu để xây dựng trang tổng quan báo cáo thân thiện với người dùng để những đồng nghiệp không rành về kỹ thuật của họ sử dụng.
Bạn hãy xem bản đồ nhấp chuột của trình tạo trang tổng quan để biết mọi người đang sử dụng phần mềm như thế nào.
Bạn nhận thấy rằng có rất nhiều lượt nhấp chuột xảy ra ngay phía trên các khối khác nhau tạo nên trang tổng quan, như thể người sáng tạo đang cố gắng chọn hoặc di chuyển khối đó.
Bạn phát hành phiên bản beta của phần mềm cho phép người dùng kéo và thả các khối để xây dựng trang tổng quan của họ một cách trực quan hơn. Phản hồi thật tuyệt vời và người dùng yêu thích sự tự do mà bản cập nhật mang lại.)
4. Are users getting distracted? (Người dùng có bị phân tâm không?)
a) How to make sure users focus on the important bits rather than get distracted (Cách đảm bảo người dùng tập trung vào những phần quan trọng thay vì bị phân tâm)
Take a look at your Engagement Heatmap. Is there high activity near your most important CTAs and links?
Are users getting distracted by moving their mouse all over the page and potentially getting distracted from the key elements you’d want them to engage with on a page?
(Hãy xem Bản đồ nhiệt tương tác của bạn. Có hoạt động cao gần các CTA và liên kết quan trọng nhất của bạn không?
Người dùng có bị phân tâm khi di chuyển chuột khắp trang và có khả năng bị phân tâm khỏi các yếu tố chính mà bạn muốn họ tương tác trên một trang không?)

b) Case Studies
Your app includes an email automation feature for setting up drip campaigns. Since launch, around 45% of users have never used this particular feature, and cite it as a reason for churn.
When you analyze the move maps for your home page, you can see that there’s a lot of cursor activity around the toolbar at the top of the page and in the main content feed.
The email tool is located in a hidden sidebar to the left, which users have to expand to view. You can see that there’s very little activity around the button to expand the sidebar: everyone is too focused on the main toolbar to notice it.
You update the homepage with a more prominent icon to expand the sidebar, making the emailing tools more visible. Within a month, at least 65% of users have set up automated email campaigns. And your customer retention rates have improved too.
(Ứng dụng của bạn bao gồm tính năng tự động hóa email để thiết lập các chiến dịch nhỏ giọt. Kể từ khi ra mắt, khoảng 45% người dùng chưa bao giờ sử dụng tính năng cụ thể này và coi đây là lý do khiến họ rời bỏ.
Khi phân tích bản đồ di chuyển cho trang chủ của mình, bạn có thể thấy rằng có rất nhiều hoạt động của con trỏ xung quanh thanh công cụ ở đầu trang và trong nguồn cấp dữ liệu nội dung chính.
Công cụ email nằm ở thanh bên ẩn ở bên trái, người dùng phải mở rộng để xem. Bạn có thể thấy rằng có rất ít hoạt động xung quanh nút mở rộng thanh bên: mọi người đều quá tập trung vào thanh công cụ chính nên không chú ý đến nó.
Bạn cập nhật trang chủ với biểu tượng nổi bật hơn để mở rộng thanh bên, giúp các công cụ gửi email dễ nhìn hơn. Trong vòng một tháng, ít nhất 65% người dùng đã thiết lập các chiến dịch email tự động. Và tỷ lệ giữ chân khách hàng của bạn cũng đã được cải thiện.)
You’re putting together a strategy to optimize your company’s blog posts and ensure your content team is linking to other parts of your site correctly.
When you look at the move maps for a few blogs, you can see there’s very little cursor activity on links that are embedded in first word of a paragraph. Meanwhile, there’s more cursor activity on the links that appear below graphics.
Clearly, your readers aren’t interested in clicking links that appear in the first word of a paragraph, but they do like looking at engaging images.
With these insights, you develop guidelines for the content team to ensure that backlinks are always placed effectively to encourage the reader to explore your site.
(Bạn đang đưa ra một chiến lược để tối ưu hóa các bài đăng trên blog của công ty bạn và đảm bảo nhóm nội dung của bạn đang liên kết chính xác với các phần khác trên trang web của bạn.
Khi bạn xem bản đồ di chuyển của một số blog, bạn có thể thấy có rất ít hoạt động của con trỏ trên các liên kết được nhúng trong từ đầu tiên của đoạn văn. Trong khi đó, có nhiều hoạt động con trỏ hơn trên các liên kết xuất hiện bên dưới đồ họa.
Rõ ràng, người đọc của bạn không quan tâm đến việc nhấp vào các liên kết xuất hiện ở từ đầu tiên của đoạn văn nhưng họ lại thích xem những hình ảnh hấp dẫn.
Với những hiểu biết sâu sắc này, bạn phát triển các nguyên tắc cho nhóm nội dung để đảm bảo rằng các liên kết ngược luôn được đặt một cách hiệu quả nhằm khuyến khích người đọc khám phá trang web của bạn.)
The marketing team at your company has noticed that the top-ranking landing page for the company isn’t meeting its goals for conversion.
You can see there’s very little activity around the CTA at the top of the page that encourages users to sign up for the free demo.
Instead, activity is focused around the social media banner that automatically updates this page with content from the company Twitter page.
You set up A/B testing to see if conversion improves when the social media banner is less prominent on the page. You use move maps to compare user focus across the different test pages until you hit on the right layout.
(Nhóm tiếp thị tại công ty của bạn nhận thấy rằng trang đích xếp hạng hàng đầu của công ty không đáp ứng được mục tiêu chuyển đổi.
Bạn có thể thấy có rất ít hoạt động xung quanh CTA ở đầu trang nhằm khuyến khích người dùng đăng ký bản demo miễn phí.
Thay vào đó, hoạt động tập trung xung quanh biểu ngữ truyền thông xã hội tự động cập nhật trang này với nội dung từ trang Twitter của công ty.
Bạn thiết lập thử nghiệm A/B để xem liệu chuyển đổi có cải thiện hay không khi biểu ngữ truyền thông xã hội ít nổi bật hơn trên trang. Bạn sử dụng bản đồ di chuyển để so sánh sự tập trung của người dùng trên các trang thử nghiệm khác nhau cho đến khi bạn tìm được bố cục phù hợp.)
5. Are users experiencing issues across devices? (Người dùng có đang gặp sự cố trên các thiết bị không?)
a) Is the user experience consistent on every device? (Trải nghiệm người dùng có nhất quán trên mọi thiết bị không?)
Are the main CTAs and links getting the most activity regardless of the device it’s accessed on?
Are there any CTAs or links which are more difficult for the user to access on any given device?
(Các CTA và liên kết chính có nhận được nhiều hoạt động nhất bất kể nó được truy cập trên thiết bị nào không?
Có bất kỳ CTA hoặc liên kết nào khiến người dùng khó truy cập hơn trên bất kỳ thiết bị cụ thể nào không?)
b) Case Studies
You’re conducting market research to better understand the core demographics within your target market.
Using a web analytics tool, you can see that significant numbers of visitors reach your site through organic searches on a mobile device.
When you analyze the scroll maps on those landing pages on a desktop, everything looks great. But when you look at the mobile version, you can see that most users aren’t seeing the promo video for your product, because it sits just below the average fold.
When you reconfigure the mobile landing pages to focus on the promo video, you notice a 30% increase in conversion.
(Bạn đang tiến hành nghiên cứu thị trường để hiểu rõ hơn về nhân khẩu học cốt lõi trong thị trường mục tiêu của mình.
Bằng cách sử dụng công cụ phân tích trang web, bạn có thể thấy rằng số lượng khách truy cập đáng kể tiếp cận trang web của bạn thông qua các tìm kiếm không phải trả tiền trên thiết bị di động.
Khi bạn phân tích bản đồ cuộn trên các trang đích đó trên máy tính để bàn, mọi thứ sẽ rất tuyệt vời. Nhưng khi nhìn vào phiên bản dành cho thiết bị di động, bạn có thể thấy rằng hầu hết người dùng không nhìn thấy video quảng cáo cho sản phẩm của bạn vì nó nằm ngay dưới màn hình đầu tiên trung bình.
Khi bạn định cấu hình lại các trang đích trên thiết bị di động để tập trung vào video quảng cáo, bạn nhận thấy tỷ lệ chuyển đổi tăng 30%.)
You have a suite of product pages that aren’t leading to as many sales as you’d hoped. When you compare move maps for your site across devices, you can see a clear issue with the way ads appear on mobile devices and iPads.
On smaller screens, there’s a lot of cursor activity over the ads, but not the CTAs. The ads are crowding the page and drawing attention away from key elements.
You propose reducing the number of ads on product pages and reconfiguring the mobile-friendly site so that ads are less prominent. 3 months later, sales are boosted by 25%.
(Bạn có một bộ trang sản phẩm không mang lại nhiều doanh số như bạn mong đợi. Khi so sánh bản đồ di chuyển cho trang web của mình trên các thiết bị, bạn có thể thấy vấn đề rõ ràng về cách quảng cáo xuất hiện trên thiết bị di động và iPad.
Trên màn hình nhỏ hơn, có rất nhiều hoạt động của con trỏ trên quảng cáo, nhưng không có CTA. Các quảng cáo tràn ngập trang và thu hút sự chú ý khỏi các yếu tố chính.
Bạn đề xuất giảm số lượng quảng cáo trên các trang sản phẩm và cấu hình lại trang web thân thiện với thiết bị di động để quảng cáo ít nổi bật hơn. 3 tháng sau, doanh số bán hàng tăng 25%.)
You want to analyze how people behave on the check-out page of your website, to see if you can reduce the number of abandoned carts.
When you compare the click maps across devices you notice an issue with the way the check-out page appears on a desktop.
There are hardly any clicks on the check-out button because the text appears to be too small. Instead, there’s a lot of cursor activity around the edges of the page, which suggests users are confused about how to navigate onwards.
It’s a quick fix: you make the check-out button more prominent on the page.
(Bạn muốn phân tích cách mọi người cư xử trên trang thanh toán trên trang web của bạn để xem liệu bạn có thể giảm số lượng giỏ hàng bị bỏ rơi hay không.
Khi so sánh bản đồ nhấp chuột trên các thiết bị, bạn nhận thấy có vấn đề về cách trang thanh toán xuất hiện trên máy tính để bàn.
Hầu như không có bất kỳ cú nhấp chuột nào vào nút thanh toán vì văn bản có vẻ quá nhỏ. Thay vào đó, có rất nhiều hoạt động của con trỏ xung quanh các cạnh của trang, điều này cho thấy người dùng đang bối rối về cách điều hướng trở đi.
Đó là cách khắc phục nhanh: bạn làm cho nút thanh toán nổi bật hơn trên trang.)
