Login dengan UX tombol 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. Pengguna mungkin lupa apakah akun sudah dibuat atau belum, dan bagaimana caranya. 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 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.

Poin Penting: Alat developer Code Generator dapat membantu Anda mendesain tombol Login Dengan Google secara interaktif dan membuat kode.

Perjalanan penting pengguna

Poin Penting: Apakah tombol yang dipersonalisasi atau tombol teks umum ditampilkan tidak memengaruhi alur UX setelah tombol diklik. Akun yang ditampilkan di tombol yang dipersonalisasi tidak dipilih secara otomatis.

Poin Penting: Alur tombol Login dengan Google tidak mendukung login otomatis. Tindakan pengguna diperlukan untuk memilih sesi yang tepat, meskipun hanya ada satu sesi Google yang aktif.

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.
  • Tanpa 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 pada 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.