Thiết kế web chuẩn view là gì

Trên thực tế, rất nhiều website, blog và landing page (trang giới thiệu sản phẩm) đều được thiết kế theo bố cục hình chữ F. Hãy tham khảo bài viết của UX designer Jerry Cao trên The Next Web dưới đây để hiểu rõ hơn về loại bố cục này.

Tại sao lại là bố cục chữ F?

Bố cục hình chữ F là lối thiết kế các khối nội dung trên web theo đúng điểm nhìn đặc trưng của hầu hết mọi người ghé thăm các site.

Biểu đồ nhiệt dưới đây cho thấy những vùng người dùng nhìn và kéo chuột vào nhiều nhất (màu đỏ và vàng) đều nằm ở góc trên cùng và bên trái, tương tự như hình một chữ F.

Chữ F biểu thị những khu vực mà người truy cập thường dồn hết sự chú ý vào, cụ thể là từ trái qua phải, từ phần trên cùng màn hình xuống dần phía dưới. Đầu tiên, họ sẽ nhìn rộng phần top trang, sau đó là kéo dần phía dưới, cột bên trái, tìm kiếm các từ khóa hoặc những chủ đề yêu thích trong các đầu mục hiện ra. Khi độc giả nhìn thấy thứ mình quan tâm, họ bắt đầu đọc chúng từ từ và hình thành điểm nhìn theo cột dọc.

Kết quả cuối cùng “sơ đồ” đưa mắt của họ sẽ có hình chữ F hoặc E. Theo thống kê Web UI Patterns 2014, website của hai hãng truyền thông lớn CNN và NYTimes đều sử dụng bố cục hình chữ F.

Chuyên gia Jakob Nielson của hãng Nielsen Norman Group đã thực hiện một nghiên cứu dựa trên 232 người dùng khi đọc hàng ngàn website để chỉ ra những điểm đáng lưu ý suy ra từ bố cục trang hình chữ F như sau:

– Người truy cập ít khi đọc từng chữ một bạn viết (trên thực tế, họ thường chỉ đọc khoảng 20% số câu từ được viết ra).

– Hai khối nội dung đầu tiên là phần quan trọng nhất và nên chứa những thông tin hấp dẫn nhất.

– Mỗi đoạn văn chỉ nên trình bày một ý, nên sử dụng gạch đầu dòng nếu cần.

– Hãy khởi đầu các đoạn văn hoặc mục mới bằng những cụm từ lôi cuốn.

Điều này sẽ ảnh hưởng như thế nào đến giao diện web của bạn? Hãy xem sơ đồ dưới đây nhé.

Làm thế nào để sử dụng bố cục chữ F?

Sơ đồ dưới đây minh họa lại bố cục chữ F mà độc giả thường lia mắt qua:

Nhìn vào đây, rõ ràng là bạn nên đặt những nội dung cần chú ý nhất lên đầu trang với một biểu tượng cố định đặt ở góc trái trên cùng (điểm số 1) – điểm duy nhất đảm bảo người đọc phải nhìn thấy. Đây cũng chính là lý do mà logo trang thường được đặt ở góc này.

Thường thì các nhà thiết kế sẽ đặt thanh điều hướng (navigation bar) ở phần đầu trang, kéo dài xuyên suốt từ trái sang đến góc phải trên cùng (điểm số 2). Điều này sẽ giúp người dùng dễ dàng tìm các từ khóa lớn (mà thường chính là tên các đầu mục trên thanh điều hướng). Các nhà thiết kế có thể tùy ý lựa chọn độ dày mỏng, trong suốt hay màu sắc của thanh này. Chẳng hạn một thanh điều hướng mỏng sẽ khuyến khích người dùng đọc trang nhiều hơn, trong khi một thanh dày sẽ được tận dụng để quảng bá nội dung các mục lớn.

Sau phần đầu trang, người dùng sẽ kéo xuống dưới để xem đến điểm số 3 và cứ thế lặp lại quy trình này (điểm thứ 4). Về lý thuyết, độc giả sẽ kéo xuống cho đến khi họ tìm thấy những thứ hấp dẫn để đọc, nhưng trên thực tế, nhiều người lại rời trang chỉ sau vài giây lướt – trừ khi bạn biết cách níu giữ sự chú ý của họ.

Chính vì vậy mà nhiều chuyên gia gợi ý rằng nhà thiết kế nên xóa bỏ sự nhàm chán bằng một yếu tố thú vị xen vào sau hai, ba khối nội dung đầu tiên – bất cứ thứ gì có thể phá tan chu trình kéo dọc nhàm chán cho người đọc. Chẳng hạn như một thanh kéo các nội dung liên quan chắn ngang dòng chảy nội dung thông thường – chỉ để giữ cho website không rơi vào đơn điệu. Tiêu chuẩn hay được áp dụng là cứ 1000 pixel trôi qua lại có một đoạn “xen ké” vào như vậy. Điều này cũng giúp tạo ra một chữ F tiếp theo cho trang.

Điều đáng chú ý nữa là phần dưới (góc tay phải) mỗi hàng dài xen giữa dòng chảy tin (điểm số 2 và 4) chính là nơi tốt nhất để đặt banner quảng cáo hoặc các nút kêu gọi hành động (ví dụ như Subscribe/Mua ngay!) Đây cũng chính là lý do bạn sẽ thấy trên nhiều blog, tác giả thường đặt ngay dưới các vị trí này những nút kiểu “eBook mới sắp ra mắt!”.

Ví dụ dưới đây sẽ minh họa cho những điều kể trên:

Bố cục chữ F là một trong những cách dàn trang hiệu quả nhất hiện nay khi đặt các khối nội dung thuận mắt người đọc mà vẫn đảm bảo không làm rối nội dung chính. Hãy nhớ rằng dù thế nào thì nội dung vẫn là trên hết, và các thanh sidebar bên cạnh chỉ để giúp người đọc tiếp cận sâu hơn các chủ đề trên trang mà thôi.

Khi các site sử dụng bố cục chữ F, phần lề phải sẽ được dùng vào 2 mục đích:

1. Hiển thị các nội dung phù hợp nhưng không hẳn đã liên quan – bất cứ thứ gì bạn muốn độc giả nhìn thấy nhưng lại không thể nhét vào cột nội dung chính, chẳng hạn như quảng cáo, link dẫn đến các bài viết khác hay các tool chia sẻ lên mạng xã hội.

2. Công cụ tìm kiếm – Đây có thể là nơi đặt thanh tìm kiếm, nhưng cũng có thể đặt list các mục hay tag/từ khóa nổi bật trên trang.