Hiểu về Z-layout trong thiết kế web

4 điểm dừng

          Z-layout (bố cục theo hình chữ Z) là một rất hiệu quả để bắt đầu lên bố cục trong thiết kế web. Nó đáp ứng 4 yêu cầu cơ bản mà mọi website cần phải có: Branding (định vị thương hiệu), hierachy (thứ tự ưu tiên về thông tin), structure (cấu trúc thông tin trong trang web) và call to action (định hướng người dùng).

Bố cục hình chữ Z

                                                                             Bố cục hình chữ Z

Trước khi áp dụng bất kỳ pattern về layout nào, chúng ta cần phải hiểu bản chất của chúng, bởi mỗi layout lại mang đến cho người dùng những trải nghiệm khác nhau, tuỳ theo nhu cầu và mục đích thiết kế, không có đáp án chung cho mọi bài toán thiết kế.

Giới thiệu về Z-layout

Nguyên tắc thiết kế Z-layout rất đơn giản: đặt một chữ Z với 4 điểm dừng lên phần đầu tiên của trang web, định hướng mắt nhìn của người dùng đi theo thứ tự của chữ Z mà ở điểm kết thúc (4) sẽ là nơi đặt nút Call-to-aciton, theo như hình dưới đây:

Quan sát kỹ hình wireframe dưới đây, bạn sẽ thấy rõ ràng 4 điểm dừng của chữ Z (1-2-3-4) đều là nơi tập trung thông tin cụ thể:

4 điểm dừng

Người dùng sẽ bắt đầu ở góc trái trên cùng (1), đây là điểm đặt Logo, tiếp đó người dùng sẽ đi sang phải (2), đây là điểm đặt Navigation Bar, tuy nhiên, trong nhiều trường hợp, người dùng sẽ đi từ (1) sang (3) . Trong cả hai trường hợp, người dùng sẽ phải đi qua Image Place Holder (đây là phần đặt hình ảnh chủ đạo của trang web, thường là một slider chạy những hình ảnh tiêu biểu, giới thiệu ngắn bọn về trang web để thu hút sự chú ý của người dùng). Tiếp đó, người sử dụng sẽ đi từ (3) sang  (4) và gặp nút Call-to-Action.

Tại sao nên dùng Z-layout

Sở dĩ, Z-layout cho thấy hiệu quả và được áp dụng rộng rãi là bởi phương pháp này áp dụng thói quen của người dùng khi tiếp cận các trang web. Người đọc nói chung có theo quen lướt trang web trước khi đọc sâu vào chi tiết. Việc lướt web này bắt nguồn từ thói quen đọc sách (từ trái sang phải, từ trên xuống dưới). Z-layout nắm bắt phương pháp này là đặt Call-to-Action vào điểm dừng của quá trình lướt, khuyến khích người dùng Click.

Trong thiết kế, ta nên ứng dụng Z-layout một cách linh hoạt, có thể kéo dài chữ Z hoặc co, bóp tuỳ thiết kế . Dưới đây là một số ví dụ về việc ứng dụng linh hoạt Z-layout:

Trang web của Evernote, điểm kết thúc của chữ Z là nút Download

Trang web của Evernote, điểm kết thúc của chữ Z là nút Download

Trang web của Diana Reed, điểm kết thúc của chữ Z là "Get in Touch"

Trang web của Diana Reed, điểm kết thúc của chữ Z là “Get in Touch”

Code Monkey, điểm kết thúc là "Get Started"

Code Monkey, điểm kết thúc là “Get Started”

Trang web bán xe đạp DIY, điểm kết thúc là nút Price màu đỏ, gây ấn tượng mạnh về thị giác.

Trang web bán xe đạp DIY, điểm kết thúc là nút Price màu đỏ, gây ấn tượng mạnh về thị giác.

Web CampaignMonitor, kết thúc chữ Z ở điểm số (3) với "Try it for free"

Web CampaignMonitor, kết thúc chữ Z ở điểm số (3) với “Try it for free”

Khi nào nên dùng Z-layout

Z-layout phù hợp nhất với những website thiết kế đơn giản, tinh gọn với mục đích nhằm định hướng người dùng click vào Call-to-Aciton. Với những website phức tạp hơn như website tin tức hoặc thương mại điện tử, sử dụng Z-layout sẽ phản tác dụng. Điều quan trong là bạn phải hiểu người dùng và mục đích của họ khi truy cập trang web trước khi đưa ra phương án thiết kế. Ngoài Z-layout, F-layout là một phương án cũng khá phổ biến mà bạn nên tham khảo.

Theo Smasing Magazine