Schnelle Anmeldung aktivieren: UX-Muster für den sofortigen UI-Modus

Eiji Kitamura

Veröffentlicht am 30. September 2026, letzte Aktualisierung am 7. Oktober 2026

Übersicht

Im sofortigen UI-Modus werden Kontextverlust und Nutzerabwanderung vermieden, die durch die Weiterleitung zu einer separaten Anmeldeseite entstehen. Sie ermöglicht eine schnelle Anmeldung, da Nutzer sich mit Passkeys oder gespeicherten Passwörtern direkt auf der Seite anmelden können, die sie gerade ansehen oder auf der sie arbeiten, ohne den Kontext zu verlassen.

Im Gegensatz zur bedingten Benutzeroberfläche, bei der Autofill-Vorschläge angezeigt werden, wenn ein Nutzer ein Texteingabefeld fokussiert, wird im Immediate-UI-Modus das Authentifizierungsdialogfeld des Browsers sofort als Reaktion auf einen Button- oder Linkklick aufgerufen. Derzeit akzeptiert uiMode nur "immediate", dies kann sich jedoch in Zukunft ändern.

Der Immediate UI-Modus ist aus drei Gründen besonders effektiv für schnelle Anmeldungen:

  • Geräteübergreifende QR‑Codes überspringen: Wenn auf dem Gerät sofort verfügbare Passkeys oder gespeicherte Passwörter vorhanden sind, wird das Authentifizierungsdialogfeld im Browser sofort angezeigt. Wenn keine vorhanden sind, wird die Funktion sofort beendet, ohne dass ein QR‑Code-Bildschirm für die geräteübergreifende Anmeldung auf Smartphones angezeigt wird. So kann Ihre Website auf natürliche Weise zur normalen Fallback-Navigation übergehen, z. B. zur Anmeldeseite.
  • Intuitive kontozentrierte Auswahl-UI: Anstatt verschiedene Arten von Anmeldedaten einzeln aufzulisten, werden die zugrunde liegenden Unterschiede zwischen Passkeys und Passwörtern ausgeblendet. So wird eine intuitive Kontoauswahl präsentiert, die sich darauf konzentriert, mit welchem Konto sich der Nutzer anmelden möchte.
  • Sichere progressive Verbesserung: Obwohl nur in Google Chrome- und Chromium-Browsern unterstützt, können Sie durch die Verwendung der Funktionserkennung Nutzern in unterstützten Umgebungen schnelle Anmeldungen ermöglichen, ohne die bestehenden Anmeldeabläufe für Nutzer in nicht unterstützten Browsern (z. B. Safari oder Firefox) oder im Inkognitomodus zu unterbrechen.

Weitere Informationen zur Funktionsweise der API und zur Implementierung der Funktionserkennung finden Sie unter Sofortiger UI-Modus für Log-ins. In diesem Dokument werden empfohlene UX-Muster vorgestellt, mit denen sich die Conversion-Rate im Immediate UI-Modus steigern lässt. Außerdem werden Design-Antimuster beschrieben, die Sie vermeiden sollten.

Der Immediate UI-Modus ist am effektivsten, wenn er direkt vor der Seitennavigation verwendet wird. Wenn ein nicht authentifizierter Nutzer (oder ein Nutzer, dessen Sitzung abgelaufen ist) auf einen Link oder Aktionsbutton klickt, der ihn normalerweise zu einer Anmeldeseite weiterleiten würde, wird durch das Aufrufen des Immediate UI-Modus genau in diesem Moment eine nahtlose Nutzererfahrung geschaffen, die den Workflow des Nutzers nicht unterbricht.

Auf den meisten Websites befindet sich im globalen Header oben auf dem Bildschirm ein Link „Anmelden“, über den Nutzer zur entsprechenden Anmeldeseite gelangen. Wenn ein Nutzer auf diesen Link auf der Seite klickt, die er gerade aufruft, wird die Navigation pausiert und der Immediate UI-Modus aufgerufen. So kann der Browser ein Dialogfeld zur Kontoauswahl direkt über der aktuellen Seite anzeigen, wenn Anmeldedaten auf dem Gerät vorhanden sind.

Sobald der Nutzer sein Konto ausgewählt und die Authentifizierung abgeschlossen hat, wird der Header aktualisiert und zeigt den angemeldeten Status an. Das geschieht ohne Seitennavigation, sodass der Nutzer auf der Seite, die er gerade aufgerufen hat, weiter surfen kann. Wenn auf dem Gerät keine Anmeldedaten vorhanden sind, wird keine Browser-Benutzeroberfläche angezeigt und der Nutzer wird wie ursprünglich beabsichtigt direkt zur Anmeldeseite weitergeleitet.

Dynamische Anmeldung an der Kasse (E-Commerce)

