UX ของปุ่มลงชื่อเข้าใช้ด้วย Google

หน้านี้อธิบายประสบการณ์ของผู้ใช้ (UX) สำหรับปุ่มลงชื่อเข้าใช้ด้วย Google

การแสดงผลปุ่ม

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

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

• มีเซสชัน Google ที่ใช้งานอยู่อย่างน้อย 1 รายการ
• มีบัญชีที่เกี่ยวข้องในเว็บไซต์ของคุณ

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

ปุ่มที่ปรับเปลี่ยนในแบบของคุณจะแสดงตามวิธีต่อไปนี้เพื่อระบุสถานะเซสชัน

• เซสชันเดียว: มีเซสชันเพียงเซสชันเดียวในฝั่งของ Google เซสชันดังกล่าวจะอนุมัติลูกค้า และมีบัญชีที่เกี่ยวข้องในเว็บไซต์ของคุณ

  

• เซสชันหลายรายการ: มีเซสชันหลายรายการในฝั่งของ Google เซสชันเหล่านั้นจะอนุมัติลูกค้า คุณจะทราบการอนุมัติได้จากลูกศรรายการข้างบัญชีที่แสดง เซสชันอย่างน้อย 1 รายการมีบัญชีที่สอดคล้องกับเว็บไซต์ของคุณ

  

• ไม่มีเซสชัน: ไม่มีเซสชันในฝั่งของ Google หรือไม่มีเซสชันใดอนุมัติไคลเอ็นต์เลย

  

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

• แอตทริบิวต์ data-type คือ icon
• แอตทริบิวต์ data-size ตั้งค่าเป็น medium หรือ small
• แอตทริบิวต์ data-width ได้รับการตั้งค่าเป็นตัวเลขที่น้อยกว่า 200 พิกเซล

ระบบจะตัดชื่อหรืออีเมลให้สั้นลงเมื่อยาวเกินกว่าที่จะแสดงในปุ่มได้

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

เส้นทางของผู้ใช้ที่สําคัญ

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

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

เส้นทางของผู้ใช้จะแตกต่างกันไปตามสถานะต่อไปนี้

• สถานะเซสชันในเว็บไซต์ของ Google ระบบใช้คําต่อไปนี้เพื่อระบุสถานะเซสชัน Google ที่แตกต่างกันเมื่อเส้นทางของผู้ใช้เริ่มต้น

  • Has-Google-session: มีเซสชันที่ใช้งานอยู่อย่างน้อย 1 เซสชันในเว็บไซต์ของ Google
  • ไม่มีเซสชัน Google: ไม่มีเซสชันที่ใช้งานอยู่ในเว็บไซต์ของ Google

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

  • ผู้ใช้ใหม่: บัญชีที่เลือกยังไม่ได้อนุมัติเว็บไซต์ของคุณ
  • ผู้ใช้ที่กลับมา: บัญชีที่เลือกได้อนุมัติเว็บไซต์ของคุณแล้วก่อนหน้านี้

Has-Google-session new user journey

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าตัวเลือกบัญชี

   

3. หน้าความยินยอมของผู้ใช้แบบใหม่

   

4. หลังจากผู้ใช้ยืนยันแล้ว ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ

ผู้ใช้สามารถเพิ่มเซสชัน Google ใหม่ได้โดยคลิกปุ่มใช้บัญชีอื่น โปรดดูเส้นทางของผู้ใช้ที่ไม่มีเซสชัน Google ด้านล่าง

เส้นทางของผู้ใช้ที่กลับมาซึ่งมีเซสชัน Google

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าตัวเลือกบัญชี

   

3. หลังจากผู้ใช้เลือกบัญชีที่กลับมา ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ

ผู้ใช้สามารถเพิ่มเซสชัน Google ใหม่ได้โดยคลิกปุ่มใช้บัญชีอื่น โปรดดูเส้นทางของผู้ใช้ "ไม่มีเซสชัน Google" ด้านล่าง

เส้นทางของผู้ใช้ใหม่ที่ไม่มีเซสชัน Google

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าแรกสำหรับเพิ่มเซสชัน Google ใหม่

   

3. หน้าเว็บที่ 2 เพื่อเพิ่มเซสชัน Google ใหม่

   

4. หน้าความยินยอมของผู้ใช้แบบใหม่

   

5. หลังจากผู้ใช้ยืนยันแล้ว ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ

เส้นทางของผู้ใช้ที่กลับมาซึ่งไม่มีเซสชัน Google

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าแรกสำหรับเพิ่มเซสชัน Google ใหม่

   

3. หน้าเว็บที่ 2 เพื่อเพิ่มเซสชัน Google ใหม่

   

4. หลังจากผู้ใช้คลิกปุ่มถัดไป ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ

เส้นทางของผู้ใช้ที่สำคัญสำหรับบัญชี Family Link

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

No-Google-session

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าแรกสำหรับเพิ่มเซสชัน Google ใหม่ของบุตรหลาน (อีเมลบัญชี Google ของบุตรหลาน)

   

3. หน้าเว็บที่ 2 สำหรับเพิ่มเซสชัน Google ใหม่ของบุตรหลาน (รหัสผ่านบัญชี Google ของบุตรหลาน)

   

4. หน้าแรกเพื่อขออนุมัติจากบัญชีหลักเพื่อเพิ่มเซสชัน Google ย่อยใหม่

   

5. หน้าเว็บที่ 2 เพื่อขออนุมัติจากผู้ปกครองเพื่อเพิ่มเซสชัน Google ใหม่ของบุตรหลาน

   

6. หน้าที่สามเพื่อขออนุมัติจากบัญชีหลักเพื่อเพิ่มเซสชัน Google ย่อยใหม่

   

7. หน้าแรกเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

8. หน้าเว็บที่ 2 เพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

9. หน้าที่สามเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

10. หน้าสุดท้ายเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

    

11. หลังจากผู้ปกครองคลิกปุ่มดำเนินการต่อ ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ

Has-Google-session

1. ปุ่มลงชื่อเข้าใช้ด้วย Google

   

2. หน้าตัวเลือกบัญชี

   

3. หน้าแรกเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

4. หน้าเว็บที่ 2 เพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

5. หน้าที่สามเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

6. หน้าสุดท้ายเพื่อขออนุมัติจากผู้ปกครองให้ลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

7. หลังจากผู้ปกครองคลิกปุ่มดำเนินการต่อ ระบบจะแชร์โทเค็นระบุตัวตนกับเว็บไซต์ของคุณ