Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa tải một ứng dụng quản lý chi tiêu mới. Bạn hào hứng mở lên, và màn hình đầu tiên hiện ra chỉ là một khoảng trắng mênh mông với dòng chữ nhỏ xíu: "Không có dữ liệu". Bạn ngồi đó, tự hỏi: "Ủa, app hỏng à? Mình phải làm gì tiếp?". Cảm giác hụt hẫng đó chính là hậu quả của một empty state (trạng thái rỗng) được thiết kế tệ.
Empty state là một trong những khoảnh khắc bị xem nhẹ nhất trong toàn bộ hành trình người dùng, nhưng nghịch lý là nó lại xuất hiện đúng vào những thời điểm quan trọng nhất: lần đầu tiên người dùng mở một tính năng, khi họ vừa xoá sạch dữ liệu, hoặc khi họ tìm kiếm mà không ra kết quả. Đây là những "điểm rẽ" nơi người dùng dễ bối rối, dễ nản, và dễ thoát ra nhất.
Nhiều đội ngũ sản phẩm dồn hết công sức thiết kế cho trạng thái "đầy đủ" — khi màn hình đã có 50 đơn hàng, 200 bài viết, 30 cuộc trò chuyện. Nhưng họ quên mất rằng mọi người dùng đều bắt đầu từ con số không. Ngày đầu tiên của mọi người trên sản phẩm của bạn chính là một chuỗi các empty state. Nếu những màn hình rỗng này khiến họ thấy lạc lối, họ sẽ không bao giờ có cơ hội chạm tới trạng thái đầy đủ mà bạn dày công thiết kế.
Trong bài này, chúng ta sẽ học cách biến những khoảng trống "vô nghĩa" thành cơ hội — cơ hội để hướng dẫn, tạo động lực, và thậm chí là gây thiện cảm với người dùng ngay từ giây phút họ chưa có gì trong tay.
Khái niệm cốt lõi
Empty state là gì?
Empty state là trạng thái của một màn hình hoặc một khu vực giao diện khi chưa có dữ liệu để hiển thị. Nghe đơn giản, nhưng thực ra empty state không phải là một loại duy nhất. Chúng ta cần phân biệt rõ ba loại chính, vì mỗi loại đòi hỏi một cách viết copy hoàn toàn khác nhau.
Ba loại empty state
1. First-use (lần đầu sử dụng) — Người dùng vừa vào một tính năng mới và tự nhiên chưa có gì cả. Ví dụ: giỏ hàng còn trống, chưa có đơn hàng nào, chưa viết bài blog đầu tiên, danh sách bạn bè còn rỗng. Đây là loại quan trọng nhất và cũng là loại chứa nhiều cơ hội nhất. Người dùng ở đây chưa hiểu tính năng làm được gì — công việc của bạn là giải thích giá trị và mời họ hành động.
2. User-cleared (do người dùng dọn sạch) — Người dùng đã từng có dữ liệu nhưng đã hoàn thành hoặc xoá hết. Ví dụ: đã đọc hết tất cả thông báo, đã hoàn thành mọi công việc trong to-do list, hộp thư đến trống. Đây thường là một trạng thái tích cực — người dùng vừa đạt được điều gì đó. Copy nên chúc mừng hoặc trấn an, chứ không phải hối thúc.
3. No-results (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 "áo khoác màu tím size XXL" mà shop hết hàng, lọc đơn hàng theo tháng mà tháng đó không có giao dịch. Đây là loại dễ gây bực bội nhất vì người dùng đang chủ động tìm thứ gì đó cụ thể. Copy phải giúp họ điều chỉnh hướng đi — gợi ý bỏ bớt bộ lọc, kiểm tra chính tả, hoặc đề xuất lựa chọn thay thế.
Việc dùng chung một câu "Không có dữ liệu" cho cả ba loại này là sai lầm phổ biến nhất. Tâm lý người dùng ở mỗi loại hoàn toàn khác nhau, nên thông điệp cũng phải khác.
Bad empty state trông như thế nào?
Một empty state tệ thường mắc một hoặc nhiều lỗi sau:
- Trống trơn hoàn toàn: chỉ là một màn hình trắng, không một dòng chữ. Người dùng không biết đây là lỗi hay là bình thường.
- Thông báo cụt lủn, vô cảm: "No data", "Empty", "0 kết quả". Đúng về mặt kỹ thuật nhưng vô dụng về mặt con người.
- Không có lối thoát: nói với người dùng rằng không có gì ở đây, nhưng không cho biết họ nên làm gì tiếp theo.
- Dùng thuật ngữ kỹ thuật: "Null response", "No records found in database". Người dùng bình thường không hiểu.
Bốn thành phần của một empty state tốt
Một empty state hiệu quả, đặc biệt là loại first-use, thường bao gồm bốn phần:
- Hình ảnh minh hoạ (illustration hoặc icon) — giúp không gian bớt trống trải và truyền tải cảm xúc. Không bắt buộc nhưng rất hữu ích.
- Tiêu đề rõ ràng — nói ngắn gọn tình huống hiện tại, thường theo hướng tích cực hoặc trung tính.
- Đoạn mô tả ngắn — giải thích tại sao màn hình trống và/hoặc giá trị của tính năng này.
- Call to action (CTA) — một nút hoặc liên kết cụ thể để người dùng bắt đầu. Đây là phần quan trọng nhất, biến "vô nghĩa" thành "cơ hội".
Tình huống thực tế
Ví dụ 1: Ví điện tử MoMo — màn hình lịch sử giao dịch trống
Giả sử một người dùng mới vừa đăng ký MoMo và vào tab "Lịch sử giao dịch". Họ chưa từng chuyển tiền hay thanh toán gì.
Cách làm tệ: Màn hình chỉ hiện "Chưa có giao dịch nào". Người dùng nhìn vào và... không biết làm gì tiếp. Họ đóng app.
Cách làm tốt: Một hình minh hoạ nhỏ (ví như hình chiếc ví), tiêu đề "Bạn chưa có giao dịch nào", đoạn mô tả "Mọi khoản chuyển tiền, nạp thẻ và thanh toán của bạn sẽ hiển thị tại đây để bạn dễ theo dõi", kèm hai nút CTA: "Chuyển tiền ngay" và "Nạp tiền điện thoại".
Diễn giải: Sự khác biệt nằm ở chỗ phiên bản tốt trả lời được ba câu hỏi ngầm của người dùng: (1) Đây là gì? — nơi theo dõi giao dịch; (2) Tại sao nó trống? — vì tôi chưa làm gì; (3) Tôi nên làm gì tiếp? — chuyển tiền hoặc nạp thẻ. Quan trọng hơn, CTA không chung chung kiểu "Bắt đầu" mà cụ thể theo đúng những gì người dùng có thể làm được trong app tài chính.
Bài học: Với sản phẩm fintech, empty state của lịch sử giao dịch là cơ hội vàng để đẩy người dùng vào lần giao dịch đầu tiên — cột mốc kích hoạt (activation) quan trọng nhất. Đừng lãng phí nó bằng một câu "trống".
Ví dụ 2: Shopee — tìm kiếm không ra kết quả
Một người dùng gõ vào ô tìm kiếm "giày cao gót nam size 45 màu hồng neon" trên Shopee. Không có sản phẩm nào khớp hoàn toàn.
Cách làm tệ: "Không tìm thấy sản phẩm nào." rồi để màn hình trống trơn. Người dùng cảm thấy như bị chặn cụt đường và rời đi — một khách hàng tiềm năng bị mất.
Cách làm tốt: Tiêu đề "Không tìm thấy sản phẩm khớp với "giày cao gót nam size 45 màu hồng neon"", đoạn gợi ý "Thử kiểm tra lại chính tả, dùng từ khoá ngắn gọn hơn, hoặc bỏ bớt bộ lọc." Bên dưới đó hiển thị luôn một dãy "Sản phẩm gợi ý cho bạn" hoặc "Sản phẩm đang được ưa chuộng".
Diễn giải: Với loại no-results, mục tiêu là không bao giờ để người dùng vào ngõ cụt. Việc hiển thị sản phẩm thay thế đặc biệt quan trọng trong thương mại điện tử, vì mỗi lượt tìm kiếm không ra kết quả là một cơ hội bán hàng có thể cứu vãn. Con số minh hoạ: một số nghiên cứu về e-commerce cho thấy tỉ lệ thoát trang (bounce) tại màn hình no-results có thể cao gấp 2–3 lần so với trang kết quả bình thường — nghĩa là đây chính là chỗ "rò rỉ" doanh thu lớn nhất.
Bài học: No-results không chỉ là thông báo, mà là một cơ hội gợi ý (recovery). Luôn cho người dùng ít nhất một hướng đi tiếp theo, và nếu có thể, gợi ý sản phẩm/nội dung thay thế ngay tại chỗ.
Ví dụ 3: Notion — trang tài liệu trống
Notion là ví dụ kinh điển về empty state loại first-use làm rất tinh tế. Khi bạn tạo một trang mới, thay vì để nó trắng tinh khô khan, Notion hiển thị một dòng placeholder mờ: "Nhấn Tab để chọn kiểu, hoặc gõ '/' để chèn khối nội dung."
Diễn giải: Đây là empty state đóng vai trò dạy người dùng cách dùng sản phẩm ngay trong lúc họ đang đối diện với khoảng trống. Thay vì một tour hướng dẫn dài dòng lúc onboarding, Notion đặt gợi ý đúng lúc, đúng chỗ — ngay khi người dùng chuẩn bị hành động. Câu gợi ý ngắn, mang tính chỉ dẫn cụ thể (gõ '/'), và biến khoảng trống đáng sợ thành một lời mời khám phá.
Bài học: Empty state có thể kiêm luôn vai trò hướng dẫn ngữ cảnh (contextual guidance). Đặc biệt với sản phẩm có nhiều tính năng ẩn, một dòng gợi ý đúng lúc tại màn hình trống hiệu quả hơn nhiều so với một hộp thoại hướng dẫn mà ai cũng bấm "Bỏ qua".
Hướng dẫn từng bước
Khi bạn cần viết copy cho một empty state, hãy đi theo quy trình sau:
Bước 1 — Xác định loại empty state. Trước tiên hãy hỏi: đây là first-use, user-cleared, hay no-results? Câu trả lời quyết định toàn bộ giọng điệu. First-use thì khích lệ và hướng dẫn; user-cleared thì chúc mừng và trấn an; no-results thì giúp điều chỉnh.
Bước 2 — Trả lời ba câu hỏi ngầm của người dùng. Với mọi empty state, người dùng luôn ngầm hỏi: "Đây là gì? Tại sao trống? Tôi làm gì tiếp?". Hãy đảm bảo copy của bạn trả lời được ít nhất câu thứ ba, và lý tưởng là cả ba.
Bước 3 — Viết tiêu đề theo hướng tích cực hoặc trung tính. Tránh dùng từ mang nghĩa tiêu cực như "trống", "không có", "lỗi" nếu có thể. So sánh "Danh sách trống" (tiêu cực) với "Hãy thêm mục đầu tiên của bạn" (mời gọi). Cùng một tình huống, cảm giác khác hẳn.
Bước 4 — Thêm CTA cụ thể (nếu phù hợp). Với first-use và no-results, gần như luôn cần một hành động tiếp theo. Nút CTA nên bắt đầu bằng động từ và mô tả chính xác việc sẽ xảy ra: "Tạo đơn hàng đầu tiên" tốt hơn "Bắt đầu". (Nguyên tắc verb-leading này sẽ được đào sâu ở bài về Button Labels.)
Bước 5 — Giữ giọng nhất quán với thương hiệu. Empty state cũng là nơi thể hiện voice và tone của sản phẩm. Một app trẻ trung có thể dùng chút hài hước; một app ngân hàng thì nên nghiêm túc, trấn an. Đừng để empty state trở thành "vùng đất vô chủ" lạc điệu với phần còn lại.
Bước 6 — Cân nhắc hình minh hoạ. Nếu có tài nguyên thiết kế, một illustration hoặc icon nhẹ nhàng sẽ làm màn hình bớt trống và thêm tính người. Nhưng đừng để hình lấn át — nội dung và CTA vẫn là trọng tâm.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng một câu "Không có dữ liệu" cho mọi tình huống. Đây là lỗi phổ biến nhất. Ba loại empty state cần ba thông điệp khác nhau. Hãy kiểm tra lại: liệu copy của bạn có phân biệt được first-use với no-results không?
Lỗi 2 — Quên mất CTA. Rất nhiều empty state chỉ mô tả tình trạng mà không cho lối đi tiếp. Người dùng bị "kẹt". Luôn tự hỏi: "Sau khi đọc dòng này, người dùng bấm vào đâu?".
Lỗi 3 — Đổ lỗi cho người dùng. Tránh những câu ngầm trách móc như "Bạn chưa nhập gì cả" hay "Bạn tìm sai rồi". Với no-results, hãy dùng giọng trung lập: "Không có kết quả cho..." thay vì "Bạn tìm không thấy gì".
Lỗi 4 — Hài hước sai chỗ. Một câu đùa duyên dáng ở empty state của app ghi chú có thể rất dễ thương. Nhưng cũng câu đùa đó ở màn hình "Bạn chưa có khoản tiết kiệm nào" của app ngân hàng lại vô duyên, thậm chí gây khó chịu. Hài hước phải phù hợp ngữ cảnh và mức độ nghiêm túc của tình huống.
Lỗi 5 — Nhầm empty state với error state. Empty state là "bình thường, chưa có gì". Error state là "có gì đó sai". Đừng khiến người dùng tưởng app hỏng khi thực ra chỉ là họ chưa có dữ liệu. Nếu cần, thêm một chút trấn an: "Chưa có gì ở đây — và đó là điều bình thường."
Mẹo — Viết empty state SỚM, không phải sau cùng. Trong nhiều dự án, empty state bị bỏ đến phút chót vì đội ngũ mải làm trạng thái "đầy". Hãy đảo ngược: thiết kế empty state như một phần của luồng chính, vì nó là thứ người dùng thấy đầu tiên.
Mẹo — Dùng empty state để định hình kỳ vọng. Câu "Đơn hàng của bạn sẽ hiển thị tại đây" không chỉ lấp chỗ trống — nó dạy người dùng biết màn hình này dùng để làm gì trong tương lai.
Bài tập thực hành
Hãy chọn một ứng dụng bạn đang dùng hàng ngày (ví: MoMo, Shopee, một app ghi chú, hoặc app ngân hàng của bạn) và làm các bài sau:
Bài 1 — Săn empty state. Tìm ít nhất ba màn hình empty state khác nhau trong app đó. Phân loại mỗi cái: first-use, user-cleared, hay no-results? Ghi lại chính xác copy hiện tại của chúng.
Bài 2 — Chấm điểm. Với mỗi empty state vừa tìm, kiểm tra xem nó có trả lời được ba câu hỏi ngầm (Đây là gì? Tại sao trống? Làm gì tiếp?) không, và có CTA không. Cho điểm từ 1 đến 5.
Bài 3 — Viết lại. Chọn empty state tệ nhất và viết lại nó theo bốn thành phần đã học: (mô tả) hình minh hoạ nên là gì, tiêu đề, đoạn mô tả, và CTA. Viết hai phiên bản: một cho app trẻ trung (có chút hài hước), một cho app nghiêm túc (ngân hàng). So sánh sự khác biệt về tone.
Bài 4 — No-results khó nhằn. Tưởng tượng bạn là UX writer cho một sàn thương mại điện tử Việt Nam. Người dùng tìm "iphone 15 giá 2 triệu" (một mức giá không tồn tại). Viết copy cho màn hình no-results sao cho không đổ lỗi người dùng, đồng thời gợi ý được hướng đi tiếp theo hợp lý.
Hãy dành 20–30 phút cho bài tập này. Kỹ năng viết empty state được rèn qua việc quan sát và viết lại thật nhiều, chứ không qua lý thuyết suông.
Tóm tắt
Empty state không phải là khoảng trống vô nghĩa cần lấp cho có — đó là một cơ hội chiến lược xuất hiện đúng vào những thời điểm quan trọng nhất trong hành trình người dùng. Những điểm cốt lõi cần nhớ:
- Có ba loại empty state: first-use (khích lệ, hướng dẫn), user-cleared (chúc mừng, trấn an), và no-results (giúp điều chỉnh). Mỗi loại cần thông điệp riêng — đừng dùng chung một câu "Không có dữ liệu".
- Một empty state tốt trả lời ba câu hỏi ngầm: Đây là gì? Tại sao trống? Tôi làm gì tiếp?
- Bốn thành phần: hình minh hoạ, tiêu đề tích cực, mô tả ngắn, và CTA cụ thể. CTA là thứ biến "vô nghĩa" thành "cơ hội".
- Tránh các lỗi phổ biến: đổ lỗi người dùng, quên CTA, hài hước sai chỗ, và nhầm empty state với error state.
- Viết empty state sớm trong quy trình, vì nó là thứ người dùng thấy đầu tiên.