Heatmap: Hướng dẫn đầy đủ qua ví dụ, công cụ và case study

Nếu bạn quan tâm đến việc ứng dụng heatmap vào cải thiện hiệu quả, thiết kế web, mẫu biểu… hay đơn giản là làm sao để đọc thông tin từ heatmap thì nội dung dưới đây hoàn toàn phù hợp với bạn.

Hãy bắt đầu với câu hỏi…

Heatmap (hoặc Heat map) là gì?

Heatmap hay heat map (biểu đồ nhiệt) là cách thể hiện dữ liệu trực quan hành vi của khách truy cập website thông qua màu sắc, với 2 loại màu (màu nóng là nơi xảy ra nhiều tương tác nhất, và màu lạnh là nơi xảy ra ít tương tác).

Bằng việc tổng hợp toàn bộ dữ liệu thu thập được (trong một khoảng thời gian), heatmap mang đến một cái nhìn nhanh chóng về cách khách truy cập tương tác với từng trang web, từ đó nhận ra xu hướng trong hành vi của họ, làm cơ sở để tiến hành tối ưu (thiết kế, UI, UX…), tăng tương tác và khả năng chuyển đổi.

Để xem được heatmap dữ liệu hành vi khách hàng trên website của mình, điều cần làm đầu tiên là cài đặt phần mềm heatmap.

Làm thế nào để cài đặt Heatmap cho website?

Bạn có thể cài đặt phần mềm heatmap lên website của mình bằng cách đăng ký sử dụng các dịch vụ cung cấp công cụ phân tích hành vi trên nền tảng web (online)

Với người từng dùng qua bất kỳ dịch vụ trực tuyến nào, cách cài đặt thường khó hình dung ra, nhưng chủ yếu chỉ qua vài bước đơn giản sau:

1. Tìm đơn vị cung cấp dịch vụ này
2. Đăng ký 1 tài khoản dùng thử
3. Xác nhận tài khoản đăng ký
4. Đăng nhập vào phần mềm bằng tài khoản đã đăng ký
5. Lấy mã theo dõi và cài vào website
6. Bắt đầu phân tích với dữ liệu được thu thập

Nói 6 bước, nhưng khi quen rồi, quá trình này diễn ra rất nhanh, trong vòng chưa tới 5 phút là bạn đã có thể đi vào phân tích được rồi.

Nếu bạn đăng ký tài khoản dùng thử heatmap của Smart Convert, bạn có thể xem hướng dẫn cài đặt tại đây.

Vì sao nên dùng heatmap cho website?

Mục tiêu của một website thường là nơi để phục vụ cho nhu cầu tìm thông tin, đăng ký dịch vụ hay mua sản phẩm, nhưng nếu người ta vào website mà lại gặp khó khăn khi tìm kiếm thông tin thì họ có thể rời khỏi website mà chẳng muốn quay lại.

Phân tích những “khó khăn, trở ngại” chỉ là một phần trong mô hình phân tích khách truy cập, ngoài ra ta có thể phân tích được động cơ cũng như yếu tố thúc đẩy họ thực hiện chuyển đổi khi vào website.

Đó chính là lý do vì sao bạn cần dùng heatmap, bởi khi nhìn vào, bạn có thể biết ngay liệu người ta có:

• Tìm được thông tin giá trị?
• Click vào các link, nút hay CTA trên trang?
• Chú ý vào các yếu tố quan trọng mà bạn muốn họ xem?
• Bị phân tán chú ý bởi điều gì không?
• Gặp vấn đề ở chỗ nào và vì sao thoát khỏi trang?

Ở mức độ cao hơn, heatmap giúp bạn:

• Vẽ ra bức tranh trực quan cho khách hàng hay sếp, giúp họ hiểu rõ điều gì đang xảy ra mà không cần xem tới số liệu
• Đưa ra quyết định dựa trên dữ liệu, thông tin cho các vấn đề như thử nghiệm, cập nhật và thiết kế lại website
• Đo lường sự cải thiện
• Đưa ra bằng chứng đanh thép cho đề xuất của bạn đối với website

