Snel inloggen aanzetten: UX-patronen voor de UI-modus Onmiddellijk

Eiji Kitamura

Gepubliceerd: 30 september 2026

Overzicht

De UI-modus Onmiddellijk voorkomt contextverlies en uitval van gebruikers die worden veroorzaakt door naar een speciale inlogpagina te navigeren. Hiermee kunnen gebruikers snel inloggen met toegangssleutels of opgeslagen wachtwoorden op de pagina die ze bekijken of waaraan ze werken, zonder de context te verlaten.

In tegenstelling tot UI met voorwaarden, die suggesties voor automatisch invullen toont als een gebruiker een tekstinvoerveld selecteert, roept de modus Onmiddellijke UI onmiddellijk het verificatiedialoogvenster van de browser aan als reactie op een knop- of linkklik (op dit moment accepteert uiMode alleen "immediate", maar dit kan in de toekomst veranderen).

3 belangrijke kenmerken maken de modus Onmiddellijke UI uniek effectief voor snelle aanmeldingen:

  • Cross-device QR-codes overslaan: Als er direct beschikbare toegangssleutels of opgeslagen wachtwoorden op het apparaat staan, toont de browser meteen het verificatiedialoogvenster. Als er geen zijn, wordt de app meteen afgesloten zonder een QR-codescherm voor smartphones voor meerdere apparaten te tonen. Zo kan je site op een natuurlijke manier overgaan naar de normale fallbacknavigatie (zoals naar de inlogpagina).
  • Intuïtieve UI voor accountgerichte selectie: In plaats van gemengde typen inloggegevens afzonderlijk te vermelden, worden de onderliggende verschillen tussen toegangssleutels en wachtwoorden verborgen om een intuïtieve accountkiezer te presenteren die is gericht op het account waarmee de gebruiker wil inloggen.
  • Veilige progressieve verbetering: Hoewel dit alleen wordt ondersteund in Google Chrome- en Chromium-browsers, kun je met functiedetectie snelle inlogmethoden bieden aan gebruikers in ondersteunde omgevingen zonder bestaande inlogtrajecten te onderbreken voor gebruikers in niet-ondersteunde browsers (zoals Safari of Firefox) of in de incognitomodus.

Ga naar Directe UI-modus voor inloggegevens voor meer informatie over hoe de API onder de motorkap werkt en hoe je functiedetectie implementeert. In dit document verkennen we aanbevolen UX-patronen die de conversie verhogen met de UI-modus Onmiddellijk, samen met ontwerpantipatronen die u moet vermijden.

De meest effectieve plaats om de modus voor onmiddellijke UI te gebruiken, is onderschepping vlak vóór paginanavigatie. Als een niet-geverifieerde gebruiker (of een gebruiker van wie de sessie is verlopen) op een link of actieknop klikt die de gebruiker normaal naar een inlogpagina zou leiden, wordt op dat moment de modus voor onmiddellijke UI aangeroepen. Dit zorgt voor een naadloze gebruikerservaring die de workflow van de gebruiker nooit onderbreekt.

De meeste websites plaatsen een link Inloggen in de algemene header bovenaan het scherm die naar de speciale inlogpagina leidt. Als een gebruiker op deze link klikt op de pagina die deze browseert, wordt de navigatie onderbroken en wordt de modus Onmiddellijke UI aangeroepen. Hierdoor kan de browser een dialoogvenster voor accountselectie rechtstreeks boven de huidige pagina tonen als er inloggegevens op het apparaat staan.

Nadat de gebruiker het account heeft geselecteerd en de verificatie heeft afgerond, wordt de koptekst ter plekke geüpdatet naar de ingelogde status zonder paginanavigatie. Zo kan de gebruiker verder browsen zonder de pagina te verlaten die die op dat moment bekijkt. Als er geen inloggegevens op het apparaat staan, wordt er geen browser-UI getoond en navigeert de gebruiker soepel naar de inlogpagina, precies zoals de gebruiker oorspronkelijk bedoelde.

