การตรวจสอบแบบเรียลไทม์ UX ดีหรือไม่ดี

Question

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

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

.

Answer 1

อ้างจากnngroup.com :

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

Answer 2

ไม่ควรเริ่มการตรวจสอบความถูกต้องก่อนที่การป้อนข้อมูลจะเสร็จสมบูรณ์

เมื่อผู้ใช้เริ่มป้อนค่าที่ถูกต้องจะไม่มีข้อผิดพลาดปรากฏขึ้นขณะพิมพ์ ข้อมูลที่ป้อนจะถือว่าสมบูรณ์เมื่อ

• โฟกัสป้อนข้อมูลจะหายไป (การนำทางไปยังเขตอื่น) หรือ
• รูปแบบการส่ง (เช่น autosubmit เมื่อกด Enter) หรือแม้กระทั่ง
• หลังจากไม่ได้รับอินพุตเป็นระยะเวลาหนึ่ง (เช่น 3 วินาทีหลังจากเหตุการณ์อินพุตล่าสุด)

การแสดงข้อผิดพลาดในการป้อนข้อมูลทันทีในขณะที่พิมพ์จะรบกวนสมาธิมาก("ต้องมีอย่างน้อย 3 ตัวอักษร" เมื่อเริ่มพิมพ์) และไม่ค่อยมีประโยชน์

ข้อผิดพลาดในการตรวจสอบควรถูกลบออกทันที

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

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

Answer 3

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

Answer 4

ขึ้นอยู่กับประเภทของช่องป้อนข้อมูล

• สำหรับฟิลด์อีเมล:

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

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

• สำหรับฟิลด์ชื่อผู้ใช้และรหัสผ่าน:

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

เชื่อมโยงไปยังบทความ:

https://designmodo.com/ux-form-validation/

https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/

Answer 5

การตรวจสอบแบบเรียลไทม์ใช้ได้ผลหากคุณจัดการกับคำตอบที่ไม่สมบูรณ์อย่างเหมาะสม

ตัวอย่างที่ให้คือ UI ที่ไม่ดีเนื่องจาก "reara" เป็นวิธีที่ถูกต้องในการเริ่มต้นที่อยู่อีเมล ตัวอย่างที่การตรวจสอบความถูกต้องแบบเรียลไทม์สามารถปฏิเสธการตอบกลับที่ไม่สมบูรณ์คือ "reara @@" ในกรณีนี้การตรวจสอบแบบเรียลไทม์สามารถปฏิเสธได้โดยไม่ต้องรอให้เสร็จสิ้น

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

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

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

Answer 6

เป็นการดีที่จะตรวจสอบการถ่ายทอดสด อย่างไรก็ตามการตรวจสอบดังกล่าวจำเป็นต้องแยกความแตกต่างระหว่างสองกรณี:

1. อินพุตที่สามารถทำให้ถูกต้องได้โดยการเพิ่มสิ่งต่างๆในตอนท้ายและ
2. อินพุตที่ไม่สามารถทำให้ถูกต้องได้โดยการเพิ่มสิ่งต่างๆในตอนท้าย

กรณีหลังควรแสดงข้อความแสดงข้อผิดพลาดทันทีในขณะที่ก่อนหน้านี้ต้องรอจนกว่าการป้อนข้อมูลจะเสร็จสมบูรณ์

---

แต่คุณจะบอกคนอื่นได้อย่างไร?

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

• หากเครื่องยนต์ถึงจุดสิ้นสุดของ regexp (สถานะเป้าหมาย) แสดงว่ามีการแข่งขัน
• ถ้าเครื่องยนต์ถึงจุดสิ้นสุดของสตริงมีอาจจะมีการแข่งขันในภายหลัง
• ถ้าเครื่องยนต์ไม่สามารถเข้าถึงได้ก็จะไม่มีวันแข่งขันได้

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

Answer 7

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

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

สิ่งนี้ทำได้ใน Javascript

Answer 8

ฉันเขียนบทความเกี่ยวกับปัญหาเกี่ยวกับการตรวจสอบความถูกต้องสด :

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

มุ่งเน้นไปที่:

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

วิธีนี้ผู้ใช้จะไม่ค่อยเห็นข้อความแสดงข้อผิดพลาดและเมื่อทำเช่นนี้ก็จะเป็นเมื่อพวกเขาคาดว่าจะเห็นข้อความแสดงข้อผิดพลาด