UI Pattern แนวไหนดีสุดสำหรับเลเบลฟอร์ม By uiblogaziner August 20, 20153629 views ShareTweet 4 ผมเชื่อว่า UI designer ทุกคนคงไม่พลาดที่จะผ่านการออกแบบฟอร์มบนเว็บหรือไม่ก็บน mobile app คนทั่วไปอาจคิดว่ามันดูเหมือนไม่มีอะไรยาก ซึ่งจริงๆ แล้ว เว็บฟอร์มเป็นหนึ่งใน UI ที่ออกแบบยากที่สุด เพราะมันมีรายละเอียดเยอะมากครับ ข้อแรกที่เราต้องเจอเลยก็คือ ตำแหน่งการวางเลเบล (form label) มาดูกันว่าเราสามารถวางมันแบบไหนได้บ้างครับ 1. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงซ้าย ( Left-Aligned Label) การจัดเรียงเลเบลชิดซ้ายของฟอร์มเว็บสรรพากร เว็บยื่นเอกสารภาษีของกรมสรรพกรจะวางตำแหน่งของเลเบลทางด้านซ้ายของช่องกรอกข้อความ โดยให้แนวเลเบลเรียงเสมอกันทางด้านซ้าย ข้อดีของวิธีการนี้คือ จะช่วยเราประหยัดที่ในแนวตั้งของหน้าฟอร้ม ฟอร์ม Payment Gateway ของกสิกรก็จัดเลเบลชิดซ้ายเช่นกัน แต่มีข้อเสียคือ หากเลเบลใดมีความยาวมาก จะทำให้เกิดช่องว่างมากเกินไประหว่างเลเบลที่สั้นกับช่องกรอกข้อความ การอ่านและกรอกข้อมูลของยูสเซอร์จะลำบากมากขึ้น เพราะต้องดูให้ดีว่าเลเบลอันนี้เป็นของช่องกรอกข้อความนี้นะ แล้วยิ่งถ้าช่องเรียงติดกันอีก ก็ยิ่งทำให้การกรอกฟอร์มช้าขึ้นเท่านั้น 2. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงขวา ( Right-Aligned Label) Lazada มีฟอร์มแบบเลเบลจัดชิดขวา ฟอร์ม check-out ของ Lazada เลือกวางเลเบลไว้ทางด้านซ้ายของช่องกรอกข้อความเหมือนกัน แต่ที่ต่างคือการจัดเรียงเลเบลให้ตรงกันในแนวทางด้านขวา ข้อดีจะเหมือนกันแบบด้านบนคือ ประหยัดพื้นที่แนวตั้ง แต่ช่วยแก้ปัญหาช่องว่างระหว่างเลเบลกับช่องกรอกข้อความ ในกรณีที่เลเบลใดเลเบลหนึ่งมีความยาวเกินอันอื่นเยอะ ข้อเสียคือแนวสายตาในการอ่านเลเบลจะไม่เป็นเส้นตรง 3. วางเลเบลไว้ด้านบนของช่อง Zalora ใช้ตำแหน่งเลเบลมาตรฐานคือวางไว้ด้านบนของช่องกรอกข้อความ ตัวอย่างฟอร์มของเว็บ Zalora ใช้การวางตำแหน่งที่ด้านบนของช่องกรอกข้อความ ข้อดีของวิธีนี้คือ ความสัมพันธ์ระหว่างเลเบลกับช่องกรอกข้อความจะชัดเจนมาก อีกทั้งไม่มีปัญหาเรื่องความยาวของเลเบลหนึ่งจะไปกระทบเลเบลอื่น แต่ข้อเสียใหญ่ก็คือ มันกินพื้นที่ในแนวตั้งมากกว่าแบบอื่นๆ 4. วางเลเบลไว้ในช่อง Facebook เลือกใช้การวางเลเบลในช่องกรอกข้อความเพื่อประหยัดพื้นที่ ฟอร์มสมัครสมาชิกของ Facebook วางตำแหน่งของเลเบลไว้ด้านในของช่องกรอกข้อความเลย วิธีนี้จะแก้ปัญหาการใช้พื้นที่ในแนวตั้ง อีกทั้งไม่ต้องกังวลเรื่องความยาวเลเบลที่จะทำให้เกิดช่องว่างหรือแนวการอ่านที่ไม่เสมอกัน เมื่อกรอกข้อมูลแล้ว จะไม่ทราบว่าเป็นหัวข้อไหน แต่ข้อเสียก็คือ หากเป็นฟอร์มที่ยาวและเยอะแล้ว ให้เลิกคิดนำมาใช้ได้เลย เพราะเวลากรอกข้อมูลเสร็จ เราจะไม่รู้เลยว่าข้อมูลที่เรากรอกมันคือหัวข้ออะไร 5. วางเวเบลไว้ในช่องและย่อเล็กเมื่อกรอก ช่องกรอกข้อความที่ผสานเอา animation เข้ามาช่วย วิธีนี้จะใช้ animation เข้ามาเสริมด้วยการทำให้เลเบลที่อยู่ในช่องย่อเล็กลงไปอยู่ด้านบนหรือด้านล่างของช่องกรอกข้อความ เมื่อนำเมาส์ไปคลิกที่ช่องเพื่อเตรียมตัวกรอกข้อมูล ซึ่งดูเหมือนจะช่วยลดการใช้พื้นที่ในแนวตั้งไปได้ แต่หากสังเกตให้ดี ปัญหานี้ก็ยังคงอยู่ เพียงแค่ใช้ขนาดฟอนต์ของเลเบลให้เล็กลงเท่านั้น และหากมีการใช้พื้นที่ว่างระหว่างแถวน้อยเกินไป ก็จะทำให้สับสนได้ว่าเลเบลนี้เป็นของช่องกรอกข้อความไหนกันแน่ แต่เพราะมีการใช้ animation ก็จะช่วยทำให้ยูสเซอร์เดาได้ว่าตัวเองกำลังกรอกข้อมูลหัวข้อไหนอยู่ แล้วแนวไหนดีที่สุดเอ่ย? ตำแหน่งการวางเลเบลแบบต่างๆ จากการทดลองและประสบการณ์ของผมเองแล้วพบว่า แนวที่ 3 ง่ายและรวดเร็วที่สุดในการกรอกฟอร์มสำหรับยูสเซอร์ เมื่อเทียบกับแนวที่ 1 และ 2 แนวที่ 2 จะดีกว่าแบบที่ 1 เพราะยูสเซอร์ใช้เวลากรอกฟอร์มให้เสร็จเร็วกว่าเท่าตัว แนวที่ 4,5 แม้ยังไม่มีในผลการทดลอง แต่ผมคิดว่าน่าจะคล้ายๆ กับแนวที่ 3 หากความยาวของฟอร์มไม่มากจนเกินไป (4-5 ฟิลด์) แนวที่ 4 ไม่เหมาะกับฟอร์มที่ยาว เพราะยูสเซอร์มีโอกาสลืมสูงว่าข้อมูลที่กรอกเป็นของหัวข้อใด แนวที่ 5 ถ้าย่อฟอนต์เล็กเกินไปจะกลายเป็นสิ่งรบกวนแทน แนวที่ 1 ดูเหมือนแย่ที่สุด แต่ถ้าแต่ละเลเบลมีความยาวพอๆ กัน ก็จะทำให้มีประสิทธิภาพพอๆ กับแนวที่ 2 สรุปแล้วถ้าไม่ติดปัญหาเรื่องพื้นที่ในแนวตั้ง แนวที่ 3 คือรูปแบบและตำแหน่งที่ดีที่สุดครับ ดังนั้นเว็บฟอร์มของสรรพากรจึงดูไม่่ดีในสายตาผมนั่นเอง นี่เป็นแค่เรื่องเลเบลฟอร์มเท่านั้นเองนะครับ แต่กลับมีเรื่องราวให้เราคิดมากมายถึงขนาดนี้ ยังมีหัวข้ออื่นของเว็บฟอร์มอีกเยอะแยะน่าสนใจ แล้วเดี๋ยวผมจะทยอยเอามาเล่าในบทความตอนต่อๆ ไปนะครับ สัญญาๆ ^^