Form UX
จัดฟอร์มให้กรอกง่าย ลดจำนวนช่อง จัดกลุ่ม และบอก error ตรงจุด
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Form UX คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ฟอร์มยาว ผู้ใช้กรอกไม่จบหรือกรอกผิดบ่อย
อ่านแล้วทำอะไรต่อ
แบ่งเป็นกลุ่ม 'ผู้ขอ' และ 'รายการที่ขอ' มี label เหนือช่อง ถ้ากรอกเบอร์ผิดรูปแบบ ข้อความเตือนขึ้นใต้ช่องเบอร์ทันทีพร้อมตัวอย่างที่ถูก
เห็นภาพ: ทริคนี้เป็นยังไง
ช่องกรอกมีแต่ข้อความจางในกล่อง (placeholder) เป็นชื่อช่อง พอเริ่มพิมพ์ ข้อความนั้นหายไป ผู้ใช้จำไม่ได้ว่าช่องนี้กรอกอะไร และเมื่อกรอกผิด ข้อความ error ทั้งหมดไปรวมกองอยู่บนสุดของฟอร์ม ต้องไล่หาเองว่าช่องไหนคือช่องที่ผิด
ป้ายชื่อช่อง (label) อยู่เหนือช่องตลอดเวลา มองเห็นได้แม้กำลังพิมพ์ ช่องที่เกี่ยวกันถูกจัดเป็นกลุ่ม 'ผู้ขอ' กับ 'รายการที่ขอ' และเมื่อกรอกเบอร์ผิดรูปแบบ ข้อความเตือนขึ้นใต้ช่องนั้นทันทีพร้อมตัวอย่างที่ถูก ผู้ใช้แก้ได้ตรงจุดโดยไม่ต้องไล่หา
ใช้ตอนไหน?
- ฟอร์มยาว ผู้ใช้กรอกไม่จบหรือกรอกผิดบ่อย
- error แสดงรวมด้านบน ผู้ใช้หาไม่เจอว่าช่องไหนผิด
- มีช่องกรอกที่ไม่จำเป็น ทำให้คนเลิกกรอกกลางทาง
ความหมาย
UX ของฟอร์ม คือการออกแบบหน้ากรอกข้อมูลให้ผู้ใช้กรอกเสร็จได้เร็วและผิดน้อย หลักสำคัญคือถามเฉพาะที่จำเป็น จัดกลุ่มช่องที่เกี่ยวกัน ใช้ป้ายกำกับ (label) ที่ชัด และแสดงข้อความ error ติดกับช่องที่ผิด ไม่ใช่รวมไว้ด้านบนหน้า
หลักจัดฟอร์ม
วาง label ไว้เหนือช่อง (อ่านง่ายบนมือถือ) จัดกลุ่มช่องที่เกี่ยวกัน บอกช่องบังคับให้ชัด ตรวจ error ตอนผู้ใช้ออกจากช่อง (on blur) และแสดงข้อความติดกับช่องนั้น
label อยู่เหนือ input (ไม่ใช่ placeholder แทน label)
จัดกลุ่ม: ข้อมูลผู้ติดต่อ / รายละเอียดคำขอ
บังคับ = มี * + ตรวจตอน blur
error: ติดใต้ช่อง + บอกวิธีแก้ตัวอย่างการใช้
ฟอร์มขอเบิกอุปกรณ์
แบ่งเป็นกลุ่ม 'ผู้ขอ' และ 'รายการที่ขอ' มี label เหนือช่อง ถ้ากรอกเบอร์ผิดรูปแบบ ข้อความเตือนขึ้นใต้ช่องเบอร์ทันทีพร้อมตัวอย่างที่ถูก