Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn được giao thiết kế lại trang thanh toán cho một ứng dụng đặt đồ ăn. Nếu bạn mở Figma lên và bắt đầu chọn màu nút, bo góc, đổ bóng ngay từ phút đầu tiên, gần như chắc chắn bạn sẽ đi sai đường. Bạn sẽ tốn cả buổi tô vẽ một giao diện đẹp, rồi nhận ra luồng đặt món thiếu mất bước chọn địa chỉ giao hàng, hoặc người dùng không biết tìm mã giảm giá ở đâu. Lúc đó sửa lại rất tốn công, vì bạn đã "đóng băng" mọi thứ bằng màu sắc và chi tiết.
Wireframing và Information Architecture (IA) tồn tại chính là để tránh cái bẫy đó. Đây là hai kỹ năng nền tảng giúp bạn tư duy về cấu trúc trước khi nghĩ đến vẻ ngoài. Wireframe là bộ khung xương của sản phẩm — nó trả lời câu hỏi "màn hình này có những gì và sắp xếp ra sao", còn Information Architecture trả lời câu hỏi lớn hơn "toàn bộ thông tin và chức năng được tổ chức, gắn kết với nhau như thế nào để người dùng tìm thấy thứ họ cần".
Trong vai trò một product designer, đây là nơi bạn tiết kiệm được nhiều tiền và thời gian nhất cho team. Một thay đổi ở wireframe chỉ tốn vài phút kéo thả; cùng thay đổi đó nếu phát hiện sau khi developer đã code xong có thể tốn cả tuần. Vì vậy hãy xem bài này như tấm bản đồ giúp bạn đi đúng hướng trước khi cả đội bắt đầu chạy.
Khái niệm cốt lõi
Wireframe là gì và ba cấp độ chi tiết (fidelity)
Wireframe là bản phác thảo bố cục một màn hình, tập trung vào việc đặt đúng thành phần ở đúng vị trí với đúng thứ tự ưu tiên — chứ không phải làm nó đẹp. Người ta phân loại wireframe theo fidelity, tức mức độ chi tiết và giống thành phẩm cuối:
- Low-fidelity (low-fi): Phác thảo bằng tay trên giấy hoặc bảng trắng, dùng hình khối cơ bản — hình chữ nhật là ảnh, đường gạch ngang là chữ, hình tròn là avatar. Mục tiêu là tư duy thật nhanh, vẽ một màn hình chỉ trong 1-2 phút. Vì xấu và thô nên không ai ngại bỏ đi để vẽ lại — đây chính là sức mạnh của low-fi.
- Mid-fidelity (mid-fi): Wireframe số hóa, thường dùng các "gray box" (hộp xám) với chữ thật thay cho chữ giả Lorem Ipsum. Bố cục đã tương đối chính xác về tỷ lệ, khoảng cách, thứ bậc thông tin, nhưng vẫn đơn sắc, chưa có màu thương hiệu, chưa có hình ảnh thật. Đây là cấp độ "ngọt" nhất để thảo luận với team vì nó đủ rõ để hiểu nhưng chưa đủ chi tiết để gây tranh cãi về thẩm mỹ.
- High-fidelity (hi-fi): Mockup chi tiết với màu sắc, font, hình ảnh thật, đúng spacing, gần như giống hệt sản phẩm cuối. Cấp độ này dùng khi cấu trúc đã chốt và bạn cần trình bày cho khách hàng hoặc chuẩn bị bàn giao.
Một wireframe tốt giao tiếp điều gì
Wireframe không phải bản vẽ trống rỗng. Một wireframe tốt phải truyền đạt được bốn thứ:
- Hierarchy (thứ bậc): Cái gì quan trọng nhất trên màn hình? Nó thường to hơn, nằm cao hơn, hoặc nổi bật hơn.
- Grouping (nhóm): Những thông tin liên quan được đặt gần nhau, tách biệt với nhóm khác bằng khoảng trắng.
- Density (mật độ): Màn hình này dày đặc thông tin hay thoáng đãng? Phù hợp với ngữ cảnh sử dụng nào?
- Order (trình tự): Mắt người dùng đi theo thứ tự nào — thường là từ trên xuống, trái sang phải.
Information Architecture — kiến trúc thông tin
Nếu wireframe là bản vẽ từng phòng, thì IA là bản quy hoạch cả tòa nhà. IA là cách bạn tổ chức, gán nhãn và kết nối nội dung để người dùng định hướng được. Bốn thành phần chính của IA:
- Sitemap: Sơ đồ cây thể hiện tất cả màn hình/trang và quan hệ cha-con giữa chúng. Ví dụ: Trang chủ → Danh mục → Sản phẩm → Chi tiết sản phẩm.
- Hệ thống tổ chức (organization): Cách gom nhóm nội dung — theo chủ đề, theo nhiệm vụ, theo đối tượng người dùng, hay theo thứ tự thời gian.
- Hệ thống gắn nhãn (labeling): Đặt tên cho từng mục sao cho người dùng hiểu ngay. "Tài khoản của tôi" dễ hiểu hơn "Hồ sơ định danh".
- Hệ thống điều hướng (navigation): Thanh menu, breadcrumb, tab — những công cụ giúp người dùng biết mình đang ở đâu và đi tiếp thế nào.
Tình huống thực tế
Ví dụ 1 — Tiki và bài toán điều hướng hàng triệu sản phẩm
Một sàn thương mại điện tử như Tiki có hàng triệu SKU thuộc đủ ngành hàng: sách, điện tử, mỹ phẩm, đồ gia dụng. Thử tưởng tượng đội thiết kế bỏ qua IA và nhảy thẳng vào vẽ giao diện đẹp — kết quả sẽ là một mê cung mà người dùng tìm cuốn sách cần mua cũng phải lạc đường.
Cách họ giải quyết là đầu tư mạnh vào IA trước. Họ xây một sitemap phân tầng rõ ràng: ngành hàng cấp một (Sách, Điện tử...), danh mục cấp hai, rồi mới đến sản phẩm. Họ dùng card sorting để quyết định nên gọi là "Nhà Cửa - Đời Sống" hay "Đồ Gia Dụng" — vì cách gắn nhãn ảnh hưởng trực tiếp đến việc người dùng có click vào hay không. Họ cũng đặt thanh tìm kiếm ở vị trí nổi bật nhất, vì với kho hàng khổng lồ, search là con đường điều hướng quan trọng ngang menu.
Bài học: Khi sản phẩm có khối lượng nội dung lớn, IA quan trọng hơn cả vẻ đẹp giao diện. Sai cấu trúc nghĩa là người dùng không tìm thấy thứ cần mua, và bạn mất doanh thu ngay lập tức.
Ví dụ 2 — Một startup fintech ở TP.HCM và buổi họp wireframe cứu nguy ngân sách
Một startup ví điện tử giả định ở Quận 1 cần thiết kế tính năng "chuyển tiền giữa bạn bè". Bạn designer trẻ trong team háo hức, mở Figma làm luôn bản hi-fi với gradient tím đẹp mắt, animation mượt mà, mất ba ngày. Khi demo cho team, bạn product manager hỏi: "Thế nếu người nhận chưa có tài khoản thì sao? Và bước xác thực OTP nằm ở đâu?" — hóa ra cả luồng thiếu hai bước quan trọng. Ba ngày công sức gần như phải làm lại từ đầu vì màu mè đã ràng buộc bố cục.
Ở lần lặp sau, team đổi cách làm. Họ ngồi với nhau 30 phút, vẽ low-fi trên bảng trắng toàn bộ luồng: nhập số tiền → chọn người nhận → xử lý trường hợp người nhận chưa có tài khoản → xác thực OTP → màn hình thành công. Chỉ trong nửa buổi sáng họ phát hiện và sửa được năm vấn đề logic mà nếu để đến hi-fi sẽ tốn hàng tuần. Sau khi cả team đồng thuận khung low-fi, designer mới nâng lên mid-fi rồi hi-fi.
Bài học: Fidelity càng cao, chi phí thay đổi càng lớn. Dùng low-fi để "thất bại cho rẻ" — phát hiện lỗi logic khi sửa chỉ tốn cục tẩy, không phải tốn cả tuần code.
Ví dụ 3 — Airbnb và sức mạnh của gray box trong giai đoạn mid-fi
Khi Airbnb thiết kế lại trang chi tiết chỗ ở, đội ngũ làm việc rất lâu ở cấp độ mid-fi với các hộp xám trước khi cho ảnh thật vào. Lý do rất tinh tế: nếu đưa ảnh phòng đẹp lung linh vào quá sớm, mọi người trong buổi review sẽ bị cuốn vào việc bình luận "tấm ảnh này đẹp quá" thay vì tập trung vào câu hỏi thật sự — "thông tin giá, đánh giá, tiện ích đã được sắp xếp theo đúng thứ tự ưu tiên chưa?". Gray box buộc cả team nhìn vào cấu trúc và thứ bậc thông tin một cách khách quan.
Bài học: Giữ wireframe ở mức đơn sắc đủ lâu là một chiến thuật có chủ đích, không phải lười biếng. Nó hướng sự chú ý của người review vào đúng thứ cần quyết định ở giai đoạn đó.
Hướng dẫn từng bước
Đây là quy trình thực tế bạn có thể áp dụng cho bất kỳ dự án nào:
Bước 1 — Làm rõ mục tiêu màn hình. Trước khi vẽ, viết ra một câu: "Màn hình này giúp người dùng làm gì?" Nếu không trả lời được, bạn chưa sẵn sàng để wireframe.
Bước 2 — Xây dựng IA tổng thể trước. Liệt kê toàn bộ nội dung và chức năng cần có. Gom nhóm chúng lại (có thể dùng card sorting nếu dự án lớn). Vẽ sitemap để thấy bức tranh toàn cảnh các màn hình và mối quan hệ giữa chúng. Bạn phải biết "cả khu phố" trước khi xây "từng ngôi nhà".
Bước 3 — Phác thảo low-fi bằng tay. Lấy giấy hoặc bảng trắng, vẽ nhanh nhiều phương án cho cùng một màn hình. Đừng tô vẽ, đừng dùng thước. Mục tiêu là số lượng ý tưởng, không phải độ đẹp. Vẽ 3-5 phiên bản và so sánh.
Bước 4 — Chọn phương án tốt nhất và lên mid-fi số. Mở Figma (hoặc Balsamiq, một công cụ chuyên cho wireframe). Dựng lại bằng gray box, dùng chữ thật, canh đúng tỷ lệ và spacing. Đây là bản để mang đi thảo luận với product manager và developer.
Bước 5 — Kiểm tra luồng và edge case. Đặt các màn hình cạnh nhau theo đúng trình tự người dùng đi qua. Tự hỏi: trạng thái trống thì sao, lỗi thì sao, dữ liệu dài bất thường thì sao. Sửa ngay ở mid-fi.
Bước 6 — Lấy phản hồi rồi mới nâng lên hi-fi. Chỉ khi cấu trúc đã được team đồng thuận, bạn mới đầu tư thời gian vào màu sắc và chi tiết. Đây là điểm chuyển giao tự nhiên sang phần thiết kế chi tiết hơn ở các bài sau.
Lỗi thường gặp & mẹo
Lỗi 1 — Nhảy thẳng vào hi-fi. Đây là lỗi phổ biến nhất của người mới. Bạn thấy việc tô màu thú vị hơn vẽ hộp xám, nên bỏ qua low-fi và mid-fi. Hậu quả là chi phí sửa đổi đội lên và bạn dễ bị "dính" vào một giải pháp chỉ vì nó đã trông đẹp. Mẹo: ép mình vẽ tay ít nhất ba phương án trước khi mở máy tính.
Lỗi 2 — Wireframe quá chi tiết hoặc quá sơ sài so với cấp độ. Ở low-fi mà ngồi căn từng pixel là phí thời gian; ở mid-fi mà dùng Lorem Ipsum khắp nơi thì người review không hình dung được thông tin thật chiếm bao nhiêu chỗ. Mẹo: ở mid-fi luôn dùng nội dung thật hoặc gần thật, vì độ dài chữ thật ảnh hưởng lớn đến bố cục.
Lỗi 3 — Bỏ qua IA, chỉ chăm chăm vào từng màn hình lẻ. Nhiều bạn vẽ rất đẹp từng màn hình nhưng khi ghép lại thì điều hướng rời rạc, người dùng lạc lối. Mẹo: luôn vẽ sitemap trước, và mỗi khi thiết kế một màn hình, tự hỏi "người dùng đến đây từ đâu và đi đâu tiếp".
Lỗi 4 — Đặt nhãn theo ngôn ngữ nội bộ công ty. Bạn gọi một mục là "Module quản lý định danh" trong khi người dùng chỉ tìm "Tài khoản". Mẹo: đặt nhãn bằng ngôn ngữ của người dùng, kiểm chứng bằng card sorting hoặc đơn giản là hỏi vài người ngoài team xem họ hiểu nhãn đó nghĩa là gì.
Lỗi 5 — Quên các trạng thái không lý tưởng. Wireframe chỉ vẽ trường hợp "mọi thứ hoàn hảo" — danh sách đầy dữ liệu, tên ngắn gọn. Mẹo: với mỗi màn hình, luôn phác thảo thêm trạng thái trống và trạng thái dữ liệu dài bất thường.
Bài tập thực hành
Bài tập 1 — Sitemap cho ứng dụng đặt vé xem phim. Hãy vẽ sitemap cho một app đặt vé xem phim (kiểu CGV hay Galaxy). Liệt kê tất cả màn hình cần có, gom nhóm và thể hiện quan hệ cha-con. Tối thiểu phải có các nhánh: chọn phim, chọn rạp/suất chiếu, chọn ghế, thanh toán, vé của tôi. Tự hỏi: người dùng cần bao nhiêu lần chạm để mua xong một vé?
Bài tập 2 — Low-fi cho màn hình chọn ghế. Lấy giấy và bút, vẽ tay ba phương án khác nhau cho màn hình chọn ghế. Mỗi phương án không quá 3 phút. So sánh: phương án nào thể hiện ghế trống/đã đặt rõ nhất? Phương án nào hiển thị giá và nút xác nhận thuận tiện nhất?
Bài tập 3 — Nâng lên mid-fi. Chọn phương án tốt nhất từ bài 2, dựng lại trong Figma hoặc Balsamiq bằng gray box với chữ thật (giá tiền thật, số ghế thật). Sau đó vẽ thêm một bản cho trạng thái "rạp đã hết ghế đẹp" để luyện tư duy edge case.
Bài tập 4 — Card sorting nhỏ. Viết 15 mục chức năng của app này lên các thẻ giấy, nhờ 3 người bạn (không làm trong ngành) gom nhóm theo cách họ thấy hợp lý. Ghi lại sự khác biệt giữa cách họ nghĩ và cách bạn dự định tổ chức. Đây là dữ liệu vàng cho IA của bạn.
Tóm tắt
Wireframing và Information Architecture là hai kỹ năng nền tảng giúp bạn tư duy về cấu trúc trước khi nghĩ tới vẻ ngoài — nơi bạn tiết kiệm được nhiều thời gian và tiền bạc nhất cho cả team.
Những điểm cần nhớ:
- Ba cấp độ fidelity: low-fi (vẽ tay, hình khối, cực nhanh) → mid-fi (gray box số hóa, chữ thật, đơn sắc) → hi-fi (chi tiết, màu sắc, gần thành phẩm). Luôn đi từ thấp lên cao vì chi phí thay đổi tăng dần.
- Wireframe tốt truyền đạt được thứ bậc, nhóm, mật độ và trình tự — không phải để đẹp mà để giao tiếp ý tưởng cấu trúc.
- Information Architecture tổ chức toàn bộ thông tin qua sitemap, cách gom nhóm, cách gắn nhãn và hệ thống điều hướng. Dùng card sorting để hiểu kỳ vọng thật của người dùng.
- Quy trình thực tế: làm rõ mục tiêu → dựng IA → low-fi tay → mid-fi số → kiểm tra luồng và edge case → mới nâng hi-fi.
- Tránh nhảy thẳng vào hi-fi, đặt nhãn theo ngôn ngữ nội bộ, và quên các trạng thái không lý tưởng.