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 siêu thị mà rau củ để chung với đồ điện tử, sữa tươi nằm cạnh bột giặt, và không có biển chỉ dẫn lối đi nào cả. Dù siêu thị đó bán hàng tốt đến đâu, bạn cũng sẽ bực bội bỏ về sau năm phút. Một sản phẩm số tổ chức thông tin lộn xộn cũng gây cảm giác y hệt — người dùng "biết" thứ họ cần ở đâu đó trong app, nhưng không tìm ra, và họ rời đi.
Information Architecture (IA — kiến trúc thông tin) chính là nghề "sắp xếp siêu thị" cho sản phẩm số. Đây là công việc tổ chức nội dung và thiết kế cấu trúc điều hướng sao cho người dùng tìm thấy thứ họ cần một cách tự nhiên. Điều thú vị là IA gần như vô hình khi làm tốt — không ai khen "nav đẹp quá", nhưng khi làm dở thì ai cũng cảm nhận được sự khó chịu.
Ở các bài trước trong khóa, bạn đã học về Design Thinking, problem framing, ideation và sketching. IA là bước đặt nền móng cấu trúc trước khi bạn chạm tay vào wireframe chi tiết (Bài 9) hay user flow (Bài 21). Nếu bạn xây nhà mà không có bản vẽ phân chia phòng ốc, mọi nét vẽ trang trí sau này đều vô nghĩa. Bài này tập trung vào hai sản phẩm cốt lõi của IA: sitemap (sơ đồ phân cấp nội dung) và navigation (hệ thống điều hướng). Đây là kỹ năng phân biệt một product designer có tư duy hệ thống với một người chỉ biết "vẽ màn hình đẹp".
Khái niệm cốt lõi
IA là gì và không phải là gì
Information Architecture là việc tổ chức, cấu trúc và gắn nhãn nội dung sao cho người dùng hiểu được họ đang ở đâu, có thể đi đâu tiếp theo, và tìm thứ họ cần ở đâu. Cha đẻ của ngành này, Richard Saul Wurman, từng nói một câu kinh điển: "Nhiểu được rằng bạn không hiểu là bước đầu tiên để hiểu."
IA không phải là thiết kế giao diện. Một người làm IA tốt có thể trình bày toàn bộ cấu trúc sản phẩm chỉ bằng giấy ghi chú (sticky note) dán trên tường, không cần một pixel nào. IA cũng không phải là navigation menu — menu chỉ là phần nổi của tảng băng. Phần chìm là toàn bộ logic phân loại, nhóm gộp và phân cấp nội dung bên dưới.
Có một khung tư duy nổi tiếng của Louis Rosenfeld và Peter Morville chia IA thành bốn hệ thống:
- Organization systems (hệ thống tổ chức): cách bạn nhóm nội dung — theo chủ đề, theo nhiệm vụ, theo đối tượng người dùng, theo thứ tự bảng chữ cái hay thời gian.
- Labeling systems (hệ thống gắn nhãn): cách bạn đặt tên cho từng nhóm. "Tài khoản" hay "Cá nhân"? "Giỏ hàng" hay "Túi đồ"?
- Navigation systems (hệ thống điều hướng): cách người dùng di chuyển qua lại giữa các phần.
- Search systems (hệ thống tìm kiếm): cách người dùng tìm kiếm chủ động khi không muốn duyệt theo menu.
Sitemap — bản đồ phân cấp nội dung
Sitemap là một sơ đồ dạng cây (tree) thể hiện toàn bộ cấu trúc phân cấp của sản phẩm. Hãy hình dung nó như cây gia phả: gốc là trang chủ, từ đó phân nhánh xuống các trang cấp 1 (danh mục lớn), rồi cấp 2, cấp 3... Một sitemap điển hình của một sàn thương mại điện tử có thể trông như sau:
Trang chủ
├── Sản phẩm
│ ├── Thời trang nam
│ │ ├── Áo
│ │ └── Quần
│ └── Thời trang nữ
├── Khuyến mãi
├── Tài khoản
│ ├── Đơn hàng của tôi
│ ├── Địa chỉ giao hàng
│ └── Ví & thanh toán
└── Hỗ trợ
Sitemap giúp bạn nhìn thấy toàn cảnh: có bao nhiêu cấp độ, nhánh nào quá sâu, nhánh nào quá rộng. Một nguyên tắc kinh nghiệm là không nên để người dùng phải click quá 3 lần để đến nội dung quan trọng — dù con số "3 clicks" không phải luật cứng, nó là lời nhắc hữu ích về độ sâu.
Hai chiều của cấu trúc: depth và breadth
Mọi cấu trúc IA đều phải cân bằng giữa breadth (chiều rộng — số mục ở mỗi cấp) và depth (chiều sâu — số cấp phân tầng). Một menu quá rộng (20 mục cùng cấp) khiến người dùng choáng ngợp. Một menu quá sâu (phải lặn 6 tầng mới tới nội dung) khiến họ lạc lối và mệt mỏi.
Quy luật Miller về "7 ± 2" (con người chỉ giữ được khoảng 5–9 mục trong trí nhớ ngắn hạn) thường được viện dẫn ở đây, nhưng hãy dùng nó một cách linh hoạt — với menu điều hướng có thể nhìn thấy toàn bộ, người dùng không cần nhớ nên giới hạn này nới lỏng hơn.
Phân loại điều hướng
Navigation thường được chia thành các loại:
- Global navigation (điều hướng toàn cục): xuất hiện ở mọi trang — thanh menu chính, tab bar dưới đáy app mobile.
- Local navigation (điều hướng cục bộ): điều hướng trong một khu vực cụ thể, ví dụ các tab con bên trong trang "Tài khoản".
- Contextual navigation (điều hướng theo ngữ cảnh): các liên kết liên quan, "sản phẩm tương tự", "bài viết liên quan".
- Utility navigation (điều hướng tiện ích): các chức năng phụ trợ như tìm kiếm, đăng nhập, giỏ hàng — thường nằm ở góc.
- Breadcrumbs (vụn bánh mì): chuỗi chỉ đường cho biết bạn đang ở đâu trong cây phân cấp, ví dụ Trang chủ > Thời trang nam > Áo > Áo sơ mi.
Card sorting — cách "hỏi" người dùng để xây IA
Một sai lầm phổ biến là designer tự nhóm nội dung theo cách họ nghĩ. Nhưng cách bạn phân loại có thể khác hoàn toàn cách người dùng phân loại. Card sorting là kỹ thuật giải quyết điều này: bạn ghi mỗi mục nội dung lên một thẻ, rồi nhờ người dùng tự nhóm chúng lại và đặt tên cho từng nhóm.
Có hai dạng: open card sort (người dùng tự đặt tên nhóm — dùng khi bạn chưa có cấu trúc) và closed card sort (bạn cho sẵn tên nhóm, người dùng phân thẻ vào — dùng để kiểm chứng cấu trúc đã có). Đi kèm là tree testing — đưa cho người dùng cây IA và yêu cầu họ tìm một thứ cụ thể để đo xem cấu trúc có dễ điều hướng không.
Tình huống thực tế
Ví dụ 1: Tiki và bài toán danh mục khổng lồ
Tiki, một trong những sàn TMĐT lớn của Việt Nam, khởi đầu chỉ bán sách. IA ban đầu rất đơn giản: vài danh mục sách là đủ. Nhưng khi mở rộng sang điện tử, thời trang, đồ gia dụng, thực phẩm, bách hóa... họ đối mặt với hàng chục nghìn sản phẩm thuộc hàng trăm ngành hàng.
Nếu giữ nguyên cấu trúc menu phẳng cũ, người dùng sẽ phải cuộn qua một danh sách dài vô tận. Giải pháp IA của họ là một mega menu phân cấp đa tầng: ngành hàng lớn ở cột trái (Điện thoại, Thời trang, Sách...), khi hover sẽ hiện các danh mục con ở khu vực bên phải. Đồng thời, họ đặt cược mạnh vào search system với gợi ý tự động, bởi với hàng chục nghìn SKU, không ai duyệt menu để tìm "tai nghe Bluetooth chống nước" — họ gõ tìm.
Bài học rút ra: Khi nội dung phình to, IA phải chuyển từ "duyệt theo menu" sang kết hợp "duyệt + tìm kiếm". Đừng cố nhồi mọi thứ vào navigation. Hãy phân tầng sâu hơn cho menu và đầu tư vào search như một con đường song song để người dùng tìm thấy nội dung.
Ví dụ 2: App ngân hàng số dồn quá nhiều vào tab "Khác"
Một fintech giả định tại Việt Nam — gọi là "MoMoBank" — ra mắt app với 5 tab dưới đáy: Trang chủ, Chuyển tiền, Quét QR, Thẻ, và Khác. Tab "Khác" trở thành cái thùng rác chứa tới 18 chức năng: nạp điện thoại, mua bảo hiểm, trả góp, đầu tư, vay tiêu dùng, cài đặt, hỗ trợ...
Số liệu phân tích cho thấy chỉ 6% người dùng từng mở tab "Khác", trong khi tính năng "đầu tư" — vốn là sản phẩm chiến lược mang lại lợi nhuận cao — bị chôn vùi trong đó và gần như không ai tìm thấy. Đội thiết kế chạy một bài tree test với 30 người dùng: chỉ 4 người tìm ra được mục "đầu tư" trong vòng 30 giây.
Họ tái cấu trúc IA: đưa "Đầu tư" lên thành một mục nổi bật ngay trang chủ, gom các tiện ích thanh toán (nạp điện thoại, bảo hiểm) thành một nhóm có nhãn rõ ràng là "Thanh toán & Dịch vụ" thay vì "Khác", và tách "Cài đặt" ra khỏi mớ hỗn độn đó. Sau ba tháng, lượt truy cập mục đầu tư tăng gấp gần 5 lần.
Bài học rút ra: Tab hay menu mục "Khác" / "More" là dấu hiệu cảnh báo IA chưa được suy nghĩ kỹ. Nhãn mơ hồ giết chết khả năng tìm thấy. Hãy gắn nhãn theo ngôn ngữ và kỳ vọng của người dùng, và đừng để những tính năng quan trọng bị chôn ở tầng sâu.
Ví dụ 3: Báo điện tử VnExpress và cấu trúc theo chuyên mục
VnExpress phục vụ hàng triệu lượt đọc mỗi ngày với hàng nghìn bài viết mới hằng tuần. IA của họ tổ chức theo chuyên mục quen thuộc: Thời sự, Thế giới, Kinh doanh, Giải trí, Thể thao, Pháp luật, Giáo dục... Đây là một mô hình tổ chức theo chủ đề (topic-based) đã được người đọc báo Việt Nam quen thuộc suốt nhiều thập kỷ.
Điểm tinh tế là họ dùng nhiều lớp điều hướng đồng thời: global nav là thanh chuyên mục trên cùng, local nav là các tiểu mục bên trong mỗi chuyên mục (ví dụ trong "Thể thao" có Bóng đá, Tennis, Marathon), và contextual nav là khối "Tin liên quan" ở cuối mỗi bài để giữ chân người đọc. Cấu trúc này khai thác mental model sẵn có — người Việt đã biết tin tức được chia theo chuyên mục nên không cần học lại.
Bài học rút ra: IA tốt nhất là IA tận dụng mô hình tư duy người dùng đã có sẵn, thay vì bắt họ học một cách phân loại mới lạ. Khi nội dung lớn và cập nhật liên tục, hãy chồng nhiều lớp điều hướng (global + local + contextual) để phục vụ cả người duyệt lẫn người đi sâu.
Hướng dẫn từng bước
Bước 1 — Kiểm kê nội dung (content inventory). Liệt kê toàn bộ những gì sản phẩm cần chứa: trang, tính năng, loại nội dung. Với sản phẩm mới, đây là danh sách tính năng mong muốn. Với sản phẩm có sẵn, hãy crawl hoặc liệt kê thủ công mọi trang hiện hữu. Đừng bỏ sót — bạn không thể tổ chức thứ mình chưa nhìn thấy.
Bước 2 — Nhóm nội dung bằng card sorting. Ghi mỗi mục lên một thẻ (giấy hoặc dùng công cụ như OptimalSort, Miro). Mời 5–8 người dùng đại diện tự nhóm và đặt tên nhóm. Tìm các mẫu lặp lại: nếu đa số người dùng đặt "đơn hàng" và "lịch sử mua" chung nhóm, đó là tín hiệu mạnh.
Bước 3 — Phác thảo sitemap nháp. Dựa trên kết quả card sort, dựng cây phân cấp: trang chủ ở gốc, các nhóm lớn là cấp 1, mục con là cấp 2–3. Vẽ bằng sticky note trên tường hoặc dùng FigJam, Whimsical, Miro. Ưu tiên giữ độ sâu tối đa 3 tầng cho nội dung chính.
Bước 4 — Đặt nhãn (labeling). Đặt tên từng mục bằng ngôn ngữ người dùng, không phải biệt ngữ nội bộ công ty. Test nhanh: đọc nhãn cho một người ngoài và hỏi "bạn nghĩ mục này chứa gì?". Nếu họ đoán đúng, nhãn ổn.
Bước 5 — Thiết kế hệ thống navigation. Quyết định mục nào lên global nav, mục nào là local nav, mục nào để cho search và contextual. Trên mobile, cân nhắc tab bar (tối đa 5 mục), trên web cân nhắc top nav hoặc sidebar. Thêm breadcrumbs nếu cấu trúc sâu hơn 2 tầng.
Bước 6 — Kiểm chứng bằng tree testing. Đưa cây IA (chưa có giao diện) cho 15–30 người và giao các nhiệm vụ "hãy tìm chỗ làm X". Đo tỷ lệ thành công và đường đi. Nếu nhiều người đi sai nhánh ở cùng một điểm, đó là chỗ cần sửa nhãn hoặc cấu trúc lại.
Bước 7 — Lặp lại và bàn giao. Tinh chỉnh dựa trên kết quả test, rồi chuyển sitemap đã chốt sang giai đoạn wireframing. Sitemap chính là khung xương để bạn vẽ từng màn hình ở các bài sau.
Lỗi thường gặp & mẹo
Lỗi 1 — Tổ chức theo cơ cấu công ty thay vì theo người dùng. Nhiều app phản chiếu sơ đồ phòng ban nội bộ: menu chia theo các team đang sở hữu từng tính năng. Người dùng không quan tâm công ty bạn có bao nhiêu phòng ban. Hãy tổ chức theo nhiệm vụ và mục tiêu của họ.
Lỗi 2 — Nhãn mơ hồ hoặc kêu nhưng vô nghĩa. "Khám phá", "Trải nghiệm", "Hệ sinh thái" nghe sang nhưng người dùng không biết bấm vào sẽ tới đâu. Ưu tiên rõ ràng hơn sáng tạo: "Sản phẩm", "Bảng giá", "Liên hệ".
Lỗi 3 — Cấu trúc quá sâu. Khi người dùng phải click 5–6 lần mới tới nội dung, họ bỏ cuộc. Hãy làm phẳng cấu trúc khi có thể, đẩy nội dung quan trọng lên gần bề mặt.
Lỗi 4 — Lạm dụng mục "Khác / More". Như ví dụ MoMoBank, đây là nơi các tính năng đi để chết. Nếu một mục quan trọng, hãy cho nó một vị trí xứng đáng.
Mẹo: Dùng quy tắc "câu hỏi của người dùng" để đặt nhãn — mỗi mục menu nên trả lời được một câu hỏi mà người dùng tự hỏi ("Tôi đặt hàng ở đâu?", "Đơn của tôi tới đâu rồi?"). Mẹo nữa: luôn cung cấp một con đường thứ hai (search) song song với menu, vì khoảng một nửa người dùng có xu hướng tìm kiếm thay vì duyệt.
Bài tập thực hành
Bài tập 1 — Sitemap cho app đặt đồ ăn. Hãy chọn một app bạn quen dùng (ShopeeFood, GrabFood, hoặc tự nghĩ một app giả định). Liệt kê ít nhất 15 màn hình/tính năng, rồi dựng một sitemap dạng cây tối đa 3 tầng. Đánh dấu mục nào thuộc global nav, mục nào là local nav.
Bài tập 2 — Card sorting mini. Lấy 12 mục nội dung của một website trường đại học (tuyển sinh, học phí, ngành học, thư viện, ký túc xá, lịch thi, học bổng, liên hệ, tin tức, cựu sinh viên, nghiên cứu, sự kiện). Tự nhóm chúng thành 3–4 nhóm và đặt tên. Sau đó nhờ hai người bạn làm lại độc lập, rồi so sánh ba kết quả. Chỗ nào ba người khác nhau chính là điểm IA cần được test thêm.
Bài tập 3 — Phê bình một mục "Khác". Tìm một app trên điện thoại bạn có mục "Khác / More / Cá nhân". Liệt kê tất cả thứ nằm trong đó và đề xuất cách tái phân bổ chúng vào cấu trúc hợp lý hơn. Viết một đoạn ngắn lý giải vì sao bạn di chuyển từng mục.
Tóm tắt
Information Architecture là nghề tổ chức nội dung và xây dựng cấu trúc điều hướng để người dùng tìm thấy thứ họ cần một cách tự nhiên — một công việc gần như vô hình khi làm tốt nhưng gây khó chịu rõ rệt khi làm dở. Hai sản phẩm cốt lõi là sitemap (cây phân cấp toàn cảnh nội dung) và navigation (các lớp global, local, contextual, utility, breadcrumbs). IA tốt cân bằng giữa chiều rộng và chiều sâu, gắn nhãn theo ngôn ngữ người dùng, và tận dụng mental model có sẵn — như cách VnExpress chia chuyên mục hay Tiki phân tầng mega menu kết hợp search.
Quy trình thực chiến đi từ kiểm kê nội dung, card sorting để nghe cách người dùng phân loại, dựng sitemap nháp, đặt nhãn, thiết kế navigation, rồi kiểm chứng bằng tree testing trước khi bàn giao. Hãy tránh các bẫy kinh điển: tổ chức theo phòng ban thay vì người dùng, nhãn mơ hồ, cấu trúc quá sâu, và mục "Khác" nuốt chửng tính năng quan trọng. Khi bạn nắm chắc IA, mọi wireframe và user flow ở các bài kế tiếp sẽ có một nền móng vững chắc để xây dựng lên.