UI Blogazine

UI Pattern

แนวไหนดีสุดสำหรับเลเบลฟอร์ม

label-orientation-featured

ผมเชื่อว่า UI designer ทุกคนคงไม่พลาดที่จะผ่านการออกแบบฟอร์มบนเว็บหรือไม่ก็บน mobile app คนทั่วไปอาจคิดว่ามันดูเหมือนไม่มีอะไรยาก ซึ่งจริงๆ แล้ว เว็บฟอร์มเป็นหนึ่งใน UI ที่ออกแบบยากที่สุด เพราะมันมีรายละเอียดเยอะมากครับ ข้อแรกที่เราต้องเจอเลยก็คือ ตำแหน่งการวางเลเบล (form label) มาดูกันว่าเราสามารถวางมันแบบไหนได้บ้างครับ

1. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงซ้าย ( Left-Aligned Label)

label-orientation-01

การจัดเรียงเลเบลชิดซ้ายของฟอร์มเว็บสรรพากร

เว็บยื่นเอกสารภาษีของกรมสรรพกรจะวางตำแหน่งของเลเบลทางด้านซ้ายของช่องกรอกข้อความ โดยให้แนวเลเบลเรียงเสมอกันทางด้านซ้าย ข้อดีของวิธีการนี้คือ จะช่วยเราประหยัดที่ในแนวตั้งของหน้าฟอร้ม

label-orientation-03

ฟอร์ม Payment Gateway ของกสิกรก็จัดเลเบลชิดซ้ายเช่นกัน

แต่มีข้อเสียคือ หากเลเบลใดมีความยาวมาก จะทำให้เกิดช่องว่างมากเกินไประหว่างเลเบลที่สั้นกับช่องกรอกข้อความ การอ่านและกรอกข้อมูลของยูสเซอร์จะลำบากมากขึ้น เพราะต้องดูให้ดีว่าเลเบลอันนี้เป็นของช่องกรอกข้อความนี้นะ แล้วยิ่งถ้าช่องเรียงติดกันอีก ก็ยิ่งทำให้การกรอกฟอร์มช้าขึ้นเท่านั้น

2. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงขวา ( Right-Aligned Label)

label-orientation-02

Lazada มีฟอร์มแบบเลเบลจัดชิดขวา

ฟอร์ม check-out ของ Lazada เลือกวางเลเบลไว้ทางด้านซ้ายของช่องกรอกข้อความเหมือนกัน แต่ที่ต่างคือการจัดเรียงเลเบลให้ตรงกันในแนวทางด้านขวา ข้อดีจะเหมือนกันแบบด้านบนคือ ประหยัดพื้นที่แนวตั้ง แต่ช่วยแก้ปัญหาช่องว่างระหว่างเลเบลกับช่องกรอกข้อความ ในกรณีที่เลเบลใดเลเบลหนึ่งมีความยาวเกินอันอื่นเยอะ ข้อเสียคือแนวสายตาในการอ่านเลเบลจะไม่เป็นเส้นตรง

3. วางเลเบลไว้ด้านบนของช่อง

label-orientation-05b

Zalora ใช้ตำแหน่งเลเบลมาตรฐานคือวางไว้ด้านบนของช่องกรอกข้อความ

ตัวอย่างฟอร์มของเว็บ Zalora ใช้การวางตำแหน่งที่ด้านบนของช่องกรอกข้อความ ข้อดีของวิธีนี้คือ ความสัมพันธ์ระหว่างเลเบลกับช่องกรอกข้อความจะชัดเจนมาก อีกทั้งไม่มีปัญหาเรื่องความยาวของเลเบลหนึ่งจะไปกระทบเลเบลอื่น แต่ข้อเสียใหญ่ก็คือ มันกินพื้นที่ในแนวตั้งมากกว่าแบบอื่นๆ

4. วางเลเบลไว้ในช่อง

label-orientation-07

Facebook เลือกใช้การวางเลเบลในช่องกรอกข้อความเพื่อประหยัดพื้นที่

ฟอร์มสมัครสมาชิกของ Facebook วางตำแหน่งของเลเบลไว้ด้านในของช่องกรอกข้อความเลย วิธีนี้จะแก้ปัญหาการใช้พื้นที่ในแนวตั้ง อีกทั้งไม่ต้องกังวลเรื่องความยาวเลเบลที่จะทำให้เกิดช่องว่างหรือแนวการอ่านที่ไม่เสมอกัน

label-orientation-09

เมื่อกรอกข้อมูลแล้ว จะไม่ทราบว่าเป็นหัวข้อไหน

แต่ข้อเสียก็คือ หากเป็นฟอร์มที่ยาวและเยอะแล้ว ให้เลิกคิดนำมาใช้ได้เลย เพราะเวลากรอกข้อมูลเสร็จ เราจะไม่รู้เลยว่าข้อมูลที่เรากรอกมันคือหัวข้ออะไร

5. วางเวเบลไว้ในช่องและย่อเล็กเมื่อกรอก

label-orientation-06

label-orientation-08

ช่องกรอกข้อความที่ผสานเอา animation เข้ามาช่วย

