Mengaktifkan login cepat: Pola UX mode UI langsung

Eiji Kitamura

Dipublikasikan: 30 September 2026, Terakhir diperbarui: 7 Oktober 2026

Ringkasan

Mode UI langsung mengatasi hilangnya konteks dan penghentian pengguna yang disebabkan oleh navigasi ke halaman login khusus. Fitur ini memungkinkan login cepat, sehingga pengguna dapat menyelesaikan login menggunakan kunci sandi atau sandi tersimpan langsung di halaman yang sedang mereka lihat atau kerjakan tanpa perlu keluar dari konteksnya.

Tidak seperti UI Bersyarat, yang menampilkan saran pengisian otomatis saat pengguna memfokuskan kolom input teks, mode UI Langsung segera memanggil dialog autentikasi browser sebagai respons terhadap klik tombol atau link (Saat ini, uiMode hanya menerima "immediate", tetapi dapat berubah di masa mendatang).

Tiga karakteristik inti membuat mode UI Langsung sangat efektif untuk proses login cepat:

  • Melewati kode QR lintas perangkat: Jika kunci sandi yang tersedia langsung atau sandi tersimpan ada di perangkat, browser akan langsung menampilkan dialog autentikasi. Jika tidak ada, aplikasi akan langsung keluar tanpa menampilkan layar kode QR lintas perangkat untuk smartphone. Hal ini memungkinkan situs Anda bertransisi secara alami ke navigasi penggantian normalnya (seperti berpindah ke halaman login).
  • UI pemilihan yang intuitif dan berfokus pada akun: Daripada mencantumkan berbagai jenis kredensial satu per satu, UI ini menyembunyikan perbedaan mendasar antara kunci sandi dan sandi untuk menyajikan pemilih akun yang intuitif dan berfokus pada akun yang ingin digunakan pengguna untuk login.
  • Peningkatan progresif yang aman: Meskipun hanya didukung di browser Google Chrome dan Chromium, penggunaan deteksi fitur memungkinkan Anda memberikan login cepat kepada pengguna di lingkungan yang didukung tanpa mengganggu alur login yang ada untuk pengguna di browser yang tidak didukung (seperti Safari atau Firefox) atau dalam mode Samaran.

Untuk mengetahui detail cara kerja API di balik layar dan cara menerapkan deteksi fitur, lihat Mode UI langsung untuk login. Dalam dokumen ini, kita akan mempelajari pola UX yang direkomendasikan untuk meningkatkan konversi dengan mode UI Langsung, beserta anti-pola desain yang harus dihindari.

Tempat paling efektif untuk menggunakan mode UI Langsung adalah saat mencegat tepat sebelum navigasi halaman. Setiap kali pengguna yang tidak diautentikasi (atau sesi berakhir) mengklik link atau tombol tindakan yang biasanya mengarahkan mereka ke halaman login, memanggil mode UI Langsung pada saat itu akan menciptakan UX lancar yang tidak pernah mengganggu alur kerja mereka.

Sebagian besar situs menempatkan link "Login" di header global di bagian atas layar yang mengarahkan ke halaman login khusus. Saat pengguna mengklik link ini di halaman yang sedang dijelajahinya, menjeda navigasi dan memanggil mode UI Langsung memungkinkan browser menampilkan dialog pemilihan akun tepat di atas halaman saat ini jika kredensial ada di perangkat.

Setelah pengguna memilih akun dan menyelesaikan autentikasi, header akan diperbarui ke status login tanpa navigasi halaman, sehingga pengguna dapat terus menjelajah tanpa perlu berpindah dari halaman yang sedang dilihat. Sebaliknya, jika tidak ada kredensial di perangkat, tidak ada UI browser yang ditampilkan dan pengguna dapat membuka halaman login dengan lancar seperti yang diinginkan semula.

Login dinamis saat checkout (e-commerce)

Di situs e-commerce, transisi dari keranjang belanja ke checkout adalah salah satu titik paling umum terjadinya pengabaian keranjang yang disebabkan oleh gesekan navigasi halaman. Dengan memanggil mode UI Langsung saat pembeli yang tidak diautentikasi mengklik tombol Lanjutkan ke Checkout di layar keranjang, dialog pemilihan akun akan muncul tepat di tempat tombol diklik, sehingga menyelesaikan autentikasi dengan sekali ketuk.

Jika otentikasi berhasil, pembeli akan melewati halaman login sepenuhnya dan langsung diarahkan ke layar konfirmasi pengiriman dan pembayaran akhir (halaman Checkout), sehingga mengurangi langkah-langkah yang diperlukan untuk menyelesaikan pembelian secara signifikan. Jika tidak ada kredensial, pembeli akan beralih secara normal ke layar pilihan login konvensional atau checkout tamu. Anda dapat mendesain situs untuk mengizinkan checkout tamu atau mewajibkan login sesuai dengan persyaratan bisnis Anda. Mode UI Langsung berfungsi untuk menghilangkan hambatan checkout bagi pelanggan yang kembali.

Login inline untuk tindakan mikro (Suka, bookmark, simpan)

Saat pengunjung menjelajahi feed media sosial, situs komunitas, atau katalog produk e-commerce, memaksa pengalihan halaman penuh ke halaman login setiap kali mereka mencoba "Menyukai" postingan atau "Menyimpan" item dapat menyebabkan beberapa pengguna mengabaikan tindakan tersebut.

Saat pengunjung yang logout mengklik tombol tindakan seperti Suka, Tandai, atau Simpan, menampilkan dialog mode UI Langsung di tempatnya memungkinkan verifikasi identitas selesai dan segera memicu rekaman tindakan dan animasi UI (seperti ikon hati yang berubah menjadi merah). Posisi scroll tidak berpindah satu piksel pun, sehingga mempertahankan imersi penjelajahan sepenuhnya. Jika tidak ada kredensial, daripada langsung keluar, Anda dapat menampilkan modal login inline ringan di atas layar saat ini atau mengarahkan pengguna ke halaman login dengan cara yang mengembalikan mereka ke posisi semula setelah login.

Membuka penghalang konten berbayar situs penayang

Platform konten dan media berita banyak mengadopsi model yang memungkinkan paragraf pembuka artikel dapat diakses secara bebas, sementara penghalang konten berbayar ringan atau blur khusus anggota ditampilkan di tengah saat pembaca men-scroll.

Saat pembaca men-scroll artikel ke bawah, mencapai penghalang konten berbayar, dan mengklik tombol Lanjutkan membaca dengan akun Anda, memanggil mode UI Langsung akan menampilkan dialog autentikasi tepat di atas posisi scroll yang tepat tempat pembaca berhenti. Segera setelah autentikasi selesai, blur artikel akan hilang dengan lancar tanpa memuat ulang halaman, sehingga pembaca dapat melanjutkan membaca tanpa kehilangan baris teks yang sedang mereka lihat. Jika tidak ada kredensial, luaskan formulir pendaftaran atau login inline dalam bagian paywall.

Anti-pola yang harus dihindari

Meskipun mode UI Langsung memberikan nilai yang sangat besar saat digunakan sebelum navigasi halaman, menempatkannya di lokasi yang salah atau menerapkannya ke alur yang tidak didukung akan secara aktif merusak pengalaman login pengguna.

Hindari mode UI Langsung pada tombol login di halaman login khusus

Karena mode UI Langsung menangani kunci sandi dan sandi dalam satu dialog yang sempurna, Anda mungkin tergoda untuk menggunakannya pada tombol "Login" yang ditempatkan di halaman login khusus Anda. Namun, sebaiknya hindari penggunaannya di sini. Pertama, Mode UI Langsung memerlukan aktivasi pengguna secara ketat (seperti klik atau ketuk), sehingga membuatnya canggung di halaman login tempat pengguna mungkin mengharapkan opsi login tersedia dengan mudah saat waktu muat halaman. Kedua, halaman login adalah tujuan akhir tempat pengguna tiba saat mereka tidak memiliki kredensial lokal di perangkat mereka, atau tempat pengguna ingin login dengan kunci sandi di perangkat seluler mereka (autentikasi lintas perangkat) atau kunci keamanan hardware dengan mengklik "Login dengan kunci sandi". Jika Anda menggunakan mode UI Langsung di sini, browser akan menekan penggantian kode QR dan kunci keamanan lintas perangkat, lalu segera berhenti setelah tidak menemukan kredensial lokal di perangkat—membuat pengguna terjebak dalam situasi buntu di mana mengklik tombol tidak akan melakukan apa pun di halaman tanpa tujuan lebih lanjut.