Dynamisch inloggen bij het afrekenen (e-commerce)

Op e-commercesites is de overgang van het winkelwagentje naar het afrekenen een van de meest voorkomende punten waarop klanten hun winkelwagentje verlaten vanwege problemen met paginanavigatie. Als de modus voor onmiddellijke UI wordt aangeroepen op het moment dat een niet-geverifieerde koper op de knop Doorgaan naar afrekenen klikt op het winkelwagenscherm, verschijnt er een dialoogvenster voor accountselectie op de plek waar op de knop is geklikt. De verificatie wordt afgerond met één tik.

Als de verificatie lukt, slaat de koper de inlogpagina helemaal over en komt die rechtstreeks op het laatste scherm voor verzend- en betalingsbevestiging (de betaalpagina) terecht. Hierdoor zijn er veel minder stappen nodig om een aankoop af te ronden. Als er geen inloggegevens zijn, gaat de koper normaal door naar het scherm voor inloggen of afrekenen als gast. U kunt uw site zo ontwerpen dat gasten kunnen afrekenen of dat inloggen vereist is, afhankelijk van uw bedrijfsvereisten. De UI-modus Onmiddellijk is bedoeld om wrijving bij het afrekenen voor terugkerende klanten te voorkomen.

Inline inloggen voor micro-acties (liken, bookmarken, opslaan)

Als bezoekers door socialmediafeeds, communitysites of e-commerceproductcatalogi browsen, kan het ertoe leiden dat sommige gebruikers de actie afbreken als ze elke keer dat ze een post willen liken of een item willen bookmarken, worden omgeleid naar de inlogpagina.

Als een niet-ingelogde bezoeker op een actieknop klikt, zoals Leuk, Bookmark of Opslaan, kan de identiteitsverificatie worden afgerond en wordt de actieregistratie en UI-animatie (zoals het hartje dat rood wordt) onmiddellijk geactiveerd. De scrollpositie verschuift niet met één pixel, waardoor de browse-ervaring volledig behouden blijft. Als er geen inloggegevens zijn, kun je in plaats van meteen weg te navigeren een lichtgewicht inline inlogmodal tonen over het huidige scherm of de gebruiker naar de inlogpagina leiden op een manier die de gebruiker na het inloggen terugbrengt naar de oorspronkelijke plek.

Extra re-authenticatie voor gevoelige bewerkingen

Zelfs als een gebruiker al is ingelogd, vereisen best practices voor beveiliging dat de gebruiker opnieuw wordt geverifieerd als deze gevoelige bewerkingen uitvoert, zoals een wachtwoord wijzigen, een verzendadres updaten, opgeslagen betaalmethoden bewerken of een nieuwe toegangssleutel toevoegen. Dit gebeurt nadat een bepaalde periode is verstreken sinds de laatste verificatie. Als een gebruiker op een link of knop klikt die naar een gevoelige instelling op de overzichtspagina Mijn account leidt, wordt de identiteitsverificatie rechtstreeks op het dashboard afgerond zonder de pagina te verlaten. Hierdoor kan de gebruiker rechtstreeks naar de bewerkingspagina voor de doelinstellingen gaan (of de gevoelige bewerking onmiddellijk uitvoeren) zonder een tussenscherm voor opnieuw inloggen te doorlopen. Als er geen inloggegevens bestaan, leidt u de gebruiker naar het standaard scherm voor opnieuw verifiëren (zoals een scherm om het wachtwoord opnieuw in te voeren of een scherm om een eenmalig wachtwoord te verifiëren).

Bij standaard snel inloggen vanuit een niet-geverifieerde status worden geen doelinloggegevens gespecificeerd, maar u moet deze wel specificeren voor deze use case voor nieuwe verificatie. Stel allowCredentials in het verzoek in, zodat alleen inloggegevens van de ingelogde gebruiker worden getoond.

Ontgrendeling van de betaalmuur van de uitgeverssite

