Thiết kế menu mobile dễ dùng: từ mở đến tìm trang
Thiết kế menu mobile với nhãn rõ, vùng chạm thoải mái, trạng thái đóng mở và kiểm tra bàn phím, màn hình nhỏ, phóng to chữ.
Cập nhật: · Minh họa được tạo bằng AI
Menu mobile là công cụ tìm đường. Một biểu tượng đẹp nhưng khó mở, một submenu mất khi di chuyển tay hoặc một lớp phủ không đóng được đều khiến khách bỏ tác vụ. Tối ưu menu không bắt đầu từ hiệu ứng trượt. Nó bắt đầu từ các trang người dùng cần tìm và cách họ quay lại nội dung đang đọc.
Bài này dùng tình huống website dịch vụ có các mục website, marketing, blog và liên hệ. Bạn có thể áp dụng cùng cách kiểm tra cho cửa hàng, nhưng cần chú ý thêm danh mục, tìm kiếm và giỏ hàng. Ví dụ là tình huống thiết kế, không phải dữ liệu hành vi đã đo trên website của bạn.
1. Chọn cấu trúc trước khi chọn hiệu ứng
Liệt kê các tác vụ chính rồi ghép từng tác vụ với một nhãn dễ đoán. ‘Dịch vụ website’ dễ hiểu hơn tên nội bộ của bộ phận. Không cần đưa mọi bài blog vào menu; trang danh sách đã giúp khám phá nội dung. Nếu có hai cấp, làm rõ mục nào mở submenu và mục nào đi tới trang.
Với một nhóm dịch vụ, có thể dùng hàng mở submenu và một liên kết riêng ‘Tất cả dịch vụ website’. Cách này tránh tình huống cùng một nhãn vừa mở vừa điều hướng tùy vị trí chạm. Trước khi xây, đưa sơ đồ cho người không tham gia dự án và hỏi nơi họ sẽ tìm một tác vụ cụ thể.
2. Phân biệt nút và liên kết
Nút dùng để thay đổi trạng thái giao diện; liên kết dùng để đi tới một tài nguyên. Nút mở menu cần tên dễ hiểu, trạng thái mở đóng và mối liên hệ với vùng navigation. Đừng làm bằng một div có click rồi bỏ qua bàn phím. W3C WAI về menu là nguồn hữu ích để hiểu cấu trúc và thao tác tiếp cận được.
Khi menu mở, người dùng cần biết vị trí hiện tại và cách thoát. Nếu là lớp phủ kiểu dialog, phải xử lý focus và nền đúng theo mô hình dialog; nếu là navigation mở rộng trong header, không nên tự động giam focus như hộp thoại. Chọn một mô hình và kiểm tra hành vi nhất quán.
3. Dành đủ chỗ cho ngón tay và nội dung
Vùng chạm không nên nhỏ bằng riêng hình icon. Tạo khoảng đệm và khoảng cách giữa các tác vụ dễ bấm nhầm. WCAG 2.2 có tiêu chí target size với điều kiện và ngoại lệ cụ thể; bản quick reference giúp kiểm đúng thay vì coi mọi kích thước gợi ý là yêu cầu giống nhau. Trong thiết kế thực hành, có thể đặt mục tiêu vùng tương tác khoảng 44px khi bố cục cho phép.
Đừng chỉ kiểm ở một điện thoại phổ biến. Nhãn tiếng Việt dài, zoom chữ, landscape và màn hình thấp có thể làm menu vượt chiều cao. Cho vùng nội dung menu cuộn khi cần, giữ nút đóng có thể tìm thấy và tránh một submenu tràn ra ngoài viewport.
4. Hoàn thiện trạng thái và chuyển trang
Mở menu, mở một nhóm, đổi nhóm, đóng bằng nút, bấm ra ngoài và dùng Escape là những trạng thái khác nhau. Quyết định từng trạng thái thay vì để event handler vô tình quyết định. Với submenu trên desktop, giữ một cầu nối hover giữa nhãn và panel để con trỏ không đi qua khoảng trống làm đóng ngay. Trên màn hình chạm, bỏ phụ thuộc hover.
Sau khi chọn trang, menu nên đóng. Với anchor trong cùng trang, giữ đích cuộn đúng và tính chiều cao header sticky. Khi quay lại lịch sử trình duyệt, cần kiểm hành vi khôi phục cuộn thay vì để menu cũ che nội dung. Hiệu ứng giảm chuyển động phải giữ nguyên chức năng mở và đóng.
5. Kiểm thử bằng tác vụ cụ thể
Một checklist thực tế: tìm dịch vụ, mở trang, quay lại, đổi ngôn ngữ và đi tới liên hệ. Thực hiện bằng chuột, bàn phím và chạm. Thử Tab, Shift+Tab, Enter, Space và Escape ở vị trí có ý nghĩa. Kiểm focus nhìn thấy được, tên nút đúng và không có điều khiển bị che.
Ghi viewport, ngôn ngữ, thao tác và lỗi để sửa có căn cứ. Ví dụ ‘ở 320px, nhãn marketing tràn khỏi panel sau khi phóng to chữ’ hữu ích hơn ‘mobile chưa đẹp’. Mở hướng dẫn responsive để nối kiểm tra menu với khả năng đọc và thao tác trên toàn trang.
Sau mỗi sửa lỗi, lặp lại tác vụ bị ảnh hưởng và các trạng thái liên quan. Không cần chạy vô hạn cùng một ảnh chụp; cần bằng chứng rằng người dùng hoàn thành được đường đi mà menu phục vụ.
Câu hỏi thường gặp
Có nên dùng hamburger cho mọi màn hình?
Không nhất thiết. Nếu màn hình lớn có đủ chỗ, các liên kết hiển thị trực tiếp có thể dễ khám phá hơn. Chọn điểm chuyển theo không gian nhãn thật và tác vụ, không chỉ theo tên thiết bị.
Nguồn tham khảo và đọc tiếp
Bạn cần áp dụng vào website hiện tại? Xem dịch vụ website hoặc trao đổi với Dean Vu để xác định phạm vi dựa trên website và dữ liệu thực tế.