Tìm hiểu về giao diện F trong thiết kế layout Website

Các nghiên cứu đã chỉ ra rằng: Trước khi bắt đầu đọc nội dung trên website, mọi người có xu hướng quét nhanh qua trang web và sẽ cảm thấy có thiện cảm với nó hay không.

Mẫu quét có xu hướng lấy một trong hai hình dạng “F” và “Z” và bạn có thể tận dụng điều này trong thiết kế của mình.

Trong bài này, tôi sẽ xem xét cách bố trí hình chữ “F”, chắc chắn sẽ mang lại cho bạn một số ý tưởng tuyệt vời. Hiểu rõ hơn về cách bố cục khác nhau có thể thay đổi hành vi của người dùng là một trong những nguyên tắc trung tâm của việc tạo ra trải nghiệm người dùng hiệu quả.

THỨ NHẤT LÀ TÌM HIỂU VỀ F-LAYOUT 

Thiết kế theo dạng layout chữ F hay còn gọi là “F Pattern Layout”. Thay vì cố ép dòng chảy trực quan của người xem, F-Layout mang lại cho các hành vi tự nhiên của hầu hết người lướt web.

Nắm bắt được tốt hơn về các bố cục khác nhau có thể thay đổi hành vi của người dùng là một trong những nguyên tắc tạo ra sự hiệu quả cho trải nghiệm của người dùng.

Các F-Layout dựa trên các nghiên cứu eyetracking (https://abstractionhub.com/2014/05/31/eye-tracking/ ). Những nghiên cứu khoa học này cho thấy những người lướt web đọc màn hình theo mô hình “F” – nhìn thấy góc trên bên trái, bên trái màn hình nhất … chỉ thỉnh thoảng nhìn sang phía phải màn hình.

Ưu tiên đặt những thông tin quan trọng nhất trên trang web của bạn (xây dựng thương hiệu, điều hướng, gọi hành động) ở phía bên trái của thiết kế. Giúp bạn thiết lập một hệ thống phân cấp thị giác để thu hút người dùng tập trung vào các yếu tố quan trọng. Hãy nhớ nhé ☺

Cho phép tôi hướng dẫn bạn qua mô hình này nhé:

Khách truy cập bắt đầu ở phía trên bên trái của trang. Sau đó, họ quét phía trên cùng của trang web (điều hướng, đăng ký, tìm kiếm, v.v.) Tiếp theo, họ di chuyển xuống, đọc toàn bộ dòng nội dung tiếp theo … đến hết thanh bên.
Cuối cùng, người lướt xuống nội dung chung bên dưới trang web. Và văn bản thường được quét qu, chứ không được chú ý lắm.

Các bạn hãy dành một chút thời gian để tham khảo mô hình tôi vẽ bên dưới:

F.jpg

Áp dụng Giao diện F cho Thiết kế

Thử làm một bài tập, tôi và các bạn tạo ra một thiết kế sử dụng F-Layout. Trước tiên, hãy phác hoạ qua layout chính của chúng ta bằng cách sử dụng wireframe nào:

f-01.jpg

Tôi đang cố gắng đưa ra “tuyên bố sứ mệnh” chính của tôi ở gần đầu trang để có thể nhanh chóng truyền đạt nội dung của trang web.

Tiếp theo, tôi sẽ thêm một số nội dung, ảnh thực tế vào thiết kế để xem nó trông như thế nào nhé:

f-02.jpg

Bây giờ, hãy phủ lớp bố cục F ban đầu nào:

f-03.jpg

Có nhiều hạn chế để dựa quá nhiều vào “F-Layout” trong thiết kế của bạn. Đối với một sản phẩm mà luôn luôn thiết kế với bố trí F có thể cảm thấy nhàm chán và có thể dự đoán trước được khi chưa cần lướt mắt hết layout … để hạn chế điều này, bạn sẽ phải thiết kế một sự đổi mới nào đó khác.

Nhưng luôn nhớ rằng các tiêu đề dễ nhớ và hình ảnh hấp dẫn đều là những thủ thuật hữu ích mà từng designer sẽ có sự sáng tạo khác nhau.

Bạn có ý kiến của riêng mình? Hãy cùng tôi chia sẻ chúng bằng cách comment xuống bên dưới nhé!

– Sarah Nguyen – 


Bài viết liên quan