Hôm nay ở lớp học về UI và UX, đây là hai phần quan trọng liên quan đến thiết kế giao diện và trải nghiệm người dùng. Đặc biệt trong đó có giới thiệu F-Pattern, đây là một mô hình mô tả cách thức thông thường mà mắt người thường đảo qua các khối nội dung trên một trang web. Tuy nhieen F-pattern thường phù hợp với web có nhiều nội dung bằng chữ, với các web không nhấn mạnh vào text, có thể áp dụng Z-pattern, , có thể minh họa bằng hình ảnh sau:
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(call to action) 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.
Mình chỉ tìm hiểu qua thôi vì mình cũng không mạnh về thiết kế giao diện lắm, hy vọng thông tin này sẽ bổ ích 🙂
