หลักการสำคัญในการออกแบบแบบฟอร์มออนไลน์

  การออกแบบแบบฟอร์มออนไลน์กลายเป็นทักษะสำคัญในยุคปัจจุบัน เนื่องจากความสำคัญของ "ข้อมูล" ที่เป็นฐานในการสร้างสรรค์ หรือ พัฒนางานต่างๆ ซึ่งรวมถึงการสำรวจ และ วิจัยเพื่อพัฒนานวัตกรรม ต่อยอดในงาน ทำให้การออกแบบแบบฟอร์มออนไลน์เพื่อเก็บข้อมูลควรได้รับการออกแบบอย่างเป็นระบบ ส่วนหนึ่งเพื่อให้ผู้ใช้งานยินดีที่จะให้ข้อมูล การออกแแบบฟอร์มออนไลน์จึงต้องคำนึงถึงการสร้างประสบการณ์ที่ดีแก่ผู้ใช้งาน เน้นการ ลดความยุ่งยาก และสร้าง เส้นทางที่ชัดเจน ไปจนถึงขั้นตอนสุดท้ายของการกรอกข้อมูล เนื้อหาครอบคลุมตั้งแต่การ จัดวางองค์กรของฟอร์ม การเลือกใช้ ป้ายกำกับ (Label) และการจัดการ ช่องกรอกข้อมูล (Input Fields) อย่างมีประสิทธิภาพ นอกจากนี้ยังให้คำแนะนำเกี่ยวกับการระบุ ข้อความช่วยเหลือและข้อผิดพลาด รวมถึงการใช้ ระบบตรวจสอบข้อมูล (Validation) เพื่อป้องกันความสับสน
      จากการที่ได้เข้าไปเรียนรู้ในหลักสูตร "Data Design Fundamental การออกแบบข้อมูลเบื้องต้น" ใน SkillKamp ได้เห็นคำแนะนำหลักการออกแบบแบบฟอร์มออนไลน์ที่อ้างอิงจากแนวคิดในหนังสือ Web Form Design: Filling in the Blanks โดย Luke Wroblewski ทำให้เห็นถึงความน่าสนใจที่อยากนำมาถ่ายทอดโดยสรุปดังนี้ 

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

1. การลดภาระของผู้ใช้ (Minimize Pain): ออกแบบให้เรียบง่าย ถามเฉพาะสิ่งที่จำเป็น และใช้ค่าเริ่มต้นที่ชาญฉลาด
2. ความชัดเจนของเส้นทาง (Path to Completion): แสดงให้เห็นจุดเริ่มต้นและจุดจบอย่างชัดเจน พร้อมขจัดสิ่งรบกวนที่อาจนำผู้ใช้ออกนอกขั้นตอน
3. การสื่อสารที่คงเส้นคงวา (Consistent Communication): ใช้ภาษาที่เป็นธรรมชาติ มีน้ำเสียงเดียวกันทั้งองค์กร และให้ความช่วยเหลือที่เหมาะสมกับบริบท
4. ระบบตอบสนองที่มีประสิทธิภาพ (Effective Feedback): มีระบบตรวจสอบข้อมูล (Validation) และการแจ้งเตือนข้อผิดพลาด (Error handling) ที่ชัดเจน เข้าใจง่าย และนำไปสู่การแก้ไขได้ทันที

       ในเอกสารของการบรรยายได้สรุปหลักกการออกแบบฟอร์มออนไลน์ออกเป็น 12 หลักการดังนี้

แม้ว่าต้นฉนับกล่าวถึง 12 หลักการ แต่ในที่นี้ขอกระชับพื้นที่ สรุปเป็น 6 หลักกการ คือ

1. ปรัชญาและโครงสร้างพื้นฐาน (Core Philosophy & Organization)

• การลดความยากลำบาก: ผู้ใช้ต้องการเพียงผลลัพธ์หลังการกรอกฟอร์ม ดังนั้นขั้นตอนต้องเรียบง่ายที่สุด
• การสื่อสาร: ฟอร์มคือตัวแทนการสนทนาระหว่างบริษัทกับผู้บริโภค ต้องใช้น้ำเสียงที่เป็นเอกภาพ (Tone of Voice)
• การจัดลำดับเนื้อหา:
  • ถามเท่าที่จำเป็น: หลีกเลี่ยงคำถามที่ไม่เกี่ยวข้อง
  • จัดวางอย่างมีเหตุผล: เพื่อช่วยในการกวาดสายตา (Scanning)
  • ถามคำถามเสริมหลังจบฟอร์ม: ข้อมูลที่ไม่บังคับควรให้กรอกหลังจากฟอร์มหลักเสร็จสิ้นแล้ว เนื่องจากผู้ใช้มีแนวโน้มจะตอบมากกว่า

