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