แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มลงชื่อเข้าใช้

ใช้ฟีเจอร์เบราว์เซอร์ข้ามแพลตฟอร์มเพื่อสร้างแบบฟอร์มลงชื่อเข้าใช้ที่ปลอดภัย เข้าถึงได้ และใช้งานง่าย

Sam Dutton

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

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

เช็กลิสต์

• ใช้องค์ประกอบ HTML ที่สื่อความหมาย: <form>, <input>, <label> และ <button>
• ติดป้ายกำกับอินพุตแต่ละรายการด้วย <label>
• ใช้แอตทริบิวต์องค์ประกอบเพื่อเข้าถึงฟีเจอร์ในตัวของเบราว์เซอร์: type, name, autocomplete, required
• กำหนดค่าที่คงที่ให้กับแอตทริบิวต์ name และ id ของอินพุต ซึ่งจะไม่เปลี่ยนแปลงระหว่างการโหลดหน้าเว็บหรือการติดตั้งใช้งานเว็บไซต์
• วางการลงชื่อเข้าใช้ในองค์ประกอบ <form> ของตัวเอง
• ตรวจสอบว่าส่งแบบฟอร์มสำเร็จ
• ใช้ autocomplete="new-password" และ id="new-password" สำหรับการป้อนรหัสผ่านในแบบฟอร์มลงชื่อสมัครใช้ และสำหรับรหัสผ่านใหม่ในแบบฟอร์มรีเซ็ตรหัสผ่าน
• ใช้ autocomplete="current-password" และ id="current-password" สำหรับการป้อนรหัสผ่านเพื่อลงชื่อเข้าใช้
• มีฟังก์ชันแสดงรหัสผ่าน
• ใช้ aria-label และ aria-describedby สำหรับการป้อนรหัสผ่าน
• อย่าป้อนข้อมูลซ้ำ
• ออกแบบแบบฟอร์มเพื่อให้แป้นพิมพ์บนอุปกรณ์เคลื่อนที่ไม่บดบังช่องป้อนข้อมูลหรือปุ่ม
• ตรวจสอบว่าแบบฟอร์มใช้งานได้ในอุปกรณ์เคลื่อนที่ โดยใช้ข้อความที่อ่านได้ และตรวจสอบว่าอินพุตและปุ่มมีขนาดใหญ่พอที่จะใช้เป็นเป้าหมายการสัมผัส
• คงการสร้างแบรนด์และสไตล์ในหน้าลงชื่อสมัครใช้และลงชื่อเข้าใช้
• ทดสอบทั้งในภาคสนามและในห้องปฏิบัติการ: สร้างการวิเคราะห์หน้าเว็บ การวิเคราะห์การโต้ตอบ และการวัดประสิทธิภาพที่มุ่งเน้นผู้ใช้เป็นหลักในขั้นตอนการลงชื่อสมัครใช้และการลงชื่อเข้าใช้
• ทดสอบในเบราว์เซอร์และอุปกรณ์ต่างๆ: ลักษณะการทำงานของแบบฟอร์มจะแตกต่างกันอย่างมากในแต่ละแพลตฟอร์ม

ใช้ HTML ที่มีความหมาย

ใช้องค์ประกอบที่สร้างขึ้นสำหรับงานนี้โดยเฉพาะ ได้แก่ <form>, <label> และ <button> ซึ่งจะเปิดใช้ฟังก์ชันการทำงานของเบราว์เซอร์ในตัว ปรับปรุงการช่วยเหลือพิเศษ และเพิ่มความหมายให้กับมาร์กอัป

ใช้ <form>

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

ใช้ <label>

หากต้องการติดป้ายกำกับอินพุต ให้ใช้ <label>

<label for="email">Email</label>
<input id="email" …>

ซึ่งอาจเกิดจาก 2 สาเหตุ ดังนี้

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

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

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

เปิดการสาธิต label-position บนอุปกรณ์เคลื่อนที่เพื่อดูด้วยตัวคุณเอง

ใช้ <button>

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

ตรวจสอบว่าปุ่มส่งระบุสิ่งที่ปุ่มทำ เช่น สร้างบัญชีหรือลงชื่อเข้าใช้ ไม่ใช่ส่งหรือเริ่ม

