Mô hình chữ F khi đọc nội dung trên web

Tóm tắt: Kỹ thuật hình ảnh hóa eyetracking cho thấy người dùng thường đọc trang web theo mô hình chữ F: hai sọc ngang theo sau bởi một sọc thẳng đứng.

F đại diện cho fast trong tiếng Anh (nghĩa là nhanh chóng). Đây là cách người dùng đọc nội dung quý giá của bạn. Trong vài giây, mắt của họ di chuyển với tốc độ đáng kinh ngạc lên các từ trên web theo mẫu rất khác những gì bạn được học trong trường.

Trong nghiên cứu mới nhất về eyetracking của chúng tôi, chúng tôi đã ghi lại cách 232 người dùng xem hàng ngàn trang web. Chúng tôi khám phá ra rằng người dùng vẫn duy trì hành vi đọc này khá nhất quán (fairly consistent) qua nhiều trang và nhiệm vụ khác nhau. Mô hình đọc chiếm ưu thế này trông giống như chữ F và có ba thành phần theo sau:

  • Người dùng ban đầu đọc bằng cách di chuyển mắt theo chiều ngang, thường là qua phần trên của khu vực nội dung. Đây chính là nét đầu trên cùng của chữ F.
  • Tiếp theo, người dùng di chuyển xuống trang một chút và đọc theo cách di chuyển mắt theo chiều ngang lần thứ hai, và thường phủ một khu vực ngắn hơn so với lần di chuyển đầu. Đây là thanh ngang thấp hơn của chữ F.
  • Cuối cùng, người dùng quét nội dung bên trái theo cách di chuyển theo chiều dọc. Đôi khi nó khá chậm và quét có hệ thống xuất hiện đậm đặc (solid stripe) trên bản đồ nhiệt eyetracking. Lúc khác người dùng di chuyển nhanh hơn tạo ra bản đồ nhiệt lấm chấm (spottier heatmap). Đấy là phần thanh dọc cuối cùng của chữ F.

Chắc chắn, mẫu đọc quét của người dùng không phải luôn luôn chính xác bao gồm ba phần. Đôi khi người dùng sẽ đọc đến phần thứ ba của nội dung làm cho mẫu trông giống chữ E hơn là chữ F. Đôi khi họ lại đọc mỗi phần đầu làm cho mẫu trông như chữ L lộn ngược (với thanh ngang ở trên đầu). Dầu vậy, nói chung, mô hình đọc gần giống (roughly resemble) với chữ F, mặc dù khoảng cách giữa thanh ngang trên và dưới thay đổi khác nhau.

Bản đồ nhiệt từ nghiên cứu eyetracking của người dùng trên ba trang web. Khu vực mà người dùng nhìn vào nhiều nhất có màu đỏ; khu vực màu vàng nhận được ít sự chú ý hơn, tiếp theo là khu vực ít được để ý nhất có màu xanh. Khu vực màu xám không thu hút bất kỳ sự chú ý (fixations) nào.

Bản đồ nhiệt phía trên cho thấy cách người dùng đọc ba kiểu nội dung khác nhau của trang web:

  • Một bài viết trong phần “về chúng tôi” của trang web công ty (ngoài cùng bên trái),
  • Trang bán sản phẩm trên trang thương mại điện tử (ở chính giữa) và
  • Một trang kết quả từ máy tìm kiếm (SERP, ngoài cùng bên phải).

Nếu bạn nheo mắt và tập trung (squint and focus) vào khu vực màu đỏ (được xem nhiều nhất), cả ba bản đồ nhiệt đều cho thấy mẫu chữ F như kỳ vọng. Tất nhiên, chúng có khác nhau ít nhiều (some differences). Mẫu đọc hình chữ F là dạng thô, chung hơn là kiểu hành vi chuẩn chỉnh thống nhất hoàn hảo theo từng pixel (uniform, pixel-perfect behavior).

Trên trang thương mại điện tử (ví dụ giữa), thanh ngang thứ hai thấp hơn thông thường bởi vì có sự can thiệp của hình ảnh sản phẩm (intervening product image). Người dùng cũng đã dành thời gian đáng kể cho hộp ở phía trên bên phải của trang nơi có giá và nút “thêm vào giỏ hàng”.

Trên trang SERP (ví dụ bên phải), thanh ngang thứ hai của chữ F dài hơn so với thanh ngang trên cùng, điều này chủ yếu là do tiêu đề thứ hai dài hơn cái đầu. Trong trường hợp này, cả hai tiêu đề đều chứng tỏ sức hút khá tương đồng (proved equally interesting) với người dùng, tuy nhiên người dùng thường đọc ít hơn ở khu vực thứ hai họ nhìn trên trang.

Ý nghĩa của mẫu đọc hình chữ F

Mẫu hình chữ F có ý nghĩa cho thiết kế web sáng rõ hơn và cho thấy tầm quan trọng của việc đi theo các chỉ dẫn cho việc viết nội dung trên web:

  • Người dùng không đọc cẩn thận từng từ một. Đọc đầy đủ (exhaustive reading) là hiếm có, đặc biệt khi khách hàng tiềm năng tiến hành tìm hiểu ban đầu để lên danh sách ngắn các nhà cung cấp (shortlist of vendors). Vâng, một số người sẽ đọc nhiều hơn nhưng hầu hết là không.
  • Hai đoạn đầu tiên phải nêu ra được thông tin quan trọng nhất. Có hy vọng là người dùng sẽ thực sự đọc chúng, dù vậy họ có thể đọc đoạn đầu tiên nhiều hơn đoạn thứ hai.
  • Bắt đầu tiêu đề phụ, đoạn và dấu chấm tròn với từ mang thông tin do vậy người dùng sẽ chú ý khi đọc quét xuống phía bên trái của nội dung trong hành vi cuối theo mô hình đọc chữ F. Họ thường sẽ đọc từ thứ ba ở trên một dòng ít hơn nhiều so với hai từ đầu tiên.

Hành vi đọc quét chi tiết

Rất hấp dẫn (fascinating) khi xem lại bản quay chậm (slow-motion replay) hành vi di chuyển mắt của người dùng khi họ đọc và quét toàn bộ trang. Mỗi một trang đều có các vấn đề về đọc vượt ra bên ngoài mô hình chữ F chiếm ưu thế (dominant F pattern) mà tôi sẽ thảo luận ở đây. Lấy ví dụ, người dùng đọc quét theo cách khác, hướng trực tiếp hơn khi họ tìm kiếm giá thành hoặc các con số khác, và hành vi khó nhằn (hot-potato behavior) thú vị chỉ ra cách người dùng nhìn vào danh sách quảng cáo trên máy tìm kiếm. Chúng tôi cũng có nhiều phát hiện về cách mọi người nhìn các ảnh trên trang web.

Yếu tố quyết định lớn nhất (biggest determinant) đến tính khả dụng của nội dung là cách người dùng đọc online – và bởi vì mọi người đọc theo cách khác, bạn cần phải viết khác đi (because people read differently, you have to wire differently).

Báo cáo đầy đủ

Bản báo cáo đầy đủ eyetracking về cách mọi người đọc trên web có sẵn để tải về (tuy nhiên bạn cần bỏ ra 19 USD để mua!).

(Dịch từ F-Shaped Pattern For Reading Web Content – tác giả Jakob Nielsen, trang web Nielsen Norman Group)