Identity

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

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

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

ช่วยให้ผู้ใช้กรอกรายละเอียดบัญชี

คุณช่วยผู้ใช้กรอกรายละเอียดบัญชีได้โดยใช้แอตทริบิวต์ autocomplete ที่เหมาะสม ใช้ autocomplete="email" สำหรับช่องอีเมลและ autocomplete="new-password" สำหรับช่องรหัสผ่านใหม่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการป้อนตัวควบคุมการป้อนข้อมูลอัตโนมัติ

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

ตรวจสอบว่าแบบฟอร์มลงชื่อสมัครใช้มีความปลอดภัย

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

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

ตรวจสอบว่าผู้ใช้ไม่ได้ใช้รหัสผ่านที่ถูกละเมิด เช่น ใช้ API จาก Have I Been Pwned เพื่อตรวจหารหัสผ่านที่ถูกละเมิด และแนะนำให้ผู้ใช้ป้อนรหัสผ่านใหม่ หรือเตือนผู้ใช้หากรหัสผ่านถูกละเมิด

ช่วยผู้ใช้ลงชื่อเข้าใช้

มาดูวิธีสร้างแบบฟอร์มลงชื่อเข้าใช้ที่จะช่วยให้ผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ได้ง่ายๆ

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

  • ขนาดเป้าหมายการแตะของปุ่มต้องมีขนาดอย่างน้อย 48 พิกเซล
  • font-size ขององค์ประกอบแบบฟอร์มมีขนาดใหญ่พอ (20px ใช้งานบนอุปกรณ์เคลื่อนที่ได้แล้ว)
  • มีพื้นที่ว่างเพียงพอ (margin) ระหว่างตัวควบคุมแบบฟอร์ม และอินพุตมีขนาดใหญ่พอ (ใช้อย่างน้อย padding: 15px ในอุปกรณ์เคลื่อนที่)

ช่วยให้ผู้ใช้กรอกอีเมลและรหัสผ่าน

ช่วยให้เบราว์เซอร์และเครื่องมือจัดการรหัสผ่านกรอกรายละเอียดบัญชีโดยอัตโนมัติ ใช้ autocomplete="email" สำหรับช่องอีเมล และ autocomplete="current-password" สำหรับช่องรหัสผ่านปัจจุบัน

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

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

ตรวจสอบว่าผู้ใช้เห็นรหัสผ่านที่ป้อน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ การใช้ <button> ที่แสดงรหัสผ่าน

ตรวจสอบว่าแบบฟอร์มสำหรับลงชื่อเข้าใช้และลงชื่อสมัครใช้นั้นใช้งานได้

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

ตรวจสอบว่าแบบฟอร์มใช้งานได้ในเบราว์เซอร์และแพลตฟอร์มต่างๆ ทดสอบแบบฟอร์มบนหน้าจอขนาดต่างๆ โดยใช้เพียงแป้นพิมพ์ หรือใช้โปรแกรมอ่านหน้าจอ เช่น VoiceOver ใน Mac หรือ NVDA ใน Windows

ช่วยผู้ใช้เปลี่ยนการตั้งค่าบัญชี

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

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

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

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

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

เพิ่มตัวเลือกในการขอรหัสผ่านใหม่และพิจารณาระบุ .well-known URL สำหรับการขอรหัสผ่านใหม่

แหล่งข้อมูล