เกิดอะไรขึ้น
เรามี component แบบ tag ที่แสดง label สั้น ๆ ในไฟล์ดีไซน์ดูดีมาก พอข้อมูลจริงเข้ามา บางรายการไม่มี label และ tag พวกนั้นก็หายไปจาก layout เฉย ๆ
ไม่มีอะไรเตือนเลย component ยังอยู่ใน layers panel แต่ frame หดเหลือแทบไม่มีขนาด ทำให้สังเกตปัญหาได้ยาก
ทำไมถึงเป็นแบบนั้น
frame ที่ตั้งเป็น hug contents จะปรับขนาดตาม children ของมัน text layer ที่ไม่มีตัวอักษรเลยจะไม่มีความกว้าง frame จึงหดเหลือเท่าที่ padding และ element ขนาดคงที่ตัวอื่นรวมกัน ถ้าไม่มี padding ก็คือความกว้าง 0
Figma ไม่นับว่าเป็น error เพราะ layout ทำงานตรงตามที่นิยามไว้ ปัญหาคือเรามักออกแบบโดยใส่ข้อความตัวอย่างในทุกช่อง เคสที่ว่างเลยไม่เคยถูกมองจนกว่าข้อมูลจริงจะมาเปิดโปง
ตอนนี้เราทำอย่างไร
ถ้า component ไหนอาจได้ค่าว่าง เราตั้งความกว้างขั้นต่ำให้ frame หรือตัดสินใจอย่างตั้งใจว่าให้หายไป แล้วเขียนไว้ใน spec การซ่อน element ว่างโดยตั้งใจไม่เป็นไร ปัญหาคือตอนที่มันเกิดขึ้นโดยไม่ได้ตั้งใจ
เรายังออกแบบ empty state คู่กับแบบที่มีข้อมูล และทดสอบ variant ที่ข้อความว่าง ข้อความยาว และค่าที่ใหญ่ที่สุดเท่าที่เป็นไปได้ นักพัฒนาจะได้ทำตามพฤติกรรมที่เขียนไว้ ไม่ต้องเดา
เช็กลิสต์สั้น ๆ
- 1ลบข้อความใน instance ของ component แล้วดูว่า frame ตอบสนองอย่างไร
- 2ตั้งความกว้างขั้นต่ำหรือค่า fallback ถ้า element ต้องยังมองเห็นอยู่
- 3เพิ่ม variant แบบ empty state หรือระบุว่าให้ซ่อน
- 4ทดสอบค่าว่าง ค่ายาวมาก และค่าปกติก่อนส่งมอบ
จำไว้สั้น ๆ
ถ้า component อาจได้ค่าว่าง ให้ออกแบบหน้าตาตอนว่างไว้ก่อนที่ข้อมูลจริงจะมาทำให้เห็นเอง