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

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

Sam Dutton

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

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

เช็กลิสต์

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

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

ใช้ <form>

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

ใช้ <label>

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

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

เหตุผล 2 ข้อ ได้แก่

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

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

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

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

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

ใช้ <button>

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

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

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

ช่วยให้ผู้จัดการรหัสผ่านเข้าใจว่าระบบส่งฟอร์มแล้ว โดยวิธีดำเนินการมี 2 วิธีดังนี้

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

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

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

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

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

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

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

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

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

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

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

แบบฟอร์มการลงชื่อเข้าใช้ Google ที่แสดงไอคอน &quot;แสดงรหัสผ่าน&quot;
ป้อนรหัสผ่านจากแบบฟอร์มลงชื่อเข้าใช้ Google: พร้อมไอคอนแสดงรหัสผ่านและลิงก์ลืมรหัสผ่าน

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

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

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

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

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

ภาพหน้าจอ 2 ภาพแสดงแบบฟอร์มการลงชื่อเข้าใช้ในโทรศัพท์ Android ภาพหนึ่งแสดงว่าแป้นพิมพ์ของโทรศัพท์บดบังปุ่ม &quot;ส่ง&quot; อย่างไร
ปุ่มลงชื่อเข้าใช้: บางครั้งคุณจะเห็นปุ่มนี้ บางครั้งไม่เห็น

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

ภาพหน้าจอของแบบฟอร์มลงชื่อเข้าใช้ในโทรศัพท์ Android: ปุ่มลงชื่อเข้าใช้ไม่ถูกบดบังด้วยแป้นพิมพ์ของโทรศัพท์
แป้นพิมพ์ไม่บดบังปุ่มลงชื่อเข้าใช้

ทดสอบในอุปกรณ์ที่หลากหลาย

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

ภาพหน้าจอของแบบฟอร์มลงชื่อเข้าใช้ใน iPhone 7, 8 และ 11 ใน iPhone 7 และ 8 ปุ่มลงชื่อเข้าใช้ถูกแป้นพิมพ์ของโทรศัพท์บดบัง แต่ iPhone 11 จะไม่มีปัญหานี้
ปุ่มลงชื่อเข้าใช้: บดบังใน iPhone 7 และ 8 แต่ไม่ได้บดบังใน iPhone 11

ลองใช้ 2 หน้า

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

ภาพหน้าจอของแบบฟอร์มการลงชื่อเข้าใช้บนเว็บไซต์ Amazon: อีเมล/โทรศัพท์และรหัสผ่านใน &quot;หน้า&quot; 2 หน้าแยกกัน
การลงชื่อเข้าใช้แบบ 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 ขึ้นไปบนเดสก์ท็อป ระบบจะแสดงเครื่องมือจัดการรหัสผ่าน จากนั้นจะใช้การตรวจสอบสิทธิ์ด้วยข้อมูลไบโอเมตริก (ลายนิ้วมือหรือการจดจำใบหน้า) หากมี

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

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

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

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

ป้อนข้อความอัตโนมัติ: สิ่งที่นักพัฒนาเว็บควรทราบแต่ไม่มี ข้อมูลเพิ่มเติมเกี่ยวกับการใช้ name และ autocomplete ข้อกำหนด HTML แสดงค่าที่เป็นไปได้ทั้งหมด 59 ค่า

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

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

มาดูวิธีที่ Safari ทำในเดสก์ท็อปกัน

ภาพหน้าจอของเครื่องมือจัดการรหัสผ่าน Firefox บนเดสก์ท็อป
ขั้นตอนการแนะนำรหัสผ่านใน Safari

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

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

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

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

ภาพหน้าจอเดสก์ท็อป Firefox และ Chrome สำหรับ Android แสดงข้อความแจ้ง &quot;โปรดกรอกข้อมูลในช่องนี้&quot; เพื่อหาข้อมูลที่ขาดหายไป
ข้อความแจ้งและโฟกัสสำหรับข้อมูลที่ขาดหายไปใน Firefox สำหรับเดสก์ท็อป (เวอร์ชัน 76) และ Chrome สำหรับ Android (เวอร์ชัน 83)

ออกแบบมาสำหรับนิ้วและนิ้วโป้ง

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

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

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

ภาพหน้าจอของแบบฟอร์มที่ไม่มีการจัดรูปแบบใน Chrome สำหรับเดสก์ท็อปและ Chrome สำหรับ Android

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

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

ออกแบบเพื่อนิ้วโป้ง

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

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

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

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

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

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

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

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

เพิ่มระยะขอบให้เพียงพอเพื่อให้อินพุตทํางานเป็นเป้าหมายการแตะได้ดี กล่าวคือ ให้เว้นขอบประมาณความกว้างของนิ้ว

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

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

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

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

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

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

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

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

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

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

ใช้ JavaScript ตามความจำเป็น

สลับการแสดงรหัสผ่าน

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

แบบฟอร์มลงชื่อเข้าใช้ Google ที่แสดงปุ่มเปิด/ปิด &quot;แสดงรหัสผ่าน&quot; และลิงก์ &quot;ลืมรหัสผ่าน&quot;
แบบฟอร์มลงชื่อเข้าใช้ Google: มีปุ่มเปิด/ปิดแสดงรหัสผ่านและลิงก์ลืมรหัสผ่าน

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

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.');
  }
}

ผลลัพธ์สุดท้ายมีดังนี้

ภาพหน้าจอของแบบฟอร์มการลงชื่อเข้าใช้ที่มี &quot;ปุ่ม&quot; แสดงข้อความรหัสผ่านใน Safari บน Mac และใน iPhone 7
แบบฟอร์มการลงชื่อเข้าใช้ที่มี "ปุ่ม" ข้อความ แสดงรหัสผ่าน ใน Safari บน Mac และ iPhone 7

ทำให้ป้อนรหัสผ่านได้

ใช้ 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>

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

การสร้างแบบฟอร์มที่เข้าถึงได้มีเคล็ดลับเพิ่มเติมในการทำให้แบบฟอร์มเข้าถึงได้

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

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

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

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

Analytics และ RUM

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

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

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

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

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

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

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

เรียนรู้ต่อไป

รูปภาพโดย Meghan Schiereck ใน Unsplash