[Casestudy] Heatmap

Khi xây dựng sản phẩm online, một trong những phần mà chúng ta cần quan tâm là việc sắp xếp bố cục các khối nội dung trên sản phẩm. Làm sao để tối ưu vai trò của mỗi khối? Làm sao để các khối có sự nổi bật riêng nhưng vẫn kết nối với nhau trong cùng một thể? Chúng ta phải giải quyết những câu hỏi tương tự thế.

Câu trả lời thì có nhiều, nhưng trong đó có một đáp án mà bản thân mình luôn hứng thú và muốn viết vài dòng: heatmap.

Vậy nên, bài viết này là về heatmap và một trường hợp thực tế có liên quan đến heatmap mà mình từng xử lý trong vụ eCommerce (vụ eCommerce này là gì thì mời các bạn đọc thêm bài viết ở đây).

Từ việc hiểu khái niệm heatmap, mình sẽ vận dụng thêm vài nguyên tắc về product để đưa ra giải pháp trong các tình huống có các business strategy cụ thể.

Heatmap là gì?

Heatmap hay còn gọi là bản đồ nhiệt, thông thường sẽ cho thấy một trong hai yếu tố sau trên một website:

• Vùng được mắt người dùng tập trung nhìn nhiều nhất
• Vùng được người dùng click nhiều nhất (hoặc tab – với bản app hoặc web mobile)

Như vậy, khi xây dựng một sản phẩm, heatmap chính là thứ giúp chúng ta biết đâu là nơi nên đặt các khối nội dung quan trọng, và khu vực nào thì dành cho những nội dung ít quan trọng hơn. Xếp đúng và phù hợp thì sẽ không chỉ tối ưu hóa trải nghiệm người dùng, mà còn có thể tăng hiệu quả của các mục đích phía sau khi build trang (tăng đơn hàng, tăng lượng người click xem video/ lượt điền form khảo sát online v.v…)

Làm sao để đo lường và vẽ được heatmap?

Nếu là yếu tố thứ hai, vẽ dựa trên tương tác của người dùng với sản phẩm: thì hiện nay có rất nhiều công cụ làm được. Một ví dụ gần gũi là Google Page Analytics. Người dùng click vào đâu nhiều nhất? Người dùng đang ở trang A thì sau đó đi tiếp đến những trang nào? Số lượng click ở một vùng chiếm bao nhiêu phần trăm tổng lượng click trên trang? v.v… Google Page Analytics trả lời những câu hỏi như thế.

Với yếu tố đầu, vẽ lại vùng được mắt người dùng tập trung nhìn nhiều nhất: ta lại cần những công nghệ hiện đại hơn. Mình có đọc qua vài bài viết về việc sử dụng cảm biến nhiệt, tuy nhiên công nghệ này mình chưa nghiên cứu sâu, chỉ biết là làm được thôi và rất đắt đỏ.

Có một hướng dẫn hay nguyên tắc chung nào cho heatmap không?

Tùy vào giao diện mỗi sản phẩm mà phản ứng của người dùng cũng khác nhau, các vùng được tập trung tương tác hoặc thu hút ánh mắt người dùng cũng khác.

Tuy thế, có một nguyên tắc chung mà các heatmap đều chỉ ra: trên một website bản PC, sự chú ý tự nhiên sẽ tập trung nhiều nhất ở vùng Top Left. Sự chú ý này giảm dần khi càng về phía dưới và càng sang bên phải.

Trong hình minh họa dưới đây, các phần này được biểu thị bởi những đốm vàng cam.

Source: Monetizepros

Màu cam càng đậm, thì đó là vùng càng nhận được nhiều sự chú ý, chúng còn có tên là hot zone. Để tham khảo thêm, chúng ta có thể xem qua Google Heatmap – bản đồ nhiệt được Google sử dụng để show ra đâu là vùng quảng cáo adsense hiệu quả. Phần vàng đậm là nơi hiệu quả nhất. Tiếp đến là các phần vàng nhạt hay trắng.

