Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn bước vào một trung tâm thương mại lớn ở quận 1 nhưng không có biển chỉ dẫn, không có thang máy gắn nhãn tầng, không có bản đồ ở sảnh. Bạn biết món đồ mình cần nằm đâu đó trong tòa nhà, nhưng bạn không có cách nào tìm ra. Sau năm phút lạc lối, bạn bỏ ra ngoài. Một website không có navigation tốt cũng để lại đúng cảm giác đó cho người dùng — và họ rời đi nhanh hơn nhiều so với khách trong trung tâm thương mại, chỉ bằng một cú nhấn nút back.
Navigation (điều hướng) là hệ thống giúp người dùng biết họ đang ở đâu, có thể đi đâu, và làm sao để quay lại. Đây không phải là "trang trí" của giao diện — nó là bộ xương sống quyết định trải nghiệm. Một nghiên cứu kinh điển của Nielsen Norman Group chỉ ra rằng người dùng dành phần lớn thời gian trên những website khác website của bạn. Nghĩa là họ mang theo kỳ vọng đã hình thành từ Shopee, Tiki, Facebook, Google vào trang của bạn. Nếu navigation của bạn lạ lẫm, họ phải học lại — và mỗi giây phải suy nghĩ là một giây bạn đang đánh mất họ.
Trong bài này, chúng ta tập trung vào ba mẫu điều hướng (navigation pattern) nền tảng mà gần như mọi sản phẩm web đều dùng: Header (top nav), Sidebar (điều hướng dọc bên cạnh), và Tabs (thẻ chuyển nội dung). Hiểu rõ khi nào dùng cái nào, và làm sao thiết kế chúng cho đúng, là kỹ năng nền móng của bất kỳ web designer nào.
Khái niệm cốt lõi
Navigation làm ba việc
Trước khi bàn từng mẫu, hãy nhớ ba câu hỏi mà mọi navigation phải trả lời cho người dùng:
- Tôi đang ở đâu? — trạng thái active (mục đang xem được làm nổi bật).
- Tôi có thể đi đâu? — danh sách các điểm đến rõ ràng.
- Làm sao tôi quay lại? — logo về trang chủ, breadcrumb, nút back rõ ràng.
Header — thanh điều hướng trên cùng
Header là dải ngang nằm trên đầu trang, gần như luôn xuất hiện trên mọi website. Cấu trúc chuẩn mà người dùng đã quen thuộc:
Logo bên trái — nav links ở giữa — khu vực hành động (auth/giỏ hàng/tìm kiếm) bên phải.
Đây là quy ước (convention) mạnh đến mức bạn nên tuân theo trừ khi có lý do rất rõ ràng để phá vỡ. Logo bên trái không chỉ là thương hiệu — nó còn là nút "về trang chủ" mặc định mà 100% người dùng đều biết bấm vào. Khu vực bên phải dành cho hành động cá nhân: đăng nhập, tài khoản, giỏ hàng — vì mắt người đọc tiếng Việt (và đa số ngôn ngữ) quét từ trái sang phải, nên "tôi là ai / tôi đang ở đâu" nằm trái, "tôi muốn làm gì" nằm phải.
Quy tắc vàng: tối đa 5–7 mục top-level. Đây là điểm mấu chốt mà ghi chú gốc của bài nhấn mạnh. Khi bạn nhồi 10–12 link vào header, bạn rơi vào cái bẫy gọi là "paradox of choice" (nghịch lý của sự lựa chọn): càng nhiều lựa chọn, người dùng càng do dự, càng khó quyết định, và cuối cùng càng dễ không chọn gì cả. Bộ nhớ làm việc (working memory) của con người chỉ giữ được khoảng 7 (±2) mục cùng lúc — đây là "con số kỳ diệu" của George Miller. Header với 5–7 link nằm gọn trong ngưỡng đó; người dùng quét một lượt là nắm được toàn bộ cấu trúc site.
Nếu bạn có nhiều hơn 7 mục cần đưa lên, đó là tín hiệu bạn cần gom nhóm (group): tạo các danh mục cha và dùng dropdown menu (menu xổ xuống), hoặc đẩy bớt link xuống footer, hoặc dùng mega-menu cho các site nội dung lớn.
Sidebar — điều hướng dọc bên cạnh
Sidebar là cột điều hướng đặt dọc, thường bên trái màn hình. Nó tỏa sáng ở những bối cảnh mà header bị quá tải:
- Ứng dụng (web app / dashboard): Gmail, Notion, trang quản trị admin, hệ thống ERP. Những sản phẩm này có hàng chục mục điều hướng — không thể nhét vào một dải ngang. Sidebar dọc cho phép xếp chồng nhiều mục, hỗ trợ icon kèm nhãn, và phân cấp đa tầng (nhóm cha → mục con).
- Tài liệu / docs: website tài liệu kỹ thuật dùng sidebar để hiển thị cây mục lục có thể cuộn độc lập với nội dung.
Tabs — chuyển đổi nội dung trong cùng một ngữ cảnh
Tabs (thẻ) khác bản chất với header và sidebar. Header/sidebar đưa bạn giữa các trang khác nhau. Tabs chuyển các khung nhìn (view) của cùng một đối tượng, mà không rời khỏi trang.
Ví dụ trang sản phẩm Tiki có các tab "Mô tả", "Thông số kỹ thuật", "Đánh giá". Bạn vẫn đang xem cùng một sản phẩm — chỉ đổi góc nhìn. Hay trang hồ sơ cá nhân có tab "Bài viết", "Ảnh", "Bạn bè" — vẫn là một người, ba lát cắt thông tin.
Nguyên tắc dùng tabs:
- Các tab phải là những phần ngang hàng của cùng một thực thể, loại trừ lẫn nhau (xem tab này thì không xem tab kia cùng lúc).
- Giữ số tab ít (lý tưởng 2–5). Nhiều tab tràn dòng trông rối và khó quét.
- Luôn có một tab được chọn mặc định — không bao giờ để trạng thái "không tab nào active".
- Dùng nhãn ngắn, một-hai từ.
Tình huống thực tế
Ví dụ 1: Header quá tải của một sàn TMĐT nội địa
Một startup thương mại điện tử Việt Nam — gọi là "ChợViệt" — bán đa ngành: thời trang, điện tử, mỹ phẩm, gia dụng, thực phẩm, mẹ & bé, sách, thể thao. Đội product ban đầu đặt tất cả 8 danh mục lên header thành 8 link ngang, cộng thêm "Khuyến mãi", "Flash Sale", "Về chúng tôi" — tổng 11 link. Trên desktop độ phân giải trung bình, các link bị dồn sát nhau, có link còn xuống dòng vỡ layout.
Khi chạy A/B test, nhóm phát hiện tỷ lệ click vào bất kỳ danh mục nào chỉ đạt khoảng 12% — người dùng bị "tê liệt" trước rừng lựa chọn và phần lớn bỏ qua header, chỉ dùng ô tìm kiếm. Họ thiết kế lại: header còn lại 5 mục — một dropdown "Danh mục" gom toàn bộ 8 ngành, "Flash Sale", ô Tìm kiếm chiếm trung tâm, "Tài khoản" và "Giỏ hàng" bên phải. Logo bên trái về trang chủ. Sau thay đổi, tỷ lệ tương tác với điều hướng danh mục tăng lên khoảng 31%.
Bài học: Khi nội dung của bạn nhiều, đừng phơi bày tất cả ra header. Hãy gom nhóm. Header là bản đồ tổng quan, không phải mục lục chi tiết. Quy tắc 5–7 mục không phải để giới hạn nội dung site — mà để giới hạn gánh nặng nhận thức tại một thời điểm.
Ví dụ 2: Dashboard nội bộ chọn sidebar thay vì header
Một công ty fintech ở TP.HCM xây dựng hệ thống quản trị nội bộ cho nhân viên vận hành, có khoảng 20 chức năng: Tổng quan, Giao dịch, Đối soát, Khách hàng, Khoản vay, Báo cáo, Cấu hình, Phân quyền, Nhật ký... Bản đầu họ thử nhồi vào header ngang với nhiều dropdown lồng nhau ba tầng. Nhân viên phàn nàn phải rê chuột qua nhiều cấp menu mới tới được chức năng, và menu hay "tụt" mất khi di chuột.
Họ chuyển sang sidebar dọc bên trái: nhóm 20 chức năng thành 5 nhóm cha (Vận hành, Khách hàng, Tài chính, Báo cáo, Quản trị), mỗi nhóm xổ ra các mục con. Sidebar có thể thu gọn thành dải icon để lấy lại không gian khi cần xem bảng dữ liệu rộng. Mục đang xem được tô màu nền và đậm chữ để trả lời câu "tôi đang ở đâu". Thời gian trung bình để nhân viên tìm tới một chức năng giảm rõ rệt.
Bài học: Khi số mục điều hướng vượt ngưỡng một dải ngang có thể chứa thoải mái, và sản phẩm là dạng app/dashboard dùng lặp đi lặp lại, sidebar là lựa chọn đúng. Nó mở rộng theo chiều dọc và thể hiện phân cấp tự nhiên.
Ví dụ 3: Lạm dụng tabs cho nội dung không cùng ngữ cảnh
Một blog du lịch dùng tabs trên trang chủ với các nhãn "Miền Bắc", "Miền Trung", "Miền Nam", "Ẩm thực", "Mẹo", "Visa" — 6 tab. Vấn đề: đây không phải các lát cắt của cùng một đối tượng, mà là các chủ đề độc lập — đúng ra phải là điều hướng giữa các trang. Người dùng bấm tab "Ẩm thực", nội dung đổi tại chỗ nhưng URL không đổi, nên họ không thể chia sẻ link riêng cho mục ẩm thực, không bookmark được, và nút back của trình duyệt không quay lại tab trước.
Đội thiết kế chuyển 6 tab này thành các mục trong header điều hướng thật, mỗi mục là một URL riêng (/am-thuc, /mien-bac...). Giờ người dùng chia sẻ được link, SEO tốt hơn vì mỗi chủ đề có trang riêng, và hành vi nút back đúng kỳ vọng.
Bài học: Tabs chỉ dành cho các khung nhìn của cùng một thực thể trong cùng một trang. Nếu mỗi "tab" xứng đáng có URL riêng, đáng được chia sẻ và bookmark, thì nó là điều hướng giữa trang — hãy dùng header/sidebar link, không phải tab.
Hướng dẫn từng bước
Đây là quy trình thực tế để thiết kế navigation cho một dự án mới:
Bước 1 — Liệt kê toàn bộ điểm đến. Viết ra mọi trang/chức năng người dùng cần truy cập. Đừng lo về thứ tự hay phân cấp vội — chỉ cần một danh sách đầy đủ.
Bước 2 — Phân loại theo tần suất và tầm quan trọng. Mục nào người dùng cần thường xuyên nhất? Những mục này phải xuất hiện ở cấp cao nhất. Mục ít dùng (Điều khoản, Chính sách, Liên hệ) đẩy xuống footer.
Bước 3 — Gom nhóm (card sorting). Nhóm các mục liên quan vào danh mục cha. Nếu danh sách của bạn dài, hãy thử kỹ thuật card sorting: viết mỗi mục lên một thẻ và sắp nhóm tự nhiên. Mục tiêu: rút top-level về 5–7 mục.
Bước 4 — Chọn mẫu phù hợp. Dùng quy tắc đơn giản:
- Website nội dung / landing / TMĐT, ít hơn 7 nhóm chính → Header.
- Web app / dashboard / docs, nhiều mục và có phân cấp → Sidebar.
- Chuyển khung nhìn trong cùng một trang/đối tượng → Tabs.
- Có thể kết hợp: header toàn site + tabs trong từng trang là combo rất phổ biến.
Bước 6 — Đảm bảo logo về trang chủ. Logo bên trái phải click được và đưa về homepage. Đây là kỳ vọng phổ quát.
Bước 7 — Lên kế hoạch cho mobile. Quyết định header co lại thế nào, sidebar giấu ra sao (thường là hamburger + off-canvas), tabs có cuộn ngang được không. Không bao giờ để navigation "vỡ" trên màn hình nhỏ.
Bước 8 — Kiểm thử với người thật. Đưa cho 3–5 người chưa từng thấy sản phẩm và yêu cầu họ "tìm cách đến X". Nếu họ ngập ngừng, navigation của bạn còn vấn đề.
Lỗi thường gặp & mẹo
Lỗi: Nhồi quá nhiều link vào header. Như đã nói, vượt 7 mục là quá tải. Mẹo: nếu không gom được dưới 7, hãy cân nhắc chuyển sang sidebar hoặc dùng mega-menu có cấu trúc.
Lỗi: Không có trạng thái active. Người dùng không biết mình đang ở đâu trong site. Luôn làm nổi bật mục hiện hành — đừng để toàn bộ menu trông như nhau.
Lỗi: Logo không click được. Một số designer quên gắn link về home cho logo. Người dùng sẽ thử bấm và thất vọng. Đây là lỗi nhỏ nhưng phá vỡ kỳ vọng cơ bản.
Lỗi: Tabs đổi nội dung nhưng không đổi URL khi đáng lẽ phải đổi. Nếu mỗi tab xứng đáng được chia sẻ/bookmark riêng, hãy gắn URL (ví dụ dùng query param hoặc route). Ngược lại, nếu chỉ là tab phụ trong một trang, không đổi URL cũng được.
Lỗi: Dùng nhãn mơ hồ hoặc "thông minh quá". "Khám phá", "Hành trình", "Vũ trụ X" nghe hay nhưng người dùng không biết bấm vào sẽ tới đâu. Mẹo: nhãn navigation nên mô tả, không quảng cáo. "Sản phẩm", "Bảng giá", "Liên hệ" rõ ràng hơn nhiều.
Lỗi: Hamburger menu trên desktop khi không cần. Giấu navigation sau hamburger trên màn hình rộng làm giảm khả năng khám phá (link bị ẩn thì người dùng không thấy). Hamburger là giải pháp cho mobile, không nên là mặc định trên desktop khi bạn còn dư chỗ.
Mẹo: Đảm bảo navigation "dính" (sticky) khi hợp lý. Trên các trang dài, header dính ở đỉnh khi cuộn giúp người dùng đổi hướng bất cứ lúc nào mà không phải cuộn ngược lên đầu.
Mẹo: Sidebar nên có chế độ thu gọn. Cho phép người dùng thu sidebar thành dải icon để lấy lại không gian — đặc biệt quan trọng với dashboard nhiều dữ liệu.
Mẹo: Vùng bấm đủ lớn. Mỗi mục navigation nên có vùng nhấn (touch target) tối thiểu khoảng 44px chiều cao trên mobile để ngón tay bấm trúng dễ dàng.
Bài tập thực hành
Bài tập 1 — Tinh gọn header. Lấy một website TMĐT Việt Nam bạn hay dùng (Tiki, Shopee, hoặc một shop nhỏ). Đếm số mục top-level trong header. Nếu nhiều hơn 7, hãy phác lại trên giấy một header gom xuống còn 5–7 mục bằng cách nhóm danh mục. Ghi rõ bạn gom nhóm theo logic gì.
Bài tập 2 — Chọn mẫu đúng. Cho ba sản phẩm sau, quyết định nên dùng header, sidebar, hay tabs (có thể kết hợp), và viết một câu giải thích: (a) Một landing page giới thiệu khóa học có 4 phần chính. (b) Một công cụ quản lý kho hàng nội bộ với 18 chức năng. (c) Một trang chi tiết đơn hàng cần xem "Thông tin giao hàng", "Sản phẩm", "Lịch sử trạng thái".
Bài tập 3 — Thiết kế trạng thái. Vẽ (trên giấy hoặc Figma) một mục navigation ở ba trạng thái: mặc định (default), di chuột (hover), và đang chọn (active). Thể hiện rõ sự khác biệt thị giác giữa ba trạng thái.
Bài tập 4 — Audit mobile. Mở một website bất kỳ trên điện thoại. Quan sát header desktop của nó biến thành gì trên mobile. Ghi lại: hamburger giấu những gì? Mục nào vẫn hiện ra ngoài? Bạn thấy quyết định đó hợp lý không, vì sao?
Tóm tắt
Navigation là bộ xương sống của trải nghiệm web, trả lời ba câu hỏi sống còn: tôi đang ở đâu, tôi có thể đi đâu, làm sao quay lại. Ba mẫu nền tảng:
- Header (top nav): dải ngang trên cùng, cấu trúc chuẩn logo trái — links giữa — auth/giỏ hàng phải. Giới hạn vàng 5–7 mục top-level để tránh nghịch lý lựa chọn; nội dung nhiều thì gom nhóm bằng dropdown, đừng phơi bày tất cả. Phù hợp với website nội dung, landing, TMĐT.
- Sidebar: cột dọc bên cạnh, mở rộng vô hạn theo chiều dọc và thể hiện phân cấp. Lựa chọn đúng cho web app, dashboard, docs có nhiều mục. Trên mobile thường giấu sau hamburger.
- Tabs: chuyển các khung nhìn của cùng một đối tượng trong cùng một trang, không phải điều hướng giữa các trang. Giữ ít tab, luôn có một tab active. Nếu mỗi "tab" đáng có URL riêng để chia sẻ, đó là điều hướng giữa trang chứ không phải tab.