Điều hướng và menu: hiện hay ẩn

Điều hướng trên website không chỉ là bản đồ, nó còn là lần đầu tiên khách hiểu doanh nghiệp của Anh/Chị làm gì và có gì. Giấu menu đi là giấu luôn cả những gợi ý đó. Sinh Vũ thiết lập cấu trúc điều hướng ngay từ giai đoạn kiến trúc thông tin, trước khi đặt bút thiết kế giao diện, vì menu không phải thứ có thể dán vào sau.

Tại sao điều hướng phải hiện

Nghiên cứu của Nielsen Norman Group đo trực tiếp trên người dùng thật cho thấy: giấu điều hướng làm khách cảm thấy khó hơn, mất thêm thời gian và ít hoàn thành được việc mình định làm hơn so với khi điều hướng hiện ra ngay. Điều này đúng trên cả di động lẫn máy tính để bàn.

Lý do không phức tạp. Khi menu hiện sẵn, khách quét mắt một lần là nắm được doanh nghiệp có bao nhiêu mảng, tên gọi từng mảng là gì, và mình nên đi đâu tiếp theo. Khi phải bấm mở mới thấy, khách mất đi toàn bộ ngữ cảnh đó trước khi họ kịp quyết định có cần bấm không.

Chọn menu ngang hay menu dọc bên trái

Cách chọn đơn giản: đếm số mục cấp cao. Ít mục, dùng ngang. Nhiều mục hoặc còn phát triển thêm, dùng dọc bên trái.

Menu ba gạch: dùng đúng chỗ, không lạm dụng

Menu ba gạch, còn gọi là hamburger menu, là giải pháp bất đắc dĩ cho di động vì màn hình nhỏ thực sự không còn chỗ. Trên điện thoại, đây là lựa chọn được chấp nhận. Tuy vậy, ngay cả trên di động, những mục quan trọng nhất nên được đặt hiện ra ngoài thay vì giấu hết vào trong menu.

Sai lầm phổ biến là bê nguyên kiểu menu này lên màn hình máy tính để bàn, nơi thừa không gian để hiện đủ điều hướng. Lý do thường gặp là thiết kế ưu tiên "trông gọn" hơn "dễ dùng". Trông gọn nhưng khách không khám phá được nội dung thì website không làm được việc của nó.

Menu còn là bằng chứng cho bề rộng nội dung và giúp khách hiểu doanh nghiệp làm gì. Giấu đi là mất luôn những gợi ý ngữ cảnh đó.

Nielsen Norman Group, Menu-Design Checklist: 17 UX Guidelines

Lỗi thường gặp khi đặt menu

• Nhãn menu mơ hồ: Tên mục như "Giải pháp" hay "Dịch vụ" không nói được gì cụ thể. Khách phải đoán mỗi mục dẫn tới đâu, đây là ma sát (friction) không đáng có.
• Quá nhiều mục ngang hàng, không nhóm: Khi tất cả mục được đặt cùng cấp độ, khách mất thêm công quét và phân loại. Nhóm các mục liên quan vào một đầu mục chung.
• Từ khóa quan trọng nằm cuối nhãn: Khách quét từ trái sang. Từ quan trọng nên ở đầu tên nhãn, không phải ở cuối.
• Giấu mục quan trọng nhất: Nếu dịch vụ cốt lõi của Anh/Chị phải bấm mở mới thấy, đó không phải thiết kế tối giản mà là tự làm khó doanh nghiệp mình.

Góc nhìn của Sinh Vũ

Sinh Vũ không tách điều hướng ra khỏi cấu trúc trang. Menu được thiết kế cùng lúc với cây nội dung, vì hai thứ này phản chiếu nhau. Nếu menu trông rối, thường là vì cấu trúc nội dung chưa được tổ chức rõ, không phải vì thiếu một kiểu hiệu ứng mới.

Với mỗi dự án, Sinh Vũ hỏi: khách đến đây muốn đi đâu, và menu hiện tại có dẫn được họ tới đó không? Câu trả lời quyết định hình dạng của menu, không phải xu hướng thiết kế thịnh hành.

Câu hỏi thường gặp

Menu ba gạch (hamburger) có thực sự xấu không?

Không xấu về mặt thẩm mỹ, nhưng kém về hiệu quả trên máy tính để bàn. Trên di động, đây là giải pháp chấp nhận được vì màn hình nhỏ. Vấn đề là nhiều đội thiết kế bê nguyên kiểu này lên màn hình lớn mà không cần thiết, khiến khách phải tốn thêm một bước bấm để thấy điều hướng. Nếu màn hình đủ chỗ, nên hiện menu ra luôn.

Tôi có quá nhiều mục, không hiển thị hết được thì sao?

Đây là dấu hiệu cấu trúc nội dung cần được xem lại trước khi quyết định về menu. Thay vì nhét hết vào một hàng ngang, Anh/Chị có thể nhóm các mục liên quan lại thành ít nhóm cấp cao hơn, hoặc chuyển sang điều hướng dọc bên trái vốn phù hợp hơn với cây nội dung rộng. Giải pháp là tổ chức lại, không phải giấu đi.