Trước khi kịp đọc nội dung, chúng ta đã trải qua 3 giai đoạn xử lý hình ảnh có thể ảnh hưởng đến quyết định ở lại trang.
Bạn đã từng thay banner, đổi màu sắc hay viết lại nội dung vì khách cứ vào website của mình rồi rời đi? Dù quảng cáo mang về hàng nghìn lượt truy cập mỗi tháng, nhiều người vẫn thoát trang sau vài giây, trước khi nhìn đến nút “Mua ngay”.
Tình trạng này có thể không nằm ở việc website “đẹp” hay “chưa đẹp”, mà liên quan đến cách bộ não xử lý hình ảnh. Đây là quá trình hình thành qua hàng chục nghìn năm tiến hóa, diễn ra ngoài sự kiểm soát có ý thức của chúng ta.
Theo các nghiên cứu về khoa học thần kinh và tâm lý học nhận thức, quá trình này đi qua 3 giai đoạn nối tiếp nhau: xác định đặc tính, nhận biết mẫu hình và nhận diện đối tượng. Vậy điều gì xảy ra trong mỗi giai đoạn, khiến có những website giúp bạn biết ngay cần bấm vào đâu, trong khi một số khác lại gây bối rối?
Mắt nhìn thấy trước khi não kịp hiểu
Khi nhìn vào màn hình, chúng ta thường có cảm giác toàn bộ hình ảnh đều rõ nét và đầy đủ màu sắc. Tuy nhiên chỉ một vùng rất nhỏ ở trung tâm võng mạc, gọi là fovea, xử lý hình ảnh rõ nét. Phần còn lại thuộc thị giác ngoại vi, mờ hơn nhiều so với cảm nhận của bạn.
Để bù lại, mắt liên tục “nhảy” qua các điểm khác nhau bằng những chuyển động cực ngắn (saccades). Não bộ sẽ tự lấp đầy phần thông tin còn thiếu dựa trên dự đoán và kinh nghiệm cũ của chúng ta.
Tốc độ xử lý của hệ thị giác cũng nhanh hơn ta tưởng, khi tín hiệu từ mắt di chuyển nhanh gấp khoảng 25 lần so với tín hiệu từ tai. Não chỉ mất từ 13 đến 50 mili giây để hình thành ấn tượng cảm xúc đầu tiên về một hình ảnh, nhanh hơn cả một cái chớp mắt.
Toàn bộ tín hiệu thị giác đều đi qua hệ viền (limbic system), còn gọi là “bộ não cũ”, trước khi tới vỏ não. Hệ viền phản ứng tự động, cảm tính và gần như bản năng, trong khi vỏ não là nơi xử lý logic, cần nhiều thời gian và công sức hơn.
Nói cách khác, khách hàng đã “cảm” được trang web của bạn trước khi kịp “nghĩ” về nội dung hay quyết định bấm vào một nút nào đó.
3 Giai đoạn não bộ xử lý hình ảnh
Xác định đặc tính
Giai đoạn đầu tiên và nhanh nhất diễn ra ở mức tiền chú ý (pre-attentive) – khi chúng ta chưa kịp tập trung một cách có ý thức, trong chưa đầy 200 ms, thậm chí chỉ 50 ms. Não chưa đọc hiểu nội dung mà mới quét những đặc tính như màu sắc, kích thước, hình dạng, độ tương phản và chuyển động.
Cơ chế đứng sau quá trình này là hiệu ứng bật lên (pop-out effect), còn được gọi là hiệu ứng Von Restorff. Vốn tiến hóa để phát hiện bất thường nhằm sinh tồn, não sẽ chú ý ngay khi một chấm khác màu “bật” lên giữa những chấm giống nhau. Quá trình này gần như không tốn công sức, trong khi những gì hòa lẫn vào xung quanh gần như trở nên vô hình.
Một ví dụ thường được nhắc tới trong các nghiên cứu về xử lý tiền chú ý là nút Upgrade của LinkedIn. Nút này có kích thước lớn, màu xanh dương nổi bật và khung viền rõ ràng. Trong khi đó, lựa chọn Downgrade chỉ là dòng chữ nhỏ, nhạt màu nằm trong danh sách, khiến người dùng mất nhiều thời gian hơn để tìm thấy.
Người dùng gần như thấy ngay nút Upgrade. Với nút CTA chính trên website của mình, chẳng hạn một nút màu cam, bạn cũng có thể kết hợp nhiều đặc tính để tăng khả năng thu hút chú ý: màu tương phản mạnh với nền, kích thước lớn hơn các phần tử xung quanh và khung viền rõ ràng.
Bên cạnh nút bấm, chênh lệch cỡ chữ và độ đậm cũng tạo nên phân cấp thị giác (visual hierarchy). Điều này giúp mắt tự hướng đến thông tin quan trọng nhất mà không cần chỉ dẫn. Các nhãn “Bán chạy nhất” hay nhãn giảm giá màu đỏ cũng tạo điểm ngắt thị giác khi khách cuộn qua nhiều sản phẩm giống nhau.
Tuy nhiên pop-out có thể phản tác dụng nếu quá nhiều phần tử cùng muốn “nổi bật”. Khi trang có nhiều màu chói và hiệu ứng nhấp nháy, chúng sẽ triệt tiêu sự nổi bật của nhau. Não có xu hướng phớt lờ tất cả, dẫn đến hiện tượng bỏ qua banner (banner blindness).
Một banner động đặt sai vị trí cũng có thể thu hút hết sự chú ý của người xem, khiến họ bỏ qua form đăng ký hoặc phần trình bày giá trị chính mà bạn muốn giới thiệu.
Nhận biết mẫu hình
Có một thí nghiệm minh họa cách não nhìn ra hình một con bò từ bức ảnh gồm những đốm đen trắng lộn xộn. Ban đầu, người xem chỉ thấy các mảng hình hỗn loạn. Nhưng khi bạn nhận ra con bò, não ghi nhớ mẫu hình ấy vĩnh viễn. Từ đó, bạn không thể nhìn bức ảnh mà không thấy nó nữa, dù cố tình quên đi.
Đây là biểu hiện của nhận biết mẫu hình (pattern recognition), giai đoạn diễn ra sau khi não thu nhận các đặc tính riêng lẻ. Lúc này, những mảnh thông tin được gom nhóm và liên kết thành cấu trúc có nghĩa. Một khi đã “chốt” một cách diễn giải, não có xu hướng bám lấy cách nhìn đó.
Quá trình này chịu sự chi phối của các nguyên lý tâm lý học Gestalt, do các nhà tâm lý học người Đức phát triển từ đầu thế kỷ 20. Theo đó, cái toàn thể khác và lớn hơn tổng số các phần cấu thành. Não luôn cố nhìn ra bức tranh tổng thể trước khi chú ý đến từng chi tiết nhỏ.
Một số nguyên lý Gestalt có thể giúp bạn sắp xếp thông tin trên website:
- Tiệm cận (proximity): Những phần tử ở gần nhau được não hiểu là có liên quan. Vì vậy trong form đăng ký, khoảng cách giữa nhãn và ô nhập liệu cần nhỏ hơn khoảng cách tới trường tiếp theo. Nếu đặt chúng quá xa nhau, người dùng có thể nhầm nhãn này thuộc về ô khác.
- Đồng dạng (similarity): Những phần tử trông giống nhau thường được hiểu là có cùng chức năng. Điều này lý giải vì sao các liên kết trong bài viết nên giữ cùng màu sắc và kiểu gạch chân, còn các nút CTA cùng cấp độ cần có định dạng thống nhất trên cả trang.
- Khép kín (closure): Não tự lấp đầy phần hình ảnh còn thiếu để nhận ra một hình thể trọn vẹn. Các carousel sản phẩm thường để lộ 20-30% mép của thẻ tiếp theo cũng vì đặc tính này. Phần hình chưa đầy đủ giúp bạn nhận ra danh sách còn tiếp, từ đó muốn vuốt sang xem.
- Liên tục (continuity): Mắt thích di chuyển theo đường thẳng hoặc đường cong mượt mà hơn là bị ngắt quãng. Căn lề trái đồng nhất giúp người dùng lướt xuống dễ dàng, trong khi thanh tiến trình nhiều bước dẫn dắt họ qua quy trình thanh toán.
- Hình – nền (figure-ground): Mắt luôn tách phần tiền cảnh cần chú ý khỏi nền phía sau. Khi mở pop-up, việc làm mờ hoặc tối phần còn lại của trang giúp người xem tập trung vào nội dung đang hiện lên.
- Đơn giản (Prägnanz): Trước một hình ảnh phức tạp, não có xu hướng diễn giải theo cách đơn giản và cân đối nhất có thể. Vì vậy bố cục theo lưới (grid) ngăn nắp thường dễ nhìn hơn bố cục lộn xộn, dù cả hai chứa cùng lượng thông tin.
Việc sắp xếp các phần tử cũng có thể khiến người dùng hiểu nhầm rằng trang đã kết thúc. Một đường kẻ đậm, khối màu nền hoặc khoảng trắng quá lớn cắt ngang trang đều có thể tạo ra “điểm dừng giả” (false bottoms). Hệ quả là họ ngừng cuộn, dù phía dưới vẫn còn nội dung quan trọng.
Nhận diện đối tượng
Một hình chữ nhật có biểu tượng kính lúp sẽ được chúng ta nhận ra là “ô tìm kiếm”. Để làm được điều này, não đối chiếu mẫu hình vừa nhìn thấy với trí nhớ dài hạn, kinh nghiệm sống và những khung khái niệm có sẵn, còn gọi là mô hình tâm lý (mental models).
Ở giai đoạn cuối và chậm nhất này, não gán ý nghĩa, cảm xúc và giá trị cho những gì mắt vừa nhìn thấy – quá trình còn gọi là xử lý từ trên xuống (top-down processing). Điều này giúp bạn biết một hình trên màn hình dùng để làm gì, thay vì chỉ thấy hình dạng của nó.
Khi giao diện khớp với mô hình tâm lý có sẵn (schema matching), người dùng có thể nhận ra và thao tác ngay, gần như không cần suy nghĩ. Ngược lại, những gì đi ngược thói quen sẽ tạo ra ma sát nhận thức. Họ phải dừng lại, huy động tư duy có ý thức để phân tích, và có thể rời đi trong lúc này.
Các biểu tượng quen thuộc trên toàn cầu như kính lúp cho tìm kiếm, giỏ hàng cho mua sắm hay bánh răng cho cài đặt giúp hạn chế trở ngại trên. Một biểu tượng “độc lạ” có thể khiến người dùng phải đoán ý nghĩa, trong khi mục tiêu ở giai đoạn này là giúp họ nhận ra ngay chức năng.
Đó cũng là lý do các sàn thương mại điện tử lớn như Amazon hay Shopee giữ nguyên vị trí và hình dạng của biểu tượng giỏ hàng, nút “Mua ngay”. Sự quen thuộc giúp khách hàng thao tác mua sắm trơn tru, không cần dừng lại đoán xem phải bấm vào đâu.
Bên cạnh đó, não bộ có một vùng chuyên nhận diện khuôn mặt (fusiform face area, FFA) – nơi hoạt động tách biệt hoàn toàn với cơ chế nhận diện vật thể vô tri. Vùng này hoạt động từ những giờ đầu tiên sau khi chào đời, khiến chúng ta có bản năng vô thức dõi theo ánh mắt của người khác.
Hiện tượng này được gọi là hiệu ứng định hướng ánh mắt (gaze cueing), khi người xem vô thức nhìn theo hướng mắt của nhân vật do FFA xử lý khuôn mặt rất mạnh. Vì vậy khi dùng hình người trên website, bạn có thể để ánh mắt hoặc gương mặt của họ hướng về CTA hay form đăng ký.
Bố cục cũng cần phù hợp với thói quen đọc dạng chữ F hoặc chữ Z của người dùng. Những thông tin quan trọng nhất nên nằm ở các vùng mắt thường quét qua theo phản xạ, như góc trên bên trái và thanh ngang trên cùng.
Tuy nhiên, việc thay đổi giao diện có thể phá vỡ những thói quen đã hình thành. Từng có trường hợp tỷ lệ chuyển đổi giảm tới 20% vì một bản redesign làm mất mô hình tâm lý cũ của khách hàng. Vì vậy với website đã có lượng người dùng ổn định, thay đổi đột ngột toàn bộ vị trí điều hướng hay biểu tượng quen thuộc có thể là quyết định rủi ro.
Ảnh stock gượng gạo, mang tính quảng cáo lộ liễu cũng có thể bị não xếp vào nhóm “rác thị giác”. Những hình ảnh này dễ bị lọc bỏ ngay từ giai đoạn đầu, trước khi người dùng kịp đi đến bước nhận diện đối tượng.
3 Giai đoạn khác nhau ở đâu?
Cả 3 giai đoạn đều ảnh hưởng đến việc người dùng ở lại website, nhưng mỗi giai đoạn xử lý một phần thông tin khác nhau. Với CRO, sự khác biệt này giúp bạn xác định cần thu hút chú ý, sắp xếp lại bố cục hay tạo sự quen thuộc cho thao tác.
| Tiêu chí | Xác định đặc tính | Nhận biết mẫu hình | Nhận diện đối tượng |
|---|---|---|---|
| Mức độ nhận thức | Tự động, vô thức | Bán tự động, phân tích cấu trúc | Có ý thức, gán ý nghĩa |
| Thời gian xử lý | Dưới 50-200 ms | Khoảng 200-500 ms | Trên 500 ms |
| Nguyên lý chi phối | Pop-out effect | Các quy luật Gestalt | Mental models, schema, gaze cueing |
| Mục tiêu với CRO | Gây chú ý tức thì | Tạo trật tự thị giác, giảm tải nhận thức | Dẫn dắt thao tác, tạo sự quen thuộc |
| Ví dụ trên giao diện | CTA nổi bật trên nền trơn | Nhóm các trường liên quan vào một card | Biểu tượng giỏ hàng dẫn tới trang thanh toán |
Cả 3 giai đoạn diễn ra trong chưa đầy một giây, nhưng quyết định phần lớn việc khách hàng ở lại hay rời đi. Vì vậy, website chỉ có vài trăm mili giây để tạo điều kiện cho người dùng tiếp tục xem, trước khi bạn có cơ hội thuyết phục họ bằng nội dung.
Làm gì để website dễ tiếp nhận hơn?
Để biết giao diện của mình đang gây trở ngại ở đâu, bạn có thể kiểm tra theo 4 bước dưới đây, đi theo trình tự não xử lý thông tin từ nhìn thấy điểm nổi bật, hiểu bố cục đến nhận ra chức năng:
Thử nghiệm 5 giây
Cho một người chưa từng xem website nhìn giao diện trong đúng 5 giây rồi tắt đi. Sau đó, hỏi họ trang này bán gì và nút quan trọng nhất nằm ở đâu. Nếu không trả lời được, cả giai đoạn xác định đặc tính và nhận biết mẫu hình đều đang có vấn đề.
Kiểm tra khả năng thu hút chú ý
Bạn có thể nheo mắt hoặc làm mờ ảnh chụp màn hình website để kiểm tra tiền chú ý. Lúc này, hãy xem CTA chính có còn là điểm nổi bật duy nhất, hay phải cạnh tranh với nhiều màu sắc chói mắt khác trên trang.
Xem lại cách nhóm thông tin
Kiểm tra khoảng trắng giữa các phần tử để biết chúng đã tuân theo nguyên lý tiệm cận chưa. Bên cạnh đó, cần chú ý những đường kẻ hoặc khối màu vô tình tạo ra điểm dừng giả, khiến người xem tưởng rằng trang không còn nội dung phía dưới.
Đối chiếu với thói quen của người dùng
Rà lại toàn bộ biểu tượng, vị trí điều hướng và luồng thao tác trên website. Chúng có đi theo những chuẩn mực quen thuộc, hay đang khiến khách hàng phải dừng lại đoán xem từng phần dùng để làm gì?
Không có website nào hoàn hảo ở cả 3 giai đoạn ngay từ đầu. Ngay cả những trang lớn cũng liên tục A/B test để điều chỉnh giao diện. Khi hiểu cách não đang đọc trang của mình, bạn sẽ biết cần sửa ở đâu trước. Đó có thể là CTA mờ nhạt, bố cục rối mắt hay biểu tượng lạ khiến khách rời đi trước khi kịp hiểu trang.