Đây là một bài tóm lược từ bài viết rất hay của Hotjar, một ông lớn trong làng phân tích hành vi khách truy cập web (heatmap). Bài viết đi từ việc nói sơ qua heatmap là gì, vì sao nên sử dụng, đến việc nói kỹ về 3 loại heatmap cơ bản và khi nào nên sử dụng chúng.

Nếu bạn quan tâm đến việc ứng dụng heatmap vào cải thiện hiệu quả website, thiết kế lại giao diện 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 là cách thể hiện dữ liệu trực quan hành 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, heatmap mang đến một cái nhìn nhanh chóng về cách người ta tương tác với từng trang web, từ đó nhận ra xu hướng và tối ưu (thiết kế, UI, UX…) để tăng sự tương tác, chuyển đổi.

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

Vì sao nên dùng heatmap cho website của bạn?

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, khó hiểu thì họ có thể rời khỏi website mà chẳng muốn quay lại.

Đó 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ì đó mà 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

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.

Scroll map

Scrollmap hay biểu đồ cuộn trang, 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 ở tại vị trí đó càng cao.

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

Thông thường, màu sẽ chuyển lạnh (từ xanh lá sang xanh đậm) cho thấy là có một tỷ lệ ngày càng nhỏ số khách đ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 / tình huống nào dùng scroll map?

• Dùng khi muốn tìm xem có thông tin quan trọng nào bị bỏ mặc hay không. Nếu vậy thì đưa nó lên vị trí dễ nhìn hơn. Với những trang dài và nhiều thông tin như landing page thì khỏi nói.
• Muốn hiểu khách truy cập thoát khỏi trang tại vị trí nào 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à một phần của trang mà khách truy cập thấy ngay khi họ vào trang đó)

Click map

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 / tình huống nào dùng clickmap?

• Dùng để biết khách truy cập có click vào link, nút, CTA hay không, hoặc có lờ đi thứ gì đó bạn muốn họ click vào 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
• Xem coi người ta có click vào những chỗ vốn dĩ không click được hay không. Nếu có như vậy nghĩa là mình gây hiểu lầm cho họ.
• So sánh hành vi trên các thiết bị khác nhau.
• Dựa trên clickmap, thì có thể thay đổi các yếu tố, để nhận được nhiều click hơn.

Move map

Move map là biểu đồ nhiệt hành vi rê chuột, 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

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, điều đó thường đồng nghĩa với việc 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. Đó là các trang nào?

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, và quyết định việc họ có xem tiếp các nội dung còn lại hay ra 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 hoạt động tốt nhất

Các tranghoạ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 hoạt động kém

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.

Một số case study / tình huống ứng dụng heatmap

Taskworld – cải thiện chuyển đổi lên 40% chỉ trong 5 phút

Taskwworld là giải pháp quản lý dự án. Mục đích taskwworld 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ì?

Có 3 vấn đề:

• Nút kêu gọi hành động 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ờ

Taskworld cải thiện:

• 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 và Time4Sleep – tăng chuyển đổi trên di động lên 63%

Là nhà bán lẻ giường và vật dụng phòng ngủ, với hơn 200.000 phiên truy cập 1 tháng và chủ yếu từ mobile. Epiphany 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%

Sử dụng heatmap kết hợp với công cụ phân tích hành vi sẽ làm giàu insight

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. Chẳng hạn:

Video session / Session recorded

Tính năng này 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.

Phễu

Một số nhà cung cấp có tính năng này, giúp theo dõi chuyển đổi qua các bước và xem vị trí nào xảy ra vấn đề trong toàn bộ phễu.

Bình chọn / Khảo sát

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.

Ybox.vn