3 Loại heatmap cơ bản

Heatmap chỉ là thuật ngữ chung cho 3 loại khác nhau trong đo lường hành vi, bao gồm Scroll-map, Click-map, và Move-map.

Đã có 1 bài viết về các tính năng heatmap đề cập tới 3 loại này, tuy nhiên bài này sẽ nói chi tiết hơn.

Click map – Biểu đồ click chuột

Click map cho biết những vị trí mà khách truy cập thường xuyên click vào (trên PC), chạm ngón (Tap) trên điện thoại / máy tính bảng.

Màu nóng (đỏ, cam, vàng) cho biết những vị trí được click / chạm nhiều nhất, còn màu lạnh (xanh lá, xanh dương) là những vị trí được click / chạm ít nhất.

Khi nào thì dùng clickmap?

• Kiểm tra khách truy cập có click vào link, nút, CTA hay không.

  (Lưu ý: việc theo dõi click trên một trang web có thể thực hiện bằng phần mềm Google Tag Manager – GTM bằng cách chèn mã theo dõi / tracking code lên những vị trí bạn muốn, tuy nhiên sẽ có trường hợp khách truy cập click vào những vị trí mà bạn không hề chèn mã)

• Kiểm tra những chỗ được click nhưng không phải link. Nếu như vậy thì nghĩa họ đang hiểu lầm thông tin đó được dẫn link, hoặc có nhu cầu tìm hiểu thêm thông tin.
• So sánh hành vi trên các loại thiết bị khác nhau. Hành vi của khách truy cập trên Desktop

Move map – Biểu đồ rê chuột

Move map, cho biết nơi khách hàng thường xuyên rê chuột khi vào trang. Con trỏ chuột càng ở lâu tại điểm nào đó, thì chỗ đó sẽ có màu nóng.

Khi nào / tình huống nào thì dùng Move map?

• Xem những vùng thường xuyên được chú ý (rê chuột) vào nhất
• Xem yếu tố quan trọng trên trang có nằm trong sự chú ý của khách truy cập không
• Xem họ có tương tác với khu vực nào nhiều hơn các khu vực khác không
• Xem họ có bị phân tán bởi quá nhiều yếu tố trên trang không

Scroll map – Biểu đồ cuộn trang

Scroll map cho biết khách truy cập cuộn đến đâu thì thoát trang. Màu càng nóng, thì tỷ lệ khách truy cập (trên tổng số khách truy cập toàn trang) tại vị trí đó càng cao.

Một số biểu đồ cuộn trang sẽ cho biết tỷ lệ % khách truy cập ở 1 vị trí khi bạn trỏ con chuột đến vị trí đó, một số khác thì bên cạnh % số khách truy cập, còn cho biết thời gian trung bình họ dừng tại vị trí đó (theo giây), để bạn có thể đánh giá sự quan tâm của họ.

Thông thường, khi dãy màu chuyển lạnh (từ xanh lá sang xanh đậm) cho thấy chỉ có một tỷ lệ ngày càng nhỏ khách truy cập là đi đến cuối trang.

Ngoài ra, ta còn có thể thấy được sự thay đổi màu đột ngột giữa các khu vực, xảy ra khi một tỷ lệ lớn khách truy cập ngừng cuộn tại 1 điểm trên trang.

Khi nào thì dùng Scrollmap?

• Tìm thông tin quan trọng (mà bạn muốn người ta phải xem) bị bỏ qua. Nếu như vậy thì đưa nó vào vị trí dễ nhìn hơn. Với những trang dài và nhiều thông tin như landing page thì việc này phù hợp.
• Tìm vị trí khách truy cập thoát khỏi trang nhiều nhất. Đôi khi ngừng cuộn vì họ nghĩ đã hết trang rồi, không còn gì nữa.
• Xem đường gấp trung bình nằm ở đâu, để tập trung nỗ lực tăng tương tác lên phần giá trị nhất của website. (Đường gấp trung bình là vạch kẻ “vô hình” giữa phần màn hình đầu tiên khi khách truy cập vào website mà không cuộn chuột và phần còn lại).

