<>Empty States (trạng thái trống) là màn hình hoặc khu vực không có nội dung khi người dùng truy cập lần đầu, chưa có dữ liệu hoặc dữ liệu bị xóa. Đây là cơ hội để hướng dẫn người dùng, cung cấp hành động tiếp theo hoặc làm UI bớt nhàm chán.
🚀 Mục tiêu chính:
✅ Giải thích tại sao không có dữ liệu.
✅ Cung cấp hành động tiếp theo để người dùng không bị bối rối.
✅ Giúp UI trông hấp dẫn thay vì chỉ là một khoảng trống vô nghĩa.
/Khi nào Empty States xuất hiện?
✅ Lần đầu truy cập ứng dụng → “Bạn chưa có ghi chú nào. Hãy tạo một ghi chú mới!”
✅ Không có kết quả tìm kiếm → “Không tìm thấy kết quả. Thử lại với từ khóa khác!”
✅ Dữ liệu bị xóa hoặc chưa có → “Bạn chưa có email nào trong hộp thư đến.”
✅ Lỗi tải dữ liệu → “Không thể kết nối. Vui lòng thử lại.”
🚫 Không nên để màn hình trống hoàn toàn vì có thể làm người dùng cảm thấy ứng dụng bị lỗi.
/Cấu trúc của Empty States
🔹 Tiêu đề rõ ràng: Giải thích lý do màn hình trống.
🔹 Mô tả ngắn gọn: Đưa ra thông tin bổ sung hoặc hướng dẫn.
🔹 Hình ảnh hoặc icon: Trực quan và tạo cảm giác thân thiện.
🔹 Hành động tiếp theo: Nút CTA như “Thêm mới”, “Tải lại”, “Tìm kiếm khác”.
📌 Ví dụ Empty States trong thực tế:
📋 Ứng dụng ghi chú: “Bạn chưa có ghi chú nào. Hãy tạo một ghi chú đầu tiên!”
🔍 Kết quả tìm kiếm: “Không tìm thấy kết quả nào cho ‘UI/UX’. Thử từ khóa khác?”
📥 Hộp thư trống: “Hộp thư của bạn trống. Thưởng thức ngày mới không có email nào cần xử lý!”
🚀 Ứng dụng mới cài đặt: “Chào mừng bạn! Bắt đầu tạo tài khoản để khám phá các tính năng.”
/Best Practices khi thiết kế Empty States
✅ Giải thích lý do → Người dùng cần biết vì sao họ không thấy dữ liệu.
✅ Đề xuất hành động tiếp theo → Đừng để họ bối rối mà không biết làm gì.
✅ Sử dụng hình ảnh hoặc icon nhẹ nhàng → Làm cho UI thân thiện hơn.
✅ Tạo cảm giác tích cực → Thay vì chỉ nói “Không có gì”, hãy biến Empty States thành trải nghiệm hướng dẫn.
