Tìm hiểu về Z-layout trong thiết kế website

Z-layout là cách trình bày bố cục website theo hình chữ Z. Ưu điểm của nó là đáp ứng đầy đủ 4 yêu cầu cơ bản mà tất cả các website cần có: định vị thương hiệu, thứ tự ưu tiên về thông tin, cấu trúc thông tin trên trang và định hướng, kêu gọi người dùng. Chúng ta sẽ cùng tìm hiểu kỹ hơn trong bài viết dưới đây.

1. Giới thiệu về Z-layout

Z-layout thực chất là một nguyên tắc thiết kế website rất đơn giản: người thiết kế sẽ đặt một chữ Z với 4 điểm dừng lên phần đầu tiên của website, sau đó trình bày bố cục và định hướng mắt nhìn của người dùng đi theo thứ tự của chữ Z mà trong đó tại điểm kết thúc của chữ Z (điểm thứ 4) sẽ là nơi để đặt nút kêu gọi hành động (Call-to-aciton), theo như hình dưới đây:



Quan sát hình dưới đây và để ý cho kỹ, bạn sẽ thấy rõ ràng 4 điểm dừng theo hình chữ Z (1-2-3-4), và các điểm dừng này đều là vị trí tập trung các thông tin quan trọng, cụ thể.

Theo thói quen nhìn của đa phần người đọc, góc trái trên cùng (điểm 1) sẽ là nơi đầu tiên mà người đọc bắt đầu nhìn tới, và cũng chính là điểm đặt logo, sau đó, mắt nhìn sẽ dần hướng sang phải (vị trí thứ 2), tại đây, Navigation Bar được ấn định. Tuy nhiên cũng có nhiều trường hợp, người đọc sẽ đi từ điểm 1 đến điếm 3. Và dù là thuộc trường hợp nào đi nữa thì người đọc cũng sẽ phải đi qua Image Place Holder (đây là phần đặt hình ảnh chủ đạo của trang web, tại đây thường là nơi án ngữ của 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 theo, người đọc sẽ đi từ (3) sang  (4) và gặp nút Call-to-Action. Đây cũng là lúc người đọc đã tiếp cận đầy đủ và (có thể) bị hấp dẫn bởi thông tin và thấy ngay nút kêu gọi hành động, sức thuyết phục vì thế sẽ cao hơn.

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

Không phải ngẫu nhiên mà Z-layout ngày nay lại được ưa chuộng và sử dụng rộng rãi trong việc thiết kế website như vậy. Đây là phương pháp thiết kế giúp tạo nên một giao diện có khả năng chuyển tải thông tin phù hợp với thói quen của người dùng khi tiếp cận bất kỳ trang web nào. 

Khi truy cập vào website, đa phần người đọc đều có thói quen lướt qua, sau đó mới đọc sâu vào chi tiết. Thói quen 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 mà tất cả chúng ta đều đã được rèn luyện từ nhỏ.  Dựa trên thói quen này, Z-layout đặ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.

Khi ứng dụng Z-layout trong thiết kế web, chúng ta cần có sự linh hoạt, kéo dài chữ Z hoặc co nhỏ lại tùy theo thiết kế và độ rộng của trang. Hãy tham khảo một số cách ứng dụng linh hoạt dưới đây:



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"



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



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

3. Khi nào nên dùng Z-layout?

Bố cục Z-layout rất phù hợp cho những website có thiết kế đơn giản, ngắn gọn với mục đích kêu gọi hành động từ phía người dùng. Còn đối với những website có tính chất phức tạp hơn (trang tin tức chẳng hạn) thì không nên áp dụng bố cục này vì dễ gây phản tác dụng. Điểm cốt yếu chính là bạn phải hiểu được mục đích của mình khi thiết kế trang lẫn mục đích của người dùng khi truy cập trang để đưa ra phương án thiết kế phù hợp nhất.

Kết luận:

Đối với việc thiết kế website, bố cục trang không phải và càng không nên là một sự sắp đặt ngẫu nhiên. Ngược lại, mọi thông tin, chi tiết được trình bày trên giao diện, mỗi vị trí cần phải được tính toán và trình bày sao cho logic, hợp lý để vừa tạo điều kiện thuận lợi nhất cho người đọc khi tham khảo thông tin, vừa giúp website đó tiếp cận người đọc một cách thành công, hiệu quả hơn. Nói gọn lại, bố cục trang cần được thiết kế sao cho thuận mắt nhìn, phù hợp thói quen tiếp cận thông tin của số đông. Và đó chính là lý do cho sự ra đời của những layout dành cho việc thiết kế đồ họa nói chung và thiết kế website nói riêng, và Z-layout cũng không nằm ngoài mục đích trên.

Đào Thơ