Phân tích heatmap cho những trang nào trên website?

Heatmap là công cụ trực quan nên thường cuốn hút những ai mới lần đầu sử dụng và có khuynh hướng đi phân tích tất cả các trang trên website.

Chính nhờ làm như vậy mà bạn… không thu hoạch được gì đáng kể cả.

Hãy tập trung phân tích ở những trang đáng chú ý hoặc quan trọng đối với website. Chẳng hạn:

Phân tích homepage và landing page

Homepage và landing page là những lối vào chính của website.

Thường chịu trách nhiệm cho việc tạo ấn tượng với khách truy cập bằng cách cung cấp thông tin họ muốn, quyết định việc họ có xem tiếp các nội dung còn lại hay thoát khỏi website.

Đây là các trang quan trọng nên việc phân tích hành vi bằng heatmap ở các trang này sẽ cho biết bao nhiêu thông tin được nhìn thấy hoặc tương tác, yếu tố nào được click hay bỏ qua.

Các trang tốt nhất (best performance)

Các trang hoạt động tốt nhất (trang sản phẩm nhiều lượt xem nhất, bài viết nhiều người comment nhất…) rõ ràng là làm đúng điều gì đó.

Việc phân tích heatmap sẽ cho biết điều gì đang hoạt động tốt, khám phá các yếu tố hay họ bạn có thể sử dụng cho các trang khác.

Các trang chưa như kỳ vọng

Các trang hoạt động kém cũng quan trọng như các trang tốt nhất, khác biệt nằm ở việc có cái gì đó không tốt ở các trang này.

Việc phân tích bằng heatmap có thể cho bạn biết khách truy cập không thấy hoặc tương tác, để sớm hành động.

Các trang mới

Trang mới hẳn nhiên không có nhiều dữ liêu, nhưng heatmap sẽ là cách hay để lấy một vài thông tin ban đầu cho biết các trang này hoạt động ra sao.

Bạn có thể xem chi tiết và thực hành Quy trình phân tích bằng heatmap.

Smartconvert.co

Một số case study ứng dụng heatmap

Taskworld – Tăng chuyển đổi lên 40% trong 5 phút

Taskworld là giải pháp quản lý dự án. Mục đích taskworld sử dụng trang này để cho người dùng vào đăng ký tài khoản.

Tuy nhiên, khi sử dụng heatmap để đo lường hành vi người dùng, họ thấy cách người dùng tương tác với trang khác với mục đích họ muốn nên họ đã đưa ra phương án cải thiện.

Dưới đây là hình ảnh heatmap từ trang đăng ký của họ, bạn đọc được gì?

Khó đúng không, thực ra có 3 vấn đề:

• Nút CTA nhận được số click không bằng vị trí của chữ Sign-in. Rõ ràng là người ta không muốn đăng ký mà muốn vào trang ứng dụng hơn.
• Bỏ qua trường thông tin. Có 5 trường thông tin nhận được sự chú ý ngày càng giảm. Nghĩa là có nhiều người không hoàn thành quá trình đăng ký.
• Chọn múi giờ: nhiều người bỏ qua múi giờ nên nhận được thông báo lỗi khi đăng ký, điều đó làm họ khó chịu và kết quả vì vậy giảm.

Với điều chỉnh trong vòng 5 phút:

• Bỏ Sign in
• Form chỉ còn lại trường Email
• Bỏ chọn múi giờ

Sau khi điều chỉnh:

• Tỷ lệ chuyển đổi lên 40%
• Bỏ đăng ký giảm 4,5%
• Lỗi khi đăng ký giảm 29,5%

Epiphany & Time4Sleep – Tăng chuyển đổi trên di động lên 63%

Epiphany & Time4Sleep là nhà bán lẻ giường và nội thất phòng ngủ, với hơn 200.000 phiên truy cập 1 tháng và chủ yếu đến từ mobile.

Họ muốn:

