Heatmap là gì? Cách đọc click + scroll map

Heatmap là biểu đồ nhiệt trực quan hóa hành vi người dùng trên trang web: điểm nóng màu đỏ-cam cho thấy nơi người dùng tương tác nhiều nhất, điểm lạnh màu xanh cho thấy vùng bị bỏ qua. Heatmap giúp nhóm sản phẩm và marketing hiểu người dùng thực sự làm gì trên trang, không phải họ nói họ làm gì.

Định nghĩa ngắn gọn

Heatmap thu thập dữ liệu từ hành vi thực tế của nhiều người dùng và tổng hợp thành một ảnh nhiệt duy nhất. Màu sắc đại diện cho mật độ tương tác: đỏ cao nhất, qua cam, vàng đến xanh thấp nhất. Có ba loại heatmap phổ biến: click map, scroll map và move map.

Tại sao quan trọng

• Analytics số liệu như GA4 cho biết bao nhiêu người vào trang và ở lại bao lâu, nhưng không cho biết họ tương tác với phần nào của trang
• Heatmap giúp phát hiện các vấn đề UX mà survey hoặc analytics định lượng không thể thấy được: nút bị click nhầm, section quan trọng bị bỏ qua, CTA không ai thấy
• Dữ liệu heatmap cụ thể và trực quan giúp team dễ đồng thuận về cải thiện hơn so với ý kiến cảm tính

Thành phần chính

Click Map

Click map cho thấy người dùng click vào đâu. Thông tin hữu ích bao gồm: link nào được click nhiều nhất, người dùng có click vào element không phải link không (rage click), CTA có đủ nổi bật không và người dùng click vào vùng nhầm thay vì vùng dự định.

Scroll Map

Scroll map cho thấy bao nhiêu phần trăm người dùng scroll đến từng vùng của trang. Đường biên ngang cho thấy điểm thoát phổ biến. Nếu 70% người thoát trước khi đến CTA, CTA cần đặt lên cao hơn hoặc thêm CTA ở vị trí mà phần lớn người đọc đến được.

Move Map (Mouse Tracking)

Move map theo dõi chuyển động chuột — có tương quan với ánh mắt người dùng trên desktop. Cho thấy người dùng đọc theo pattern nào (thường là F-pattern hoặc Z-pattern) và phần nào thu hút sự chú ý nhất.

Ví dụ thực tế

Một landing page giáo dục có scroll map cho thấy 80% người dùng đọc đến section "Lộ trình khóa học" nhưng chỉ 40% scroll tiếp đến form đăng ký ở cuối trang. Click map cho thấy nhiều người click vào ảnh giảng viên — vùng không phải link. Giải pháp: thêm CTA ngay sau section lộ trình và thêm link bio giảng viên. Sau khi triển khai, tỉ lệ điền form tăng.

So sánh với khái niệm liên quan

| Công cụ | Cho biết gì | Giới hạn | |---|---|---| | Click map | Người dùng click vào đâu | Không biết lý do | | Scroll map | Người dùng đọc đến đâu | Không biết họ đọc hay skip | | Session recording | Hành vi từng phiên cụ thể | Tốn thời gian xem | | GA4 | Số liệu tổng hợp | Không có hành vi chi tiết | | A/B test | Phiên bản nào chuyển đổi tốt hơn | Cần traffic đủ lớn |

Checklist áp dụng

1. Cài heatmap tool (Hotjar, Microsoft Clarity, Crazy Egg) trên trang có traffic cao nhất
2. Thu thập dữ liệu ít nhất 1-2 tuần trước khi phân tích
3. Kiểm tra scroll map: CTA quan trọng nhất nằm ở ngưỡng scroll bao nhiêu?
4. Kiểm tra click map: người dùng có click nhầm vào element không phải link không?
5. So sánh heatmap desktop và mobile — thường rất khác nhau
6. Xác định 2-3 vấn đề cụ thể, không cố sửa tất cả cùng lúc
7. Test thay đổi và thu thập heatmap mới để so sánh kết quả

Sai lầm thường gặp

• Thu thập dữ liệu quá ít người dùng — kết luận từ dưới 200-500 phiên không đủ đại diện
• Quên phân tách heatmap theo thiết bị — mobile và desktop có pattern hoàn toàn khác
• Kết luận quá sớm từ heatmap mà không kết hợp với dữ liệu chuyển đổi
• Coi heatmap là lý do, không phải triệu chứng — "không ai scroll đến CTA" là triệu chứng, lý do có thể là nội dung trước đó không đủ thuyết phục
• Không cài heatmap trên mobile — phần lớn traffic thực tế từ điện thoại

Kết luận

Heatmap là công cụ diagnostic — cho thấy vấn đề, không chỉ ra giải pháp. Kết hợp heatmap với dữ liệu chuyển đổi từ GA4 và phỏng vấn người dùng mới có bức tranh đầy đủ. Dịch vụ tối ưu UI/UX của Skylabs bao gồm phân tích hành vi, xác định vấn đề và đề xuất cải thiện có ưu tiên theo impact.