Chúng ta thường “vẽ” chữ F hoặc chữ Z mỗi khi lướt web, thay vì đọc từng chữ như đọc sách.
Bạn bỏ hàng giờ chăm chút từng câu chữ, chọn từng tấm ảnh cho website của mình, nhưng khi trang được mở ra, phần lớn khách ghé thăm lại chẳng đọc hết nổi một đoạn văn. Điều này không có nghĩa nội dung của bạn tệ, bởi từ những năm 2000, các nghiên cứu eye-tracking (theo dõi chuyển động mắt) đã chỉ ra rằng, mắt người dùng thường quét màn hình theo những quỹ đạo lặp lại có thể dự đoán.
Hai quỹ đạo phổ biến nhất được giới UX/UI và marketing gọi theo đúng hình dạng của chúng: F-Pattern (mô hình chữ F) và Z-Pattern (mô hình chữ Z). Vậy hai mô hình này thực chất là gì, vì sao mắt chúng ta lại “vẽ” đúng hai chữ này, và nên áp dụng chúng thế nào khi làm website hay viết content?
Vì sao chúng ta chỉ “quét” chứ không “đọc” website?
Khi mở một trang web mới, hầu hết chúng ta không đọc từng chữ như đọc sách. Theo nghiên cứu kinh điển của Nielsen Norman Group năm 2008, trong một lượt ghé thăm thông thường, người dùng trung bình chỉ đọc khoảng 28% lượng chữ trên một trang web.
Theo học thuyết Hai Hệ thống Tư duy của Daniel Kahneman, bộ não chúng ta có Hệ thống 1 (nhanh, tự động) chuyên lướt qua giao diện để tìm những manh mối liên quan đến mục tiêu hiện tại. Còn Hệ thống 2 (chậm, phân tích) chỉ được huy động khi Hệ thống 1 phát hiện điều gì đó thực sự đáng đọc kỹ.
Vì vậy não bộ luôn tìm cách tiết kiệm năng lượng tối đa. Khi giao diện quá rối, dày đặc chữ mà không có phân cấp rõ ràng, tải nhận thức (cognitive load) sẽ tăng vọt, khiến người dùng rời trang gần như ngay lập tức. Cũng chính thói quen quét đọc này tạo ra hai kiểu quỹ đạo mắt phổ biến nhất: chữ F và chữ Z.
Bạn có thể tìm hiểu thêm về: “Thuyết 2 hệ thống tư duy: Hệ thống 1 và hệ thống 2“
F-Pattern – Khi mắt “bám” vào lề trái
F-Pattern được nhà nghiên cứu Jakob Nielsen phát hiện và công bố lần đầu năm 2006, sau một nghiên cứu eye-tracking trên hàng nghìn người dùng. Mô hình này xuất hiện rõ nhất trên các trang có mật độ chữ dày đặc như bài blog, trang tin tức, bài báo hay trang kết quả tìm kiếm.
Mắt người dùng thường di chuyển theo 3 bước:
Đường quét ngang thứ nhất: Mắt bắt đầu từ góc trên bên trái rồi quét sang phải, dọc theo dòng đầu tiên của nội dung.
Đường quét ngang thứ hai: Mắt quay về lề trái, trượt xuống một chút và quét ngang thêm lần nữa. Tuy nhiên đường quét này thường ngắn hơn đường đầu tiên.
Đường quét dọc: Mắt tiếp tục quay về lề trái và quét xuống dưới, chỉ dừng ở vài từ đầu của mỗi dòng hoặc mỗi tiêu đề phụ. Ba đường quét này tạo thành một hình gần giống chữ F.
Người đọc sẽ bỏ qua toàn bộ phần còn lại của một dòng nếu 1-2 từ đầu tiên bên trái không đủ hấp dẫn hoặc không liên quan đến điều họ đang tìm. Đây là lý do bạn chỉ có vài từ để giữ ánh mắt trước khi nó trượt xuống dòng tiếp theo.
Áp dụng F-Pattern khi thiết kế và viết content
Vì mắt luôn tập trung ở góc trên bên trái và lề trái, đây là hai khu vực bạn cần chú ý khi dàn trang. Headline, logo hay giá trị cốt lõi nên nằm ở góc trên bên trái để người dùng tiếp nhận từ những giây đầu tiên. Văn bản cũng cần được căn lề trái, tạo một đường thẳng giúp mắt dễ xác định điểm bắt đầu của mỗi dòng.
Với phần chữ, bạn có thể dùng kỹ thuật front-loading – đưa từ khóa hoặc động từ mạnh lên đầu câu, đầu đoạn và đầu tiêu đề phụ. Bởi nếu từ đầu tiên nhàm chán, người đọc sẽ bỏ qua cả đoạn. Để nội dung không biến thành “bức tường chữ”, bạn nên đặt tiêu đề phụ sau mỗi 2-3 đoạn và giới hạn mỗi đoạn trong khoảng 3-4 dòng.
In đậm từ khóa, dùng chữ số thay vì chữ viết, chèn bullet point hay danh sách đánh số cũng tạo ra các điểm neo thị giác cho mắt khi quét lướt. Theo một nghiên cứu, nếu đoạn sapo được in đậm hoặc để cỡ chữ lớn hơn, 95% người đọc sẽ đọc hết hoặc đọc một phần đoạn đó. Bạn có thể thấy các nguyên tắc này ngay trong bài viết đang đọc: tiêu đề phụ ngắn, đoạn văn không quá dài và từ khóa quan trọng được in đậm ngay từ đầu câu.
4 điểm tạo thành Z-Pattern
Ngược lại với F-Pattern, Z-Pattern xuất hiện trên những trang có mật độ chữ thấp, nhiều khoảng trắng và thiên về hình ảnh, video, điển hình là landing page bán hàng, trang đăng ký, trang chủ sản phẩm SaaS hay banner quảng cáo tĩnh.
Mắt thường di chuyển tuần tự qua 4 điểm:
- Điểm 1 – trên trái: Đây là nơi mắt dừng đầu tiên, thường được dùng để đặt logo hoặc thông điệp thương hiệu.
- Điểm 2 – trên phải: Mắt trượt ngang sang phải để kiểm tra menu phụ hoặc nút hành động phụ như “Đăng nhập”, “Đăng ký”.
- Điểm 3 – dưới trái: Mắt quét chéo xuống và thường rơi vào vùng chứa hình ảnh sản phẩm hoặc bằng chứng thuyết phục.
- Điểm 4 – dưới phải: Đây là điểm dừng cuối cùng, còn gọi là “vùng hành động” – nơi người dùng đã tiếp nhận đủ thông tin và sẵn sàng ra quyết định.
Với những trang dài, Z-Pattern lặp lại liên tục thành chuỗi zigzag. Chẳng hạn hàng đầu bố trí “chữ trái – ảnh phải”, hàng tiếp theo đảo lại thành “ảnh trái – chữ phải”. Điều này phá vỡ sự đơn điệu của việc quét dọc thẳng, giúp mắt đi từ trên xuống dưới mà không bị mỏi.
Khi thiết kế website theo Z-Pattern, bạn nên đặt logo ở điểm 1 và kéo dài headline chính từ điểm 1 sang điểm 2 để được nhìn thấy ngay từ đầu. Còn nút kêu gọi hành động (CTA) quan trọng nhất hoặc form đăng ký ngắn nên nằm ở điểm 4 – góc dưới bên phải.
Khoảng trắng (whitespace) bao quanh đường chéo của chữ Z cũng giúp lọc bớt nhiễu thị giác. Điều này giúp dồn sự chú ý vào các điểm neo quan trọng thay vì những chi tiết không cần thiết.
Chọn mô hình theo loại trang
Sự khác biệt lớn nhất giữa hai mô hình nằm ở mật độ chữ và mục đích của trang:
| Tiêu chí | F-Pattern | Z-Pattern |
|---|---|---|
| Loại trang phù hợp | Blog, tin tức, bài viết, trang kết quả tìm kiếm | Landing page, trang chủ SaaS, trang đăng ký |
| Mật độ nội dung | Nhiều chữ, dày đặc thông tin | Ít chữ, nhiều hình ảnh, nhiều khoảng trắng |
| Hành vi mắt | Quét ngang – quét ngang ngắn – quét dọc lề trái | Quét ngang phía trên – chéo xuống trái – quét ngang phía dưới sang phải |
| Vị trí CTA | Phía trên bên trái, ngay sau đoạn văn ngắn thu hút | Góc dưới bên phải, điểm kết thúc chữ Z |
Nếu trang của bạn nặng về câu chữ, F-Pattern sẽ phù hợp hơn. Còn nếu trang thiên về hình ảnh và mục tiêu là thúc đẩy một hành động cụ thể (mua hàng, đăng ký), bạn có thể dùng Z-Pattern.
Website của bạn đã “thuận mắt” chưa?
Bạn có thể kiểm tra lại website của mình bằng một vài điểm sau:
- Xác định loại trang: Trang nhiều chữ phù hợp hơn với F-Pattern, còn trang nhiều hình và khoảng trắng có thể dùng Z-Pattern.
- Kiểm tra phần người dùng nhìn thấy trước: Với F-Pattern, thông điệp quan trọng nhất cần nằm ở góc trên bên trái. Với Z-Pattern, thông điệp này nên trải từ điểm 1 sang điểm 2.
- Chú ý cách trình bày content: Tiêu đề phụ và những từ đầu tiên của mỗi đoạn cần đủ từ khóa để giữ ánh mắt. Chữ in đậm và bullet point cũng nên được rải dọc lề trái để hạn chế mắt trượt xuống quá nhanh.
- Xem lại vị trí CTA: Nút CTA chính nên nằm phía trên bên trái, ngay sau đoạn văn ngắn thu hút với F-Pattern. Với Z-Pattern, vị trí này là góc dưới bên phải.
Bạn không cần thiết kế lại toàn bộ website chỉ sau một lần đọc. Tuy nhiên khi viết content hoặc dàn trang cho landing page, bạn có thể thử hình dung đường đi của ánh mắt trước. Đôi khi chỉ cần đổi vị trí một dòng chữ hay một nút CTA, website đã phù hợp hơn với cách mắt người dùng quét qua nội dung.