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

ในส่วนแรก คุณได้เรียนรู้วิธีสร้างแบบฟอร์มพื้นฐาน ส่วนนี้จะพูดถึงแนวทางปฏิบัติแนะนำ ในโมดูลนี้ คุณจะได้เรียนรู้เกี่ยวกับประสบการณ์ของผู้ใช้ (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 พิกเซล นอกจากนี้ คุณควรเพิ่มระยะห่างระหว่างตัวควบคุมแบบฟอร์มให้เพียงพอโดยใช้marginพร็อพเพอร์ตี้ CSS เพื่อช่วยหลีกเลี่ยงการโต้ตอบโดยไม่ตั้งใจ

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

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

// 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 Institute: E-Commerce UX Research
• Don't Make Me Think