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