Tìm hiểu F Layout trong thiết kế website

Tìm hiểu F Layout

Mình đã từng giới thiệu về Z Layout, trong bài hôm nay thì mình sẽ hướng dẫn các bạn về công dụng, chức năng của F-Layout, đây là một trong những kiểu layout phổ biến đối với các thiết kế website hiện đại ngày nay.

Thay vì hướng người xem đi theo những vị trì đã được xấp xếp sẵn như Z Layout. Thì F Layout lại đi sâu hơn vào việc tìm hiểu một cách có khoa học các thói quen chung của người dùng và đưa ra những mẫu thiết kế hợp lý. Trong bài này thì chúng ta sẽ tìm hiểu sâu hơn về nguyên tắc của F Layout, tại sao nó lại hữu dụng và làm cách nào bạn có thể tạo cho riêng mình một thiết kế website theo nguyên tắc F Layout.

GIỚI THIỆU F LAYOUT

Dựa theo các nghiên cứu khoa học, bằng cách khảo sát và quan sát người lướt web, người ta nhận thấy rằng, người lướt web thường có xu hướng xem theo thứ tự như sau: trên cùng bên trái, sau đó chuyển động ngang về phía bên phải, đến cuối cùng, sau đó họ sẽ chuyển hướng xuống dòng phía dưới và cũng đọc từ trái sang phải. Cứ như thế thì họ sẽ tạo ra một mô hình theo dạng hình chữ F. Theo như hình vẽ mẫu phía dưới thì mắt người xem sẽ đi chuyển từ vị trí số 1 > 2 > 3 > 4.

Và cách dễ hình dung nhất là nó giống như các bạn đang đọc một quyển sách vậy, cứ đọc hết dòng này sẽ xuống dòng kế tiếp. Đối với 1 website thì người xem họ cũng lướt qua từng đối tượng 1 theo như trong mẫu trên. Và các đối tượng bên trái phía trên thường sẽ là những đối tượng quan trọng (logo, slogan, menu, bài viết).

Các đối tượng phía phải thì thường ít quan trọng hơn (slide-bar, sponsor, ads,….)

Nếu như thiết kế với F Layout thì bạn sẽ có được những lợi thế sau:

- Nhãn hiệu, thương hiệu là những đối tượng đầu tiên được người xem chú ý đầu tiên.

- Các hình ảnh, tiêu đề, bài viết sẽ được chú ý nhiều hơn.

ĐƯA F -LAYOUT VÀO THIẾT KẾ WEBSITE

Bạn hãy xem một mẫu thiết kế trong 1 dự án mà mình đang thực hiện dang dỡ. Và nếu như bạn nhìn vào thiết kế trên thì bạn sẽ đi theo nguyên tắc mà mình đã nêu lên ở trên. Và khi mình gán chữ F vào thì có thể dễ dàng thấy được tác dụng của thiết kế F Layout, khi vào web, theo thói quen, người xem sẽ xem qua logo của bạn trước, sao đó là các liên kết (1-2). Sau đó, người xem sẽ chuyển về đầu và chuyển sang dòng thứ hai, ở đây các bạn có thể để silder hoặc một mẫu quảng cáo gây chú ý cho người dùng. Tiếp đó, người xem sẽ xuống dòng dưới và các đối tượng phía bên trái (3) như thumbnail hình ảnh, title và mẫu tin ngắn gọn. Ở bên phải (4) thì là các box chứa menu, category, ads, social,… Và những đối tượng ở phía này ít được chú ý đến.

Khoảng các giữa các dòng trong F Layout có thể có chiều cao khác nhau, tuy nhiên các nhà thiết kế lại thích cho thiết kế của mình mỏng lại (tức khoản các giữa các dòng ngắn lại) nhằm tăng lên tầng số quét của người xem, tuy nhiên, thì cách này lại có thể gây ra tác hại là làm cho người xem bị choáng với lượng thông tin dầy đặc.

Nhưng chúng ta lại có thể giải quyết việc đó bằng các sau một vài dòng thì chúng ta có thể thêm 1 break object (quảng cáo, hình ảnh vui nhôn, lạ mắt), mục đích là loại bỏ sự nhàm chán cho người xem. Ngoài ra, các đối tượng phía bên trái, chúng ta cũng có thể thiết kế sao cho bắt mắt, nhằm gây sự chú ý của người xem.

ƯU VÀ KHUYẾT ĐIỂM

Z Layout có hiệu quả không? Câu trả lời là CÓ, nếu như các bạn để ý thì hầu như các blog hiện này điều được thiết kế với F Layout (Izwebz cũng thuộc F-Layout)

Và tại sao nó lại được yêu thích đến thế? Bởi vì đơn giản nó là thói quen từ nhỏ khi chúng ta đọc sách, trái sang phải, trên xuống dưới. Nên rất dễ dàng và thoải mái cho người xem.

Một điểm tốt nhất ở F-Layout đó chính là SEO, chính các tiêu đề và nội dung ngắn gọn bài viết rất tốt cho SEO.

Tuy nhiên, nó cũng có những nhược điểm là:

- Điều bắt buộc là nội dung nóng phải nằm ở trên.

- Người dung ko đọc chi tiết chữ, mà chỉ xem hình và tiêu đề, do đó, các hình ảnh và tiêu đề phải được chọn lọc kĩ càng.

Chú ý: Nội dung là chủ chốt để giữ chân khách hàng, slice-bar và các đối tượng bên phải chỉ là phụ.