Nieuwsmedia en contentplatforms gebruiken vaak een model waarbij de openingsparagrafen van een artikel vrij toegankelijk zijn, terwijl halverwege een soft betaalmuur of een vervaging voor leden wordt getoond als de lezer scrollt.

Als een lezer in een artikel naar beneden scrollt, de betaalmuur bereikt en op de knop Doorlezen met je account klikt, wordt de modus voor onmiddellijke UI geactiveerd en wordt het verificatiedialoogvenster getoond op de exacte scrollpositie waar de lezer is gestopt. Zodra de verificatie is afgerond, verdwijnt de wazige weergave van het artikel zonder dat de pagina opnieuw wordt geladen. De lezer kan dus verder lezen zonder de regel tekst kwijt te raken die die aan het lezen was. Als er geen inloggegevens zijn, vouwt u een inline registratie- of inlogformulier uit in het gedeelte met de betaalmuur.

Antipatronen om te vermijden

De modus Onmiddellijke UI biedt veel waarde als deze vóór paginanavigatie wordt gebruikt, maar als je deze op de verkeerde locatie plaatst, heeft dit een negatieve invloed op de inlogfunctionaliteit voor de gebruiker.

Vermijd de modus Onmiddellijke UI voor inlogknoppen op speciale inlogpagina's

Omdat de modus voor onmiddellijke UI zowel toegangssleutels als wachtwoorden in één verfijnd dialoogvenster verwerkt, is het misschien verleidelijk om deze te gebruiken voor de knop Inloggen op uw speciale inlogpagina. Gebruik het hier niet. Ten eerste vereist de modus Onmiddellijke UI strikt gebruikersactivering (zoals een klik of tik), waardoor deze onhandig is op een inlogpagina waar gebruikers verwachten dat inlogopties direct beschikbaar zijn wanneer de pagina wordt geladen. Ten tweede is de inlogpagina de eindbestemming waar gebruikers terechtkomen als ze geen lokale inloggegevens op hun apparaat hebben of als ze van plan zijn in te loggen met een toegangssleutel op hun mobiele apparaat (cross-device authenticatie) of een fysieke beveiligingssleutel door op Inloggen met een toegangssleutel te klikken. Als je hier de UI-modus Onmiddellijk gebruikt, onderdrukt de browser de cross-device QR-code en de beveiligingssleutel-back-ups en wordt de browser onmiddellijk beëindigd zodra deze geen lokale inloggegevens op het apparaat vindt. De gebruiker komt dan in een doodlopende straat terecht, waar klikken op de knop niets doet op een pagina zonder verdere bestemming.

Op een inlogpagina waar elke verificatiemethode betrouwbaar moet werken, is het best practice om voorwaardelijke UI (integratie voor automatisch invullen) in te stellen voor invoervelden om het gebruiksgemak van lokale toegangssleutels te garanderen. Koppel expliciete knoppen voor Inloggen met een toegangssleutel aan standaard aanroepmethoden die betrouwbaar cross-device QR-codes en beveiligingssleutelopties tonen.

Conclusie

De UI-modus Onmiddellijk is een krachtige UX-tool om onnodige omwegen naar inlogpagina's te voorkomen en snel in te loggen terwijl de context behouden blijft. Door momenten van duidelijke gebruikersintentie te onderscheppen, zoals links voor inloggen in de header, betaalknoppen, micro-acties, re-authenticatie voor gevoelige bewerkingen (met allowCredentials gespecificeerd) en betaalmuren voor artikelen, vlak voordat paginanavigatie plaatsvindt, kunt u afhaken voorkomen en een naadloze gebruikerservaring bieden.

Houd er tegelijkertijd rekening mee dat de modus Onmiddellijke UI strikt een progressive enhancement vóór paginanavigatie is. Pas deze niet toe op knoppen op de inlogpagina van je uiteindelijke bestemming, zodat je ontwerp open en toegankelijk blijft voor cross-device (QR-code) gebruikers.

Ga naar de volgende bronnen voor meer informatie over de implementatie van toegangssleutels en de nieuwste Web Identity-functies: