ช่วยผู้ใช้ให้ลงชื่อสมัครใช้ ลงชื่อเข้าใช้ และจัดการรายละเอียดบัญชีได้ง่ายๆ
หากผู้ใช้จำเป็นต้องลงชื่อเข้าใช้เว็บไซต์ของคุณ การออกแบบแบบฟอร์มการสมัครที่ดีคือ ที่สำคัญ โดยเฉพาะอย่างยิ่งสำหรับผู้ที่มีการเชื่อมต่อที่สัญญาณไม่ดี หากใช้อุปกรณ์เคลื่อนที่ ความเร่งรีบ หรือความเครียด แบบฟอร์มลงชื่อสมัครใช้ที่ออกแบบมาไม่ดีจะได้รับอัตราตีกลับสูง การตีกลับแต่ละครั้งอาจหมายถึงผู้ใช้ที่หายไปและไม่พอใจ ไม่ใช่แค่การลงชื่อสมัครใช้ที่พลาดไป โอกาส
ต่อไปนี้เป็นตัวอย่างแบบฟอร์มลงชื่อสมัครใช้ที่ใช้ง่ายมากๆ ซึ่งจะแสดงแนวทางปฏิบัติแนะนำทั้งหมด
เช็กลิสต์
- โปรดหลีกเลี่ยงการลงชื่อเข้าใช้หากทำได้
- ระบุวิธีการสร้างบัญชีให้ชัดเจน
- ทำให้เห็นวิธีเข้าถึงรายละเอียดบัญชีอย่างชัดเจน
- ตัดความยุ่งเหยิงของแบบฟอร์ม
- พิจารณาระยะเวลาของเซสชัน
- ช่วยให้เครื่องมือจัดการรหัสผ่านแนะนำและจัดเก็บรหัสผ่านได้อย่างปลอดภัย
- อย่าใช้รหัสผ่านที่ถูกละเมิด
- อนุญาตให้วางรหัสผ่าน
- อย่าจัดเก็บหรือส่งรหัสผ่านเป็นข้อความธรรมดา
- อย่าบังคับให้อัปเดตรหัสผ่าน
- ช่วยให้การเปลี่ยนหรือรีเซ็ตรหัสผ่านเป็นเรื่องง่าย
- เปิดใช้การเข้าสู่ระบบแบบรวมศูนย์
- ทำให้การเปลี่ยนบัญชีเป็นเรื่องง่าย
- ลองใช้การตรวจสอบสิทธิ์แบบหลายปัจจัย
- ตรวจสอบชื่อผู้ใช้
- ทดสอบภาคสนามและในห้องทดลอง
- ทดสอบในเบราว์เซอร์ อุปกรณ์ และแพลตฟอร์มต่างๆ
โปรดหลีกเลี่ยงการลงชื่อเข้าใช้หากทำได้
ก่อนที่จะใช้แบบฟอร์มลงชื่อสมัครใช้และขอให้ผู้ใช้สร้างบัญชีในเว็บไซต์ โปรดพิจารณา หรือคุณจำเป็นต้องแก้ไข หากเป็นไปได้ คุณควรหลีกเลี่ยงการจำกัดการใช้ฟีเจอร์ที่อยู่หลังการเข้าสู่ระบบ
แบบฟอร์มการสมัครที่ดีที่สุดคือไม่มีแบบฟอร์มลงชื่อสมัครใช้
การขอให้ผู้ใช้สร้างบัญชีจะถือว่าคุณพบเจอระหว่างพวกเขาและสิ่งที่พวกเขาพยายามจะทำให้สำเร็จ คุณขอความช่วยเหลือและขอให้ผู้ใช้เชื่อถือข้อมูลส่วนตัวของคุณ รหัสผ่านและรายการทั้งหมด ของข้อมูลที่คุณจัดเก็บไว้ทำให้เกิด "หนี้สินข้อมูล" ด้านความเป็นส่วนตัวและความปลอดภัย กลายเป็นต้นทุนและความรับผิดสำหรับ เว็บไซต์ของคุณ
หากเหตุผลหลักที่คุณขอให้ผู้ใช้สร้างบัญชีคือการบันทึกข้อมูลระหว่างการนำทาง หรือ ให้พิจารณาใช้พื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์แทน สำหรับช็อปปิ้ง การบังคับให้ผู้ใช้สร้างบัญชีเพื่อซื้อสินค้าถือเป็นเหตุผลหลักสำหรับการช็อปปิ้ง การละทิ้งรถเข็นกลางคัน คุณควรกำหนดให้การชำระเงินโดยไม่ลงชื่อเข้าใช้เป็นค่าเริ่มต้น
ทำให้การลงชื่อเข้าใช้ชัดเจน
ทำให้เข้าใจวิธีการสร้างบัญชีในเว็บไซต์อย่างชัดเจน เช่น เมื่อเข้าสู่ระบบหรือลงชื่อเข้าใช้ ที่ด้านขวาบนของหน้า หลีกเลี่ยงการใช้ไอคอนที่กำกวมหรือคำที่คลุมเครือ ("ขึ้นเครื่อง!", "เข้าร่วมกับเรา") และอย่าซ่อนการเข้าสู่ระบบในเมนูการนำทาง Steve Krug ผู้เชี่ยวชาญด้านความสามารถในการใช้งานได้สรุป แนวทางนี้สำหรับความสามารถในการใช้งานเว็บไซต์: อย่า ผมคิดว่า หากคุณจำเป็นต้องทำดังนี้ โน้มน้าวคนอื่นในทีมเว็บของคุณ ใช้ Analytics เพื่อแสดงผลลัพธ์ของ ตัวเลือก
![ภาพหน้าจอ 2 ภาพของเว็บไซต์อีคอมเมิร์ซจำลองที่ดูบนโทรศัพท์ Android อันทางซ้ายมือใช้ไอคอนสำหรับลิงก์ลงชื่อเข้าใช้ที่ค่อนข้างกำกวม อันทางขวามือบอกว่า "ลงชื่อเข้าใช้"](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/two-screenshots-a-mockup-62ee25473e20e.jpg?authuser=8&hl=th)
![ภาพหน้าจอของการลงชื่อเข้าใช้สำหรับ Gmail: หนึ่งหน้า แสดงปุ่มลงชื่อเข้าใช้ เมื่อคลิกจะนำไปสู่แบบฟอร์มที่มีลิงก์ "สร้างบัญชี"](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/screenshots-sign-for-gm-52c4c6c94532a.jpg?authuser=8&hl=th)
ในหน้าต่างที่มีขนาดใหญ่กว่าที่แสดงที่นี่ Gmail จะแสดงลิงก์ลงชื่อเข้าใช้และสร้าง บัญชี
อย่าลืมลิงก์บัญชีสำหรับผู้ใช้ที่ลงชื่อสมัครใช้ผ่านผู้ให้บริการข้อมูลประจำตัว เช่น Google และบุคคลที่ลงชื่อสมัครใช้ ให้ลงชื่อสมัครใช้ด้วยอีเมลและรหัสผ่าน ขั้นตอนนี้ทำได้ง่ายๆ หากคุณเข้าถึงอีเมลของผู้ใช้ได้ จากข้อมูลโปรไฟล์จากผู้ให้บริการข้อมูลประจำตัว และตรงกับทั้ง 2 บัญชี โค้ดด้านล่างแสดง วิธีเข้าถึงข้อมูลอีเมลสำหรับผู้ใช้ Google Sign-In
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}
กำหนดวิธีเข้าถึงรายละเอียดบัญชีให้ชัดเจน
เมื่อผู้ใช้ลงชื่อเข้าใช้แล้ว ให้ระบุวิธีเข้าถึงรายละเอียดบัญชีให้ชัดเจน โดยเฉพาะอย่างยิ่ง ทำให้ วิธีเปลี่ยนหรือรีเซ็ตรหัสผ่านอย่างชัดเจน
ลดความยุ่งเหยิงของแบบฟอร์ม
ในขั้นตอนการลงชื่อสมัครใช้ สิ่งที่คุณต้องทำคือลดความซับซ้อนให้เหลือน้อยที่สุดและทำให้ผู้ใช้มีสมาธิจดจ่อ ตัดความยุ่งเหยิง เวลานี้ไม่ใช่เวลาแห่งสิ่งล่อใจและสิ่งล่อใจ
เมื่อลงชื่อสมัครใช้ ให้ขอให้ได้น้อยที่สุดเท่าที่จะเป็นไปได้ รวบรวมข้อมูลผู้ใช้เพิ่มเติม (เช่น ชื่อและที่อยู่) เฉพาะเมื่อคุณต้องการ และเมื่อผู้ใช้เห็นถึงประโยชน์ที่ชัดเจนจากการให้ข้อมูลนั้น โปรดทราบ ข้อมูลทุกรายการที่คุณสื่อสารและจัดเก็บไว้จะมีค่าใช้จ่ายและความรับผิด
อย่าเพิ่มการป้อนข้อมูลเป็น 2 ชั้น เพื่อให้แน่ใจว่าผู้ใช้จะได้รับรายละเอียดการติดต่อที่ถูกต้อง ทำให้ช้าลง การกรอกแบบฟอร์มให้สมบูรณ์และไม่สมเหตุสมผลหากมีการป้อนข้อความอัตโนมัติในช่องในแบบฟอร์ม แต่ให้ส่งการยืนยัน ให้ผู้ใช้เมื่อได้ป้อนรายละเอียดการติดต่อแล้ว จากนั้นสร้างบัญชีต่อ เมื่อตอบกลับ นี่คือรูปแบบการลงชื่อสมัครใช้ที่พบได้บ่อย ซึ่งผู้ใช้เคยชิน
คุณอาจต้องลองลงชื่อเข้าใช้โดยไม่ใช้รหัสผ่าน ด้วยการส่งรหัสให้ผู้ใช้ทุกครั้งที่ลงชื่อเข้าใช้ อุปกรณ์หรือเบราว์เซอร์ใหม่ เว็บไซต์ต่างๆ เช่น Slack และ Medium จะใช้เวอร์ชันนี้
วิธีนี้มีข้อดีเพิ่มเติมคือคุณไม่ต้องจัดการรหัสผ่านของผู้ใช้ เช่นเดียวกับการเข้าสู่ระบบแบบรวมศูนย์
พิจารณาระยะเวลาเซสชัน
ไม่ว่าคุณจะใช้แนวทางใดกับการระบุตัวตนของผู้ใช้ คุณจะต้องตัดสินใจอย่างรอบคอบเกี่ยวกับเซสชัน ความยาว: ระยะเวลาที่ผู้ใช้ยังคงเข้าสู่ระบบ และสาเหตุที่อาจทำให้ผู้ใช้ออกจากระบบ
พิจารณาว่าผู้ใช้ใช้อุปกรณ์เคลื่อนที่หรือเดสก์ท็อป และ แชร์บนเดสก์ท็อป หรืออุปกรณ์ที่แชร์
ช่วยให้ผู้จัดการรหัสผ่านแนะนำและจัดเก็บรหัสผ่านได้อย่างปลอดภัย
คุณสามารถช่วยให้เครื่องมือจัดการรหัสผ่านของบุคคลที่สามและในตัวของเบราว์เซอร์แนะนำและจัดเก็บรหัสผ่านได้ ผู้ใช้ไม่จำเป็นต้องเลือก จำ หรือพิมพ์รหัสผ่านเอง เครื่องมือจัดการรหัสผ่านทำงานได้ดีใน เบราว์เซอร์สมัยใหม่ การซิงค์ข้อมูลบัญชีในอุปกรณ์ต่างๆ ระหว่างเว็บแอปเฉพาะแพลตฟอร์ม และ สำหรับอุปกรณ์ใหม่
จึงทำให้ต้องเขียนโค้ดให้แบบฟอร์มลงชื่อสมัครใช้ให้ถูกต้อง โดยเฉพาะอย่างยิ่งการใช้
ค่าการเติมข้อความอัตโนมัติ สำหรับแบบฟอร์มลงชื่อสมัครใช้ ให้ใช้ autocomplete="new-password"
สำหรับรหัสผ่านใหม่และเพิ่ม
แก้ไขค่าการเติมข้อความอัตโนมัติอัตโนมัติให้กรอกข้อมูลในช่องฟอร์มอื่นทุกครั้งที่เป็นไปได้ เช่น autocomplete="email"
และ autocomplete="tel"
คุณยังช่วยเครื่องมือจัดการรหัสผ่านได้โดยใช้name
และid
ต่างๆ
ค่าในแบบฟอร์มลงชื่อสมัครใช้และลงชื่อเข้าใช้สำหรับตัวเอลิเมนต์ form
เอง รวมทั้ง input
, select
ทั้งหมด
และ textarea
องค์ประกอบ
นอกจากนี้ คุณควรใช้แอตทริบิวต์ type
ที่เหมาะสมด้วย
เพื่อแสดงแป้นพิมพ์ที่เหมาะสมบนอุปกรณ์เคลื่อนที่และเปิดใช้การตรวจสอบความถูกต้องพื้นฐานในตัวโดยเบราว์เซอร์
คุณดูข้อมูลเพิ่มเติมได้จากแนวทางปฏิบัติแนะนำเกี่ยวกับแบบฟอร์มการชำระเงินและที่อยู่
ตรวจสอบว่าผู้ใช้ป้อนรหัสผ่านที่ปลอดภัย
การเปิดใช้เครื่องมือจัดการรหัสผ่านเพื่อแนะนำรหัสผ่านเป็นตัวเลือกที่ดีที่สุด และคุณควรสนับสนุน ให้ผู้ใช้ยอมรับรหัสผ่านที่รัดกุมซึ่งเบราว์เซอร์และผู้จัดการเบราว์เซอร์ของบุคคลที่สามแนะนำ
แต่ผู้ใช้หลายคนต้องการป้อนรหัสผ่านของตัวเอง คุณจึงต้องใช้กฎรหัสผ่าน ความแข็งแกร่ง สถาบันมาตรฐานและเทคโนโลยีแห่งชาติของสหรัฐอเมริกา (US National Institute of Standards and Technology) อธิบายว่า วิธีหลีกเลี่ยงรหัสผ่านที่ไม่ปลอดภัย
ไม่อนุญาตรหัสผ่านที่ถูกละเมิด
ไม่ว่าคุณจะเลือกใช้กฎใดสำหรับรหัสผ่าน คุณไม่ควรอนุญาตรหัสผ่านที่เปิดเผย การละเมิดด้านความปลอดภัย
เมื่อผู้ใช้ป้อนรหัสผ่าน คุณต้องตรวจสอบว่ารหัสผ่านนั้นไม่ใช่รหัสผ่านที่เคยได้รับไปแล้ว ถูกบุกรุก เว็บไซต์ have I Been Pwned มี API สำหรับรหัสผ่าน ตรวจสอบ หรือคุณจะเรียกใช้เป็นบริการด้วยตัวเองก็ได้
นอกจากนี้ เครื่องมือจัดการรหัสผ่านของ Google ยังช่วยให้คุณตรวจสอบว่ารหัสผ่านที่มีอยู่ของคุณถูก ถูกบุกรุก
หากคุณปฏิเสธรหัสผ่านที่ผู้ใช้เสนอ ให้บอกผู้ใช้อย่างเจาะจงว่ารหัสผ่านนั้นถูกปฏิเสธเพราะอะไร แสดงปัญหาในบรรทัดและอธิบายวิธีแก้ไข ทันทีที่ผู้ใช้ป้อนค่า ไม่ใช่หลังจากที่ส่งแบบฟอร์มลงชื่อสมัครใช้และต้อง รอการตอบกลับจากเซิร์ฟเวอร์ของคุณ
ไม่ห้ามการวางรหัสผ่าน
บางเว็บไซต์ไม่อนุญาตให้วางข้อความในการป้อนรหัสผ่าน
การไม่อนุญาตให้วางรหัสผ่านทำให้ผู้ใช้รำคาญ ส่งเสริมรหัสผ่านที่จำได้ง่าย (และด้วยเหตุนี้ การบุกรุกอาจทำได้ง่ายกว่า) และตามข้อมูลที่ได้รับจากองค์กรต่างๆ เช่น ศูนย์รักษาความปลอดภัยทางไซเบอร์ อาจลดความปลอดภัยได้จริง ผู้ใช้จะเห็นเพียงว่าไม่อนุญาตให้วางหลังจากพยายามวางรหัสผ่านเท่านั้น การไม่อนุญาตให้วางรหัสผ่านจะไม่หลีกเลี่ยงช่องโหว่ในคลิปบอร์ด
อย่าจัดเก็บหรือส่งรหัสผ่านเป็นข้อความธรรมดา
อย่าลืมกรอกและแฮชรหัสผ่าน และอย่าพยายามสร้างอัลกอริทึมการแฮชของคุณเอง
อย่าบังคับให้อัปเดตรหัสผ่าน
อย่าบังคับให้ผู้ใช้อัปเดตรหัสผ่านเอง
การบังคับให้อัปเดตรหัสผ่านมีค่าใช้จ่ายสูงสำหรับแผนกไอที สร้างความรำคาญแก่ผู้ใช้ และไม่ได้มี ต่อความปลอดภัย และยังมีแนวโน้มที่จะกระตุ้นให้ผู้คน ใช้รหัสผ่านที่จำได้ง่ายที่ไม่ปลอดภัย หรือเก็บบันทึกรหัสผ่านไว้
คุณควรคอยตรวจสอบกิจกรรมในบัญชีที่ผิดปกติและเตือนผู้ใช้ แทนที่จะบังคับให้อัปเดตรหัสผ่าน หากเป็นไปได้ คุณควรตรวจสอบเพื่อหารหัสผ่านที่ถูกละเมิดเนื่องจากการละเมิดข้อมูล
นอกจากนี้ คุณควรให้สิทธิ์ผู้ใช้ในการเข้าถึงประวัติการเข้าสู่ระบบบัญชีของตน เพื่อแสดงให้ผู้ใช้ทราบว่า และเมื่อมีการเข้าสู่ระบบ
![หน้ากิจกรรมในบัญชี Gmail](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/gmail-account-activity-pa-c70c73f9a3264.jpg?authuser=8&hl=th)
ทำให้การเปลี่ยนหรือรีเซ็ตรหัสผ่านเป็นเรื่องง่าย
ทำให้ผู้ใช้ทราบได้อย่างชัดเจนว่าจะอัปเดตรหัสผ่านบัญชีที่ไหนและอย่างไร ในบางเว็บไซต์ ที่ยากลำบากอย่างไม่น่าเชื่อ
คุณควรช่วยให้ผู้ใช้รีเซ็ตรหัสผ่านของตนได้ง่ายๆ ในกรณีที่ลืมรหัสผ่าน โครงการความปลอดภัยของเว็บแอปพลิเคชันแบบเปิด (Open Web Application Security Project) มีการให้คำแนะนำโดยละเอียดเกี่ยวกับวิธีจัดการอุปกรณ์สูญหาย รหัสผ่าน
ในการรักษาความปลอดภัยให้กับธุรกิจและผู้ใช้ของคุณ สิ่งที่สำคัญอย่างยิ่งคือการช่วยผู้ใช้เปลี่ยน
ในกรณีที่พบว่ามีการละเมิด เพื่อทำให้ง่ายขึ้น คุณควรเพิ่ม
/.well-known/change-password
URL ไปยัง
ที่เปลี่ยนเส้นทางไปยังหน้าการจัดการรหัสผ่าน การดำเนินการนี้จะช่วยให้เครื่องมือจัดการรหัสผ่านไปยังส่วนต่างๆ ได้
ผู้ใช้โดยตรงไปยังหน้าเว็บที่สามารถเปลี่ยนรหัสผ่านสำหรับเว็บไซต์ของคุณ ฟีเจอร์นี้
ที่ใช้งานใน Safari, Chrome และกำลังจะมีขึ้นในเบราว์เซอร์อื่นๆ ช่วยผู้ใช้เปลี่ยนรหัสผ่าน
ได้ง่ายๆ ด้วยการเพิ่ม URL ที่รู้จักกันดีสำหรับเปลี่ยนรหัสผ่าน และอธิบายวิธี
นำสิ่งนี้ไปใช้
นอกจากนี้ คุณควรช่วยให้ผู้ใช้ลบบัญชีของตนเองได้อย่างง่ายดาย หากนั่นเป็นสิ่งที่ผู้ใช้ต้องการ
เสนอการเข้าสู่ระบบผ่านผู้ให้บริการข้อมูลประจำตัวบุคคลที่สาม
ผู้ใช้จำนวนมากต้องการลงชื่อเข้าใช้เว็บไซต์ต่างๆ โดยใช้ที่อยู่อีเมลและแบบฟอร์มลงชื่อสมัครใช้ด้วยรหัสผ่าน อย่างไรก็ตาม คุณควรอนุญาตให้ผู้ใช้เข้าสู่ระบบผ่านผู้ให้บริการข้อมูลประจำตัวบุคคลที่สามด้วย การลงชื่อเข้าใช้แบบรวมศูนย์
![หน้าเข้าสู่ระบบ WordPress](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/wordpress-login-page-b16b91f2dcb13.jpg?authuser=8&hl=th)
วิธีการนี้มีข้อดีหลายประการ สำหรับผู้ใช้ที่สร้างบัญชีโดยใช้การเข้าสู่ระบบแบบรวมศูนย์ คุณ ไม่จำเป็นต้องขอ สื่อสาร หรือจัดเก็บรหัสผ่าน
นอกจากนี้ คุณยังอาจเข้าถึงข้อมูลโปรไฟล์ที่ได้รับการยืนยันเพิ่มเติมจากการเข้าสู่ระบบแบบรวมศูนย์ เช่น เป็นที่อยู่อีเมล ซึ่งหมายความว่าผู้ใช้ไม่จำเป็นต้องป้อนข้อมูลนั้นและคุณไม่ต้องทำ ยืนยันด้วยตัวคุณเอง การเข้าสู่ระบบแบบรวมศูนย์ยังช่วยให้ผู้ใช้ ง่ายขึ้น เมื่อได้รับ อุปกรณ์ใหม่
การผสานรวม Google Sign-In กับเว็บแอป อธิบายวิธีเพิ่มการเข้าสู่ระบบแบบรวมศูนย์ลงในตัวเลือกการลงชื่อสมัครใช้ มีแพลตฟอร์มข้อมูลประจำตัวอื่นๆ อีกมากมายให้ใช้งาน
ทำให้การเปลี่ยนบัญชีเป็นเรื่องง่าย
ผู้ใช้จำนวนมากใช้อุปกรณ์ร่วมกันและสลับไปมาระหว่างบัญชีโดยใช้เบราว์เซอร์เดียวกัน การเข้าถึงของผู้ใช้ การลงชื่อเข้าใช้แบบรวมศูนย์ หรือไม่ คุณควรทำให้การเปลี่ยนบัญชีเป็นเรื่องง่าย
![Gmail กำลังแสดงการเปลี่ยนบัญชี](https://web.developers.google.cn/static/articles/sign-up-form-best-practices/image/gmail-showing-account-sw-452d02090bac6.jpg?authuser=8&hl=th)
พิจารณาใช้การตรวจสอบสิทธิ์แบบหลายปัจจัย
การตรวจสอบสิทธิ์แบบหลายปัจจัยหมายถึงการตรวจสอบว่าผู้ใช้มีการตรวจสอบสิทธิ์มากกว่า 1 วิธี ตัวอย่างเช่น เมื่อกำหนดให้ผู้ใช้ตั้งรหัสผ่าน คุณอาจบังคับใช้การยืนยัน ใช้รหัสผ่านแบบใช้ครั้งเดียวที่ส่งทางอีเมลหรือข้อความ SMS หรือแบบใช้ครั้งเดียวในแอป รหัส คีย์ความปลอดภัย หรือเซ็นเซอร์ลายนิ้วมือ แนวทางปฏิบัติแนะนำสำหรับ SMS OTP และ การเปิดใช้การตรวจสอบสิทธิ์แบบเข้มงวดด้วย WebAuthn อธิบายวิธีใช้การตรวจสอบสิทธิ์แบบหลายปัจจัย
คุณควรเสนอ (หรือบังคับใช้) การตรวจสอบสิทธิ์แบบหลายปัจจัย หากเว็บไซต์ของคุณจัดการเรื่องส่วนบุคคลหรือ ข้อมูลที่ละเอียดอ่อน
ดูแลชื่อผู้ใช้
อย่ายืนยันชื่อผู้ใช้เว้นเสียแต่ว่าคุณจำเป็นต้องมีชื่อ (หรือจนกว่าจะ) อนุญาตให้ผู้ใช้ลงชื่อสมัครใช้และลงชื่อเข้าใช้ด้วย เฉพาะอีเมล (หรือหมายเลขโทรศัพท์) และรหัสผ่าน หรือการเข้าสู่ระบบแบบรวมศูนย์ หากต้องการ อย่าบังคับให้ผู้ใช้เลือกและจำชื่อผู้ใช้
หากเว็บไซต์ของคุณจำเป็นต้องมีชื่อผู้ใช้ ต้องไม่กำหนดกฎที่ไม่สมเหตุผลไว้ และอย่าห้ามผู้ใช้ ไม่ให้อัปเดตชื่อผู้ใช้ ในแบ็กเอนด์ คุณควรสร้างรหัสที่ไม่ซ้ำกันสำหรับบัญชีผู้ใช้แต่ละราย ไม่ใช่ตัวระบุที่อิงตามข้อมูลส่วนตัว เช่น ชื่อผู้ใช้
และโปรดใช้ autocomplete="username"
สำหรับชื่อผู้ใช้
ทดสอบอุปกรณ์ แพลตฟอร์ม เบราว์เซอร์ และเวอร์ชันที่หลากหลาย
ทดสอบแบบฟอร์มลงชื่อสมัครใช้ในแพลตฟอร์มที่ผู้ใช้มักจะใช้กันมากที่สุด ฟังก์ชันการทำงานขององค์ประกอบแบบฟอร์มอาจแตกต่างกันไป และความแตกต่างของขนาดวิวพอร์ตอาจทำให้เกิดปัญหาเกี่ยวกับเลย์เอาต์ BrowserStack ช่วยให้การทดสอบฟรีสำหรับ โปรเจ็กต์โอเพนซอร์สในอุปกรณ์และเบราว์เซอร์ต่างๆ
ใช้ข้อมูลวิเคราะห์และการตรวจสอบผู้ใช้จริง
คุณต้องมีข้อมูลภาคสนามและข้อมูลห้องทดลอง เพื่อทำความเข้าใจประสบการณ์ของผู้ใช้ในแบบฟอร์มลงชื่อสมัครใช้ Analytics และการตรวจสอบผู้ใช้จริง (RUM) จะให้ข้อมูลเกี่ยวกับประสบการณ์จริงของผู้ใช้ เช่น ระยะเวลาที่ใช้ในการลงชื่อสมัครใช้หน้าลงชื่อสมัครใช้ โหลดองค์ประกอบ UI ที่ผู้ใช้โต้ตอบด้วย (หรือไม่) และระยะเวลาที่ใช้ก่อนดำเนินการ ลงชื่อสมัครใช้
- การวิเคราะห์หน้าเว็บ: การดูหน้าเว็บ อัตราตีกลับ และการออกสำหรับทุกหน้าในขั้นตอนลงชื่อสมัครใช้
- ข้อมูลวิเคราะห์การโต้ตอบ: ช่องทางเป้าหมาย และกิจกรรม ระบุจุดที่ผู้ใช้ออกจากขั้นตอนการลงชื่อสมัครใช้ และสัดส่วนของผู้ใช้ที่คลิกปุ่ม และส่วนประกอบอื่นๆ ของหน้าสมัครสมาชิก
- ประสิทธิภาพของเว็บไซต์: เมตริกที่ยึดผู้ใช้เป็นศูนย์กลาง จะบอกได้ว่าขั้นตอนการลงชื่อสมัครใช้ของคุณโหลดช้าหรือภาพไม่เสถียรหรือไม่
การเปลี่ยนแปลงเพียงเล็กน้อยสามารถสร้างความแตกต่างอย่างมากต่ออัตราการกรอกแบบฟอร์มที่ลงชื่อสมัครใช้ Analytics และ RUM ช่วยให้คุณเพิ่มประสิทธิภาพและจัดลําดับความสําคัญของการเปลี่ยนแปลงได้ รวมถึงตรวจสอบเว็บไซต์เพื่อหาปัญหา เปิดเผยต่อการทดสอบในพื้นที่
เรียนรู้อย่างต่อเนื่อง
- แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์มการลงชื่อเข้าใช้
- แนวทางปฏิบัติแนะนำเกี่ยวกับแบบฟอร์มการชำระเงินและที่อยู่
- สร้างแบบฟอร์มที่น่าทึ่ง
- แนวทางปฏิบัติแนะนำสำหรับการออกแบบแบบฟอร์มบนอุปกรณ์เคลื่อนที่
- ตัวควบคุมแบบฟอร์มที่มีความสามารถมากขึ้น
- การสร้างแบบฟอร์มที่เข้าถึงได้
- การปรับปรุงขั้นตอนการลงชื่อสมัครใช้โดยใช้ API การจัดการข้อมูลเข้าสู่ระบบ
- ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API
รูปภาพโดย @ecowarriorprincess ใน Unsplash