Không phải nội dung nào xuất hiện trên website cũng được mắt người dùng nhìn thấy.
Bạn đã bao giờ dành hàng giờ sửa nội dung trang chủ, chọn ảnh sản phẩm rồi đặt nút “Mua ngay” ở nơi dễ thấy nhất? Nhưng dù đã chăm chút từng chi tiết, tỷ lệ chuyển đổi vẫn không thay đổi.
Điều này có thể xảy ra vì người dùng chưa từng nhìn đến phần thông tin bạn muốn họ đọc. Khi vào một website, phần lớn chúng ta lướt mắt để tìm thứ mình cần, thay vì đọc lần lượt từng câu như với một cuốn sách.
Hành trình này được gọi là eye gaze patterns – những mô hình di chuyển của ánh mắt khi tiếp xúc với giao diện. Vậy mắt người dùng đi theo đường nào, và chúng ta có thể làm gì để họ nhìn thấy thông tin cần thiết?
Eye gaze patterns là gì?
Eye gaze patterns, hay bản đồ di chuyển và hành trình của mắt là quỹ đạo ánh nhìn khi chúng ta tiếp xúc với website, ứng dụng di động, banner hay landing page. Những chuyển động này có thể diễn ra tự nhiên hoặc có chủ đích, tùy vào điều bạn đang tìm kiếm.
Các nghiên cứu hành vi cho thấy, người dùng trên môi trường số gần như không đọc từng từ một. Thay vào đó, họ chủ yếu lướt hoặc quét nội dung (skimming/scanning) để tìm những “điểm neo” phù hợp với mục tiêu của mình. Quá trình này gồm hai chuyển động mắt liên tục:
- Saccades (nhảy mắt): Những cú nhảy nhanh giữa các điểm dừng, kéo dài 20-200 mili giây. Trong khoảng thời gian này, não bộ tạm thời rơi vào trạng thái “mù thị giác” (saccadic suppression), không thu nhận dữ liệu ngữ nghĩa.
- Fixations (điểm dừng nhìn): Những lúc mắt dừng tại một vị trí trong khoảng 200-300 mili giây hoặc lâu hơn. Đây mới là thời điểm não bộ thực sự tiếp nhận và ghi nhớ thông tin.
Nói cách khác, mắt dừng ở đâu thì nguồn lực xử lý của não tập trung ở đó. Những nội dung nằm ngoài điểm dừng gần như không tồn tại trong nhận thức người dùng, dù vẫn hiển thị rõ trên màn hình.
Vì sao mắt chỉ “lướt” qua nội dung?
Mắt không nhìn rõ tất cả những gì trước mặt
Thị giác trung tâm (foveal vision) chỉ chiếm 1-2% trường nhìn, nhưng là vùng duy nhất cho phép ta nhìn sắc nét, đọc chữ và phân tích chi tiết. Trong khi đó, khoảng 98-99% còn lại thuộc về thị giác ngoại vi (peripheral vision) – vùng nhìn mờ và không đọc được chữ, nhưng rất nhạy với những gì đang chuyển động, độ tương phản, màu sắc nổi bật và những khối hình lớn.
Do phần nhìn rõ quá nhỏ, não bộ phải dựa vào dữ liệu quá khứ để tính toán và điền vào những khoảng trống. Vì vậy, phần lớn những gì bạn nghĩ mình “thấy” trên website thực chất được não tự dựng lại theo cách này.
Não bộ ưu tiên cách xử lý ít tốn sức
Nhà tâm lý học Daniel Kahneman từng chỉ ra hai hệ thống xử lý tư duy song song ảnh hưởng đến cách mắt di chuyển, trong đó hệ thống 1 hoạt động vô thức với những phản xạ diễn ra trong chưa đầy 50 mili giây. Một khuôn mặt, mũi tên, hình ảnh tương phản cao hay vật thể chuyển động đều có thể kéo mắt về phía chúng ngoài ý muốn của chúng ta.
Còn hệ thống 2 xử lý chậm và tốn nhiều năng lượng nhận thức hơn, được huy động khi chúng ta phải đọc một đoạn văn dài hoặc so sánh bảng giá phức tạp. Đây là lúc việc xem một website bắt đầu đòi hỏi nhiều sự tập trung hơn.
Nghiên cứu của Shamsi T. Iqbal và Brian P. Bailey cho thấy, độ khó của nhiệm vụ cũng ảnh hưởng đến mức tập trung của mắt. Với nhiệm vụ dễ, mắt ở vùng thông tin chính dưới 50% thời gian, còn lại là “lang thang” khắp màn hình. Khi nhiệm vụ khó hơn, mắt lại dành 70-80% thời gian cho khu vực chứa thông tin cần để giải quyết vấn đề.
Việc phải tập trung nhiều hơn cũng có cái giá của nó. Giao diện càng phức tạp, chúng ta càng nhanh mệt mỏi về nhận thức và dễ bỏ cuộc, chứ không khám phá được nhiều hơn.
Khi việc đọc lấn át cảm xúc mua hàng
Một nghiên cứu chụp cộng hưởng từ não (fMRI) đã so sánh phản ứng khi người dùng xem hai website bán giày là Zappos.com và Shoe Guru. Trong đó, Zappos có nhiều chữ và menu, còn Shoe Guru sử dụng giao diện tối giản với một hình ảnh sản phẩm nổi bật.
Ở Zappos, vùng nhân cúp (Nucleus Accumbens) – nơi liên quan đến cảm xúc và phần thưởng gần như không hoạt động trong 10 giây đầu tiên. Theo cách lý giải của nghiên cứu, mắt người dùng lúc này còn bận đọc và giải mã lượng chữ trên trang.
Ngược lại, Shoe Guru ghi nhận đỉnh cảm xúc mua hàng chỉ sau 6 giây, nhờ hình ảnh sản phẩm chính (hero shot) và bố cục phân cấp rõ ràng. Kết quả này cho thấy việc tăng tải nhận thức có thể đi kèm với giảm cảm xúc mua hàng, một điều cần cân nhắc khi thiết kế trang bán hàng.
Mắt thường đi theo những “lộ trình” nào?
Ánh mắt không hoàn toàn di chuyển ngẫu nhiên trên màn hình. Tùy loại nội dung và lượng thông tin trên trang, các nghiên cứu theo dõi mắt (eye-tracking) ghi nhận 7 mô hình quét mắt thường gặp.
F-pattern – Khi trang có nhiều chữ
F-pattern được Jakob Nielsen phát hiện và công bố vào các mốc 2006/2018. Mô hình này xuất hiện trên trang tin tức, blog, tài liệu học thuật, kết quả tìm kiếm và cả danh sách sản phẩm thương mại điện tử.
Mắt bắt đầu bằng việc quét ngang toàn bộ dòng đầu tiên, rồi hạ xuống và quét một đoạn ngang ngắn hơn. Sau đó, nó trượt dọc mép trái để tìm những từ đầu đoạn hoặc đầu mục danh sách, tạo thành hình gần giống chữ F.
Hệ quả là góc dưới bên phải và lề phải gần như trở thành “vùng mù”, khiến nút kêu gọi hành động (CTA) hoặc thông điệp giá trị đặt ở đây bị bỏ qua hoàn toàn. Để hạn chế điều này, bạn có thể đưa từ khóa, con số hoặc thông điệp quan trọng vào 2-3 từ đầu dòng. Cách sắp xếp này gọi là front-loading, thường được kết hợp với tiêu đề phụ để chia nhỏ nội dung.
Z-pattern – Khi trang ít chữ, nhiều hình
Trên landing page bán hàng, phần đầu trang (hero section) hay form đăng nhập đơn giản, mắt có xu hướng đi theo hình chữ Z. Nó bắt đầu ở góc trên-trái, quét sang góc trên-phải dọc thanh điều hướng, rồi đi chéo qua hình ảnh trung tâm xuống góc dưới-trái. Điểm dừng cuối cùng là góc dưới-phải, còn gọi là terminal area – nơi phù hợp nhất để đặt CTA chính trong lộ trình này.
Sơ đồ Gutenberg
Với những trang có thông tin phân bổ đồng đều, sơ đồ Gutenberg chia giao diện thành 4 vùng thị giác với vị trí và mức độ được chú ý khác nhau:
| Vùng thị giác | Vị trí | Cách mắt tiếp cận |
|---|---|---|
| Primary optical area | Góc trên-trái | Được chú ý nhiều nhất. |
| Strong fallow area | Góc trên-phải | Được chú ý sau lượt quét ngang đầu tiên. |
| Weak fallow area | Góc dưới-trái | Gần như là điểm mù. |
| Terminal area | Góc dưới-phải | Điểm dừng cuối cùng, phù hợp để đặt nút hành động. |
Tam giác vàng
Các nghiên cứu Eyetrack III của Poynter và một nghiên cứu của Google trên trang kết quả tìm kiếm ghi nhận những điểm dừng tạo thành hình tam giác vuông. Góc vuông của tam giác nằm ở phía trên-trái màn hình, nơi ánh mắt tập trung nhiều nhất. Mắt ưu tiên 2 dòng đầu tiên và 2-3 kết quả tìm kiếm đầu, trong khi những nội dung nằm ngoài tam giác có tỷ lệ được nhìn thấy giảm theo cấp số nhân.
Layer cake – Khi bạn chỉ cần một câu trả lời
Nếu đang tìm lời giải cho một câu hỏi cụ thể, bạn có xu hướng quét qua các tiêu đề và tiêu đề phụ để định vị đoạn cần đọc, bỏ qua phần nội dung chi tiết bên dưới.
Đây là mô hình layer cake, trong đó các tiêu đề tạo thành từng “lớp” thu hút ánh mắt. Vì vậy, tiêu đề mô tả rõ nội dung sẽ giúp bạn tìm câu trả lời hiệu quả hơn những cách đặt tên trừu tượng, chung chung.
Spotted pattern
Ở mô hình này, mắt nhảy qua các khối văn bản để “đáp” xuống những điểm nhấn nổi bật, như chữ in đậm, in nghiêng hay có màu khác biệt. Con số viết bằng chữ số cũng dễ được nhận ra hơn khi viết bằng chữ. Chẳng hạn, “8” và “136%” được nhận diện nhanh hơn “tám” và “một trăm ba mươi sáu”. Từ trong ngoặc kép hoặc đường link màu xanh cũng có tác dụng thu hút tương tự.
Pinball – Khi có quá nhiều thứ để nhìn
Trên trang kết quả tìm kiếm (SERP) hiện đại của Google hoặc dashboard phức tạp, sự xuất hiện đồng thời của rich snippet, video, carousel hình ảnh và quảng cáo phá vỡ lộ trình tuyến tính của F-pattern. Mắt lúc này nhảy qua lại giữa các khối nội dung như trong trò pinball. Yếu tố có độ tương phản thị giác cao nhất sẽ thu hút điểm dừng đầu tiên.
Có thể chủ động dẫn dắt ánh mắt không?
Khi ánh mắt bị phân tán, người thiết kế có thể sử dụng tín hiệu điều hướng thị giác (directional cues) để đưa nó về nơi mong muốn. Tuy nhiên, những yếu tố cùng gây chú ý chưa chắc đã dẫn người dùng đến cùng một chỗ.
Khuôn mặt có thể “giữ chân” ánh mắt
Bộ não có một vùng chuyên nhận diện khuôn mặt gọi là fusiform face area (FFA), tự động được kích hoạt mỗi khi ta thấy một khuôn mặt và kéo ánh nhìn về phía mắt, miệng cũng như hướng nhìn của nhân vật đó. Điều này diễn ra gần như ngoài ý muốn của chúng ta.
Nếu nhân vật nhìn thẳng ra màn hình, hình ảnh sẽ tạo ra giao tiếp mắt nhưng cũng hút sự chú ý về chính nó, khiến bạn mải nhìn khuôn mặt mà bỏ qua form đăng ký hoặc CTA bên cạnh.
Còn khi nhân vật nhìn nghiêng về phía sản phẩm hay nút hành động, người xem lại có xu hướng nhìn theo, nhờ phản xạ gaze cueing. Vì vậy, hướng nhìn của nhân vật quyết định việc hình ảnh hỗ trợ hay cản trở mục tiêu của trang.
Đo sự chú ý của mắt như thế nào?
Để biết mắt người dùng bị thu hút bởi đâu và dừng lại bao lâu, các nhà nghiên cứu UX và neuromarketing sử dụng 4 chỉ số chính:
- Time to first fixation: Thời gian để mắt dừng vào một khu vực lần đầu tiên, dùng để đo sức hút thị giác ban đầu.
- Total fixation duration: Tổng thời gian mắt nhìn vào một khu vực, giúp đo độ sâu xử lý thông tin.
- Fixation count: Số lần mắt quay lại một điểm.
- Heatmap (bản đồ nhiệt): Vùng đỏ hoặc cam là nơi mắt tập trung nhiều nhất, còn xanh hoặc xám là nơi gần như bị bỏ qua hoàn toàn.
Mũi tên và khuôn mặt tác động khác nhau
CXL Institute từng thử nghiệm 6 loại tín hiệu trên trang Lemon Law Group để tìm cách kéo mắt người dùng về form đăng ký hiệu quả nhất. Các phương án được so sánh với một nhóm đối chứng không có tín hiệu, với tổng thời gian mắt dừng vào form ghi nhận như sau:
| Tín hiệu | Thời gian nhìn vào form | Ghi nhận |
|---|---|---|
| Mũi tên vẽ tay | 2.3873 giây | Tăng 34% so với đối chứng, hiệu quả cao nhất và dẫn mắt gần như chính xác tuyệt đối. |
| Đường kẻ nối đơn giản | 2.0229 giây | Tạo dòng di chuyển liên tục, mượt mà. |
| Nhân vật nhìn vào form | 1.8384 giây | Tận dụng phản xạ nhìn theo ánh mắt người khác. |
| Form được thiết kế nổi bật | 1.8496 giây | Được nhìn thấy nhanh nhất, nhưng tổng thời gian dừng ở mức trung bình. |
| Mũi tên hình tam giác | 1.7675 giây | Hiệu quả trung bình, dễ bị nhầm với hình khối trang trí. |
| Không có tín hiệu | 1.7783 giây | Mắt thấy form nhanh nhất, nhưng cũng dễ chuyển sang nơi khác nhất. |
| Nhân vật nhìn thẳng ra người dùng | 0.9912 giây | Giảm 44% so với đối chứng, đồng thời mất nhiều thời gian nhất để mắt dừng vào form lần đầu. |
Kết quả cho thấy, một khuôn mặt thu hút không phải lúc nào cũng giúp ích cho form đăng ký. Bởi người xem bị “giữ chân” ở nhân vật, còn phần cần họ chú ý lại trở thành điểm mù. Đây là lý do cách bố trí nhân vật nhìn thẳng được xem như một “thảm họa UX”.
Ngược lại, nhân vật nhìn vào form giúp đưa sự chú ý về đúng nơi cần thiết. Trong thử nghiệm trên, mũi tên vẽ tay còn mang lại thời gian nhìn vào form cao hơn cả phương án dùng hướng mắt nhân vật.
Sắp xếp website theo hành trình mắt
Với landing page
Ở phần nội dung nhìn thấy trước khi cuộn trang (above the fold), cách kết hợp Z-pattern với gaze cueing thường được khuyến nghị. Logo và thông điệp giá trị độc nhất nằm ở góc trên-trái, nơi bắt đầu lượt quét mắt.
Tiếp theo là một khối nội dung thuyết phục ngắn khoảng 3-4 dòng ở giữa-trái. Hình ảnh nhân vật được đặt ở giữa-phải, với ánh mắt hướng sang phải về phía khu vực hành động. Form đăng ký hoặc CTA chính nằm ở góc dưới-phải, tức terminal area mà mắt sẽ dừng lại sau cùng. Nút hành động cũng cần có màu sắc tương phản cao để nổi bật tại vị trí này.
Với trang bảng giá
Các nghiên cứu eye-tracking trên nhiều trang SaaS cho thấy mắt người dùng dừng ở cột giữa đầu tiên, rồi mới lướt nhẹ sang bên trái. Vì vậy, gói cước bạn muốn bán nhất nên được đặt ở giữa, kèm nhãn “Khuyên dùng” và viền màu tương phản để cố định điểm dừng tại đó. Còn các phần dễ gây do dự, như điều khoản chi tiết, nên được bố trí ngoài đường di chuyển ánh mắt chính.
Với bài viết dài
Với bài viết dài, bạn có thể điều chỉnh cách trình bày theo 3 hướng để người đọc chú ý đến nội dung của mình:
- Làm nổi bật đoạn mở đầu: In đậm hoặc dùng cỡ chữ lớn hơn phần còn lại. Một thử nghiệm cho thấy tới 95% người dùng dừng lại đọc đoạn mở đầu khi nó được trình bày theo cách này.
- Đặt thông tin quan trọng lên đầu dòng: Từ khóa hoặc ý chính nên xuất hiện trước, để người đọc có thể nhận ra ngay khi lướt qua.
- Xen kẽ chữ và hình ảnh: Thay đổi giữa khối chữ, hình bên trái và hình bên phải để phá vỡ nhịp quét quen thuộc. Cách này kích hoạt lại sự chú ý, hạn chế việc não trôi vào trạng thái lướt vô thức.
Khi nào thiết kế khiến mắt đi “lạc”?
Người dùng tưởng trang đã hết
Một đường ngang, khối màu cắt ngang hoặc khoảng trắng quá rộng ở cuối màn hình có thể khiến người dùng nghĩ nội dung đã kết thúc. Đây là hiện tượng điểm dừng giả (false bottoms), khiến họ ngừng cuộn dù bên dưới vẫn còn thông tin quan trọng.
Để hạn chế tình trạng này, bạn có thể để một phần nội dung “mấp nghé” ở mép dưới màn hình. Mũi tên chỉ xuống hoặc thanh cuộn tiến trình cũng giúp báo hiệu rằng trang vẫn còn phần tiếp theo.
Thông điệp trông giống quảng cáo
Sau hàng thập kỷ tiếp xúc với quảng cáo, mắt chúng ta đã được “huấn luyện” để bỏ qua những thứ có hình thức tương tự. Hiện tượng này gọi là mù banner (banner blindness), thường xảy ra với khối hình chữ nhật, hiệu ứng nhấp nháy hoặc khối màu tách biệt khỏi phần còn lại.
Nếu thông điệp giá trị hoặc CTA được thiết kế giống một banner, chúng cũng dễ bị bỏ qua theo cách này. Người dùng gần như không nhìn thấy phần nội dung đó, dù nó nằm ngay trước mắt.
Các tín hiệu kéo mắt về nhiều hướng
Một mũi tên chỉ sang bên này, nhân vật nhìn sang bên khác, còn các CTA lại có nhiều màu sắc cạnh tranh nhau. Khi đặt những yếu tố này cạnh nhau, bạn tạo ra xung đột tín hiệu thị giác (visual cue conflict). Mắt phải nhảy qua lại giữa các điểm thu hút theo kiểu pinball, khiến tải nhận thức tăng lên và người dùng rời trang sớm hơn dự kiến.
Cách tự kiểm tra hành trình mắt trên website
Không nhất thiết phải có thiết bị eye-tracking đắt tiền mới bắt đầu kiểm tra được cách bố trí website. Bạn có thể thực hiện 5 bước sau:
- Thử nghiệm 5 giây: Cho người khác xem giao diện trong đúng 5 giây, rồi hỏi điều đầu tiên họ nhìn thấy là gì. Sau đó, hỏi thông điệp chính mà họ còn nhớ.
- Nheo mắt hoặc làm mờ giao diện: Kiểm tra xem tiêu đề chính và CTA có còn là những yếu tố nổi bật nhất hay không.
- Rà soát từ đầu dòng: Xem lại các tiêu đề và danh sách, đảm bảo từ khóa quan trọng xuất hiện trong 2-3 từ đầu tiên.
- Kiểm tra hướng mắt nhân vật: Các hình ảnh con người nên hướng mắt về thông điệp chính hoặc form đăng ký. Tránh để nhân vật nhìn thẳng ra người xem hoặc về một hướng không có ý nghĩa với nội dung.
- Tìm điểm dừng giả: Rà soát khu vực quanh đường gấp trang, kiểm tra xem có đủ tín hiệu để người dùng nhận ra họ cần cuộn tiếp hay chưa.
Một website đẹp và một website hiệu quả không phải lúc nào cũng là một. Vẻ đẹp phụ thuộc vào góc nhìn của người thiết kế, còn khả năng chuyển đổi gắn với việc mắt người dùng có đi đến phần thông tin cần thiết. Vì vậy, bên cạnh cảm nhận của mình, bạn cần quan sát hành trình ánh mắt để biết cách bố trí trên trang có thực sự hiệu quả hay không.