COOL IT IDEAS AND STUFF
8 Tips to Design Better Text Input Controls
25-Apr-25
คัมภีร์เทพ IT
See the original english version Click here!
อีกหนึ่งองค์ประกอบสำคัญในงานออกแบบ UX นั่นคือ “ช่องกรอกข้อความ” (Text Input Controls) ที่ใช้ใน Forms ต่าง ๆ ถึงแม้จะดูเป็นรายละเอียดเล็ก ๆ แต่การออกแบบช่องกรอกข้อมูลให้ดีนั้น ส่งผลโดยตรงต่อความสะดวกในการใช้งานของผู้ใช้ ดังนั้นเรามาดู 8 เคล็ดลับการออกแบบ Text Input Controls ให้น่าใช้งานขึ้นกัน
1. หลีกเลี่ยงการใช้ Labels เป็น Placeholders ใน Input Controls
ไม่แนะนำให้ใช้ป้ายกำกับ (Labels) เป็นข้อความตัวอย่าง (Placeholders) ในช่องกรอกข้อมูล เพราะการซ่อน Label เมื่อ User คลิกภายในช่องกรอกข้อความ อาจเป็นการเพิ่มภาระในเรื่องความจำระยะสั้นของ User ได้เช่นกัน
- Labels จะช่วยให้คำแนะนำที่ชัดเจนเกี่ยวกับข้อมูลที่ต้องการ
- Users อาจลืมข้อมูลที่ต้องกรอกเมื่อ Labels หายไป (เนื่องจากถูกใช้เป็นข้อความตัวอย่าง)
- การทำให้ Labels แสดงตลอดเวลา จะช่วยเพิ่มการเข้าถึง (Accessibility) สำหรับ Users ที่มีความท้าทายในด้านความจำหรือการคิด เพื่อให้ Users เข้าใจวัตถุประสงค์ของช่องกรอกข้อมูลแต่ละช่องอยู่เสมอ เพื่อลดภาระในการคิดของ Users
2. หลีกเลี่ยงการใช้ Labels ที่ยาวเกินไป
ไม่ควรใช้ Labels ที่ยาวเกินไป Labels ควรอยู่ภายในบรรทัดเดียวและไม่ควรยาวจนต้องใช้หลายบรรทัด
- Labels ที่อยู่ภายในบรรทัดเดียว จะอ่านได้ง่ายและเร็วกว่า
- เมื่อ Label ยาวจนต้องใช้หลายบรรทัด จะทำให้อ่านและเข้าใจยากขึ้น โดยเฉพาะใน Screens ที่มีขนาดเล็กหรือในForms ที่มีความซับซ้อน
- Labels ที่ใช้หลายบรรทัด อาจทำให้ Form ดูยุ่งเหยิงและอึดอัด ซึ่งจะลดความชัดเจนโดยรวมของการออกแบบ
- การทำให้ Labels อยู่ภายในบรรทัดเดียว จะช่วยให้การออกแบบมีความสอดคล้อง สะอาดตา และจัดระเบียบได้ดีมากขึ้น
3. บ่งบอกข้อกำหนดของข้อมูลที่ต้องกรอก ให้มีความชัดเจน
ควรสื่อสารให้ชัดเจนว่า Users ต้องกรอกข้อมูลประเภทใดภายใน Form หรือช่องนั้น ๆ
- ข้อกำหนดของข้อมูลที่ต้องกรอก (เช่น ข้อจำกัดจำนวนตัวอักษร, กฎการจัดรูปแบบ หรือ Fields ที่จำเป็นต้องกรอก) จะช่วยให้ Users เข้าใจสิ่งที่คาดหวังจากพวกเขาได้อย่างชัดเจน
- สิ่งนี้จะช่วยหลีกเลี่ยงความสับสนและข้อผิดพลาด ทำให้ Form กรอกได้ง่ายและถูกต้องตั้งแต่ครั้งแรก
- การบ่งบอกข้อกำหนด จะช่วยลดโอกาสในการส่งข้อมูลที่ไม่ถูกต้องและหลีกเลี่ยงการเกิดความหงุดหงิดจาก Error Messages ในภายหลัง
- Users ไม่ต้องคาดเดาว่า ต้องกรอกข้อมูลอะไร ซึ่งทำให้ประสบการณ์การใช้งานมีความราบรื่นและเครียดน้อยลง
หมายเหตุ: ควรวางข้อกำหนดของข้อมูลที่ต้องกรอก ไว้ใกล้ Fields ที่เกี่ยวข้อง (เช่น ใต้ Label หรือภายใน Tooltip) รวมทั้งควรใช้ภาษาที่ง่ายและชัดเจนในการอธิบายข้อกำหนดเหล่านั้น
4. หลีกเลี่ยงการใช้ Placeholder Text ภายในช่องกรอกข้อมูล
ไม่ควรใช้ Placeholder Text ภายในช่องกรอกข้อมูล เพราะข้อความตัวอย่างจะหายไปทันทีเมื่อ User เริ่มพิมพ์ข้อมูล
- การที่ Users ต้องจำคำแนะนำระหว่างกรอกข้อมูลนั้นเป็นเรื่องที่น่าหงุดหงิดใจ และวิธีเดียวที่จะเรียกคืนคำแนะนำเหล่านั้นกลับมาคือ ต้องลบข้อความที่กรอกไปแล้ว
- Users อาจจะหยุดชั่วคราวและพยายามนึกถึงคำแนะนำจาก Placeholder ซึ่งเป็นการขัดจังหวะการกรอกข้อมูล
- แทนที่จะใช้ Placeholder Text ให้ใช้ Labels แทน หรือข้อความช่วยเหลือ (Help Text) ที่อยู่ภายนอกช่องกรอกข้อมูล
- วิธีนี้จะทำให้คำแนะนำยังคงแสดงอยู่ตลอดการใช้งาน ซึ่งจะช่วยให้ Users ใช้งาน Form ได้ง่ายขึ้น
5. ใช้ Input Controls ที่เหมาะสม
ใช้ช่องกรอกข้อมูล (Input Controls) ที่เหมาะสมในการออกแบบ Form สำหรับ Users
- ควรใช้ Input Control แบบหลายบรรทัด สำหรับคำตอบที่ยาวหรือเปิดกว้าง เช่น ข้อคิดเห็น คำติชม หรือรายละเอียดต่าง ๆ
- การใช้ Input Control แบบบรรทัดเดียว สำหรับคำตอบที่ยาว อาจจำกัดความสามารถของ Users ในการดูและแก้ไขข้อความ ได้อย่างมีประสิทธิภาพ
- Input Control แบบหลายบรรทัด จะแสดงให้เห็นอย่างชัดเจนว่า Users สามารถให้คำตอบที่ละเอียดหรือยาวได้
หมายเหตุ: การใช้ช่องกรอกข้อมูลที่เหมาะสม จะช่วยให้ Users เข้าใจได้ง่ายว่า พวกเขาสามารถให้ข้อมูลได้มากเพียงใดในแต่ละ Field
6. ระบุเฉพาะ Optional Fields เท่านั้น
ส่วนใหญ่แล้ว ช่องข้อมูลทั้งหมดจะเป็น Field ที่จำเป็นต้องกรอก (Mandatory) ยกเว้นบาง Field ที่ไม่บังคับให้กรอก (Optional) ดังนั้น เพื่อหลีกเลี่ยงความสับสน ควรระบุเฉพาะ Optional Labels สำหรับ Fields ที่ไม่บังคับให้กรอก
- วิธีนี้ทำให้ Form ดูสะอาดตาและไม่รก จะช่วยให้ใช้งาน Form ได้ง่ายขึ้น
- การทำเครื่องหมายเฉพาะ Optional Fields จะช่วยลดการรบกวนทางสายตา
- เมื่อมีการระบุ Optional Fields ทำให้ Users ไม่ต้องเดาว่า Fields ไหนที่ต้องกรอก ซึ่งจะช่วยให้ประสบการณ์การใช้งานมีความราบรื่นและป้องกันการส่งข้อมูลที่ไม่สมบูรณ์
7. ปรับขนาดความกว้างของ Input Control
ใช้ความกว้างของ Input Field เป็นตัวบ่งชี้ เพื่อระบุจำนวนตัวอักษรที่สามารถกรอกได้
- วิธีนี้จะช่วยให้ Users สามารถกำหนดจำนวนตัวอักษรที่สามารถกรอกได้
- เมื่อ Input Field มีขนาดที่เหมาะสม Users ก็ไม่จำเป็นต้องคาดเดาว่า สามารถป้อนข้อความได้มากเพียงใด
- Input Field ที่มีสัดส่วนเหมาะสม จะทำให้ Form ดูเป็นระเบียบมากขึ้น
หมายเหตุ: การปรับความกว้างของ Input Field จะช่วยให้ Users ทราบข้อมูลที่ชัดเจนขึ้นเกี่ยวกับปริมาณข้อมูลที่ต้องกรอก ซึ่งจะช่วยปรับปรุงประสบการณ์การใช้งาน Form
8. ใช้สัญญาณภาพและข้อความเพื่อระบุถึงข้อผิดพลาด
การใช้แค่สีเพื่อระบุถึงข้อผิดพลาด อาจดูน่าสนใจเพื่อให้การออกแบบดูเรียบง่าย แต่การใช้แค่สีเพียงอย่างเดียว ดูจะไม่เพียงพอเสียแล้ว
- ตัวเลือกที่ดีกว่าคือ การใช้ Icon และ Text Message ที่เกี่ยวข้อง เพื่ออธิบายปัญหาให้ชัดเจนมากขึ้น
- ไม่ใช่ Users ทุกราย ที่สามารถรับรู้สีได้อย่างถูกต้อง โดยเฉพาะผู้ที่มีความบกพร่องทางสีหรือปัญหาด้านการมองเห็น
- Users ต้องการคำแนะนำที่เฉพาะเจาะจงเพื่อแก้ไขข้อผิดพลาด การใช้สัญญาณภาพ เช่น Exclamation Icon (เครื่องหมายตกใจ) ร่วมกับข้อความที่อธิบาย จะทำให้ข้อผิดพลาดเด่นชัดและให้คำแนะนำในการแก้ไขอย่างชัดเจนมากขึ้น
หมายเหตุ: การใช้สีร่วมกับสัญญาณภาพและข้อความ จะช่วยให้ Error Messages มีความชัดเจน เข้าถึงได้ และมีประโยชน์
สรุป
และนี่ก็เป็น 8 เคล็ดลับการออกแบบ Text Input Controls ให้น่าใช้งานยิ่งขึ้น หวังว่าคุณจะเอาไปปรับใช้กับงานออกแบบของคุณเพื่อเพิ่มประสบการณ์การใช้งานของ Users ให้ดีมากยิ่งขึ้น
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด