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

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

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

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

เช็กลิสต์

ใช้ 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 ก็ช่วยให้ผู้ใช้สแกนได้เร็วขึ้น คุณจะได้ป้ายกำกับและอินพุตแบบเต็มความกว้าง และไม่จำเป็นต้องปรับป้ายกำกับและความกว้างของอินพุตให้พอดีกับข้อความของป้ายกำกับ

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

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

ใช้ <button>

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

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

ดูแลให้การส่งแบบฟอร์มสำเร็จ

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

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

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

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

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

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

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

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

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

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

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

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

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

ให้ผู้ใช้มือถือได้แป้นพิมพ์ที่ถูกต้อง

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

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

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

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

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

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

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

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

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

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

พิจารณาใช้หน้า 2 หน้า

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

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

ตามหลักการแล้วควรใช้วิธีนี้ด้วย <แบบฟอร์ม> เดียว ใช้ JavaScript เพื่อแสดงเฉพาะอินพุตอีเมลในตอนแรก จากนั้นซ่อนและแสดงอินพุตรหัสผ่าน หากคุณต้องบังคับให้ผู้ใช้ไปที่หน้าใหม่ระหว่างป้อนอีเมลกับรหัสผ่าน แบบฟอร์มในหน้าที่ 2 ควรมีองค์ประกอบอินพุตที่ซ่อนอยู่พร้อมค่าอีเมล เพื่อช่วยให้เครื่องมือจัดการรหัสผ่านจัดเก็บค่าที่ถูกต้องได้ ตัวอย่างโค้ดในส่วนรูปแบบของแบบฟอร์มรหัสผ่านที่ 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 Vries: "เครื่องมือจัดการรหัสผ่านของ 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 แนะนำว่ามีพิกเซล CSS อย่างน้อย 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; และลิงก์ &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
แบบฟอร์มลงชื่อเข้าใช้ที่มีข้อความ "button" แสดงรหัสผ่าน ใน 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 ฟีเจอร์ได้ในกลิทช์ต่อไปนี้

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

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

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

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

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

Analytics และ RUM

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

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

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

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

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

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

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

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

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