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 menggunakan Login dengan Google.

Jika tombol yang dipersonalisasi ditampilkan, pengguna 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 tersebut. Hal ini sangat membantu terutama bagi pengguna akhir yang hanya mengunjungi situs Anda sesekali. Mereka mungkin lupa apakah akun telah dibuat atau tidak, dan bagaimana caranya. 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 pihak Google. Sesi tersebut akan 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 belum ada sesi yang menyetujui klien.

  

Tombol yang dipersonalisasi akan otomatis ditampilkan saat status sesi cocok, 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 disetel ke medium atau small.
• Atribut data-width ditetapkan ke angka yang lebih kecil dari 200 piksel.

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

Poin Penting: Alat developer Pembuat Kode dapat membantu Anda mendesain tombol Login dengan Google secara interaktif dan membuat kode.

Perjalanan utama pengguna

Poin Penting: Apakah tombol yang dipersonalisasi atau tampilan tombol teks umum 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.

  • Sesi Has-Google: Setidaknya ada 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 dengan 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 'Tidak ada sesi Google', di bawah ini.

Perjalanan pengguna baru tanpa sesi Google

1. Tombol Login dengan Google.

   

2. Halaman pertama yang akan ditambahkan 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 yang akan ditambahkan sesi Google baru.

   

3. Halaman kedua untuk menambahkan sesi Google baru.

   

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