ตรวจสอบว่าส่งแบบฟอร์มสำเร็จ

ช่วยให้เครื่องมือจัดการรหัสผ่านเข้าใจว่ามีการส่งแบบฟอร์มแล้ว ซึ่งทำได้ 2 วิธีดังนี้

• ไปที่หน้าอื่น
• จำลองการนำทางด้วย History.pushState() หรือ History.replaceState() และนำแบบฟอร์มรหัสผ่านออก

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

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

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

อย่าป้อนข้อมูลซ้ำ

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

ใช้ประโยชน์สูงสุดจากแอตทริบิวต์องค์ประกอบ

นี่คือจุดเริ่มต้นของความมหัศจรรย์ที่แท้จริง เบราว์เซอร์มีฟีเจอร์ในตัวที่เป็นประโยชน์หลายอย่างซึ่งใช้แอตทริบิวต์องค์ประกอบอินพุต

เก็บรหัสผ่านไว้เป็นส่วนตัว แต่ให้ผู้ใช้ดูได้หากต้องการ

อินพุตรหัสผ่านควรมี type="password" เพื่อซ่อนข้อความรหัสผ่านและช่วยให้เบราว์เซอร์เข้าใจว่าอินพุตนั้นมีไว้สำหรับรหัสผ่าน (โปรดทราบว่าเบราว์เซอร์ใช้เทคนิคที่หลากหลายเพื่อทำความเข้าใจบทบาทของอินพุตและตัดสินใจว่าจะเสนอให้บันทึกรหัสผ่านหรือไม่)

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

แสดงแป้นพิมพ์ที่เหมาะสมแก่ผู้ใช้อุปกรณ์เคลื่อนที่

ใช้ <input type="email"> เพื่อให้ผู้ใช้อุปกรณ์เคลื่อนที่ใช้แป้นพิมพ์ที่เหมาะสมและเปิดใช้การตรวจสอบอีเมลพื้นฐานในตัวโดยเบราว์เซอร์… โดยไม่ต้องใช้ JavaScript

หากต้องการใช้หมายเลขโทรศัพท์แทนอีเมล <input type="tel"> จะเปิดใช้ปุ่มกดโทรศัพท์บนอุปกรณ์เคลื่อนที่ นอกจากนี้ คุณยังใช้แอตทริบิวต์ inputmode ได้ตามความจำเป็น โดย inputmode="numeric" เหมาะสำหรับหมายเลข PIN ทุกสิ่งที่คุณอยากรู้เกี่ยวกับ inputmode มีรายละเอียดเพิ่มเติม

ป้องกันไม่ให้แป้นพิมพ์บนอุปกรณ์เคลื่อนที่บดบังปุ่มลงชื่อเข้าใช้

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

หากเป็นไปได้ ให้หลีกเลี่ยงปัญหานี้โดยแสดงเฉพาะช่องป้อนอีเมล (หรือโทรศัพท์) และรหัสผ่าน รวมถึงปุ่มลงชื่อเข้าใช้ที่ด้านบนของหน้าลงชื่อเข้าใช้ วางเนื้อหาอื่นๆ ไว้ด้านล่าง

ทดสอบในอุปกรณ์ต่างๆ

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

ลองใช้ 2 หน้า

บางเว็บไซต์ (รวมถึง Amazon และ eBay) หลีกเลี่ยงปัญหานี้โดยขออีเมล (หรือโทรศัพท์) และรหัสผ่านใน 2 หน้า นอกจากนี้ แนวทางนี้ยังช่วยให้ประสบการณ์การใช้งานง่ายขึ้นด้วย โดยผู้ใช้จะได้รับมอบหมายให้ทำสิ่งต่างๆ ทีละอย่างเท่านั้น

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

ช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำ

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

ซึ่งประกอบด้วย 2 ส่วนดังนี้

1. แอตทริบิวต์ autocomplete, name, id และ type ช่วยให้เบราว์เซอร์เข้าใจบทบาทของอินพุตเพื่อจัดเก็บข้อมูลที่สามารถใช้สำหรับการป้อนข้อความอัตโนมัติในภายหลัง หากต้องการอนุญาตให้จัดเก็บข้อมูลสำหรับการป้อนข้อความอัตโนมัติ เบราว์เซอร์ที่ทันสมัยยังกำหนดให้อินพุตต้องมีค่า name หรือ id ที่เสถียร (ไม่ได้สร้างแบบสุ่มในการโหลดหน้าเว็บหรือการติดตั้งใช้งานเว็บไซต์แต่ละครั้ง) และต้องอยู่ใน <form> ที่มีปุ่ม submit

2. แอตทริบิวต์ autocomplete ช่วยให้เบราว์เซอร์ป้อนข้อมูลที่จัดเก็บไว้ลงในช่องป้อนข้อมูลโดยอัตโนมัติได้อย่างถูกต้อง

สำหรับการป้อนอีเมล ให้ใช้ autocomplete="username" เนื่องจากเครื่องมือจัดการรหัสผ่านในเบราว์เซอร์ที่ทันสมัยจะจดจำ username แม้ว่าคุณควรใช้ type="email" และอาจต้องการใช้ id="email" และ name="email"

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

ใช้ autocomplete="new-password" และ id="new-password" สำหรับรหัสผ่านใหม่

• ใช้ autocomplete="new-password" และ id="new-password" สำหรับการป้อนรหัสผ่านในแบบฟอร์มลงชื่อสมัครใช้ หรือรหัสผ่านใหม่ในแบบฟอร์มเปลี่ยนรหัสผ่าน

ใช้ autocomplete="current-password" และ id="current-password" สำหรับรหัสผ่านที่มีอยู่

• ใช้ autocomplete="current-password" และ id="current-password" สำหรับการป้อนรหัสผ่านในแบบฟอร์มลงชื่อเข้าใช้ หรือการป้อนรหัสผ่านเดิมของผู้ใช้ในแบบฟอร์มเปลี่ยนรหัสผ่าน ซึ่งจะบอกเบราว์เซอร์ว่าคุณต้องการให้ใช้รหัสผ่านปัจจุบันที่จัดเก็บไว้สำหรับเว็บไซต์นั้น

สำหรับแบบฟอร์มลงชื่อสมัครใช้ ให้ทำดังนี้

<input type="password" autocomplete="new-password" id="new-password" …>

สำหรับการลงชื่อเข้าใช้ ให้ทำดังนี้

<input type="password" autocomplete="current-password" id="current-password" …>

เครื่องมือจัดการรหัสผ่านที่รองรับ

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

Chrome บนเดสก์ท็อปแสดงคำแนะนำอีเมล แสดงเครื่องมือจัดการรหัสผ่าน และป้อนรหัสผ่านโดยอัตโนมัติ

ระบบรหัสผ่านและการป้อนข้อความอัตโนมัติของเบราว์เซอร์นั้นไม่ซับซ้อน อัลกอริทึมสำหรับการคาดเดา การจัดเก็บ และการแสดงค่าไม่ได้เป็นมาตรฐาน และแตกต่างกันไปในแต่ละแพลตฟอร์ม ตัวอย่างเช่น Hidde de Vries ได้ชี้ให้เห็นว่า "เครื่องมือจัดการรหัสผ่านของ Firefox เสริมการทำงานของฮิวริสติกด้วยระบบสูตร"

Autofill: What web devs should know, but don't มีข้อมูลเพิ่มเติมเกี่ยวกับการใช้ name และ autocomplete ข้อกำหนด HTML จะแสดงค่าที่เป็นไปได้ทั้งหมด 59 ค่า

เปิดใช้เบราว์เซอร์เพื่อแนะนำรหัสผ่านที่รัดกุม

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

วิธีดำเนินการใน Safari บนเดสก์ท็อปมีดังนี้

(คำแนะนำรหัสผ่านที่รัดกุมและไม่ซ้ำกันพร้อมใช้งานใน Safari ตั้งแต่เวอร์ชัน 12.0)

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

ช่วยป้องกันไม่ให้ผู้ใช้พลาดการป้อนข้อมูลโดยไม่ตั้งใจ

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

ออกแบบมาเพื่อการใช้งานด้วยนิ้วมือ

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

ตรวจสอบว่าอินพุตและปุ่มมีขนาดใหญ่พอ

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

ตามคำแนะนำด้านการช่วยเหลือพิเศษของ Android ขนาดเป้าหมายที่แนะนำสำหรับออบเจ็กต์บนหน้าจอสัมผัสคือ 7-10 มม. หลักเกณฑ์ด้านอินเทอร์เฟซของ Apple แนะนำให้ใช้ 48x48 พิกเซล และ W3C แนะนำให้ใช้พิกเซล CSS อย่างน้อย 44x44 พิกเซล จากหลักการดังกล่าว ให้เพิ่มระยะห่างจากขอบ (อย่างน้อย) ประมาณ 15 พิกเซลให้กับองค์ประกอบอินพุตและปุ่มสำหรับอุปกรณ์เคลื่อนที่ และประมาณ 10 พิกเซลสำหรับเดสก์ท็อป ลองใช้มือถือจริงและนิ้วมือหรือนิ้วโป้งจริงเพื่อทดสอบ คุณควรแตะอินพุตและปุ่มแต่ละรายการได้อย่างสะดวกสบาย

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

ออกแบบให้เหมาะกับการใช้นิ้วโป้ง

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

ทำให้ข้อความมีขนาดใหญ่พอ

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

เบราว์เซอร์ในแพลตฟอร์มต่างๆ จะปรับขนาดแบบอักษรแตกต่างกัน จึงเป็นเรื่องยากที่จะระบุขนาดแบบอักษรที่เหมาะสมกับทุกแพลตฟอร์ม การสำรวจเว็บไซต์ยอดนิยมอย่างรวดเร็วแสดงให้เห็นว่าขนาด 13-16 พิกเซลบนเดสก์ท็อปซึ่งตรงกับขนาดจริงนั้นเป็นขนาดขั้นต่ำที่เหมาะสมสำหรับข้อความบนอุปกรณ์เคลื่อนที่

ซึ่งหมายความว่าคุณต้องใช้ขนาดพิกเซลที่ใหญ่ขึ้นบนอุปกรณ์เคลื่อนที่: 16px ใน Chrome สำหรับเดสก์ท็อปนั้นอ่านได้ง่าย แต่แม้ว่าจะมีสายตาที่ดี ก็ยังอ่านข้อความขนาด 16px ใน Chrome สำหรับ Android ได้ยาก คุณสามารถกำหนดขนาดพิกเซลของแบบอักษรที่แตกต่างกันสำหรับวิวพอร์ตขนาดต่างๆ โดยใช้การสืบค้นสื่อ 20px เป็นขนาดที่เหมาะสมสำหรับอุปกรณ์เคลื่อนที่ แต่คุณควรทดสอบกับเพื่อนหรือเพื่อนร่วมงานที่มีสายตาเลือนราง

การตรวจสอบ Document doesn't use legible font sizes ของ Lighthouse ช่วยให้คุณตรวจหาข้อความที่เล็กเกินไปได้โดยอัตโนมัติ

เว้นระยะห่างระหว่างอินพุตให้เพียงพอ

เพิ่มระยะขอบให้เพียงพอเพื่อให้การป้อนข้อมูลทำงานได้ดีในฐานะเป้าหมายการสัมผัส กล่าวคือ ให้เว้นระยะขอบไว้ประมาณ 1 นิ้ว

ตรวจสอบว่ามองเห็นข้อมูลที่คุณป้อนได้อย่างชัดเจน

การจัดรูปแบบเส้นขอบเริ่มต้นสําหรับอินพุตทําให้มองเห็นได้ยาก ซึ่งแทบจะมองไม่เห็นในบางแพลตฟอร์ม เช่น Chrome สำหรับ Android

นอกจากระยะห่างจากขอบแล้ว ให้เพิ่มเส้นขอบด้วย โดยหลักการทั่วไปที่ดีคือใช้ #ccc หรือสีที่เข้มกว่าบนพื้นหลังสีขาว

ใช้ฟีเจอร์เบราว์เซอร์ในตัวเพื่อเตือนเกี่ยวกับค่าอินพุตที่ไม่ถูกต้อง

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

คุณสามารถใช้ตัวเลือก CSS :invalid เพื่อไฮไลต์ข้อมูลที่ไม่ถูกต้อง ใช้ :not(:placeholder-shown) เพื่อหลีกเลี่ยงการเลือกอินพุตที่ไม่มีเนื้อหา

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

