Mở đầu — vì sao bài này quan trọng
Nếu bạn để ý, hầu hết những lời phàn nàn của người dùng về một sản phẩm số không phải là "màu xấu" hay "font không đẹp", mà là "tôi không tìm thấy cái tôi cần". Đó chính là vấn đề của navigation — hệ thống điều hướng. Một giao diện có thể lung linh đến đâu, nhưng nếu người dùng lạc lối, không biết mình đang ở đâu, đi tiếp thế nào, quay lại ra sao, thì mọi công sức thiết kế đều đổ sông đổ bể.
Navigation là bộ khung xương của trải nghiệm. Nó trả lời ba câu hỏi kinh điển mà mọi người dùng đều ngầm đặt ra khi mở một sản phẩm: "Tôi đang ở đâu?", "Tôi có thể đi đâu?", và "Làm sao để quay về?". Với vai trò UI Designer, việc chọn đúng navigation pattern (mẫu điều hướng) cho đúng loại sản phẩm là một trong những quyết định có tác động lớn nhất tới tỷ lệ hoàn thành tác vụ, tỷ lệ chuyển đổi và cả cảm giác "sản phẩm này dễ dùng".
Trong bài này, chúng ta sẽ đi sâu vào các mẫu điều hướng phổ biến trên desktop và mobile, hiểu bản chất khi nào dùng cái nào, và quan trọng nhất — cách áp dụng vào chính dự án của bạn. Đây không phải bài về màu sắc hay typography (những thứ đó đã có bài riêng), mà là về cấu trúc dẫn đường.
Khái niệm cốt lõi
Trước khi bàn từng pattern, hãy nắm một nguyên tắc nền: navigation phải phản ánh information architecture (kiến trúc thông tin) của sản phẩm. Số lượng mục, độ sâu của cấu trúc, tần suất người dùng chuyển giữa các khu vực — tất cả quyết định pattern nào phù hợp. Bạn không chọn sidebar vì "trông giống dashboard", mà vì sản phẩm của bạn thực sự có nhiều mục cần truy cập song song.
Desktop patterns
Top horizontal navigation (thanh điều hướng ngang trên cùng) là mẫu quen thuộc nhất. Các mục nằm ngang một hàng ở đầu trang. Nguyên tắc vàng: giữ 5–7 mục là tối đa. Vượt quá con số này, thanh nav trở nên chật chội, người dùng phải quét mắt vất vả và bạn cũng hết chỗ theo chiều ngang. Top nav phù hợp với các trang có cấu trúc phẳng, ít mục cấp một: website nội dung (báo, blog), landing page, và đặc biệt là e-commerce — nơi các danh mục lớn (Nam, Nữ, Trẻ em, Khuyến mãi) được đặt ngang và các danh mục con hiện ra qua mega menu khi hover.
Sidebar (thanh điều hướng dọc bên trái) dành cho sản phẩm có nhiều mục và người dùng cần chuyển qua lại thường xuyên. Đây là pattern kinh điển của dashboard, công cụ nội bộ (admin panel), phần mềm SaaS. Chiều dọc cho phép chứa 15–20 mục mà vẫn dễ đọc, hỗ trợ nhóm mục (grouping) theo section, và có thể thu gọn (collapse) thành icon-only để tiết kiệm không gian. Ưu điểm lớn: sidebar luôn hiển thị, người dùng thấy toàn bộ "bản đồ" sản phẩm mọi lúc. Nhược điểm: ăn không gian ngang, không lý tưởng cho nội dung cần bề rộng như bảng dữ liệu lớn.
Ngoài hai mẫu chính, desktop còn có top nav + sidebar kết hợp (top nav cho các khu vực lớn, sidebar cho mục trong từng khu vực — Notion, Linear dùng kiểu này), và mega menu — menu xổ xuống dạng bảng nhiều cột, thường thấy trên các site thương mại điện tử lớn để phơi bày cấu trúc danh mục sâu ngay từ cấp một.
Mobile patterns
Trên mobile, không gian là thứ xa xỉ và ngón tay cái là "con trỏ". Điều này thay đổi hoàn toàn cách nghĩ về navigation.
Bottom tab bar (thanh tab dưới cùng) là vua của mobile navigation. Đặt 3–5 mục ở đáy màn hình — vùng ngón cái với tới dễ nhất. Đây là lý do Instagram, Shopee, MoMo, TikTok đều dùng bottom tab. Quy tắc: các mục phải là những đích đến ngang hàng và quan trọng nhất, người dùng cần nhảy giữa chúng liên tục. Đừng nhét mục ít dùng (như Cài đặt) vào tab bar.
Hamburger menu (menu ba gạch) ẩn toàn bộ navigation sau một icon, bung ra dạng drawer khi nhấn. Ưu điểm: gọn, chứa được nhiều mục. Nhược điểm nghiêm trọng: nó giấu navigation — nghiên cứu của Nielsen Norman Group cho thấy menu ẩn làm giảm rõ rệt mức độ khám phá và tương tác so với menu hiện. Vì vậy hamburger nên dành cho các mục thứ cấp, ít dùng, hoặc cho website có quá nhiều mục không thể nhét vào tab bar.
Các mẫu bổ trợ khác gồm tab bar ngang cuộn được (segmented tabs, dùng cho lọc nội dung trong một màn hình), và navigation drawer (drawer trượt từ cạnh, thường kết hợp với bottom tab để chứa mục phụ).
Ba trạng thái phải luôn có
Dù chọn pattern nào, mỗi mục điều hướng cần thể hiện rõ trạng thái: default (bình thường), hover (di chuột — chỉ desktop), và active/current (mục đang mở). Trạng thái active cực kỳ quan trọng vì nó trả lời câu hỏi "tôi đang ở đâu". Thiếu nó, người dùng mất phương hướng. Bổ sung thêm là focus (cho điều hướng bàn phím, phục vụ accessibility) và badge (chấm đỏ / số thông báo).
Tình huống thực tế
Ví dụ 1 — Shopee: bottom tab đúng chuẩn mobile-first
Mở ứng dụng Shopee trên điện thoại, bạn sẽ thấy đúng 5 tab dưới đáy: Trang chủ, Live & Video, Thông báo, Tôi. Đây là ví dụ sách giáo khoa về bottom tab bar. Mỗi tab là một "vũ trụ" độc lập mà người dùng nhảy vào ra liên tục trong một phiên mua sắm. Icon giỏ hàng và ô tìm kiếm được tách riêng lên đầu vì chúng là hành động, không phải đích đến điều hướng.
Điều đáng học: Shopee không nhét "Cài đặt tài khoản", "Lịch sử đơn hàng", "Ví ShopeePay" vào tab bar — dù đó là những tính năng quan trọng. Chúng nằm sâu bên trong tab "Tôi". Lý do: tab bar chỉ dành cho những đích đến người dùng cần chuyển qua lại nhiều lần trong một phiên. Bài học rút ra: đừng đánh đồng "tính năng quan trọng" với "cần nằm trên navigation chính". Tần suất chuyển đổi mới là tiêu chí, không phải tầm quan trọng.
Ví dụ 2 — Một startup SaaS Việt chọn sai pattern
Một công ty startup ở TP.HCM làm phần mềm quản lý kho cho các shop online. Bản đầu tiên, đội thiết kế đưa toàn bộ 12 mục điều hướng (Tổng quan, Sản phẩm, Đơn hàng, Kho, Nhà cung cấp, Báo cáo, Khách hàng, Khuyến mãi, Nhân viên, Tích hợp, Cài đặt, Trợ giúp) vào một top horizontal nav. Kết quả: thanh nav tràn hàng, các mục bị cắt chữ, trên màn hình laptop 13 inch thì ba mục cuối bị đẩy vào menu "..." mà gần như không ai bấm. Số liệu hỗ trợ khách hàng cho thấy 40% câu hỏi là "tôi tìm mục X ở đâu".
Sau khi chuyển sang left sidebar có nhóm mục (nhóm "Bán hàng" gồm Đơn hàng, Khách hàng, Khuyến mãi; nhóm "Vận hành" gồm Kho, Sản phẩm, Nhà cung cấp), tỷ lệ câu hỏi "tìm ở đâu" giảm còn 12% trong hai tuần. Bài học: khi số mục vượt 7 và người dùng cần truy cập song song, sidebar gần như luôn thắng top nav. Đừng cố ép một cấu trúc nhiều mục vào một pattern dành cho cấu trúc phẳng.
Ví dụ 3 — Tiki: kết hợp mega menu và top nav trên desktop
Trên bản web desktop của Tiki, thanh top nav khá tối giản (Trang chủ, các danh mục lớn), nhưng khi hover vào "Danh mục", một mega menu nhiều cột bung ra phơi bày toàn bộ cây danh mục: Điện thoại, Laptop, Thời trang, Nhà cửa... mỗi cột lại có danh mục con. Cách này giải quyết bài toán "sản phẩm có hàng trăm danh mục nhưng top nav chỉ chứa được 5–7 mục".
Bài học: khi cấu trúc thông tin sâu và rộng (như e-commerce), bạn không nhất thiết phải chọn giữa top nav và sidebar — mega menu là cầu nối, giữ top nav gọn gàng nhưng vẫn cho phép người dùng "nhìn thấy toàn bộ bản đồ" chỉ với một cú hover. Tuy nhiên, lưu ý mega menu chỉ hoạt động tốt trên desktop có chuột; trên mobile bạn phải chuyển sang cấu trúc danh mục dạng list phân cấp.
Hướng dẫn từng bước
Đây là quy trình chọn và thiết kế navigation cho một sản phẩm mới:
Bước 1 — Liệt kê tất cả đích đến. Viết ra mọi màn hình/khu vực người dùng cần tới. Đừng lọc vội, cứ liệt kê hết. Đây là nguyên liệu thô.
Bước 2 — Nhóm và phân cấp. Gom các đích đến thành nhóm logic, xác định cái nào là cấp một (primary), cái nào là cấp hai (secondary, có thể nằm trong một khu vực). Dùng phương pháp card sorting với vài người dùng thật nếu có điều kiện — nó cho bạn cấu trúc mà người dùng mong đợi, không phải cấu trúc bạn nghĩ ra.
Bước 3 — Đếm số mục cấp một và chọn pattern. Quy tắc nhanh: từ 3–5 mục ngang hàng, tần suất chuyển cao → bottom tab (mobile) / top nav (desktop). Trên 7 mục, cần truy cập song song → sidebar. Cấu trúc sâu và rộng → top nav + mega menu hoặc top nav + sidebar.
Bước 4 — Thiết kế cho mobile trước. Vì mobile khắt khe về không gian, việc bạn buộc phải chọn 3–5 mục quan trọng nhất sẽ giúp làm rõ ưu tiên. Từ đó mở rộng ra desktop dễ hơn là làm ngược lại.
Bước 5 — Dựng đủ trạng thái. Với mỗi mục nav, thiết kế đầy đủ default, hover, active, focus. Trong Figma, hãy dùng component có variant cho từng trạng thái để đảm bảo nhất quán và dễ bàn giao cho dev.
Bước 6 — Kiểm tra "bạn đang ở đâu". Đi qua từng màn hình, xác nhận trạng thái active luôn hiển thị đúng mục hiện tại. Đây là lỗi bị bỏ sót nhiều nhất.
Bước 7 — Test với người thật. Đưa cho 3–5 người một tác vụ ("tìm cách đổi mật khẩu", "xem đơn hàng đã đặt") và quan sát họ mò tìm. Nếu ai đó lạc, navigation của bạn có vấn đề — không phải người dùng "kém".
Lỗi thường gặp & mẹo
Lỗi 1 — Giấu navigation quan trọng sau hamburger. Trên mobile, nếu tính năng cốt lõi nằm sau menu ba gạch, mức độ sử dụng sẽ tụt. Mẹo: ưu tiên bottom tab cho 3–5 mục cốt lõi, chỉ dùng hamburger/drawer cho mục phụ.
Lỗi 2 — Nhồi quá nhiều mục vào top nav. Vượt 7 mục là dấu hiệu bạn cần đổi pattern hoặc gom nhóm lại, không phải nhét thêm.
Lỗi 3 — Thiếu trạng thái active. Người dùng không biết mình đang ở đâu. Luôn làm nổi bật mục hiện tại bằng màu, nền, hoặc đường chỉ báo.
Lỗi 4 — Icon không kèm nhãn chữ. Icon một mình thường mơ hồ (icon "trái tim" là yêu thích hay sức khỏe?). Trên bottom tab, luôn kèm nhãn chữ ngắn dưới icon, trừ khi icon đã cực kỳ phổ biến.
Lỗi 5 — Navigation nhảy múa giữa các trang. Vị trí và thứ tự mục phải cố định. Nếu tab bar đổi thứ tự tùy trang, người dùng mất bộ nhớ cơ (muscle memory).
Mẹo — Vùng chạm tối thiểu 44×44px. Trên mobile, mỗi mục nav phải đủ lớn để ngón cái chạm chính xác. Đây là chuẩn của Apple HIG và Material Design.
Mẹo — Tôn trọng vùng an toàn (safe area). Bottom tab phải chừa khoảng đệm cho thanh Home indicator trên iPhone không viền, tránh mục bị che.
Bài tập thực hành
- Phân tích ngược: Chọn 3 app bạn dùng hàng ngày (ví dụ MoMo, ZaloPay, Grab). Với mỗi app, xác định pattern navigation chính, đếm số mục, và ghi lại lý do bạn nghĩ họ chọn pattern đó. Có app nào bạn thấy chọn sai không? Vì sao?
- Thiết kế cho một sản phẩm giả định: Bạn làm UI cho một app đặt lịch phòng gym có các khu vực: Trang chủ, Đặt lịch, Lịch của tôi, Huấn luyện viên, Gói tập, Thanh toán, Thông báo, Tài khoản, Hỗ trợ. Hãy nhóm chúng, chọn 3–5 mục cho bottom tab, và quyết định các mục còn lại đi đâu. Giải thích quyết định của bạn.
- Dựng component trong Figma: Tạo một bottom tab bar 4 mục với đầy đủ variant cho trạng thái default và active. Thêm một badge số thông báo trên một tab. Đảm bảo mỗi mục có vùng chạm tối thiểu 44px.
- Bài tập khó: Lấy sidebar của một dashboard bất kỳ (ví dụ trang quản trị của một shop trên nền tảng bạn quen) và thiết kế lại nhóm mục sao cho hợp lý hơn. Viết một câu giải thích tại sao cách gom nhóm mới tốt hơn.
Tóm tắt
Navigation là bộ khung dẫn đường, trả lời ba câu hỏi cốt lõi: tôi đang ở đâu, đi đâu được, quay về thế nào. Trên desktop, top horizontal nav dùng cho cấu trúc phẳng ít mục (tối đa 5–7), còn sidebar dọc dành cho sản phẩm nhiều mục cần truy cập song song như dashboard; mega menu là cầu nối cho cấu trúc sâu và rộng. Trên mobile, bottom tab bar (3–5 mục, đặt trong vùng ngón cái) là lựa chọn số một cho các đích đến chính, còn hamburger menu chỉ nên dùng cho mục phụ vì nó giấu navigation.
Quyết định chọn pattern dựa trên số mục cấp một và tần suất chuyển đổi, không phải theo trend hay theo cảm tính "trông giống app xịn". Luôn thiết kế đủ trạng thái — đặc biệt là active để người dùng biết mình đang ở đâu — đảm bảo vùng chạm 44px trên mobile, và kiểm chứng bằng cách test với người thật. Chọn đúng navigation, bạn đã giải quyết được nửa bài toán trải nghiệm.