Auf E-Commerce-Websites ist der Übergang vom Einkaufswagen zur Kasse einer der häufigsten Punkte für Kaufabbrüche aufgrund von Problemen bei der Seitennavigation. Wenn der Sofort-UI-Modus aufgerufen wird, sobald ein nicht authentifizierter Käufer auf dem Warenkorbbildschirm auf den Button „Checkout“ klickt, wird ein Dialogfeld zur Kontoauswahl direkt an der Stelle angezeigt, an der auf die Schaltfläche geklickt wurde. Die Authentifizierung wird dann mit einem einzigen Tippen abgeschlossen.

Wenn die Authentifizierung erfolgreich ist, wird die Anmeldeseite übersprungen und der Käufer gelangt direkt zum Bildschirm für die endgültige Versand- und Zahlungsbestätigung (Kassenseite). So werden die für den Abschluss eines Kaufs erforderlichen Schritte erheblich reduziert. Wenn keine Anmeldedaten vorhanden sind, wird der Käufer normal zum herkömmlichen Anmelde- oder Gast-Checkout-Auswahlbildschirm weitergeleitet. Sie können Ihre Website so gestalten, dass ein Gast-Checkout möglich ist oder eine Anmeldung erforderlich ist. Der sofortige UI-Modus soll die Kaufabwicklung für wiederkehrende Kunden vereinfachen.

Inline-Anmeldung für Mikroaktionen (Liken, Lesezeichen, Speichern)

Wenn Besucher soziale Feeds, Community-Websites oder E-Commerce-Produktkataloge durchsuchen und jedes Mal, wenn sie versuchen, einen Beitrag zu liken oder ein Element mit einem Lesezeichen zu versehen, eine Weiterleitung auf die Anmeldeseite erzwungen wird, brechen einige Nutzer die Aktion möglicherweise ab.

Wenn ein nicht angemeldeter Besucher auf eine Aktionsschaltfläche wie „Gefällt mir“, „Lesezeichen“ oder „Speichern“ klickt, wird ein Dialogfeld im Immediate UI-Modus angezeigt. So kann die Identitätsbestätigung abgeschlossen und die Aktionsaufzeichnung und UI-Animation (z. B. das rote Herzsymbol) sofort ausgelöst werden. Die Scrollposition wird nicht um ein einzelnes Pixel verschoben, sodass das Browsen nicht unterbrochen wird. Wenn keine Anmeldedaten vorhanden sind, können Sie anstelle einer sofortigen Weiterleitung ein einfaches Inline-Anmeldefenster über dem aktuellen Bildschirm anzeigen oder den Nutzer zur Anmeldeseite weiterleiten, sodass er nach der Anmeldung an die ursprüngliche Stelle zurückkehrt.

Entsperren von Paywalls auf Publisher-Websites

Nachrichtenmedien und Content-Plattformen verwenden häufig ein Modell, bei dem die ersten Absätze eines Artikels frei zugänglich sind, während auf halber Höhe beim Scrollen eine Soft-Paywall oder ein Hinweis für Mitglieder angezeigt wird.

Wenn ein Leser in einem Artikel nach unten scrollt, die Paywall erreicht und auf die Schaltfläche „Mit Ihrem Konto weiterlesen“ klickt, wird im Immediate UI-Modus das Authentifizierungsdialogfeld direkt über der Scrollposition angezeigt, an der der Leser angehalten hat. Sobald die Authentifizierung abgeschlossen ist, wird die Unkenntlichmachung des Artikels ohne Neuladen der Seite aufgehoben. Der Leser kann also weiterlesen, ohne die Zeile zu verlieren, die er gerade gelesen hat. Wenn keine Anmeldedaten vorhanden sind, maximieren Sie ein Inline-Registrierungs- oder Anmeldeformular im Paywall-Bereich.

Zu vermeidende Anti-Patterns

Der Sofort-UI-Modus bietet einen großen Mehrwert, wenn er vor der Seitennavigation verwendet wird. Wenn er jedoch an der falschen Stelle platziert oder auf nicht unterstützte Abläufe angewendet wird, wird die Anmeldeerfahrung des Nutzers dadurch beeinträchtigt.

Vermeiden Sie den Immediate-UI-Modus bei Anmeldeschaltflächen auf dedizierten Anmeldeseiten.

Da im Immediate UI-Modus sowohl Passkeys als auch Passwörter in einem einzigen übersichtlichen Dialogfeld verarbeitet werden, kann es verlockend sein, es für den Button „Anmelden“ auf Ihrer speziellen Anmeldeseite zu verwenden. Sie sollten es hier jedoch nicht verwenden. Erstens erfordert der Immediate UI-Modus zwingend eine Nutzeraktivierung (z. B. durch Klicken oder Tippen). Das ist auf einer Anmeldeseite, auf der Nutzer möglicherweise erwarten, dass Anmeldeoptionen beim Laden der Seite sofort verfügbar sind, unpraktisch. Zweitens ist die Anmeldeseite das endgültige Ziel, das Nutzer erreichen, wenn sie keine lokalen Anmeldedaten auf ihrem Gerät haben oder wenn sie sich mit einem Passkey auf ihrem Mobilgerät (geräteübergreifende Authentifizierung) oder einem Hardware-Sicherheitsschlüssel anmelden möchten, indem sie auf „Mit Passkey anmelden“ klicken. Wenn Sie hier den Sofort-UI-Modus verwenden, unterdrückt der Browser die geräteübergreifenden QR-Code- und Sicherheitsschlüssel-Fallbacks und wird sofort beendet, sobald er keine lokalen Anmeldedaten auf dem Gerät findet. Der Nutzer wird in einer Sackgasse gefangen, in der das Klicken auf die Schaltfläche auf einer Seite ohne weiteres Ziel nichts bewirkt.

Auf einer Anmeldeseite, auf der jede Authentifizierungsmethode zuverlässig funktionieren muss, ist es am besten, Conditional UI (Autofill-Integration) für Eingabefelder zu konfigurieren, um die Verwendung lokaler Passkeys zu vereinfachen. Gleichzeitig sollten explizite Schaltflächen vom Typ „Mit Passkey anmelden“ mit Standardaufrufmethoden kombiniert werden, die zuverlässig geräteübergreifende QR-Codes und Sicherheitsschlüsseloptionen anzeigen.

Sofortigen UI-Modus für die erneute Authentifizierung vermeiden

Wenn ein angemeldeter Nutzer eine sensible Aktion ausführt, z. B. ein Passwort ändert, eine Versandadresse aktualisiert, gespeicherte Zahlungsmethoden bearbeitet oder einen neuen Passkey hinzufügt, ist auf Websites häufig eine zusätzliche Reauthentifizierung erforderlich, um die Identität des Nutzers zu bestätigen. Da der Nutzer bereits angemeldet ist, wird bei der erneuten Authentifizierung in der Regel eine nicht leere allowCredentials-Liste übergeben, um die Authentifizierung auf Anmeldedaten zu beschränken, die zu diesem Nutzer gehören.

Verwenden Sie den Sofort-UI-Modus jedoch nicht für die erneute Authentifizierung. Der Immediate-UI-Modus ist ausschließlich für nicht authentifizierte Anmeldevorgänge vorgesehen, bei denen die Identität des Nutzers noch nicht bekannt ist. Wenn eine vertrauende Partei im Immediate UI-Modus eine bestimmte Liste von Anmeldedaten-IDs abfragen und beobachten könnte, ob Anmeldedaten vorhanden sind, könnte sie daraus schließen, ob der Nutzer zuvor mit der Website interagiert hat, und den Nutzer sitzungsübergreifend verfolgen. Um dieses Risiko zu vermeiden, lehnen Browser jede Anfrage im Immediate UI-Modus, die eine nicht leere allowCredentials-Liste enthält, sofort ab und geben eine NotAllowedError aus. Umgekehrt ist das Weglassen von allowCredentials bei der erneuten Authentifizierung ebenfalls problematisch, da der Browser alle auf dem Gerät gespeicherten Anmeldedaten für Ihre Website präsentiert. So kann der Nutzer versehentlich ein anderes Konto als das aktuell angemeldete auswählen.

Verwenden Sie für die Step-up-Reauthentifizierung, bei der die Identität des Nutzers bereits bekannt ist, eine standardmäßige modale WebAuthn-Anfrage (navigator.credentials.get() ohne uiMode: 'immediate') mit allowCredentials, die mit den registrierten Anmeldedaten des angemeldeten Nutzers gefüllt ist, oder leiten Sie den Nutzer zu Ihrem standardmäßigen Reauthentifizierungs-Challenge-Bildschirm weiter.

Fazit

Der Immediate-UI-Modus ist ein leistungsstarkes UX-Tool, mit dem unnötige Umwege zu Anmeldeseiten vermieden werden können. So können Nutzer sich schnell anmelden und der Kontext bleibt erhalten. Wenn Sie Momente mit eindeutiger Nutzerabsicht abfangen, z. B. Anmeldelinks in Headern, Schaltflächen für den Check-out, Mikroaktionen und Paywalls für Artikel, kurz bevor die Seitennavigation erfolgt, können Sie verhindern, dass Nutzer die Seite verlassen, und für eine nahtlose Nutzererfahrung sorgen.

Gleichzeitig ist der Immediate UI-Modus nur eine progressive Erweiterung für nicht authentifizierte Nutzer vor der Seitennavigation. Wenden Sie sie nicht auf Schaltflächen auf der Anmeldeseite des endgültigen Ziels an, damit Ihr Design für Nutzer, die sich geräteübergreifend (per QR-Code) anmelden, offen und zugänglich bleibt. Verwenden Sie sie auch nicht für Reauthentifizierungsabläufe, für die allowCredentials erforderlich ist.

Weitere Informationen zur Implementierung von Passkeys und den neuesten Web Identity-Funktionen finden Sie in den folgenden Ressourcen: