Bài viết gần đây & Tin tức

Đâ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ả, thiết kế web, mẫu biểu… hay đơn giản là làm sao để…

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

  •  
  •  
  •  
  •  

Đâ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ả, 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.

Ứng dụng heatmap tăng chuyển đổi cho web

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

Heatmap là gì?

Heatmap là cách thể hiện dữ liệu trực quan bằng màu sắc, với màu nóng là các yếu tố phổ biến nhất và màu lạnh là các yếu tố ít phổ biến.

Bằng việc kết hợp dữ liệu, 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 để tăng sự tương tác.

Để 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ị
  • Tìm và sử dung các link, nút hay CTA trên trang
  • Chú ý vào các yếu tố quan trọng
  • Bị phân tán chú ý
  • Gặp vấn đề

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

  • Vẽ ra bức trang 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 nhất

Heatmap chỉ là thuật ngữ chung cho 3 loại công cụ khác nhau trong nó: scrollmap, clickmap, và movemap. Đã 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.

Scrollmap

Scrollmap hay biểu đồ cuộn trang, cho biết khách truy cập cuộn trang xuống được bao xa. Màu càng nóng, thì tỷ lệ càng nhiều người kéo đến vị trí đó.

Scrollmap

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 thì dùng scrollmap?

  • 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 ngừng cuộn nhiều nhất ở đâu. Đô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 đó.)

Clickmap

Clickmap cho biết nơi khách truy cập click chuột trên desktop hoặc chạm ngón trên điện thoại / máy tính bảng.

Clickmap

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?

  • Dùng để thấy 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.
  • 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.

Movemap

Movemap chỉ hoạt động với khách truy cập trên máy để bàn / laptop. Movemap cho biết nơi khách hàng hay 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.

Movemap

  • Khi nào dùng movemap?
  • Xem khách truy cập có bỏ qua yếu tố quan trọng nào trên trang 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

Khi nào thì dùng heatmap trên website?

Vậy khi nào thì cài heatmap, và cài ở trang nào?

Nếu như bạn mới dùng heatmap, đây là gợi ý về một số khu vực bạn nên theo dõi trước nhất.

Homepage và landing page

Homepage và landing page là cổng chính đi vào website. Thường chịu trách nhiệm cho ấn tượng đầu tiên của 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.

Cài heatmap ở các trang này sẽ cho biết bao nhiêu thông tin được nhìn thấy hoặc tuong tác, yếu tố nào được click hay bỏ qua.

Các trang tốt nhất

Các trang 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 gì đó. Lúc này movemap sẽ cho biết cái gì đang hoạt động tốt, từ đó hãy nhân đôi thành công.

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 hành đầu, chỉ khác là có cái gì đó ở các trang này, và 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ác 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.

Case study ứ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ì?

Taskworld

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ỏ trường thông tin. Có 5 trường thông chính 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 200K 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.

Epyphany

Ở 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

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.

Video Session

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.

Tham khảo từ Hotjar.

Trả lời

Your email address will not be published.