Cổng thông tin Bignewsmag Cổng thông tin Bignewsmag
Related Articles
CÁC BÀI VIẾT TRÊN WEBSITE ĐƯỢC TỔNG HỢP TỪ NHIỀU NGUỒN TRÊN MẠNG XÃ HỘI, INTERNET. CHÚNG TÔI KHÔNG CUNG CẤP CÁC THÔNG TIN NÀY.
Bố cục chữ F là gì? vì sao nhiều website hàng đầu hiện nay đều được thiết kế theo bố cục chữ F?
Đừng bao giờ nghĩ rằng độc giả ghé thăm website của bạn sẽ có thời kì đọc kỹ từng phần một. Bạn cũng đừng nghĩ rằng mỗi người sẽ có một kiểu đọc và để ý đến những phần khác nhau trên trang web. Thực chất đây là một hành vi người dùng điển hình mà các nhà thiết kế web nên chú trọng.
Trên thực tiễn, 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.
Xem thêm: Quý khách hàng có nhu cầu : Báo giá thiết kế web bán hàng vui lòng liên hệ tại đâ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ồ 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, na ná như hình một chữ F.
Chữ F mô tả những khu vực mà người truy cập thường dồn hết sự để ý 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. trước nhất, 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, dạo 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 hoài, 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ả chung cuộc "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 tiễn, họ thường chỉ đọc khoảng 20% số câu từ được viết ra).
– Hai khối nội dung trước hết là phần quan trọng nhất và nên chứa những thông tin quyến rũ nhất.
– Mỗi đoạn văn chỉ nên thể hiện 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 ngữ thu hút.
Điều này sẽ ảnh hưởng như thế nào đến giao diện web của bạn? Hãy xem lược đồ 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à bạn đọc 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 để ý nhất lên đầu trang với một biểu trưng nhất thiết đặt ở góc trái trên cùng (điểm số 1) – điểm duy nhất bảo đảm 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ứ quyến rũ để đọc, nhưng trên thực tại, 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ì thế 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ích thú xen vào sau hai, ba khối nội dung trước tiên – bất cứ thứ gì có thể phá tan chu trình kéo dọc nhàm cho người đọc. chả hạn như một thanh kéo các nội dung liên tưởng 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 vận dụng là cứ 1000 pixel trôi hỗ tương 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 lăng xê hoặc các nút kêu gọi hành động (tỉ 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!".
Thí 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 giờ 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 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 đã can hệ – bất cứ thứ gì bạn muốn độc giả nhìn thấy nhưng lại chẳng thể nhét vào cột nội dung chính, chả hạn như quảng cáo, link dẫn đến các bài viết khác hay các tool san sớt lên mạng từng lớp.
2. Công cụ tìm – Đây có thể là nơi đặt thanh kiêng, nhưng cũng có thể đặt list các mục hay tag/từ khóa nổi trội trên trang.
Dưới đây là một vài thí dụ về việc ứng dụng các phương thức này.
Layout của The New Yorker cho thấy bố cục chữ F là cực kỳ hiệp với những site hiển thị lăng xê ở phần đầu trang. Ở đây, quảng cáo của David Yurman đập ngay vào mắt người đọc nhưng lại không hề làm gián đoạn phần đọc của trang nhờ bức ảnh sắc đỏ nổi bật của bài viết lớn bên dưới. Như đã nhắc đến ở trên, phần góc phải ngay dưới hàng ngang đầu trang sẽ thường là một banner quảng cáo nhỏ, nơi người đọc thường vô tình lia mắt qua khi xem tít bài viết lớn.
Bố cục F cũng được ứng dụng với các site nội dung lác đác như landing page trong tỉ dụ về iZettle.
iZettle đã khôn khéo kết hợp bố cục hình chữ F với chữ Z trên trang của mình (chúng ta sẽ bàn luận về chữ Z sau).
Ở đây, họ đã tránh được sự máy móc của các template phổ biến bằng cách đặt thông điệp chính "Grow your business with iZettle" và nút kêu gọi hành động "Get started in 5 minutes" lên ảnh background đầu trang. Đây là lối tiếp cận tối giản nhưng vẫn đạt được hiệu quả mong muốn.
Tại sao lối dàn trang này lại hiệu quả đến vậy?
Các designer thẳng tính sử dụng bố cục này để dàn trang bởi nó tuân theo đúng các điểm nhìn mà mắt người thường dừng lại. Chính bởi thế mà bố cục F khuyến khích bạn đọc đọc nhiều và có được trải nghiệm tự nhiên. đối chọi lại với đó, các trang nặng về nội dung nhưng lại làm ngơ sơ đồ F lại đang bắt người đọc theo dõi những thứ không thoải mái với thứ tự góc nhìn của họ.
Cách dàn trang website đích thực ảnh hưởng đến lưu lượng truy cập nên điều quan yếu là bạn phải biết giá trị của những khoảng không trên trang web của mình.
Bây giờ hãy nhìn vào tỉ dụ của Freespee: Sau khi thiết kế lại layout website thành phiên bản mới dưới đây, các thử nghiệm A/B test cho thấy tỷ lệ chuyển đổi (tỷ lệ người dùng lướt web rồi quyết định sử dụng sản phẩm) trên mobile đã tăng 30% trong khi ngân sách lăng xê không hề thay đổi, chỉ đơn giản bằng việc đặt số điện thoại liên quan của họ lên vị trí hút điểm nhìn hơn (góc trên cùng bên phải).
Như đã luận bàn, thiết kế giao diện của Freespee không phải là hoàn hảo. Họ có thể để những gạch đầu dòng trông bắt mắt hơn hay thay bức ảnh background bằng một hình ảnh làm nổi trội thông điệp ghi trên đó hơn. Thế nhưng có lẽ cách dàn trang còn có sức mạnh lớn hơn cả thiết kế: ngay cả khi thiết kế của bạn không phải là đẹp nhất thì việc thích ứng thiết kế của mình với hành vi của người dùng cũng vẫn có thể nâng cao mức độ hiệu quả cho trang web.
Tiếp theo, hãy mổ xẻ những gì họ đã làm tốt:
– Logo thương hiệu Freespee cuộn sự để ý vào điểm số 1, nơi người dùng liền nhìn thấy cũng như bấm vào để quay về trang chủ.
– Phần bên phải đầu trang (điểm số 2) được chèn số điện thoại liên quan – nút kêu gọi hành động trước nhất. Chính vì icon số điện thoại được nhấn mạnh bằng màu xanh nên người đọc càng dễ dàng nhìn thấy nó hơn.
– Phần thân trang hiển thị 3 gạch đầu dòng kê những ưu điểm, tính năng nổi trội của sản phẩm ở điểm số 3. Đây là một bố cục F mini vấn người truy cập về nút kêu gọi hành động thứ hai (Get started with 14 days free trial).
Tuy nhiên, sử dụng bố cục chữ F cũng không có nghĩa là bạn có thể miễn dịch với sai trái. Nhược điểm chính của bố cục này là rất dễ bị đơn điệu bởi nó có thể khiến người đọc nhàm chán với một cột dài nội dung hiển thị. Đây chính là lý do trên nhiều site cứ kéo một đoạn lại thấy có những hàng/cột nội dung xen vào một cách "vô duyên" – bản chất là để níu chân người đọc mà thôi.
Như bạn có thể thấy trên trang Kickstarter dưới đây, designer đã chia site làm 3 cột. nếu hai cột đầu hiển thị nội dung chính thì cột thứ ba (bên tay phải) chính là cột "vô duyên" khi chèn vào bố cục chữ F những dụng cụ/mục theo hàng dọc để tiện truy cập.
Hãy hiểu rằng mọi người thường đọc website của bạn theo lược đồ F, nhưng cũng đừng quá rập khuôn mà hãy tùy chỉnh nó theo đặc điểm website của bạn nữa.
Những điều rút ra
Bố cục chữ F không chỉ hiệu quả với text mà còn với cả các loại landing page.
Bất cứ khi nào cần hiển thị nội dung, bạn cũng đều phải tìm cách xếp đặt chúng. Bố cục chữ F cho phép bạn dàn trang theo đúng cách đưa mắt của người đọc, nhưng cũng đừng ứng dụng nó một cách quá máy móc, bởi đó chỉ là một nguyên tắc dẫn lối đưa đường chứ không phải một template cứng nhắc phải nhất nhất tuân theo. thỉnh thoảng chỉ cần đổi thanh điều hướng sang lối hiển thị dọc bên trái hay chuyển nút kêu gọi hành động sang một góc khác là mọi thứ cũng đã thay đổi rất nhiều rồi.
CÁC BÀI VIẾT TRÊN WEBSITE ĐƯỢC TỔNG HỢP TỪ NHIỀU NGUỒN TRÊN MẠNG XÃ HỘI, INTERNET. CHÚNG TÔI KHÔNG CUNG CẤP CÁC THÔNG TIN NÀY.
