Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa thuyết phục được một người dùng tạo tài khoản. Họ đã vượt qua màn hình đăng ký, xác nhận email, đăng nhập lần đầu — và rồi họ nhìn thấy gì? Một màn hình trống trơn. Một danh sách rỗng. Một dashboard không có số liệu nào. Đây chính là empty state (trạng thái rỗng) — khoảnh khắc mà rất nhiều sản phẩm bỏ phí một cách đáng tiếc.
Với một Growth PM, empty state không phải là "lỗi cần che giấu" mà là bất động sản đắt giá nhất trong toàn bộ hành trình onboarding. Vì sao? Vì tại thời điểm này, người dùng đang ở trạng thái chú ý cao nhất, động lực còn nguyên vẹn, nhưng cũng hoang mang nhất: "Tôi vừa đăng ký xong, giờ làm gì tiếp?". Nếu màn hình trống không trả lời được câu hỏi đó, người dùng sẽ rời đi — và đây là một trong những điểm rò rỉ (drop-off) lớn nhất trước khi user kịp chạm tới Aha Moment.
Song hành với empty state là progressive disclosure (tiết lộ thông tin theo từng bước) — nguyên tắc thiết kế giúp bạn không "dội bom" toàn bộ tính năng vào mặt người dùng cùng lúc, mà bóc tách dần độ phức tạp theo nhịp họ sẵn sàng tiếp nhận. Hai khái niệm này bổ trợ nhau: empty state quyết định bước đầu tiên người dùng nên làm, còn progressive disclosure quyết định họ được nhìn thấy bao nhiêu trong mỗi bước.
Bài này sẽ cho bạn một khung tư duy thiết kế empty state như một công cụ tăng trưởng, và cách dùng progressive disclosure để giảm tải nhận thức (cognitive load) mà không làm người dùng cảm thấy bị "giấu bài".
Khái niệm cốt lõi
Empty state là gì và có mấy loại
Empty state là trạng thái giao diện khi một khu vực chưa có dữ liệu để hiển thị. Đừng nghĩ nó chỉ là "màn hình lúc mới đăng ký". Có ba loại empty state mà một Growth PM cần phân biệt rõ, vì mỗi loại đòi hỏi chiến lược khác nhau:
1. First-use empty state (lần đầu sử dụng). Đây là loại quan trọng nhất với growth. Người dùng chưa từng có dữ liệu vì họ vừa bắt đầu. Mục tiêu duy nhất ở đây là: dẫn họ thực hiện hành động đầu tiên (first action) càng nhanh càng tốt. Ví dụ: một app ghi chú vừa cài đặt, danh sách note rỗng.
2. User-cleared empty state (người dùng đã làm trống). Người dùng từng có dữ liệu nhưng đã xóa/hoàn tất hết. Ví dụ: hộp thư đã đọc hết, danh sách công việc đã hoàn thành. Đây thường là khoảnh khắc tích cực — hãy chúc mừng họ, đừng để nó trông như lỗi.
3. No-results empty state (không có kết quả). Người dùng tìm kiếm hoặc lọc nhưng không ra gì. Ví dụ: tìm sản phẩm "áo dài size XXXL" trên sàn TMĐT mà không có hàng. Mục tiêu là cứu vãn tình huống, gợi ý lối thoát, không để người dùng vào ngõ cụt.
Trong bài này, trọng tâm growth nằm ở loại 1 — first-use empty state, vì đây là điểm onboarding vàng. Nhưng một sản phẩm tốt phải xử lý cả ba.
Bốn thành phần của một empty state hiệu quả
Một empty state làm tốt nhiệm vụ tăng trưởng thường có bốn lớp:
- Tiêu đề rõ ràng: nói thẳng đây là trạng thái rỗng và vì sao. Tránh chữ kiểu "Không có dữ liệu" lạnh lùng.
- Mô tả giá trị: giải thích người dùng sẽ nhận được gì khi điền vào đây. Đây là phần "bán hàng" cho hành động tiếp theo.
- Lời kêu gọi hành động (CTA) duy nhất và nổi bật: chỉ một hành động chính. Đây là điểm nhiều sản phẩm sai khi đặt năm sáu nút cạnh nhau.
- Hỗ trợ trực quan: hình minh họa, dữ liệu mẫu (sample data), hoặc video ngắn để giảm cảm giác "trống vắng" và cho người dùng hình dung kết quả cuối cùng.
Progressive disclosure — tiết lộ theo từng bước
Progressive disclosure là nguyên tắc: chỉ hiển thị những gì người dùng cần ở thời điểm hiện tại, ẩn phần còn lại cho đến khi họ sẵn sàng. Mục tiêu là giảm cognitive load — lượng thông tin não phải xử lý cùng lúc.
Lý do nó gắn chặt với growth: một sản phẩm SaaS điển hình có hàng chục tính năng, nhưng người dùng mới chỉ cần một, hai tính năng để đạt giá trị đầu tiên. Nếu bạn phơi bày toàn bộ menu, toolbar, settings ngay từ đầu, bạn đang tạo ra thứ gọi là "feature shock" — người dùng choáng ngợp rồi bỏ cuộc.
Các kỹ thuật progressive disclosure phổ biến:
- Mặc định thông minh (smart defaults): cấu hình sẵn lựa chọn phổ biến nhất, ẩn các tùy chọn nâng cao sau nút "Tùy chọn nâng cao".
- Mở khóa tính năng theo tiến trình (feature unlocking): chỉ giới thiệu tính năng B sau khi người dùng đã dùng tính năng A.
- Tooltip và coach marks theo ngữ cảnh: chỉ dẫn xuất hiện đúng lúc người dùng chạm tới khu vực mới, thay vì một tour dài lê thê ngay đầu.
- Tiết lộ theo lớp (layered information): hiển thị tóm tắt trước, chi tiết hiện ra khi người dùng nhấp vào.
Tình huống thực tế
Ví dụ 1 — Notion và empty state có dữ liệu mẫu
Khi bạn tạo workspace mới trên Notion, bạn không gặp một trang trắng tinh đáng sợ. Thay vào đó, Notion đặt sẵn vài trang mẫu: "Getting Started", một bảng task mẫu, một trang ghi chú mẫu. Đây là kỹ thuật demo content / sample data trong empty state.
Diễn giải: Notion hiểu rằng trang trắng là kẻ thù của onboarding. Một người dùng mới nhìn trang trắng sẽ không biết Notion có thể làm gì. Nhưng khi thấy một bảng database mẫu đang chạy, họ lập tức hiểu khái niệm và bắt đầu chỉnh sửa — mà chỉnh sửa thứ có sẵn dễ hơn nhiều so với tạo từ con số không. Notion cũng dùng progressive disclosure rất khéo: tính năng nâng cao như relation, formula, rollup không hề xuất hiện cho người mới, chỉ lộ ra khi bạn gõ "/" để gọi lệnh.
Bài học: với sản phẩm có "canvas trống" (note, design, doc), hãy mồi sẵn dữ liệu mẫu để người dùng có điểm bắt đầu, đồng thời ẩn các tính năng nâng cao sau lệnh gọi theo ngữ cảnh.
Ví dụ 2 — Sàn TMĐT Việt Nam và no-results empty state
Giả định một sàn thương mại điện tử lớn ở Việt Nam (tương tự Tiki hoặc Shopee) phát hiện rằng khi người dùng tìm kiếm không ra kết quả, màn hình cũ chỉ hiện dòng chữ "Không tìm thấy sản phẩm nào". Phân tích funnel cho thấy 68% người dùng gặp màn hình này rời phiên (session) ngay sau đó — một điểm rò rỉ nghiêm trọng.
Nhóm growth thiết kế lại empty state này: thay vì ngõ cụt, họ thêm (1) gợi ý từ khóa gần đúng — "Có phải bạn muốn tìm: ...", (2) danh sách sản phẩm liên quan hoặc đang bán chạy cùng danh mục, và (3) nút "Đặt thông báo khi có hàng". Sau khi triển khai, tỷ lệ rời phiên tại màn hình này giảm từ 68% xuống còn khoảng 47%, và một phần người dùng chuyển sang mua sản phẩm thay thế.
Diễn giải: no-results không phải là kết thúc, mà là cơ hội tái định tuyến (re-routing) người dùng về luồng có giá trị. Con số rò rỉ cụ thể chính là lý do bạn nên đo lường drop-off tại từng empty state thay vì coi nó là chi tiết nhỏ.
Bài học: mỗi empty state "tiêu cực" (no-results, lỗi) đều phải có ít nhất một lối thoát dẫn người dùng quay lại hành trình giá trị.
Ví dụ 3 — App giao đồ ăn và first-use empty state quá tải
Một startup giao đồ ăn (tương tự mô hình của một app nội địa Đông Nam Á) gặp vấn đề: tỷ lệ đặt đơn đầu tiên (first-order activation) chỉ đạt 22% trong 24 giờ sau khi cài đặt. Khi xem lại màn hình đầu tiên, đội ngũ phát hiện họ phơi bày quá nhiều thứ cùng lúc: yêu cầu cấp quyền vị trí, popup nhập mã giảm giá, banner đăng ký gói thành viên, và một danh sách 40 nhà hàng cuộn vô tận — tất cả trong giây đầu tiên.
Họ áp dụng progressive disclosure: bước đầu chỉ xin quyền vị trí với lý do rõ ràng ("để hiển thị quán gần bạn"), ẩn banner gói thành viên cho đến sau đơn hàng đầu tiên, và thay danh sách 40 quán bằng một empty-state-style gợi ý "3 món được đặt nhiều nhất gần bạn" kèm CTA "Đặt ngay". Tỷ lệ first-order trong 24h tăng từ 22% lên 31% sau bốn tuần.
Bài học: đôi khi vấn đề của màn hình đầu tiên không phải là quá trống, mà là quá đầy. Progressive disclosure giúp bạn dồn sự chú ý của người dùng vào đúng một hành động kích hoạt.
Hướng dẫn từng bước
Dưới đây là quy trình bạn có thể áp dụng để thiết kế (hoặc thiết kế lại) empty state và lớp progressive disclosure cho sản phẩm của mình:
Bước 1 — Liệt kê toàn bộ empty state trong sản phẩm. Đi qua từng màn hình chính và ghi lại nơi nào có thể rỗng: dashboard mới, danh sách chưa có item, kết quả tìm kiếm rỗng, hộp thư trống. Phân loại mỗi cái thuộc loại 1, 2 hay 3.
Bước 2 — Xác định "hành động đầu tiên" cho mỗi empty state loại first-use. Tự hỏi: hành động duy nhất nào đưa người dùng gần Aha Moment nhất? Đó sẽ là CTA chính. Nếu bạn nghĩ ra ba bốn CTA, hãy chọn một và bỏ phần còn lại.
Bước 3 — Viết nội dung theo bốn lớp. Soạn tiêu đề, mô tả giá trị, CTA và quyết định có cần hỗ trợ trực quan (sample data, hình minh họa) hay không. Văn phong nên khích lệ, không kỹ thuật.
Bước 4 — Áp dụng progressive disclosure. Với mỗi màn hình, lập danh sách những gì người dùng KHÔNG cần ngay. Quyết định ẩn chúng sau tooltip, sau nút "nâng cao", hoặc mở khóa sau khi đạt một mốc nhất định.
Bước 5 — Cài đặt đo lường. Gắn sự kiện (event) cho: lượt xem empty state, lượt nhấp CTA, và tỷ lệ rời bỏ tại đó. Không đo thì không biết empty state của bạn đang cứu hay đang giết tăng trưởng.
Bước 6 — Lặp dựa trên dữ liệu. Theo dõi tỷ lệ nhấp CTA và thời gian từ empty state đến hành động đầu tiên. Thử nghiệm các biến thể nội dung và bố cục để tối ưu dần.
Lỗi thường gặp & mẹo
Lỗi 1 — Coi empty state là "trạng thái lỗi" cần che giấu. Nhiều đội chỉ hiện "No data" cho xong. Đây là lãng phí lớn nhất. Mẹo: đối xử với mỗi empty state như một landing page mini với một mục tiêu chuyển đổi.
Lỗi 2 — Nhồi nhiều CTA cạnh nhau. Năm nút sáng đèn cùng lúc làm người dùng tê liệt vì phải lựa chọn. Mẹo: một CTA chính nổi bật, tối đa một liên kết phụ mờ hơn (ví dụ "Xem hướng dẫn").
Lỗi 3 — Lạm dụng product tour dài ngay đầu. Một tour 8 bước che kín màn hình ngay khi vừa đăng nhập là phản progressive disclosure. Người dùng bấm "Skip" và bỏ lỡ tất cả. Mẹo: dùng coach mark theo ngữ cảnh, xuất hiện đúng lúc người dùng chạm tới khu vực mới.
Lỗi 4 — Giấu tính năng đến mức không tìm thấy. Progressive disclosure không có nghĩa là chôn vùi tính năng quan trọng sâu trong menu. Mẹo: ẩn độ phức tạp, không ẩn lối đi — luôn có manh mối dẫn người dùng tới phần nâng cao khi họ cần.
Lỗi 5 — Không đo lường. Nếu bạn không gắn event cho empty state, bạn đang bay mù. Mẹo: tỷ lệ nhấp CTA tại empty state nên là một chỉ số bạn theo dõi định kỳ, không phải con số bỏ quên.
Mẹo bổ sung — dùng sample data thông minh. Với sản phẩm canvas trống, sample data có thể tăng activation rõ rệt. Nhưng hãy đảm bảo người dùng dễ dàng xóa hoặc thay thế nó, để dữ liệu mẫu không trở thành rác.
Bài tập thực hành
- Kiểm toán empty state. Mở một sản phẩm bạn đang dùng hoặc đang xây. Liệt kê ít nhất 5 empty state, phân loại từng cái (first-use / user-cleared / no-results) và đánh giá xem mỗi cái có đủ bốn lớp (tiêu đề, mô tả giá trị, CTA, hỗ trợ trực quan) hay không.
- Thiết kế lại một màn hình. Chọn first-use empty state yếu nhất bạn tìm được. Viết lại nội dung bốn lớp, xác định một CTA duy nhất dẫn tới Aha Moment, và phác họa bố cục (có thể vẽ tay).
- Lập kế hoạch progressive disclosure. Với một sản phẩm SaaS bạn biết, liệt kê 10 tính năng và sắp xếp chúng theo thứ tự nên tiết lộ: cái nào cần ngay ở phiên đầu, cái nào mở khóa sau, cái nào ẩn sau "nâng cao".
- Thiết kế đo lường. Viết ra 3 sự kiện (event) bạn sẽ gắn để đo hiệu quả empty state, và chỉ số (metric) tương ứng bạn muốn cải thiện.
Tóm tắt
Empty state là một trong những khoảnh khắc onboarding bị đánh giá thấp nhất nhưng có đòn bẩy tăng trưởng cao nhất. Thay vì để màn hình trống trả lời câu hỏi "giờ làm gì tiếp?" bằng sự im lặng, một Growth PM biến nó thành tấm bảng chỉ đường tới hành động đầu tiên và Aha Moment. Hãy phân biệt ba loại empty state, đảm bảo mỗi cái có bốn lớp nội dung, và đặt đúng một CTA chính.
Song song đó, progressive disclosure giúp bạn quản lý độ phức tạp: chỉ hiển thị thứ người dùng cần lúc này, ẩn phần còn lại cho đến khi họ sẵn sàng, để tránh "feature shock". Ranh giới quan trọng là — bạn ẩn độ phức tạp, không ẩn lối đi.
Cuối cùng, đừng quên đo lường. Empty state và lớp tiết lộ thông tin chỉ thực sự phục vụ tăng trưởng khi bạn gắn event, theo dõi tỷ lệ nhấp CTA và drop-off, rồi lặp lại dựa trên dữ liệu thật. Như ba ví dụ đã thấy — từ sample data của Notion, no-results của sàn TMĐT, đến màn hình quá tải của app giao đồ ăn — những thay đổi nhỏ ở các khoảnh khắc rỗng này có thể dịch chuyển trực tiếp tỷ lệ activation của cả sản phẩm.