วิธีนี้จะใช้ animation เข้ามาเสริมด้วยการทำให้เลเบลที่อยู่ในช่องย่อเล็กลงไปอยู่ด้านบนหรือด้านล่างของช่องกรอกข้อความ เมื่อนำเมาส์ไปคลิกที่ช่องเพื่อเตรียมตัวกรอกข้อมูล ซึ่งดูเหมือนจะช่วยลดการใช้พื้นที่ในแนวตั้งไปได้ แต่หากสังเกตให้ดี ปัญหานี้ก็ยังคงอยู่ เพียงแค่ใช้ขนาดฟอนต์ของเลเบลให้เล็กลงเท่านั้น และหากมีการใช้พื้นที่ว่างระหว่างแถวน้อยเกินไป ก็จะทำให้สับสนได้ว่าเลเบลนี้เป็นของช่องกรอกข้อความไหนกันแน่ แต่เพราะมีการใช้ animation ก็จะช่วยทำให้ยูสเซอร์เดาได้ว่าตัวเองกำลังกรอกข้อมูลหัวข้อไหนอยู่

แล้วแนวไหนดีที่สุดเอ่ย?

label-orientation-10

ตำแหน่งการวางเลเบลแบบต่างๆ

จากการทดลองและประสบการณ์ของผมเองแล้วพบว่า

  • แนวที่ 3 ง่ายและรวดเร็วที่สุดในการกรอกฟอร์มสำหรับยูสเซอร์ เมื่อเทียบกับแนวที่ 1 และ 2
  • แนวที่ 2 จะดีกว่าแบบที่ 1 เพราะยูสเซอร์ใช้เวลากรอกฟอร์มให้เสร็จเร็วกว่าเท่าตัว
  • แนวที่ 4,5 แม้ยังไม่มีในผลการทดลอง แต่ผมคิดว่าน่าจะคล้ายๆ กับแนวที่ 3 หากความยาวของฟอร์มไม่มากจนเกินไป (4-5 ฟิลด์)
  • แนวที่ 4 ไม่เหมาะกับฟอร์มที่ยาว เพราะยูสเซอร์มีโอกาสลืมสูงว่าข้อมูลที่กรอกเป็นของหัวข้อใด
  • แนวที่ 5 ถ้าย่อฟอนต์เล็กเกินไปจะกลายเป็นสิ่งรบกวนแทน
  • แนวที่ 1 ดูเหมือนแย่ที่สุด แต่ถ้าแต่ละเลเบลมีความยาวพอๆ กัน ก็จะทำให้มีประสิทธิภาพพอๆ กับแนวที่ 2

สรุปแล้วถ้าไม่ติดปัญหาเรื่องพื้นที่ในแนวตั้ง แนวที่ 3 คือรูปแบบและตำแหน่งที่ดีที่สุดครับ ดังนั้นเว็บฟอร์มของสรรพากรจึงดูไม่่ดีในสายตาผมนั่นเอง

นี่เป็นแค่เรื่องเลเบลฟอร์มเท่านั้นเองนะครับ แต่กลับมีเรื่องราวให้เราคิดมากมายถึงขนาดนี้ ยังมีหัวข้ออื่นของเว็บฟอร์มอีกเยอะแยะน่าสนใจ แล้วเดี๋ยวผมจะทยอยเอามาเล่าในบทความตอนต่อๆ ไปนะครับ สัญญาๆ ^^

Tagged , , ,

About uiblogaziner

สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

View all posts by uiblogaziner →

4 thoughts on “แนวไหนดีสุดสำหรับเลเบลฟอร์ม

  1. Zin

    {แนวที่ 3 ง่ายและรวดเร็วที่สุดในการกรอกฟอร์มสำหรับยูสเซอร์ เมื่อเทียบกับแนวที่ 1 และ 2}
    อยากทราบหลักการและเหตุผลครับ

    Reply
    • uiblogaziner Post author

      เป็นเรื่องของการอ่านล้วนๆ เลยครับ

      แบบที่ 3 จะทำให้สายตาของเราเคลื่อนไหวน้อยที่สุด เมื่อต้องสร้างความสัมพันธ์ระหว่างเลเบลและช่องกรอกข้อความครับ
      แบบที่ 1 การอ่านจะแย่ลง ถ้ามีช่องว่างระหว่างเลเบลกับกล่องข้อความมาก เพราะสายตาต้องเคลื่อนไหว(ซ้าย/ขวา)มากขึ้น
      แบบที่ 2 การอ่านเลเบลในแนวตั้งจะเป็นข้อเสียทำให้เป็นอุปสรรคต่อการกรอกข้อความช่องถัดไป เพราะพอกรอกข้อมูลบรรทัดที่ 1 เสร็จ พอขึ้นบรรทัดที่ 2 ต้องทำการวางแนวสายตาของเลเบลใหม่ครับ

      หากอยากศึกษาเพิ่มเติม สามารถศึกษาได้จาก Web Form Best Practices ได้นะครับ

      ขอบคุณมากครับ ^^

      Reply
  2. taweesak nisairam

    แบบที่ 3 ง่ายต่อการใช้งาน แต่แบบที่ 4-5 อาจจะได้เรื่องความสวยงาม ผมว่าน่ะครับ

    Reply
    • uiblogaziner Post author

      @Taweesak เห็นด้วยครับ แบบเรียบง่าย (แบบที่ 3) คือ UI ที่ดีต่อยูสเซอร์
      ส่วนแบบที่ 4-5 จะมาช่วยแก้ปัญหาเรื่องพื้นที่ ขณะที่ยังคงความสวยงามอยู่ด้วยเนอะ ^^

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

บทความล่าสุด