หน้าจอ Empty State และ Error State
หน้าจอตอนไม่มีข้อมูลหรือเกิดข้อผิดพลาด ควรอธิบายว่าเกิดอะไรขึ้น และเสนอสิ่งที่ผู้ใช้ควรทำต่อ.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
หน้าจอ Empty State และ Error State คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
รายการไม่มีข้อมูลสักรายการ
อ่านแล้วทำอะไรต่อ
บอกผู้ใช้ว่าไม่มีรายการที่ตรงกัน แล้วเสนอทางเลือกให้ล้างตัวกรองหรือค้นหาแบบกว้างขึ้น
เห็นภาพ: ทริคนี้เป็นยังไง
- 1พาดหัวสั้นบอกตรงๆ ว่าเกิดอะไรขึ้น เช่น 'ไม่พบรายการที่ตรงกับคำค้น'
- 2เหตุผลสั้นอธิบายว่าทำไม เช่น 'ตัวกรองที่เลือกอาจแคบเกินไป' โดยไม่โทษผู้ใช้
- 3ทางต่อหนึ่งทางเสนอปุ่ม action เดียวที่ชัด เช่น 'ล้างตัวกรอง' หรือ 'ค้นหาแบบกว้างขึ้น'
- 4ทดสอบครบทุกสถานะทำให้ครบทั้งตอนไม่มีข้อมูล ค้นไม่เจอ และเกิดข้อผิดพลาด ไม่ใช่แค่หน้าปกติ
▶ เล่นอัตโนมัติ · ชี้เมาส์เพื่อหยุด · กดแถบด้านบนเพื่อข้ามขั้น
ใช้ตอนไหน?
- รายการไม่มีข้อมูลสักรายการ
- ค้นหาแล้วไม่เจอผลลัพธ์ที่ตรงเลย
- ฟอร์มหรือการเรียกใช้งาน API ทำงานล้มเหลว
ความหมาย
หน้าจอตอนไม่มีข้อมูลหรือตอนเกิดข้อผิดพลาด ถือเป็นส่วนหนึ่งของขั้นตอนการใช้งาน ไม่ใช่แค่ของประดับ มันควรช่วยอธิบายสถานการณ์ ลดความสับสน และช่วยให้ผู้ใช้ไปต่อได้
รูปแบบข้อความบอกสถานะ
ใช้สามส่วนคือ เกิดอะไรขึ้น ทำไมถึงสำคัญ และต้องทำอะไรต่อ
Title -> Short reason -> One next actionตัวอย่างการใช้
ค้นหาแล้วไม่เจอผลลัพธ์
บอกผู้ใช้ว่าไม่มีรายการที่ตรงกัน แล้วเสนอทางเลือกให้ล้างตัวกรองหรือค้นหาแบบกว้างขึ้น