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

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

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 ของอินพุต
  • โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความป้ายกำกับเมื่อป้ายกำกับหรืออินพุตของป้ายกำกับ โฟกัส

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

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

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

เปิดภาพแตกตำแหน่งป้ายกำกับใน บนอุปกรณ์เคลื่อนที่เพื่อดูด้วยตนเอง

ใช้ <button>

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

ตรวจสอบว่าปุ่ม "ส่ง" ระบุสิ่งที่ทำ ตัวอย่างเช่น การสร้างบัญชี หรือ Sign in ไม่ใช่ Submit หรือ Start

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

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

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

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

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

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

อย่าเพิ่มอินพุตเป็น 2 เท่า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ลองใช้หน้า 2 หน้า

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

วันที่ ภาพหน้าจอของแบบฟอร์มการลงชื่อเข้าใช้บนเว็บไซต์ Amazon: อีเมล/โทรศัพท์และรหัสผ่านใน &quot;หน้า&quot; 2 หน้าแยกกัน
การลงชื่อเข้าใช้แบบ 2 ขั้นตอน ได้แก่ อีเมลหรือโทรศัพท์ และรหัสผ่าน

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

ช่วยผู้ใช้หลีกเลี่ยงการป้อนข้อมูลซ้ำ

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

ซึ่งแบ่งเป็น 2 ส่วน ดังนี้

  1. แอตทริบิวต์ autocomplete, name, id และ type จะช่วยให้เบราว์เซอร์เข้าใจ บทบาทของอินพุตเพื่อจัดเก็บข้อมูลที่สามารถใช้สำหรับการป้อนข้อความอัตโนมัติในภายหลังได้ หากต้องการอนุญาตให้จัดเก็บข้อมูลสําหรับการป้อนข้อความอัตโนมัติ เบราว์เซอร์สมัยใหม่ยังต้องมีการป้อนข้อมูลเพื่อ มีค่า name หรือ id ที่คงที่ (ไม่ได้สร้างขึ้นแบบสุ่มในการโหลดหน้าเว็บแต่ละครั้ง หรือ การใช้งานเว็บไซต์) และอยู่ใน <แบบฟอร์ม> ด้วยปุ่ม 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 เวอร์ชัน: "เครื่องมือจัดการรหัสผ่านของ Firefox เสริมการเรียนรู้ด้วย ระบบสูตรอาหาร"

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

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

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

นี่คือการทำงานของ Safari บนเดสก์ท็อป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ซึ่งหมายความว่าคุณต้องใช้ขนาดพิกเซลที่ใหญ่ขึ้นในอุปกรณ์เคลื่อนที่: 16px ใน Chrome สำหรับ เดสก์ท็อปอ่านได้ค่อนข้างชัดเจน แต่ถึงอย่างไรก็อ่านได้ยาก 16px ข้อความใน Chrome สำหรับ Android คุณสามารถตั้งค่าขนาดพิกเซลแบบอักษรที่แตกต่างกันสำหรับ ขนาดวิวพอร์ตโดยใช้สื่อ การค้นหา 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;
แบบฟอร์มลงชื่อเข้าใช้ 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>

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

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

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

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

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

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

Analytics และ RUM

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

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

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

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

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

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

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

เรียนรู้อย่างต่อเนื่อง

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