Source: Google Adsense

Như thế, ta đã xác định được các vị trí hot mà mình nên dùng để đặt các nội dung quan trọng. Từ nguyên tắc này, mình sẽ phân tích ví dụ dưới đây để minh họa cách áp dụng heatmap vào thực tế như thế nào.

Case-study thực tế khi xây dựng một website thương mại điện tử

Đề bài: UX Optimize trang thông tin sản phẩm (Detail) của một website thương mại điện tử + Đưa ra solution cho vấn đề tăng đơn hàng.

Bài này có một tập hợp các đáp án, mình sẽ không list hết ra đây danh sách các đáp án ra đây mà chỉ tập trung phân tích thử một đáp án có liên quan đến heatmap mình đã nói phía trên.

Đó là: cung cấp tính năng Product Recommendations.

Phần Product Recommendations này bạn thường thấy dưới dạng các block sản phẩm có tên gọi như “Sản phẩm có thể bạn quan tâm”, “Sản phẩm có thể bạn muốn mua”, “Sản phẩm liên quan”, “Người dùng mua sản phẩm này thường mua kèm sản phẩm sau” v.v…

Đây chính là Cross-Sell, hình thức giúp doanh nghiệp bán được nhiều hàng hơn bằng cách đưa ra gợi ý cho họ.

Cụ thể là: khi user đang hứng thú với một sản phẩm, ta đề xuất thêm các sản phẩm khác cùng loại hoặc các sản phẩm mà ta nghĩ rằng họ sẽ quan tâm và có thể muốn mua chung. Đây cũng chính là việc áp dụng big data để phân tích người dùng rồi khai thác kết quả cho các mục đích khác nhau của doanh nghiệp.

Vấn đề là: ta nên xếp khối recommendation này vào đâu để tối ưu?

Thoạt tiên, khi thảo luận vấn đề này, một vài đồng nghiệp của mình nhìn tính năng Product Recommendations như một công cụ đem lại lợi ích cho doanh nghiệp (tăng đơn hàng) hơn là cho End Users (người mua). Các bạn cho rằng tính năng này làm phiền user, bởi user vào đây là để xem thông tin sản phẩm mà họ đang xem chứ không phải để xem các sản phẩm khác.

Tuy nhiên trên thực tế, nếu xét về UX, thì thực ra phần Product Recommendations cũng chính là một tính năng góp phần tối ưu hóa trải nghiệm người dùng.

Trong tình huống này, ta cung cấp cho người dùng hai trải nghiệm chính, bao gồm:

• Cung cấp thông tin sản phẩm mà người dùng đang xem
• Cung cấp các sản phẩm gợi ý để người dùng có thêm lựa chọn khi mua hàng

Xét trên phần main content của trang, ta sẽ phải sắp xếp hai khối nội dung:

• Thông tin sản phẩm đang xem (Khối 1)
• Sản phẩm gợi ý (Khối 2).

Rõ ràng, dựa trên nguyên tắc về heatmap, khối nào ở trên cao hơn sẽ nhận được sự chú ý nhiều hơn. Với hai khối nội dung đều cần thể hiện để tối ưu trải nghiệm người dùng, ta có thể gặp vấn đề ở chuyện thỏa mãn được trải nghiệm này thì sẽ phải hạn chế trải nghiệm kia hoặc ngược lại. Cùng lúc, ta không thể thỏa mãn cả hai.

Vậy vấn đề bây giờ là ưu tiên thỏa mãn cái nào hơn.

Trải nghiệm 1 là thứ bắt buộc phải có, phải làm đúng và đủ. Người dùng cần xem thông tin chính xác về sản phẩm như tính năng, giá bán, thành phần, công dụng, nhà sản xuất v.v… rồi mới quyết định mua hay không. Các thông tin không thể sơ sài mà phải đầy đủ rõ ràng. Thỉnh thoảng, nó ngắn gọn, nhưng cũng có khi rất dài và chi tiết, cần mấy lần cuộn chuột.

