🍀 Empty state (tạm dịch là “không có gì để hiển thị”) là thời điểm khi người dùng tương tác với một sản phẩm phần mềm mà không có gì để hiển thị. Vấn đề này đôi khi bị bỏ qua trong quá trình thiết kế hệ thống phần mềm. Empty state cũng có thể xem là một edge case cần phát hiện sớm để nâng cao trải nghiệm người dùng.
Empty state rất hữu ích để phần mềm tương tác với người dùng. Nó cho người dùng biết điều gì đang xảy ra, tại sao xảy ra vấn đề này, và người dùng phải làm gì vào lúc này. Dưới đây là ví dụ của một empty state được UX designer quan tâm.
Một số loại empty state
Sau đây là bốn loại trạng thái không có dữ liệu hiển thị thường gặp:
Lần sử dụng phần mềm
Empty state xảy ra khi người dùng vừa đăng ký sử dụng sản phẩm/dịch vụ. Mọi thứ đều mới nên không có gì để hiển thị, ví dụ như vừa đăng nhập vào Dropbox sau khi đăng ký tài khoản mới.
Người dùng đã xóa mọi thứ
Khi bạn sử dụng phần mềm/dịch vụ một thời gian, ví dụ như Gmail, nhưng sau khi bạn xóa mọi thứ trong hộp thư đến thì kết quả là màn hình của bạn trống trơn.
Xảy ra lỗi
Có lỗi xảy ra trong lúc thao tác sử dụng phần mềm. Ví dụ như, đang sử dụng phần mềm, tự nhiên có sự cố (do phần mềm hoặc thiết bị của người dùng) thì cũng nên hiển thị một empty state thân thiện sẽ tốt hơn là hiển thị lỗi.
Không có kết quả/dữ liệu
Câu thông báo “Không tìm thấy dữ liệu!” hay “No record found!” sẽ không giúp ích nhiều bằng một empty state hiển thị một số hướng dẫn để người dùng hiểu lý do tại sao không có kết quả hay dữ liệu tìm kiếm. Ví dụ bạn có thể thay đổi điều kiện tìm kiếm để có kết quả nhiều hơn. Hoặc đôi khi, sau một quá trình quan sát hành vi người dùng, nhóm phát triển biết rằng người dùng hay thao tác lỗi chỗ nào đó, thì họ sẽ điều chỉnh lại thiết kế giao diện người dùng để ngăn ngừa vấn đề tương tự.
Khi thiết kế phần mềm, nếu empty state được chú ý nhiều hơn, nhà phát triển phần mềm sẽ thu được nhiều lợi ích hơn, cả về góc độ kinh doanh và trải nghiệm người dùng.
Tester nên làm gì với empty state?
Tester không làm ra empty state nhưng có thể giúp nhóm phát triển phần mềm phát hiện ra những nơi cần cải thiện, bổ sung empty state thông qua các hoạt động kiểm thử. Không cần phải đợi đến khi chương trình phần mềm hoàn thiện để bạn kiểm thử và phát hiện thiếu sót. Tester có thể xem xét (review) tài liệu thiết kế như screenflow hay mockup trên Figma để phát hiện những trường hợp empty state từ sớm, ngay cả trước khi phần mềm được lập trình.
Trong quá trình kiểm thử, tester nên tập trung vào các trường hợp ZERO để tìm lỗi liên quan đến empty state. Một số trường hợp (test case) cần lưu ý trong khi kiểm thử:
- Quan sát các màn hình chức năng ở thời điểm đầu tiên sử dụng, khi chưa có dữ liệu gì
- Khi tìm kiếm, bạn nhập điều kiện tìm kiếm để không có kết quả nào
- Xóa sạch mọi thứ đang có, như danh sách sản phẩm, giỏ hàng, v.v…
- Cùng một chức năng, phải kiểm thử empty state với nhiều vai trò khác nhau (phân quyền). Empty state có thể có nút chức năng hoặc không, tuỳ vào người dùng là ai.
- Khi thực hiện hành động ở trang empty state thì kết quả phải tự động hiển thị, thay vì người dùng phải reload (tải lại) trang.
- Empty state có thể hiển thị khác nhau giữa máy tính và trên điện thoại
Thêm ví dụ empty state
Bạn có thể tham khảo rất nhiều mẫu ví dụ về empty state ở đây, https://emptystat.es/, tuy nhiên việc thiết kế empty state cho tất cả các trường hợp có thể có trong một hệ thống phần mềm là thuộc về UX Designer, chứ không phải tester. Như đã nói ở phần trên, tester luôn cần phải kiểm thử “trường hợp không có kết quả trả về” để giúp phát hiện ra những chỗ cần cải thiện, bổ sung thiết kế empty state phù hợp để giúp sản phẩm hoàn thiện và thân thiện với người dùng hơn. Giúp người dùng có trải nghiệm tốt hơn.
Đừng quên kiểm thử trường hợp ZERO!
Nguồn: tham khảo thêm từ bài biết https://www.toptal.com/designers/ux/empty-state-ux-design
