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 sebelumnya telah login melalui Login dengan Google.

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

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

Tombol yang dipersonalisasi memberi pengguna indikasi cepat tentang status sesi, baik di pihak Google maupun di situs Anda, sebelum mereka mengklik tombol. Hal ini sangat membantu bagi pengguna akhir yang sesekali mengunjungi situs Anda. Mereka mungkin lupa apakah akun telah dibuat atau tidak, dan dengan cara apa. Tombol yang dipersonalisasi 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 menyetujui klien, dan ada akun yang sesuai di situs Anda.

• Beberapa sesi: Ada beberapa sesi di pihak 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 pihak Google, atau tidak ada sesi yang menyetujui klien.

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

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

Nama atau alamat email akan dimasukkan dalam elipsis jika terlalu panjang untuk ditampilkan dalam tombol.

Perjalanan pengguna utama

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: Terdapat setidaknya satu sesi aktif di situs Google.
  • Tanpa sesi Google: Tidak ada sesi yang aktif di situs Google.

• Apakah Akun Google yang dipilih menyetujui situs Anda saat perjalanan pengguna dimulai. Persyaratan 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 Has-Google

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Halaman izin pengguna baru.

   

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

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

Perjalanan pengguna yang kembali ke sesi Google memiliki sesi

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

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

Pengguna dapat menambahkan sesi Google baru dengan mengklik tombol Gunakan akun lain, lihat perjalanan pengguna 'Tidak ada 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 dengan situs Anda.

Perjalanan pengguna yang kembali ke sesi tanpa 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 Berikutnya, token ID akan dibagikan ke situs Anda.