• Tăng chuyển đổi tổng thể
• Tăng chuyển đổi mobile
• Tăng số khách truy cập vào trang sản phẩm
• Tăng số khách truy cập vào giỏ hàng

Thông qua sử dụng heatmap và Google Analytics, Epiphany thấy rằng các trang danh mục hiện tại không giúp khách truy cập tìm được thứ họ cần. Nên một cấu trúc trang mới cần được thực hiện.

Ở trang ban đầu, người ta có xu hướng cuộn sâu tới cuối trang, nhưng điều đó không hề tốt: bởi không phải vì họ thích nội dung, mà vì họ không tìm thấy thứ họ cần.

Ở trang được chỉnh sửa, có một bộ lọc mới được đặt trên đầu trang. Sau khi xem heatmap, thấy ít người cuộn xuống cuối trang hơn, đơn giản vì họ có thể tìm thấy thứ mình cần ngay trên đầu trang.

Kết hợp với một số thay đổi khác (SEO, CRO, thiết kế, nội dung), Epiphany đạt được sự cải thiện:

• Tỷ lệ chuyển đổi tăng 19,7%
• Tỷ lệ chuyển đổi trên di động tăng 63%
• Số user vào giỏ hàng tăng hơn 36%
• User vào nội dung thông tin tăng 124%

Ngoài 2 case study ứng dụng thành công heatmap bên trên, bạn có thể xem thêm các case ứng dụng heatmap khác qua những bài viết dưới đây

• Tăng lượng đăng ký dịch vụ lắp đặt internet bằng 1 sửa đổi đơn giản
• Sử dụng Movemap, vaytientructuyen.com tăng 20% số đăng ký thông tin
• Case phân tích hành vi khách hàng bằng heatmap của Kopywriting Kourse

Heatmap kết hợp với các công cụ dưới đây sẽ làm giàu insight khách hàng

Chỉ sử dụng một trong các loại heatmap trên kia cũng giúp ta hiểu được điều gì đang xảy ra với website, cũng như có phương án chỉnh sửa cần thiết, nhưng để giải thích được vì sau diễn ra như thế, ta cần kết hợp heatmap với các công cụ khác.

Smartconvert.co đã có bài viết giới thiệu mô hình đầy đủ nhất trong việc phân tích hành vi, nên ở đây chỉ giới thiệu một số công cụ tiêu biểu khác (ngoài heatmap) được dùng trong mô hình này. Chẳng hạn:

Video session / Session recorded

Video Session cho phép ghi lại video các thao tác diễn ra khi khách truy cập vào trang, từ đó ta có thể phân tích vấn đề kỹ lưỡng hơn.

Bình chọn / Khảo sát (Poll / Survey)

Khi thông tin từ heatmap cho thấy khách truy cập đang bỏ qua một yếu tố nào đó trên trang, hoặc có điều gì đó không ổn, ta có thể mở một khung bình chọn hoặc câu hỏi khảo sát để thu thập thêm thông tin.

Tại sao bạn nên dùng tính năng này kết hợp với Heatmap? Vì đây là một công cụ cần thiết trong mô hình phân tích toàn diện 3 LỰC liên quan đến khách truy cập.

Các lực này bao gồm:

• Động lực (Driver): Điều gì khiến khách hàng muốn vào website của bạn?
• Trở lực (Barrier): Điều gì ngăn cản họ và khiến họ rời khỏi website?
• Hấp lực (Hook): Điều gì làm họ thực hiện hành động chuyển đổi?

Bình chọn và Khảo sát đều có thể được ứng dụng trong việc phân tích 3 lực này.

Bạn có thể sử dụng 1 trong 14 loại thông báo thông minh của Smart Promotion để “thi triển” hoạt động này.

Theo dõi Phễu

Một số nhà cung cấp có tính năng này, giúp theo dõi phễu chuyển đổi qua các giai đoạn (thường được xác định bằng một đường dẫn trên website) và xem giai đoạn nào xảy ra vấn đề trong toàn bộ phễu.

Post Views: 1.225