Login dengan UX tombol Google

Halaman ini menjelaskan pengalaman pengguna (UX) tombol Login dengan Google.

Rendering tombol

Tombol yang dipersonalisasi menampilkan informasi profil untuk sesi Google pertama yang menyetujui situs Anda. Sesi Google yang disetujui memiliki akun yang sesuai di situs Anda yang telah login menggunakan Login dengan Google sebelumnya.

Jika tombol yang dipersonalisasi ditampilkan, pengguna akan mengetahui hal berikut:

• Ada setidaknya satu sesi Google yang aktif.
• Ada akun yang sesuai di situs Anda.

Tombol yang dipersonalisasi memberi pengguna indikasi cepat tentang status sesi, baik di sisi Google maupun di situs Anda, sebelum mereka mengklik tombol. Hal ini sangat membantu pengguna akhir yang hanya sesekali mengunjungi situs Anda. Mereka mungkin lupa apakah akun telah dibuat atau belum, dan dengan cara apa. Tombol yang dipersonalisasi akan mengingatkan mereka bahwa Login dengan Google telah digunakan sebelumnya. Dengan demikian, hal ini membantu mencegah pembuatan akun duplikat yang tidak perlu di situs Anda.

Untuk menunjukkan status sesi, tombol yang dipersonalisasi ditampilkan dengan cara berikut:

• Satu sesi: Hanya ada satu sesi di sisi Google. Sesi tersebut akan menyetujui klien, dan ada akun yang sesuai di situs Anda.

  

• Beberapa sesi: Ada beberapa sesi di sisi Google. Sesi tersebut menyetujui klien. Persetujuan ditunjukkan dengan panah daftar di samping akun yang ditampilkan. Setidaknya satu sesi memiliki akun yang sesuai di situs Anda.

  

• Tidak ada sesi: Tidak ada sesi di sisi Google, atau tidak ada sesi yang telah menyetujui klien.

  

Tombol yang dipersonalisasi akan otomatis ditampilkan jika status sesi sesuai, kecuali jika setelan tombol Anda tidak mengizinkan tombol yang dipersonalisasi ditampilkan. Tombol yang dipersonalisasi tidak ditampilkan jika:

• Atribut data-type adalah icon.
• Atribut data-size ditetapkan ke medium atau small.
• Atribut data-width ditetapkan ke angka yang lebih kecil dari 200 piksel.

Nama atau alamat email akan diawali dengan elipsis jika terlalu panjang untuk ditampilkan di dalam tombol.

Perjalanan penting pengguna

Perjalanan pengguna bervariasi berdasarkan status berikut.

• Status sesi di situs Google. Istilah berikut digunakan untuk menunjukkan status sesi Google yang berbeda saat perjalanan pengguna dimulai.

  • Has-Google-session: Ada minimal satu sesi aktif di situs Google.
  • Tidak ada sesi Google: Tidak ada sesi aktif di situs Google.

• Apakah Akun Google yang dipilih telah menyetujui situs Anda saat perjalanan pengguna dimulai. Istilah berikut digunakan untuk menunjukkan status persetujuan yang berbeda.

  • Pengguna baru: Akun yang dipilih belum menyetujui situs Anda.
  • Pengguna yang kembali: Akun yang dipilih telah menyetujui situs Anda sebelumnya.

Perjalanan pengguna baru yang memiliki sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Halaman izin pengguna baru.

   

4. Setelah pengguna mengonfirmasi, token ID akan dibagikan ke situs Anda.

Pengguna dapat menambahkan sesi Google baru dengan mengklik tombol Gunakan akun lain, lihat perjalanan pengguna Tanpa sesi Google di bawah.

Perjalanan pengguna yang kembali dengan sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Setelah pengguna memilih akun yang kembali, token ID akan dibagikan ke situs Anda.

Pengguna dapat menambahkan sesi Google baru dengan mengklik tombol Gunakan akun lain, lihat perjalanan pengguna 'Tanpa sesi Google' di bawah.

Perjalanan pengguna baru tanpa sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google baru.

   

3. Halaman kedua untuk menambahkan sesi Google baru.

   

4. Halaman izin pengguna baru.

   

5. Setelah pengguna mengonfirmasi, token ID akan dibagikan ke situs Anda.

Perjalanan pengguna yang kembali tanpa sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google baru.

   

3. Halaman kedua untuk menambahkan sesi Google baru.

   

4. Setelah pengguna mengklik tombol Next, token ID akan dibagikan ke situs Anda.

Perjalanan pengguna utama akun Family Link

Perjalanan pengguna utama umum dari bagian sebelumnya masih berlaku. Berikut adalah alur tambahan yang akan ditampilkan untuk Akun Google anak saat login.

Tanpa sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google anak baru (email Akun Google anak).

   

3. Halaman kedua untuk menambahkan sesi Google anak baru (sandi Akun Google anak).

   

4. Halaman pertama untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

5. Halaman kedua untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

6. Halaman ketiga untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

7. Halaman pertama untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

8. Halaman kedua untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

9. Halaman ketiga untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

10. Halaman terakhir untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

    

11. Setelah orang tua mengklik tombol Lanjutkan, token ID akan dibagikan ke situs Anda.

Has-Google-session

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Halaman pertama untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

4. Halaman kedua untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

5. Halaman ketiga untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

6. Halaman terakhir untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

7. Setelah orang tua mengklik tombol Lanjutkan, token ID akan dibagikan ke situs Anda.