Trong quá trình phát triển web/app, chúng ta thường dành nhiều thời gian cho trạng thái “có dữ liệu”: danh sách đơn hàng, bảng báo cáo, trang thông báo, lịch sử giao dịch... Nhưng thực tế, người dùng rất hay gặp trạng thái rỗng: tài khoản mới chưa có dữ liệu, bộ lọc không trả về kết quả, dữ liệu bị xóa hết, hoặc tính năng chưa được thiết lập. Nếu chỉ hiển thị một màn hình trắng hoặc dòng chữ “Không có dữ liệu”, trải nghiệm sẽ bị cụt và người dùng không biết nên làm gì tiếp theo. Trạng thái rỗng tốt không chỉ là vấn đề giao diện, mà còn là một phần của luồng sản phẩm. Một trạng thái rỗng nên trả lời 3 câu hỏi: - Chuyện gì đang xảy ra? - Vì sao người dùng thấy màn hình này? - Họ có thể làm gì tiếp theo? Ví dụ, thay vì viết “Không có dự án”, có thể viết: “Bạn chưa có dự án nào. Hãy tạo dự án đầu tiên để bắt đầu quản lý công việc của nhóm.” Kèm theo nút: “Tạo dự án mới”. Cách này tốt hơn vì nó giải thích ngữ cảnh và đưa ra hành động rõ ràng. Một vài loại trạng thái rỗng thường gặp: 1. Rỗng khi người dùng mới bắt đầu Đây là cơ hội hướng dẫn onboarding. Ví dụ ứng dụng quản lý chi tiêu có thể hiển thị: “Bạn chưa ghi khoản chi nào. Thêm giao dịch đầu tiên để xem báo cáo chi tiêu theo tháng.” Nên có nút hành động chính, ví dụ “Thêm giao dịch”. Nếu cần, có thể thêm một ví dụ minh họa ngắn để người dùng hiểu tính năng. 2. Rỗng do bộ lọc hoặc tìm kiếm Trường hợp này khác với tài khoản mới. Người dùng đã có dữ liệu, nhưng điều kiện lọc không khớp. Nội dung nên gợi ý cách sửa: “Không tìm thấy đơn hàng phù hợp với bộ lọc hiện tại. Hãy thử đổi khoảng thời gian hoặc xóa bớt điều kiện lọc.” Nên có nút “Xóa bộ lọc” hoặc “Đặt lại tìm kiếm”. Đây là chi tiết nhỏ nhưng rất hữu ích. 3. Rỗng do lỗi tải dữ liệu Không nên đánh đồng lỗi tải dữ liệu với không có dữ liệu. Nếu API lỗi mà giao diện lại hiện “Không có dữ liệu”, người dùng và cả đội hỗ trợ đều dễ hiểu sai. Với lỗi mạng hoặc lỗi server, nên hiển thị thông báo riêng: “Chưa tải được danh sách khách hàng. Vui lòng thử lại.” Kèm nút “Tải lại”. Nếu hệ thống có mã lỗi nội bộ, có thể hiển thị ở mức vừa đủ cho hỗ trợ kỹ thuật, nhưng tránh làm người dùng hoang mang. 4. Rỗng do người dùng chưa có quyền Nếu người dùng không có quyền xem dữ liệu, đừng chỉ hiển thị danh sách trống. Hãy nói rõ: “Bạn chưa có quyền xem báo cáo này. Vui lòng liên hệ quản trị viên nếu cần truy cập.” Điều này giúp tránh hiểu nhầm rằng hệ thống chưa có báo cáo. Về mặt kỹ thuật, nên tách rõ các trạng thái trong component: loading, error, empty, noPermission và hasData. Một lỗi phổ biến là chỉ kiểm tra độ dài mảng dữ liệu. Ví dụ nếu orders.length === 0 thì hiện “Không có đơn hàng”, nhưng khi API lỗi và fallback về mảng rỗng, giao diện sẽ báo sai. Thay vào đó, nên lưu trạng thái request rõ ràng. Một checklist ngắn khi làm trạng thái rỗng: - Nội dung có giải thích lý do màn hình rỗng không? - Có hành động tiếp theo phù hợp không? - Có phân biệt rỗng thật, lỗi tải dữ liệu, không có quyền và không khớp bộ lọc không? - Nút hành động có dẫn đúng đến bước tiếp theo không? - Với ứng dụng đa ngôn ngữ, nội dung có đủ ngắn để không vỡ layout không? Trạng thái rỗng thường bị xem là phần phụ, nhưng lại xuất hiện rất nhiều trong trải nghiệm thực tế. Làm tốt phần này giúp sản phẩm thân thiện hơn, giảm câu hỏi hỗ trợ và khiến người dùng mới dễ bắt đầu hơn. Một màn hình rỗng không nên là điểm cụt; nó nên là một biển chỉ dẫn rõ ràng cho bước tiếp theo.