Bạn có bao giờ cảm thấy bực bội khi sử dụng một ứng dụng, thao tác mãi mà không thực hiện được như ý muốn? Đó chính là vấn đề của UX (Trải nghiệm người dùng) – yếu tố then chốt quyết định thành công của bất kỳ ứng dụng hay website nào.
UX thường bị nhầm lẫn với UI (Giao diện người dùng). UI chỉ đơn giản là những gì bạn nhìn thấy trên màn hình, còn UX rộng lớn hơn nhiều. Nó là tổng thể những cảm nhận, cách thức tương tác của người dùng với ứng dụng/website.
Một ứng dụng có thiết kế UX tốt sẽ giúp bạn đạt được mục đích khi truy cập ứng dụng/website nhanh chóng, dễ dàng và hơn hết là tạo động lực để bạn quay lại sử dụng. Ngược lại, UX tồi sẽ khiến bạn bối rối, khó chịu và có xu hướng bỏ qua ứng dụng/website.
Vậy làm thế nào để nâng cao trải nghiệm người dùng (UX)?
Hãy nghiền ngẫm thật kỹ người dùng của bạn. Hãy đặt mình vào vị trí của họ, suy nghĩ về cách họ thao tác trên giao diện, tầm mắt di chuyển đến đâu, và ngón tay có thể dễ dàng chạm đến các vị trí nào.
Theo nghiên cứu, có những vùng trên màn hình được người dùng chú ý nhiều hơn. Bằng cách tận dụng điều này, chúng ta có thể sắp xếp bố cục trang web, ứng dụng để thông tin quan trọng được nhìn thấy dễ dàng.
Có 3 kiểu bố cục thiết kế phổ biến giúp người dùng quét hoặc đọc lướt qua website/ứng dụng là:
- Bố cục hình chữ F (F-pattern)
- Bố cục hình chữ Z (Z-pattern)
- Sơ đồ Gutenberg
Bài viết này sẽ đi sâu vào hai dạng đầu, dạng thứ ba – “Sơ đồ Gutenberg” sẽ được đề cập trong bài viết khác vì nó thường dùng cho các trang web nhiều chữ.
1. Bố cục Z-Pattern
Đúng như tên gọi, kiểu quét mắt này có hình dạng chữ Z, đôi khi còn được gọi là kiểu quét hình chữ S ngược. Người dùng thường bắt đầu từ phía trên bên trái, sau đó di chuyển sang ngang sang phía trên bên phải, di chuyển chéo xuống phía dưới bên phải và cuối cùng di chuyển sang ngang bên trái, tạo thành hình chữ Z.
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. Khác với F-pattern, Z-Pattern phù hợp với những giao diện đề cao sự tối giản với ít thành phần mà người dùng cần xem hoặc lướt qua và CTA (Call-to-action) là thứ quan trọng nhất mà giao diện website cần truyền tải.
Trang web này có bố cục khá điển hình, bao gồm các thành phần như logo, thanh điều hướng phía trên chứa các liên kết, một hình ảnh hoặc video lớn ở giữa trang, và một số nội dung khác bên dưới.
Đây là một trang web lý tưởng để thiết kế áp dụng theo mô hình Z. Các con số trong sơ đồ ở trên cho biết đường đi của mắt khi truy cập vào trang chủ website. Dễ dàng nhìn thấy, tầm mắt người dùng sẽ lướt qua logo và các chuyên mục chính của website, sau đó sẽ lướt xuống phần nội dung và dừng lại ở nút CTA: Sign up now!
Một ví dụ khác điển hình cho mô hình Z hoạt động là trang đích của Facebook. Khi truy cập vào website, người dùng sẽ hướng ánh mắt đầu tiên đến logo của Facebook và tiếp tục di chuyển, cử chỉ tay sẽ dừng lại ở 2 nút CTA là Log in hoặc Create an account để chuyển sang giao diện kế tiếp.
2. Bố cục F-pattern
Hãy tưởng tượng trang web của bạn như một tờ báo, và người dùng là người đang đọc báo. Tầm mắt của họ di chuyển theo một “chữ F” vô hình, bắt đầu từ trên trái, quét ngang qua đầu trang, sau đó di chuyển dọc xuống cạnh trái màn hình theo hình mũi tên dọc. Đó chính là cách mà F-pattern được phát hiện.
Jakob Nielsen, chuyên gia UX nổi tiếng từ Nielsen Norman Group, đã tiến hành một nghiên cứu về hành vi đọc của người dùng trên website với 232 người tham gia. Nghiên cứu của ông chỉ ra rằng:
- Khi tìm kiếm thông tin, người đọc hiếm khi đọc từng chữ: Họ thường lướt qua nội dung để tìm kiếm thông tin quan trọng.
- Hai khổ đầu tiên là quan trọng nhất: Đây là nơi thu hút sự chú ý của người đọc và quyết định họ có tiếp tục đọc hay không.
- Khi bắt đầu khổ mới, subheading và bullet point với những từ ngữ chắt lọc nhất: Việc này giúp người đọc dễ dàng nắm bắt nội dung chính và tiếp tục khám phá trang web.
Khi áp dụng mô hình này, bạn có thể đặt các nội dung có khả năng được quan tâm cao dọc theo chữ F. Vị trí “đắc địa” nhất thuộc về góc trên bên trái. Hãy đặt nội dung quan trọng nhất mà bạn muốn người dùng chú ý như logo, slogan, tiêu đề bài viết ở trên cùng và thiết kế nội dung sau đó để kéo người đọc xuống phía dưới.
Hãy sử dụng phần bên trái cho thông tin chính: Khéo léo bố trí thông tin chính theo dạng dấu đầu dòng, số thứ tự hoặc hình ảnh để dễ tiếp thu. Tuy nhiên, hãy nhớ rằng nếu ai đó “scan” trang của bạn và thấy thú vị, họ sẽ đọc. Vì vậy bạn có thể đặt thêm thông tin ở bên ngoài chữ F cho họ đọc.
Trang web này có những đặc điểm tương tự như trang web mà chúng ta đã phân tích theo mô hình Z, đều có logo/tên website, thanh điều hướng với các liên kết, kèm theo là những hình ảnh và thông tin bài báo,… Nhưng điểm khác biệt ở đây là thay vì bố trí hình ảnh lớn ở chính giữa, thì trang này lại có các hàng nội dung chứa cả văn bản và hình ảnh. Nhìn tổng thể, có thể thấy cách bố trí này cung cấp nhiều nội dung hơn, tuy nhiên sự hợp lý trong cấu trúc thiết kế khiến cho nội dung trở nên rõ ràng và dễ hiểu.
Mô hình F hoạt động hiệu quả như vậy là bởi nó phản ánh thói quen đọc tự nhiên của người dùng. Bằng cách sắp xếp nội dung một cách chiến lược, bạn có thể đảm bảo người dùng tìm thấy thứ họ đang tìm kiếm nhanh chóng và giữ họ tương tác với trang web của bạn.
Ví dụ phổ biến tương tự về cách hoạt động của mô hình Z là trang kết quả tìm kiếm của Google – công cụ tìm kiếm được truy cập nhiều nhất trong cuộc sống hàng ngày của bất kỳ người dùng internet nào.
Lời kết
Trong ngành thiết kế web, F-pattern và Z-pattern đã được biết đến như những công cụ quan trọng giúp designer tạo ra trang web hiệu quả và thu hút người dùng. Bằng cách tuân theo các bố cục dựa trên chuyển động tự nhiên của mắt người dùng, UX/UI designer có thể cấu trúc trang web thân thiện và tương tác hơn.
Tuy nhiên, không thể phủ nhận rằng xu hướng thiết kế web luôn biến đổi không ngừng. Để đảm bảo trang web luôn thu hút và mang lại trải nghiệm tốt nhất cho người dùng, việc cập nhật xu hướng là vô cùng cần thiết.
Tại Kstudy, môn học UX/UI được coi là một phần quan trọng trong chuỗi các môn học thuộc khóa Thiết kế đồ họa Fullstack. Thông qua việc thực hành thiết kế ứng dụng trên mobile dưới sự hướng dẫn của giảng viên, các học viên sẽ có cơ hội xây dựng một bản portfolio UX/UI, là phương tiện giúp họ tự tin trong việc tìm kiếm cơ hội việc làm sau khi hoàn thành khóa học.
Tìm hiểu thêm về khóa học: Thiết kế đồ hoạ
———————————————————-
Bạn có thể quan tâm: Lộ trình phát triển nghề Thiết kế đồ hoạ và những kỹ năng quan trọng
“Phong cách thiết kế” designers nên biết
