เรียนรู้ Floating Labels คืออะไร ใช้ใน form design ยังไง และทำไมจึงกลายเป็น asset ยอดนิยมใน UI/UX Design
Floating Label คืออะไร?
นี่คือ Floating Label:
เพียงดูภาพประกอบข้างต้น บางคนอาจเข้าใจทันทีว่าทำไม Floating Labels ถึงเป็น UI asset ที่ยอดเยี่ยม แต่ถ้าคุณใหม่กับ concept "Floating Labels" นี่คือเหตุผลว่าทำไมมัน powerful:
- สื่อสารข้อมูลปฏิบัติมากมายโดยไม่ใช้พื้นที่มาก <ли>Transition (animation) effect ที่ลื่นไหลทำให้ form engaging มากขึ้น
- ทำให้แบรนด์ดูทันสมัยกว่า traditional static forms ที่มีแค่ hideous blue input field outline
ดูภาพประกอบอีกครั้ง ไม่ได้เป็นแค่ input field ที่มี placeholder text กลายเป็น label ตอนพิมพ์เท่านั้น นี่คือสิ่งที่เกิดขึ้น:
- ก่อนอื่น ผู้ใช้เห็น placeholder text อธิบายวัตถุประสงค์ของ field
- ทันทีที่ผู้ใช้ click เข้า input field placeholder text จะเคลื่อนขึ้นบนและทำหน้าที่เป็น typical input label — และยังคงมองเห็นได้
- พร้อมกัน placeholder text ใหม่แทนที่ placeholder เก่า แต่ตอนนี้เป็น hint (ซึ่งเป็นบทบาทสำคัญที่สุดของ placeholder) เพื่อ guide ผู้ใช้ก่อนเริ่มพิมพ์
- เมื่อเริ่มพิมพ์ placeholder hint text จะหายไป ตามปกติ แต่ไม่เหมือน input fields หลายตัว placeholder text เดิมซึ่งตอนนี้เป็น input label ยังมองเห็นได้ หากผู้ใช้ distracted และลืมวัตถุประสงค์ของ field (เกิดขึ้นบ่อยกว่าที่คิด)
ถ้าคุณชอบ minimalist design Floating Labels เหมาะสมที่สุด
อย่างคำพูด nổi tiếng:
Perfection is not when there is nothing left to add, but when there is nothing left to take away.
นั่นคือ Floating Labels ใน nutshell
Resources
- Floating Labels Code examples บน CodePen
- หากคุณใช้ Material UI framework การ implement Floating Labels บนเว็บไซต์ง่ายมาก
ระวังว่า ขึ้นอยู่กับวิธีที่คุณ implement Floating Labels ทางเทคนิค (HTML, CSS, JavaScript) อาจเจอ browser incompatibility issues ตรวจสอบ caniuse ด้วย
