ข้อมูลเบื้องต้นเกี่ยวกับการออกแบบ

ในส่วนแรก คุณได้เรียนรู้วิธีสร้างแบบฟอร์มพื้นฐานแล้ว ส่วนนี้จะพูดถึงแนวทางปฏิบัติแนะนำ ในโมดูลนี้ คุณจะได้เรียนรู้เกี่ยวกับประสบการณ์ของผู้ใช้ (UX) และเหตุผลที่อินเทอร์เฟซผู้ใช้ (UI) ที่ใช้งานได้ดีจะสร้างความแตกต่างได้อย่างมาก

การสร้างอินเทอร์เฟซที่ใช้ง่าย

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

ป้ายกำกับ

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

ใช้ป้ายกำกับสำหรับการควบคุมแบบฟอร์มทุกรายการ

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

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

ข้อความของป้ายกำกับ

สมมติว่าคุณต้องการอธิบายช่องอีเมล ซึ่งสามารถทำได้ดังนี้

<label for="email">Enter your email address</label>

หรืออธิบายดังนี้

<label for="email">Email address</label>

คุณจะเลือกคำอธิบายใด

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

ตำแหน่งป้ายกำกับ

CSS ช่วยให้คุณวางตำแหน่งป้ายกำกับที่ด้านบน ด้านล่าง ซ้าย และขวาของตัวควบคุมแบบฟอร์มได้ ควรวางไว้ที่ไหน

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

การออกแบบแบบฟอร์ม

การออกแบบฟอร์มที่ดี สามารถลดอัตราการหยุดกรอกแบบฟอร์มกลางคันได้อย่างมาก ช่วยให้ผู้ใช้ป้อนข้อมูลโดยใช้องค์ประกอบและประเภทอินพุตที่เหมาะสม มีองค์ประกอบแบบฟอร์มและประเภทอินพุตมากมายให้คุณเลือก เพื่อให้ได้ UX ที่ดีที่สุด ให้ใช้องค์ประกอบและประเภทอินพุตที่เหมาะกับกรณีการใช้งานของคุณมากที่สุด หากผู้ใช้ควรป้อนข้อความหลายบรรทัด ให้ใช้องค์ประกอบ <textarea> ใช้ <input type="checkbox"> เพื่อยอมรับข้อกำหนดและเงื่อนไขของเว็บไซต์ของคุณ

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

ช่วยผู้ใช้ไปยังส่วนต่างๆ ของแบบฟอร์ม

เลย์เอาต์ที่ฟุ่มเฟือยอาจเป็นเรื่องสนุก แต่อาจขัดขวางการกรอกแบบฟอร์มได้

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

ช่วยให้ผู้ใช้โต้ตอบกับแบบฟอร์ม

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

ขนาดเริ่มต้นของการควบคุมแบบฟอร์มเล็กเกินกว่าจะใช้งานได้จริงๆ คุณควรเพิ่มขนาดโดยใช้ padding และเปลี่ยน font-size ที่เป็นค่าเริ่มต้น

คุณกำหนดขนาดที่แตกต่างกันสำหรับอุปกรณ์ชี้ตำแหน่งที่แตกต่างกันได้ เช่น เมาส์ โดยใช้ฟีเจอร์สื่อ CSS ของ pointer

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์สื่อ CSS pointer

แสดงข้อผิดพลาดที่เกิดขึ้น

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

ทำให้ผู้ใช้เข้าใจได้ชัดเจนว่าต้องป้อนข้อมูลใด

ตรวจสอบว่าผู้ใช้เข้าใจวิธีป้อนข้อมูลที่ถูกต้อง ผู้ใช้ต้องป้อนอักขระอย่างน้อย 8 ตัวสำหรับรหัสผ่านไหม ก็บอกได้เลย

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

ทำให้ผู้ใช้ทราบว่าต้องกรอกช่องใด

<label for="name">Name (required)</label>
<input name="name" id="name" required>

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

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

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการออกแบบแบบฟอร์ม

แหล่งข้อมูล

• สร้างฟอร์มที่น่าทึ่ง
• แนวทางปฏิบัติแนะนำสำหรับการออกแบบแบบฟอร์มบนอุปกรณ์เคลื่อนที่
• สถาบัน Baymard: การวิจัย UX อีคอมเมิร์ซ
• อย่ามาทำให้ฉันคิด