Tìm hiểu phương pháp thiết kế website theo bố cục chữ F (P3)
(Tiếp theo) Bố cục chữ F trong thiết kế website là gì? Tại sao ngày càng có nhiều website ứng dụng bố cục này? HCQ sẽ giúp bạn làm sáng tỏ những thắc mắc trên trong bài viết dưới đây.
Dưới đây là một vài ví dụ về việc vận dụng 2 mục đích trên:
* The New Yorker :
Như bạn thấy, layout của The New Yorker đã áp dụng bố cục chữ F với những những site hiển thị quảng cáo ở phần đầu trang. Quảng cáo mặc dù đập ngay vào mắt người dùng nhưng lại không hề làm gián đoạn phần đọc do có sự xuất hiện của một bức ảnh màu đỏ nổi bật của bài viết lớn phía dưới. Cách bố cục này đúng như luận điểm đã trình bày ở trên, tức là phần góc phải ngay dưới hàng ngang đầu trang – nơi người đọc thường vô tình đưa mắt qua khi xem title bài viết lớn - là vị trí dành thích hợp nhất dành cho banner quảng cáo.
* iZettle:
Trang này đã rất khéo léo khi phối hợp bố cục hình chữ F cùng chữ Z trên trang của mình. Với cách làm này thì iZettle đã tránh được sự lặp lại nhàm chán của các template phổ biến thông qua việc đặ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" tại ảnh background đầu trang. Rất đơn giản nhưng vẫn giúp mang lại hiệu quả như mong muốn.
4. Giải thích tính hiệu quả của bố cục chữ F
Đâu là nguyên nhân khiến cho các chuyên gia thiết kế website thường xuyên áp dụng bố cục chữ F cho các sản phẩm của mình? Và vì sao nó lại mang tới hiệu quả như vậy?
Câu trả lời chính là bởi, đây là cách dàn trang tuân theo điểm nhìn mà mắt người dùng dừng lại, từ đó kích thích độc giả đọc nhiều hơn và mang lại những trải nghiệm thuận theo tự nhiên cho họ, tạo tâm lý tiếp cận thoải mái mà hiệu quả thay vì gượng ép, khó chịu. Trái ngược với bố cục chữ F, những trang nặng về nội dung nhưng lại không tuân theo điểm nhìn tự nhiên của người đọc sẽ khiến họ phải tiếp cận với những thứ không thoải mái, không thuận theo trình tự góc nhìn tự nhiên của họ.
5. Làm thế nào để áp dụng bố cục chữ F thành công khi thiết kế website?
Như những gì đã phân tích và dẫn chứng, bố cục chữ F thực sự có ảnh hưởng rất lớn đến lưu lượng truy cập của một website cũng như tính hiệu quả mà nó mang lại khi tiếp cận với người đọc. Tuy nhiên, điều quan trọng là làm thế nào để áp dụng nó một cách thành công? Chìa khóa vấn đề không nằm ở đâu khác mà chính là khi bạn hiểu được và tận dụng giá trị của những khoảng không trên trang web của mình.
Freespee là một ví dụ: sau khi tái thiết kế theo bố cục chữ F, đặt số điện thoại liên hệ của họ lên vị trí hút điểm nhìn hơn thì tỷ lệ người dùng truy cập và tỷ lệ chuyển đổi có giá trị trên phiên bản mobile đã tăng 30% trong khi ngân sách quảng cáo không hề thay đổi.
Có thể thấy thiết kế của Freespee không phải là một giao diện hoàn hảo, ngược lại, rất đơn giản nhưng chính sự đơn giản ấy đã làm nổi bật lên những thông tin trên đó, quan trọng hơn nữa đó chính là cách dàn trang theo thói quen, tâm lý người dùng đã mang lại hiệu quả tốt cho website này. Như vậy có thể khẳng định, ngay cả khi không sở hữu một giao diện bắt mắt thì nếu bạn tạo ra sự phù hợp giữa cách dàn trang với hành vi của người dùng thì vẫn có thể mang lại hiệu quả cho trang web.
Dưới đây là một vài ví dụ về việc vận dụng 2 mục đích trên:
* The New Yorker :
Như bạn thấy, layout của The New Yorker đã áp dụng bố cục chữ F với những những site hiển thị quảng cáo ở phần đầu trang. Quảng cáo mặc dù đập ngay vào mắt người dùng nhưng lại không hề làm gián đoạn phần đọc do có sự xuất hiện của một bức ảnh màu đỏ nổi bật của bài viết lớn phía dưới. Cách bố cục này đúng như luận điểm đã trình bày ở trên, tức là phần góc phải ngay dưới hàng ngang đầu trang – nơi người đọc thường vô tình đưa mắt qua khi xem title bài viết lớn - là vị trí dành thích hợp nhất dành cho banner quảng cáo.
* iZettle:
Trang này đã rất khéo léo khi phối hợp bố cục hình chữ F cùng chữ Z trên trang của mình. Với cách làm này thì iZettle đã tránh được sự lặp lại nhàm chán của các template phổ biến thông qua việc đặ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" tại ảnh background đầu trang. Rất đơn giản nhưng vẫn giúp mang lại hiệu quả như mong muốn.
4. Giải thích tính hiệu quả của bố cục chữ F
Đâu là nguyên nhân khiến cho các chuyên gia thiết kế website thường xuyên áp dụng bố cục chữ F cho các sản phẩm của mình? Và vì sao nó lại mang tới hiệu quả như vậy?
Câu trả lời chính là bởi, đây là cách dàn trang tuân theo điểm nhìn mà mắt người dùng dừng lại, từ đó kích thích độc giả đọc nhiều hơn và mang lại những trải nghiệm thuận theo tự nhiên cho họ, tạo tâm lý tiếp cận thoải mái mà hiệu quả thay vì gượng ép, khó chịu. Trái ngược với bố cục chữ F, những trang nặng về nội dung nhưng lại không tuân theo điểm nhìn tự nhiên của người đọc sẽ khiến họ phải tiếp cận với những thứ không thoải mái, không thuận theo trình tự góc nhìn tự nhiên của họ.
5. Làm thế nào để áp dụng bố cục chữ F thành công khi thiết kế website?
Như những gì đã phân tích và dẫn chứng, bố cục chữ F thực sự có ảnh hưởng rất lớn đến lưu lượng truy cập của một website cũng như tính hiệu quả mà nó mang lại khi tiếp cận với người đọc. Tuy nhiên, điều quan trọng là làm thế nào để áp dụng nó một cách thành công? Chìa khóa vấn đề không nằm ở đâu khác mà chính là khi bạn hiểu được và tận dụng giá trị của những khoảng không trên trang web của mình.
Freespee là một ví dụ: sau khi tái thiết kế theo bố cục chữ F, đặt số điện thoại liên hệ của họ lên vị trí hút điểm nhìn hơn thì tỷ lệ người dùng truy cập và tỷ lệ chuyển đổi có giá trị trên phiên bản mobile đã tăng 30% trong khi ngân sách quảng cáo không hề thay đổi.
Có thể thấy thiết kế của Freespee không phải là một giao diện hoàn hảo, ngược lại, rất đơn giản nhưng chính sự đơn giản ấy đã làm nổi bật lên những thông tin trên đó, quan trọng hơn nữa đó chính là cách dàn trang theo thói quen, tâm lý người dùng đã mang lại hiệu quả tốt cho website này. Như vậy có thể khẳng định, ngay cả khi không sở hữu một giao diện bắt mắt thì nếu bạn tạo ra sự phù hợp giữa cách dàn trang với hành vi của người dùng thì vẫn có thể mang lại hiệu quả cho trang web.
Đào Thơ
Tin Tức Liên Quan
- Bảng giá thiết kế website bán hàng online và các tính năng quan trọng
- Bảng giá thiết kế website tin tức và các loại hình thiết kế website tin tức
- Bảng giá thiết kế website bđs chi tiết
- Bảng giá thiết kế website nhà hàng chuyên nghiệp
- Bảng giá thiết kế website công ty và những tiêu chuẩn cần lưu ý
- Bảng giá thiết kế website spa bao nhiêu?
- Bảng giá thiết kế website xây dựng giá bao nhiêu?
- Bảng giá thiết kế website nội thất và vì sao nên thiết kế web nội thất
- Bảng giá thiết kế website giá rẻ và kinh nghiệm chọn đơn vị thiết kế web uy tín
- Bảng giá thiết kế website bán hàng và những lưu ý cần biết