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