ลองใช้วิธีต่างๆ ในการไฮไลต์อินพุตที่มีค่าไม่ถูกต้อง

ใช้ JavaScript เมื่อจำเป็น

เปิด/ปิดการแสดงรหัสผ่าน

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

โค้ดต่อไปนี้ใช้ปุ่มข้อความเพื่อเพิ่มฟังก์ชันแสดงรหัสผ่าน

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

ต่อไปนี้คือ CSS ที่จะทำให้ปุ่มดูเหมือนข้อความธรรมดา

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

และ JavaScript สำหรับแสดงรหัสผ่าน:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

ผลลัพธ์สุดท้ายจะเป็นดังนี้

ทำให้การป้อนรหัสผ่านเข้าถึงได้

ใช้ aria-describedby เพื่อระบุโครงร่างกฎรหัสผ่านโดยระบุรหัสขององค์ประกอบที่อธิบายข้อจำกัด โปรแกรมอ่านหน้าจอจะแสดงข้อความป้ายกำกับ ประเภทอินพุต (รหัสผ่าน) และคำอธิบาย

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

เมื่อเพิ่มฟังก์ชันแสดงรหัสผ่าน อย่าลืมใส่ aria-label เพื่อเตือนว่าระบบจะแสดงรหัสผ่าน ไม่เช่นนั้นผู้ใช้อาจเปิดเผยรหัสผ่านโดยไม่ตั้งใจ

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

คุณดูการทำงานของฟีเจอร์ ARIA ทั้ง 2 รายการได้ในการสาธิตต่อไปนี้

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

ตรวจสอบแบบเรียลไทม์และก่อนส่ง

องค์ประกอบและแอตทริบิวต์ของแบบฟอร์ม HTML มีฟีเจอร์ในตัวสำหรับการตรวจสอบพื้นฐาน แต่คุณควรใช้ JavaScript เพื่อทำการตรวจสอบที่มีประสิทธิภาพมากขึ้นขณะที่ผู้ใช้ป้อนข้อมูลและเมื่อพยายามส่งแบบฟอร์มด้วย

ขั้นตอนที่ 5 ของ Codelab แบบฟอร์มลงชื่อเข้าใช้ใช้ Constraint Validation API (ซึ่งรองรับอย่างแพร่หลาย) เพื่อเพิ่มการตรวจสอบที่กำหนดเองโดยใช้ UI ของเบราว์เซอร์ในตัวเพื่อตั้งค่าโฟกัสและแสดงข้อความแจ้ง

ดูข้อมูลเพิ่มเติม: ใช้ JavaScript เพื่อการตรวจสอบแบบเรียลไทม์ที่ซับซ้อนยิ่งขึ้น

ข้อมูลวิเคราะห์และ RUM

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

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

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

นอกจากนี้ คุณอาจต้องพิจารณาใช้การทดสอบ A/B เพื่อลองใช้วิธีการต่างๆ ในการลงชื่อสมัครใช้และการลงชื่อเข้าใช้ รวมถึงการเปิดตัวแบบทีละขั้นเพื่อตรวจสอบการเปลี่ยนแปลงกับผู้ใช้บางกลุ่มก่อนที่จะเผยแพร่การเปลี่ยนแปลงให้แก่ผู้ใช้ทั้งหมด

หลักเกณฑ์ทั่วไป

UI และ UX ที่ออกแบบมาอย่างดีจะช่วยลดการละทิ้งแบบฟอร์มลงชื่อเข้าใช้ได้ ดังนี้

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

เรียนรู้อยู่เสมอ

• สร้างแบบฟอร์มที่น่าทึ่ง
• แนวทางปฏิบัติแนะนำสำหรับการออกแบบแบบฟอร์มบนอุปกรณ์เคลื่อนที่
• การควบคุมแบบฟอร์มที่มีประสิทธิภาพมากขึ้น
• การสร้างแบบฟอร์มที่เข้าถึงได้
• การปรับปรุงขั้นตอนการลงชื่อเข้าใช้ให้มีประสิทธิภาพมากขึ้นโดยใช้ Credential Management API
• ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API