Thiết kế website theo bố cục góc nhìn của người đọc

27/07/2021

12121

Thiết kế website theo bố cục góc nhìn của người đọc theo bố cục chữ F.

Trên thực tế hiện tại, rất nhiều website, blog và landing page đều được thiết kế theo bố cục hình chữ F này. Hãy tham khảo bài viết của webvocuc để hiểu rõ hơn nhé.

Tại sao lại thiết kế website theo bố cục góc nhìn của người đọc là bố cục chữ F?

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

Người dùng thườ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ú ý của họ 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 của trang. Sau đó là kéo dần xuống 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à 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.

Thiết kế website theo bố cục góc nhìn của người đọc

Nhìn vào sơ đồ, rõ ràng có thể thấy là bạn nên đặt những nội dung cần chú ý nhất lên đầu trang. Cùng với một biểu tượng cố định được đặt ở góc trái trên cùng (điểm số 1) – điểm duy nhất mà đả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 giúp người đọc nhận diện thương hiệu tốt hơn.

Thường thì các nhà thiết kế web sẽ đặt thanh điều hướng (navigation bar) ở phần đầu trang nhất, 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 chính của trang.

Các nhà thiết kế có thể tùy ý lựa chọn độ dày mỏng khác nhau, 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ẽ kích thí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 để nội dung được chú trọng.

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 như vậy (điểm thứ 4). Về mặt 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 hơn. Nhưng trên thực tế, thì nhiều người lại rời trang chỉ sau vài giây lướt đọc – trừ khi bạn biết cách níu giữ sự chú ý của họ hơn.

Đ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 một banner quảng cáo. Hoặc có thể đặt 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 đây!”.

Lưu ý khi thiết kế website theo bố cục góc nhìn của người đọc

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. Và chỉ để chỉ ra những điểm đáng chú ý suy ra từ bố cục trang hình chữ F như sau:

Người truy cập ít khi đọc đầy đủ từng chữ một mà bạn viết (trên thực tế, họ thường chỉ đọc khoảng 20% số câu từ chính được viết ra).
Hai khối nội dung đầu tiên là phần nội dung quan trọng nhất và nên chứa những thông tin hấp dẫn, cần thiết nhất.
Mỗi đoạn văn chỉ nên trình bày một ý chính, nên sử dụng gạch đầu dòng nếu cảm thấy 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 nhất.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.