Di halaman login tempat setiap metode autentikasi harus berfungsi dengan andal, praktik terbaiknya adalah mengonfigurasi UI Bersyarat (integrasi isi otomatis) di kolom input untuk memastikan kemudahan penggunaan kunci sandi lokal, sekaligus menyandingkan tombol "Login dengan kunci sandi" eksplisit dengan metode pemanggilan standar yang menampilkan opsi kode QR lintas perangkat dan kunci keamanan dengan andal.

Hindari mode UI Langsung untuk autentikasi ulang peningkatan

Saat pengguna yang login melakukan operasi sensitif—seperti mengubah sandi, memperbarui alamat pengiriman, mengedit metode pembayaran tersimpan, atau menambahkan kunci sandi baru—situs sering kali memerlukan autentikasi ulang bertahap untuk memverifikasi identitas pengguna. Karena pengguna sudah login, alur autentikasi ulang biasanya meneruskan daftar allowCredentials yang tidak kosong untuk membatasi autentikasi ke kredensial milik pengguna tertentu tersebut.

Namun, jangan gunakan mode UI Langsung untuk autentikasi ulang. Mode UI langsung dirancang secara eksklusif untuk alur login yang tidak diautentikasi saat identitas pengguna belum diketahui. Jika pihak tepercaya dapat membuat kueri daftar ID kredensial tertentu dalam mode UI Langsung dan mengamati apakah kredensial ada, pihak tepercaya dapat menyimpulkan apakah pengguna pernah berinteraksi dengan situs tersebut dan melacak pengguna di seluruh sesi. Untuk mencegah risiko pelacakan lintas sesi ini, browser langsung menolak permintaan mode UI Langsung yang menyertakan daftar allowCredentials yang tidak kosong dengan memunculkan NotAllowedError. Sebaliknya, menghilangkan allowCredentials selama autentikasi ulang juga bermasalah, karena browser menampilkan setiap kredensial yang disimpan di perangkat untuk situs Anda—sehingga pengguna secara tidak sengaja memilih akun yang berbeda dengan akun yang login saat ini.

Untuk autentikasi ulang step-up saat identitas pengguna sudah diketahui, gunakan permintaan WebAuthn modal standar (navigator.credentials.get() tanpa uiMode: 'immediate') dengan allowCredentials yang diisi dengan kredensial terdaftar pengguna yang login, atau arahkan pengguna ke layar tantangan autentikasi ulang standar Anda.

Kesimpulan

Mode UI langsung adalah alat UX yang efektif untuk menghilangkan pengalihan yang tidak perlu ke halaman login dan mencapai login cepat yang menyelesaikan login sambil mempertahankan konteks. Dengan mencegat momen saat niat pengguna jelas—seperti link login header, tombol checkout, tindakan mikro, dan penghalang konten artikel—tepat sebelum navigasi halaman terjadi, Anda dapat mencegah pengabaian dan memberikan pengalaman pengguna yang lancar.

Pada saat yang sama, ingatlah bahwa mode UI Langsung adalah peningkatan progresif untuk pengguna yang tidak diautentikasi sebelum navigasi halaman. Hindari menerapkannya ke tombol di halaman login tujuan akhir Anda agar desain Anda tetap terbuka dan dapat diakses oleh pengguna lintas perangkat (kode QR), dan hindari menggunakannya untuk alur autentikasi ulang yang memerlukan allowCredentials.

Untuk mengetahui detail selengkapnya tentang penerapan kunci sandi dan fitur terbaru Web Identity, pelajari referensi berikut: