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

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

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

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

ป้ายกำกับ

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

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

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

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

การใช้คำของป้ายกำกับ

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

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

หรือคุณอาจอธิบายแบบนี้ว่า

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

คุณควรเลือกใช้คำอธิบายใด

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

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

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

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

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

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

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

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

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

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

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

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

ขนาดของตัวควบคุมแบบฟอร์มเริ่มต้นเล็กเกินกว่าจะใช้งานได้จริง คุณควรเพิ่มขนาดโดยใช้ 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;
  }
}

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

แสดงข้อผิดพลาดที่ใด

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

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

ตรวจสอบว่าผู้ใช้เข้าใจวิธีป้อนข้อมูลที่ถูกต้อง ผู้ใช้จะต้องป้อนอักขระอย่างน้อย 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 ด้านอีคอมเมิร์ซ
• อย่าทำให้ฉันคิด