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

Eiji Kitamura

Veröffentlicht: 30. September 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.

Stufenweise Reauthentifizierung für sensible Vorgänge

Auch wenn ein Nutzer bereits angemeldet ist, ist gemäß den Sicherheits-Best Practices eine zusätzliche Reauthentifizierung erforderlich, wenn sensible Vorgänge ausgeführt werden, z. B. das Ändern eines Passworts, das Aktualisieren einer Versandadresse, das Bearbeiten gespeicherter Zahlungsmethoden oder das Hinzufügen eines neuen Passkeys, nachdem seit der letzten Authentifizierung ein bestimmter Zeitraum vergangen ist. Wenn ein Nutzer auf einen Link oder Button klickt, der zu einer vertraulichen Einstellung auf der Übersichtsseite „Mein Konto“ führt, wird der Sofort-UI-Modus aufgerufen. Die Identitätsbestätigung erfolgt dann direkt im Dashboard, ohne dass die Seite verlassen werden muss. So kann der Nutzer direkt zur Bearbeitungsseite der Ziel-Einstellungen gelangen (oder den sensiblen Vorgang sofort ausführen), ohne einen Zwischenbildschirm für die erneute Anmeldung durchlaufen zu müssen. Wenn keine Anmeldedaten vorhanden sind, leite den Nutzer zum Standardbildschirm für die erneute Authentifizierung weiter (z. B. zum Bildschirm für die erneute Eingabe des Passworts oder zur Bestätigung des Einmalpassworts).

Bei der standardmäßigen schnellen Anmeldung aus einem nicht authentifizierten Status werden keine Zielanmeldedaten angegeben. Für diesen Reauthentifizierungs-Anwendungsfall müssen Sie sie jedoch angeben. Legen Sie allowCredentials in der Anfrage fest, damit nur Anmeldedaten des angemeldeten Nutzers präsentiert werden.

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 ist vor der Seitennavigation sehr nützlich. Wenn er jedoch an der falschen Stelle platziert wird, kann er die Anmeldeerfahrung des Nutzers beeinträchtigen.

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.

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 klarer Nutzerabsicht abfangen, z. B. Anmeldelinks in der Kopfzeile, Schaltflächen für den Check-out, Mikroaktionen, die erneute Authentifizierung für sensible Vorgänge (mit allowCredentials) und Paywalls für Artikel, kurz bevor die Seitennavigation erfolgt, können Sie Abbrüche verhindern und eine nahtlose Nutzererfahrung bieten.

Denken Sie daran, dass der Sofort-UI-Modus eine progressive Verbesserung vor der Seitennavigation ist. Wenden Sie ihn nicht auf Schaltflächen auf der Anmeldeseite an, die das endgültige Ziel ist, damit Ihr Design für Nutzer, die sich über verschiedene Geräte (QR-Code) anmelden, offen und zugänglich bleibt.

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