1. Quy
luật F-Pattern
- F-Pattern là quy luật dành cho
việc phân bổ Text là chính. Đây là cách đọc theo hình chữ F khi người đọc đang
nhìn về phía 1 trang web có chứa rất nhiều nội dung (tech-heavy content
website).
- Họ được mô tả là sẽ đọc theo
hàng dọc những ý chính ở phần đầu phía bên tay trái của trang web, khi họ tìm
được ý họ thích, họ sẽ đọc rõ hơn theo hàng ngang.
- Kết quả, bạn sẽ thu được hình ảnh capture mắt đọc theo chữ F hoặc chữ E. Những trang báo nổi tiếng như CNN, New York Times có sử dụng thuật sắp xếp này:
F-Pattern là
một quy luật mang tính thực tiễn cao
Jakob Nielson thuộc Nielson
Norman Group đã tiến hành một nghiên cứu đọc dựa trên 232 người đã đọc hàng
ngàn website và nhấn mạnh tính thực tiễn của F-Pattern, hiểu rằng:
• Người đọc hiếm khi đọc từng chữ của văn bản.
• 2 khổ đầu tiên là quan trọng nhất trong văn bản. Nên để hook ở đó luôn.
• Hãy bắt đầu 1 khổ mới, subheads và bullet với những từ ngữ chắt lọc nhất.
- Quy luật này áp dụng vào website của bạn như thế nào, hãy cùng xem:
2. Quy
luật Z-Pattern
- Z-Pattern dành cho bố cục
chung của 1 landing page khi có cả ảnh, text, menu rồi đến các CTA (1 trang
hoàn chỉnh)
- Z-Pattern scanning sẽ xuất
hiện ở những trang web không nhấn mạnh vào text.
• Người đọc sẽ scan một đường ngang trên cùng của trang, đó có thể là menu bar hoặc đơn giản là thói quen đọc từ trái sang phải ở hàng
trên cùng.
• Khi mắt đọc đến phần cuối cùng, nó sẽ đi xuống và nhìn sang bên trái.
• Tiếp tục làm 1 đường cắt ngang tìm kiếm phần phía dưới của trang web.
- Minh họa bằng hình ảnh như sau:
- Quy luật Z-Pattern áp dụng cho hầu hết các giao diện website
bởi vì nó đã quy ước phần hiển thị của cấu trúc, branding, call to action của 1
trang web. Z-Pattern phù hợp với những giao diện đề cao sự tối giản và CTA là
thứ quan trọng nhất của content truyền tải.
3. Một vài tips khi đưa Z-Pattern vào website
- Có thể áp đặt Z-Pattern vào một website với content phức tạp
sẽ không phù hợp như F-Pattern, nhưng Z-Pattern sẽ giúp mang đến một layout đơn
giản và hiệu quả hơn (tăng tỉ lệ chuyển đổi). Đây là một vài tips cần nhớ:
• Background — Nên tách rời background để giũ mắt người đọc trong framework của bạn.
• Điểm 1 — Vị trí vàng cho logo thương hiệu
• Điểm 2 — Hãy đặt vào đây một CTA thứ cấp giúp người dùng định hướng đọc theo Z-Pattern (đọc từ logo sang CTA thứ cấp — 1 đường kéo dài ngang trên cùng của website)
• Vị trí giữa trang — Một Feature
Image Slider ở ngay giữa trang phân biệt phần trên và phần dưới, cũng như giữ mắt
theo đường chữ Z
• Điểm 3 — Bắt đầu viết các nội dung chính ở đây và viết sang ngang tiếp để giúp người dùng nhìn sang CTA ở điểm số 4.
• Điểm 4 — Đây là điểm kết của Z-Pattern, vị trí vàng cho CTA.
- Lường trước mắt người dùng sẽ đọc cái gì là một lợi thế rất
lớn. Trước khi sắp xếp các yếu tố trên site của bạn, hãy viết ra điều quan
trọng nhất và kém quan trọng nhất. Một khi bạn biết bạn muốn người đọc nhìn vào
đâu hơn, bạn chỉ cần sắp xếp nội dung vào các vị trí phù hợp.
- Theo cá nhân mình thấy, hiện nay các trang web đều khá dài,
vậy nên việc tìm Z-Pattern giống như hình mô tả khó. Tuy nhiên mình cũng list 1
vài sample ở đây:
- Bạn có thể mở
rộng Z-Pattern trên toàn trang (nếu trang của bạn dài), lặp lại các điểm từ 1–4 nếu bạn thấy mình cần bổ sung thêm nhiều giá
trị định vị trước CTA cuối cùng.