Trải nghiệm 2 là trải nghiệm cộng thêm. Trải nghiệm này không chỉ cần làm đúng và đủ, mà phải làm tốt. Làm tốt thì không chỉ user thỏa mãn mà cả doanh nghiệp cũng hạnh phúc. Người dùng xem thêm nhiều sản phẩm mà họ thấy hứng thú. Khả năng tăng đơn hàng cũng lên theo.

Bây giờ, mình sẽ có hai option.

Option 1: Hai khối thông tin được xếp theo thứ tự như sau: Thông tin sản phẩm – Sản phẩm gợi ý.

Hình minh họa:

Source: mình tự vẽ.

Người dùng vào trang, scroll chuột để xem thông tin sản phẩm. Để xem đến khối Sản phẩm gợi ý, ta phải scroll chuột nhiều lần. Chưa kể, nhiều sản phẩm có phần thông tin chi tiết rất dài, nhiều khi chưa đọc hết phần thông tin người dùng đã lướt qua hoặc thoát trang.

Giả sử ta xử lý bằng cách chỉ show một phần của thông tin sản phẩm (5-10 dòng), rồi thêm vào nút [Xem toàn bộ thông tin], ta có thể rút ngắn trang lại và đẩy cho khối Sản phẩm gợi ý hiển thị lên trên. Hình minh họa như sau:

Source: mình tự vẽ.

Nhưng bài toán đã được giải quyết triệt để chưa? Theo mình là chưa. Bởi dù có thấy được khối Sản phẩm gợi ý rồi đi chăng nữa, thì hãy nhớ, nút [Xem toàn bộ thông tin] vẫn đang nằm trên, và mục đích ban đầu của người dùng khi vào trang là gì? Chính là để xem thông tin sản phẩm. Vậy khả năng cao là họ sẽ click luôn vào nút đó để đọc hết thông tin mà chưa quan tâm gì đến phần Sản phẩm gợi ý ngay phía dưới.

Với option này, cơ hội để phần Sản phẩm gợi ý được nhìn thấy và tiếp đến được click vào xem là không nhiều.

Mình thử chuyển qua option 2 với hai khối thông tin được xếp theo thứ tự như sau: Sản phẩm liên quan –  Thông tin sản phẩm.

Hình minh họa:

Source: mình tự vẽ.

Lúc này, để xem thông tin sản phẩm, user phải scroll chuột ngang qua vùng có chứa Sản phẩm gợi ý. Chưa cần biết user có click vào vùng này hay không, nhưng đầu tiên, cơ hội để vùng này được xuất hiện trong tầm mắt user đã tăng lên nhiều so với option 1. Nếu việc ứng dụng Big Data ở đây thật sự tốt và đưa ra các recommendations chuẩn xác, thì lượng click vào vùng Sản phẩm gợi ý chắc chắn sẽ tăng. Khi đi ngang qua vùng sản phẩm gợi ý, người dùng có thể thao tác click mở new tab và để đó, tiếp tục kéo xuống đọc xong phần Thông tin sản phẩm rồi sau đó chuyển sang các tab vừa mở để xem thêm thông tin.

Rõ ràng với option này, trải nghiệm của người dùng về việc được gợi ý thêm các sản phẩm mà họ có thể quan tâm đã được tối ưu. Còn trải nghiệm về việc được cung cấp đầy đủ các thông tin của sản phẩm mà họ đang xem cũng không quá bị ảnh hưởng.

Và mình chọn option này.

Bài viết hôm nay dừng tại đây. Mình share thêm một bài khá hay về heat map: 19 things we can learn from numerous heatmap tests.

Xem thêm: Khóa học Product Management – Quản lý sản phẩm cho người mới bắt đầu