Có một sự thật ngầm định trong thiết kế website: người dùng không hoàn toàn tự quyết định mình sẽ nhìn vào đâu.
Một mũi tên cong hướng vào nút “Đăng ký ngay”, hay ánh mắt người mẫu nhìn về một ô điền thông tin, đều có thể khiến mắt bạn vô thức di chuyển theo.
Trong UX/UI và tối ưu chuyển đổi (CRO), những chi tiết này được gọi là tín hiệu điều hướng thị giác (directional cues). Chúng được sắp đặt để dẫn sự chú ý đến những vị trí quan trọng như nút CTA, form đăng ký hoặc thông điệp giá trị cốt lõi.
Chỉ một mũi tên, ánh nhìn hay hướng chuyển động trong hình ảnh cũng có thể tạo ra một “lộ trình thị giác” mà người dùng gần như tự động làm theo.
Vậy vì sao mắt chúng ta lại dễ bị dẫn dắt bởi những tín hiệu nhỏ như vậy?
Directional cues là gì?
Directional cues là những thành phần đồ họa hoặc cách sắp xếp bố cục nhằm dẫn ánh mắt người xem đến một vị trí cụ thể. Chúng đóng vai trò như “biển chỉ đường”, giúp người truy cập đi qua nội dung theo một hành trình thị giác nhất định, hạn chế bỏ sót thông tin quan trọng khi lướt trang.
Dựa trên mức độ trực quan, tín hiệu điều hướng có thể chia làm 2 nhóm:
- Tín hiệu trực diện (explicit cues): Những yếu tố chỉ hướng rõ ràng mà người xem có thể nhận biết có ý thức, như mũi tên, đường kẻ dẫn hay hình ngón tay chỉ vào một vị trí.
- Tín hiệu ngầm định (suggestive cues): Những yếu tố tâm lý và cách sắp đặt không gian âm thầm thu hút sự chú ý, như ánh mắt nhân vật, khoảng trắng hay hướng chiếu sáng của vật thể. Người xem có thể nhìn theo mà không nhận ra mình đang được dẫn dắt.
Một nhóm chỉ thẳng nơi bạn cần nhìn, nhóm còn lại đưa ra những “gợi ý” để mắt tự tìm đến đó. Cả hai đều nhằm giữ sự chú ý ở phần nội dung mà người thiết kế muốn bạn tiếp nhận.
Vì sao chúng ta dễ nhìn theo tín hiệu điều hướng?
Bộ não phản ứng trước khi kịp suy nghĩ
Theo lý thuyết hai hệ thống tư duy (dual-process theory), Hệ thống 1 hoạt động vô thức, tự động và rất nhanh, trong khi Hệ thống 2 đảm nhiệm việc phân tích và suy nghĩ logic.
Bộ não xử lý hình ảnh nhanh gấp khoảng 50 lần so với chữ viết. Vì vậy khi nhìn thấy mũi tên, Hệ thống 1 lập tức kích hoạt phản xạ khiến mắt di chuyển theo hướng đó hoặc thúc đẩy bạn cuộn trang, trước khi Hệ thống 2 kịp phân tích.
Thói quen từ ngoài đời đi vào website
Từ nhỏ, chúng ta đã quen nhìn theo mũi tên để tìm đường. Ở sân bay hay nhà ga, những biển chỉ dẫn giúp bạn tìm được lối đi nhanh nhất mà không phải tự dò từng hướng. Thói quen này tiếp tục được mang vào môi trường số, khi một mũi tên trên website cũng khiến mắt ta đi theo.
Bên cạnh đó, con người có bản năng tiến hóa là dõi theo ánh nhìn của người khác để phát hiện những điều quan trọng xung quanh. Đây là cơ sở của tín hiệu ánh mắt (gaze cueing), khi hướng nhìn của nhân vật trong ảnh có thể khiến người xem chú ý đến nội dung bên cạnh.
Mắt thích những đường đi liên tục
Theo tâm lý học Gestalt, mắt có xu hướng đi theo những đường liên tục, mượt mà. Khi các thành phần được căn chỉnh thẳng hàng hoặc nối với nhau bằng đường kẻ, ánh nhìn sẽ trượt dọc theo trục đó để tiếp nhận phần nội dung tiếp theo. Điều này đặc biệt hữu ích với form dài hoặc giao diện cần cuộn nhiều.
Bớt phải nghĩ xem nên nhìn vào đâu
Một trang có trật tự thị giác rõ ràng giúp chúng ta phân biệt thông tin quan trọng với những yếu tố gây xao nhãng. Nhờ đó, tải lượng nhận thức (cognitive load) được giảm xuống đáng kể, bởi người dùng không phải tốn nhiều năng lượng để tự tìm hướng đọc. Khi không liên tục phải tự hỏi “mình nên nhìn vào đâu”, bạn cũng dễ tiếp nhận thông điệp trên trang hơn.
Những cách “chỉ đường” cho mắt trên website
Mũi tên và đường kẻ dẫn
Mũi tên (arrows) được xem là công cụ mạnh nhất trong nhóm tín hiệu trực diện. Trong đó, mũi tên vẽ tay (hand-drawn arrows) thường mang lại cảm giác gần gũi, cá nhân hơn các hình tam giác định hướng mang tính hình học, nhờ vậy cũng thu hút sự chú ý hơn.
Bạn có thể đặt một mũi tên uốn lượn hướng vào form đăng ký hoặc CTA chính. Còn ở ranh giới màn hình, mũi tên hướng xuống giúp gợi ý rằng bên dưới vẫn có nội dung để người xem cuộn tiếp.
Đường kẻ dẫn (leading lines) lại tận dụng thói quen quét mắt dọc theo đường thẳng hoặc cong để tìm điểm kết thúc. Chẳng hạn một đường kẻ nối từ tiêu đề giá trị cốt lõi đến form thu thập thông tin sẽ dẫn người đọc qua hai phần này. Việc căn các khối nội dung thẳng hàng cũng tạo ra một trục dọc vô hình để mắt đi theo.
Ánh mắt nhân vật
Con người luôn nhìn vào khuôn mặt trước khi quan sát các vật thể xung quanh. Vì vậy, hướng nhìn của một người trong ảnh cũng có thể vô thức điều hướng sự chú ý của người xem. Tuy nhiên không phải ánh mắt nào cũng giúp nội dung bên cạnh được chú ý hơn:
- Ánh mắt đồng thuận: Nhân vật nhìn về phía form hoặc CTA, khiến người dùng nhìn theo và đọc kỹ phần nội dung ở đó.
- Ánh mắt xung đột: Nhân vật nhìn thẳng vào người xem, tạo kết nối cảm xúc mạnh nhưng lại khiến họ tập trung vào khuôn mặt. Ánh nhìn lúc này trở thành một “bức tường” giữ sự chú ý lại, khiến nội dung thuyết phục xung quanh bị bỏ qua. Đây cũng là một lỗi khá phổ biến khi chọn ảnh cho website.
Một ví dụ điển hình là ngân hàng MoneYou (Hà Lan) từng thay ảnh chân dung trong widget “Nhận báo giá thế chấp nhanh”. Thay vì nhìn thẳng vào người dùng, nhân vật được đổi sang nhìn về phía các trường điền thông tin. Sau thay đổi này, số yêu cầu báo giá được gửi thành công tăng 9%.
Khoảng trắng và hướng vật thể
Khoảng trắng, hay khoảng trống âm (white space), tạo tiêu điểm bằng cách tách một thành phần khỏi những thứ xung quanh. Một khoảng trống lớn làm tăng độ tương phản và khiến mắt tập trung vào thành phần đó. Vì vậy thay vì nhồi thêm banner, chữ hay viền khung quanh CTA chính, bạn có thể chừa cho nó một khoảng trắng thông thoáng.
Bên cạnh khoảng trắng, hướng vật thể (object-directed cues) cũng có thể dẫn mắt bằng chuyển động, cấu trúc hình học hoặc ánh sáng trong ảnh. Chẳng hạn một chiếc đèn pin chiếu sáng về phía ưu đãi, hay dòng bong bóng chuyển động hướng về nút bấm.
Mũi tên giữ sự chú ý được bao lâu?
Tác động của tín hiệu điều hướng đã được CXL Institute quan sát trong một nghiên cứu theo dõi chuyển động mắt (eye-tracking), trong đó 248 người tham gia xem trang chủ của hãng luật Lemon Law Group trong 15 giây, mỗi nhóm được xem một phiên bản khác nhau. Các phiên bản gồm: không có tín hiệu, mũi tên vẽ tay, đồ họa tam giác, đường kẻ dẫn, ảnh người nhìn vào form, ảnh người nhìn thẳng vào người dùng và form được làm nổi bật.
Kết quả cho thấy, thời gian nhận biết form lần đầu không khác biệt có ý nghĩa thống kê giữa các phương án. Thậm chí nhóm không có tín hiệu nhận biết form nhanh nhất, bởi họ không phải xử lý thêm các yếu tố đồ họa trên trang.
Chỉ số quan trọng hơn là thời gian chú ý trung bình – khoảng thời gian người xem thực sự dừng lại xử lý thông tin. Ở chỉ số này, sự khác biệt rõ ràng hơn. Mũi tên vẽ tay ghi nhận thời gian nhìn vào form cao nhất, trung bình 2,3873 giây so với 1,7783 giây ở nhóm đối chứng, tương đương mức tăng khoảng 34%.
Bản đồ nhiệt (heatmap) cũng ghi nhận mũi tên dẫn mắt đến đúng vị trí với độ chính xác cao và giữ người xem ở đó lâu nhất. Đường kẻ dẫn đứng thứ hai với 2,0321 giây, tiếp theo là form được làm nổi bật và ảnh người nhìn vào form.
Ngược lại, ảnh người nhìn thẳng vào người dùng ghi nhận thời gian chú ý thấp nhất, chỉ 0,9912 giây. Con số này giảm gần một nửa so với nhóm đối chứng. Người tham gia gần như bỏ qua form đăng ký, bởi sự chú ý bị giữ lại ở khuôn mặt nhân vật.
Ở một trường hợp khác, chuỗi khách sạn Van Der Valk bổ sung mũi tên hướng xuống tại các điểm ngắt trên trang chủ vốn rất dài. Số khách cuộn đến tận chân trang tăng gấp 10 lần, kéo theo tỷ lệ chuyển đổi chung của trang tăng thêm 57%.
Khi nào tín hiệu điều hướng phản tác dụng?
Tín hiệu điều hướng có thể giúp người dùng chú ý đến phần quan trọng, nhưng thêm nhiều chưa chắc đã hiệu quả. Một số cách sắp xếp còn khiến họ dừng đọc hoặc rời trang sớm hơn.
Đường kẻ ngang khiến người xem tưởng đã hết trang
Bộ não thường hiểu một đường kẻ ngang kéo dài cắt qua website như dấu hiệu dừng lại. Người xem vì thế dễ nghĩ trang đã kết thúc và không cuộn nữa. Hình ảnh hero quá lớn, chiếm trọn màn hình mà không để lộ phần tiếp theo, cũng có thể tạo ra “điểm dừng” giả tương tự.
Để hạn chế tình trạng này, bạn có thể thu nhỏ ảnh hero cho một phần tiêu đề bên dưới xuất hiện. Những đường kẻ ngang sắc nét nên được thay bằng khoảng trắng hoặc chuyển màu nền nhẹ nhàng, giúp người xem tiếp tục đi qua nội dung.
Các tín hiệu chỉ về nhiều hướng
Một trang có nhiều mũi tên, đường kẻ và khuôn mặt nhìn về những phía khác nhau dễ khiến người dùng quá tải. Khi không biết nên tập trung vào đâu, họ có thể bối rối rồi thoát trang mà không chuyển đổi. Vì vậy mỗi trang nên có một mục tiêu chuyển đổi chính, với các tín hiệu cùng hướng về tiêu điểm đó.
Khoảng trắng quá nhiều cũng gây hiểu nhầm
Khoảng trắng giúp giao diện thông thoáng, nhưng nếu phần bên dưới nếp gấp trang có quá nhiều khoảng trống mà không kèm tín hiệu dẫn dắt, người dùng dễ nghĩ trang đã hết nội dung hoặc bị lỗi tải. Lúc này, khoảng trống lại trở thành lý do khiến họ ngừng cuộn.
Bạn có thể kết hợp khoảng trắng với một gợi ý nhỏ, như mũi tên uốn lượn hướng xuống hoặc hiệu ứng chuyển động tinh tế. Những chi tiết này giúp người xem nhận ra vẫn còn nội dung phía dưới.
Ánh mắt dẫn đến thông tin gây đắn đo
Ngay cả khi nhân vật đã nhìn vào nội dung, vị trí của nội dung đó vẫn cần được chú ý. Chẳng hạn nếu bảng giá nằm ngay trên đường quét mắt, người dùng có thể tập trung vào chi phí và do dự trước khi kịp hiểu giá trị sản phẩm.
Vì vậy khi dùng ảnh nhân vật, bạn nên để ánh mắt hướng về phần quan trọng nhất, như tiêu đề lợi ích cốt lõi hoặc CTA. Những thông tin dễ gây đắn đo nên nằm ngoài đường quét mắt này, để người xem không xử lý chúng quá sớm.
Áp dụng directional cues thế nào cho website của bạn?
Directional cues tác động đến hành vi dựa trên cách bộ não xử lý hình ảnh. Đôi khi chỉ một mũi tên đúng chỗ hoặc ánh nhìn đúng hướng cũng có thể làm thay đổi tỷ lệ chuyển đổi. Nếu muốn thử áp dụng cho website, bạn có thể tham khảo các bước sau:
- Xác định mục tiêu chuyển đổi chính: Trước tiên, chọn CTA hoặc form đăng ký cần được tập trung sự chú ý nhất trên trang. Đây sẽ là điểm đến của các tín hiệu điều hướng.
- Sắp xếp wireframe theo luồng đọc: Bạn có thể dựa vào mô hình đọc chữ F (cho trang nhiều chữ) hoặc chữ Z để bố trí nội dung cốt lõi theo đường quét tự nhiên của mắt. CTA chính nên nằm ở vùng kết thúc luồng đọc này.
- Chọn tín hiệu phù hợp: Bạn có thể dùng mũi tên vẽ tay nếu muốn tập trung tối đa sự chú ý vào form. Nếu dùng ảnh nhân vật, cần đảm bảo hướng nhìn của họ đi về phía CTA.
- Loại bỏ các rào cản: Rà soát những đường kẻ ngang sắc nét có thể làm đứt luồng mắt, đồng thời dọn các chi tiết thừa quanh tiêu điểm. Khoảng trắng ở đó cần đủ thông thoáng để phần nội dung chính được chú ý.
- Kiểm chứng bằng dữ liệu: Dùng bản đồ nhiệt cuộn trang (scrollmap), clickmap hoặc thử nghiệm A/B để đo lường mức độ chuyển đổi thực sự tăng lên trên website của bạn.