• การจัดการความคาดหวัง: ชื่อฟอร์มต้องตรงกับความคาดหวัง และควรมีหน้าเริ่มต้นระบุจำนวนหน้าหรือเวลาที่ต้องใช้
• การขจัดสิ่งรบกวน: ตัดส่วนประกอบที่ไม่เกี่ยวข้องซึ่งอาจทำให้ผู้ใช้ออกไปจากขั้นตอนการทำงาน
• การแสดงความคืบหน้า:
  • หากลำดับหน้าแน่นอน: ระบุขอบเขตขั้นตอน สถานะ และตำแหน่ง (เช่น Step 1 of 5)
  • หากลำดับไม่แน่นอน: ไม่ควรระบุความคืบหน้าอย่างละเอียด แต่ให้ใช้ตัวระบุที่บอกขั้นตอนกว้างๆ แทน
• การควบคุมทางเทคนิค: ใช้ tabindex ใน HTML เพื่อควบคุมลำดับการกดปุ่ม Tab ให้เป็นไปตามลำดับการกรอกข้อมูล

1. ด้านบน (Top Aligned): เหมาะสำหรับฟอร์มที่ต้องการความรวดเร็วในการกรอก
2. ชิดขวา (Right Aligned): ใช้เมื่อต้องการลดเวลาในการกรอกแต่มีพื้นที่แนวตั้งจำกัด
3. ชิดซ้าย (Left Aligned): เหมาะสำหรับกรณีที่ต้องการให้คนกวาดตามองเพื่อพิจารณาคำถามแต่ละข้ออย่างละเอียด
4. ในช่องกรอก (Infield): ใช้เมื่อมีข้อจำกัดเรื่องพื้นที่มาก แต่ต้องมั่นใจว่าความสัมพันธ์ของช่องยังคงชัดเจน

• ความยาวช่อง: ควรมีความยาวที่สื่อถึงสิ่งที่ต้องการ (เช่น ช่องรหัสไปรษณีย์ควรสั้นกว่าช่องที่อยู่) หากทำไม่ได้ให้รักษาความยาวให้สม่ำเสมอ
• ความจำเป็น:
  • ถ้าส่วนใหญ่ต้องตอบ: ให้ระบุเฉพาะช่องที่ไม่จำเป็น (Optional)
  • ถ้าส่วนใหญ่ไม่ต้องตอบ: ให้ระบุเฉพาะช่องที่จำเป็น (Required)
  • สัญลักษณ์ * ต้องมีคำอธิบายประกอบเสมอว่าหมายถึงอะไร

• Primary vs. Secondary Action: ต้องมีความแตกต่างกันทางทัศนียภาพอย่างชัดเจน โดยวาง Primary Action ไว้ในแนวเดียวกับช่องกรอกข้อมูล
• การย้อนกลับ: ในฟอร์มหลายหน้า Primary Action จะพาผู้ใช้ไปข้างหน้า ส่วน Secondary Action จะอนุญาตให้ย้อนกลับได้
• การลดขั้นตอน: รวมข้อตกลงการใช้งาน (Terms & Conditions) เข้ากับปุ่ม Primary Action เพื่อความราบรื่น

1. Automatic Inline: แสดงทันทีเมื่อถามในสิ่งที่ผู้ใช้อาจไม่แน่ใจ
2. User-Activated: แสดงเมื่อผู้ใช้ต้องการ (เช่น การกดไอคอน ?) เหมาะสำหรับข้อมูลที่ไม่คุ้นเคยหรือซับซ้อน
3. ส่วนช่วยเหลือแยก: ใช้เมื่อมีเนื้อหาจำนวนมากแทนการใช้แบบ Inline

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

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

• ค่าเริ่มต้นแบบฉลาด (Smart Defaults): ใส่ตัวเลือกเริ่มต้นที่สอดคล้องกับเป้าหมายของคนส่วนใหญ่ (เช่น สัญชาติไทย) เพื่อลดภาระการเลือก
• ตัวเลือกที่ปรับตามผู้ใช้: ช่วยให้ลูกค้าที่กลับมาใช้งานสามารถกรอกฟอร์มได้เร็วขึ้น
• การจัดการข้อมูลเพิ่มเติม (Additional Inputs):
• ใช้สำหรับตัวเลือกขั้นสูงที่ผู้ใช้บางกลุ่มอาจไม่ต้องการ
• วางส่วนใช้งานหลักไว้ด้านหน้า ส่วนใช้งานรองสามารถอยู่ในคลิกต่อไปได้
• ใช้คำที่ชัดเจนสำหรับลิงก์ที่จะเปิดตัวเลือกเพิ่มเติม
• หากมีตัวเลือกจำนวนมาก ให้ใช้การวางซ้อนบนหน้า (Overlays) แทนการใส่ระหว่างบรรทัดเพื่อป้องกันหน้ากระโดด