Một ứng dụng có thể rất đẹp ở từng màn hình riêng lẻ nhưng vẫn khó dùng nếu người ta không biết đang ở đâu và đi tiếp thế nào. Đó là việc của hệ thống điều hướng. Chọn sai mẫu điều hướng khiến tính năng quan trọng bị giấu sau hamburger, hoặc bắt ngón cái với tới góc trên màn hình 6,7 inch. Bài này phân biệt các mẫu phổ biến và chỉ rõ khi nào nên dùng cái nào.
Vùng ngón cái quyết định chỗ đặt điều hướng
Hầu hết người dùng cầm điện thoại một tay và thao tác bằng ngón cái. Trên màn hình lớn, ngón cái với thoải mái phần dưới và giữa màn hình, nhưng phải gồng hoặc đổi tay để chạm góc trên. Đây là lý do cả Material Design lẫn Apple Human Interface Guidelines (hướng dẫn giao diện của Apple) đều đặt thanh điều hướng chính ở đáy màn hình, không phải đỉnh.
Nguyên tắc gọn: thứ người dùng chạm nhiều nhất phải nằm trong vùng ngón cái với tới dễ. Bất kỳ mẫu điều hướng nào buộc với lên góc trên màn hình compact (như nút hamburger ở top bar) đều là thoả hiệp, không phải lựa chọn tối ưu.
Bốn mẫu điều hướng và khi nào dùng
Tab bar / bottom navigation (thanh tab đáy)
Thanh ngang ở đáy với 3-5 biểu tượng, mỗi cái là một mục cấp cao nhất. Đây là mẫu hiệu quả nhất khi app có vài khu vực chính người dùng nhảy qua lại liên tục (ví dụ: Trang chủ, Tìm kiếm, Giỏ hàng, Tài khoản). Material gọi là navigation bar, Apple gọi là tab bar, nhưng cùng một ý: các đích đến luôn hiển thị, luôn trong tầm ngón cái.
Giới hạn 5 tab. Quá 5 thì nhãn bị cắt, biểu tượng chen chúc, và người dùng phải đọc chứ không liếc là hiểu. Apple giới hạn 5 tab trên iPhone là vì vậy.
Navigation drawer (ngăn kéo / hamburger)
Menu trượt ra từ cạnh, mở bằng nút ba gạch. Hợp khi app có nhiều hơn 5 mục mà không phải mục nào cũng cần thấy thường xuyên. Nhược điểm: nút mở thường nằm góc trên (khó với ngón cái) và mọi mục đều bị giấu sau một cú chạm, nên Material xếp drawer kém hơn navigation bar cho điều hướng chính trên màn hình nhỏ.
Drawer hợp vai trò chứa mục phụ, ít dùng: cài đặt, trợ giúp, chuyển tài khoản. Nhiều app lớn như Gmail dùng cả hai: tab bar cho mục chính, drawer cho phần còn lại.
Top tabs (tab trên cùng)
Dãy tab ngang ngay dưới tiêu đề, thường vuốt ngang để chuyển. Hợp khi các mục là cùng một loại nội dung lọc khác nhau (ví dụ tab “Mới nhất / Phổ biến / Đang theo dõi” trong một luồng tin). Đây là điều hướng nội bộ trong một khu vực, không thay thế thanh điều hướng cấp cao.
Gesture (thao tác vuốt)
Vuốt từ cạnh để quay lại, vuốt lên để về màn hình chính. Gesture giảm quãng di chuyển của ngón cái và giải phóng không gian màn hình vì không cần thanh nút cố định. Bù lại, gesture vô hình – người dùng phải biết trước mới dùng được, nên không bao giờ dùng gesture làm cách duy nhất để tới một chức năng quan trọng. Gesture là lối tắt cộng thêm, không phải thay thế.
Bảng chọn nhanh theo tình huống
| Tình huống | Mẫu nên dùng |
|---|---|
| 3-5 khu vực chính, dùng liên tục | Tab bar / bottom navigation |
| Trên 5 mục, nhiều mục ít dùng | Tab bar (mục chính) + drawer (mục phụ) |
| Lọc nội dung cùng loại trong một màn | Top tabs (vuốt ngang) |
| Quay lại / lối tắt nhanh | Gesture, kèm nút rõ ràng phòng hờ |
| App đơn nhiệm, chỉ một luồng chính | Không cần thanh tab, dùng nút quay lại |
Kích thước chạm tối thiểu cho mục điều hướng
Mỗi mục trong thanh điều hướng là một vùng chạm, và vùng chạm quá nhỏ làm tăng tỉ lệ bấm trượt. Các mốc cần nhớ, đúng nguồn:
- 24×24 CSS pixel – mức tối thiểu bắt buộc theo WCAG 2.2 (tiêu chí 2.5.8 Target Size Minimum, mức AA). Nếu nhỏ hơn, phải chừa khoảng cách tối thiểu 24px giữa các vùng để tránh bấm nhầm.
- 44pt (Apple) và 48dp (Material) – mức khuyến nghị thực tế cho thoải mái, tương ứng tiêu chí Target Size Enhanced mức AAA của WCAG 2.2.
Với điều hướng – thứ người dùng chạm nhiều nhất – nên nhắm mức khuyến nghị 44-48px chứ đừng dừng ở mức tối thiểu pháp lý 24px.
Phân biệt với bottom sheet và onboarding
Hai khái niệm hay bị lẫn với điều hướng. Bottom sheet là tấm trượt lên từ đáy chứa hành động hoặc nội dung phụ cho màn hình hiện tại – nó không đưa bạn đi đâu, chỉ mở rộng tại chỗ. Onboarding là luồng giới thiệu lần đầu mở app, dùng một lần rồi biến mất. Cả hai đều xuất hiện ở mobile nhưng không phải hệ thống điều hướng. Điều hướng là cái ở lại với người dùng suốt phiên dùng, giúp họ di chuyển giữa các khu vực bất cứ lúc nào.
Web22 dựng điều hướng ra sao
Khi vừa thiết kế vừa lập trình một sản phẩm, Web22 chốt sơ đồ điều hướng từ đầu: liệt kê các đích đến cấp cao nhất, đếm xem có vượt 5 không, rồi mới quyết tab bar hay tab bar kèm drawer. Cách này tránh tình huống thường gặp – dồn mọi thứ vào hamburger cho gọn màn hình, rồi tính năng quan trọng chìm nghỉm vì không ai mở menu ra xem.
Câu hỏi thường gặp
Tab bar tối đa mấy mục? 5 mục. Quá số này nhãn bị cắt và biểu tượng chen chúc; chuyển phần dư sang drawer hoặc gộp vào một tab “Khác”.
Có nên dùng hamburger menu cho điều hướng chính không? Không nên nếu app chỉ có vài khu vực chính. Hamburger giấu mọi thứ sau một cú chạm và nằm góc khó với; chỉ hợp để chứa mục phụ ít dùng.
Gesture có thay được nút quay lại không? Không thay hoàn toàn. Gesture là lối tắt cộng thêm; chức năng quan trọng luôn cần một nút nhìn thấy được phòng người dùng không biết gesture.