Die Verwendung von Illustrationen und eindrucksvollen Bildern in die Einführung von Passkeys kann auch dazu beitragen, die kognitive Belastung der Nutzer zu verringern, Ihre Inhalte zu unterstützen und die Nutzererfahrung ansprechender und verständlicher zu gestalten.
Designkomponenten
Passkeys sind als Erweiterung Ihres bestehenden Produkts oder Dienstes gedacht und Sie sollten sie in einem Format einführen, das die Nutzer auf Ihrer Plattform bereits gewohnt sind.
Wenn Ihr Dienst beispielsweise Interstitials verwendet, um Nutzern Updates zu vermitteln, ähnlich wie bei Google-Konten, in denen Nutzern während der Anmeldung Passkeys eingeführt werden, sollten Sie ein Interstitial-Format für Passkeys verwenden.
![Landingpage von TrailBlazer mit der Karte „Mit Passkeys schneller anmelden“](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=5&hl=de)
Wenn Ihre Plattform Nutzer in der Regel mithilfe von Pop-up-Fenstern, Benachrichtigungsleisten oder anderen Benachrichtigungsstile über Kontoänderungen informiert, verwenden Sie diese bekannten Benachrichtigungsmethoden, um das Konzept der Passkeys vorzustellen. Dieser Ansatz sorgt bei der Einführung der neuen Passkey-Funktion für eine einheitliche und nutzerfreundliche Erfahrung.
![Pop-up, in dem dem Nutzer die Verwendung von Passkeys für schnellere und sicherere Passwörter angeboten wird](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=5&hl=de)
Beschreibenden Passkey-Prompt erstellen
Erstellen Sie für Aktionen in Verbindung mit Passkeys anstelle von Schaltflächen nur mit einem Call-to-Action aussagekräftige, beschreibende Aufforderungen, über die Nutzer mehr Informationen erhalten. Das können Illustrationen, ein Anzeigentitel, eine Botschaft und ein Call-to-Action sein.
Wenn Sie beispielsweise einen Passkey für Google-Konten erstellen, sehen Sie statt der Schaltfläche „Passkey erstellen“ ein Interstitial mit dem Call-to-Action „Einfachere Anmeldung“, einer kurzen Erläuterung von Passkeys und einer Illustration, die das Passkey-Symbol und verschiedene Methoden zum Entsperren des Gerätebildschirms enthält.
![Screenshot der Seite „Google-Konten“ mit Opt-in-Benachrichtigungen für Passkeys](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=5&hl=de)
Kanonisches Passkey-Symbol verwenden
Die FIDO-Allianz hat ein Passkey-Symbol erstellt, das Sie für Passkeys verwenden können. Eine einheitliche Verwendung hilft den Nutzern, Passkeys zu erkennen und die zugehörigen Aktionen zu optimieren.
![Das kanonische Passkey-Symbol.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=5&hl=de)
Passkeys-Symbol auf der Benutzeroberfläche verwenden:
- Darstellung des Passkeys-Konzepts beim Onboarding oder in anderen Prompts, um Nutzer zu ermutigen, Passkeys zu erstellen oder auf einen Passkey für eine sicherere Anmeldung zu aktualisieren
- In Schaltflächen oder Links, über die sich Nutzer mit einem Passkey anmelden können
- In den Einstellungen, um Passkeys zu identifizieren, die bearbeitet oder gelöscht werden können.
Die Symbolfarbe kann an das Farbschema Ihres Produkts, Ihrer Marke oder der Benutzeroberfläche angepasst werden.
„Passkeys-Karten“ in den Kontoeinstellungen anzeigen
Im Gegensatz zu Passwörtern, bei denen es sich um physische Kombinationen aus Buchstaben, Zahlen und Symbolen handelt, sind Passkeys für Nutzer weitgehend unsichtbar. Geben Sie in den Kontoeinstellungen Platz für eine Passkeys-Karte ein. Die Karte enthält das Passkey-Symbol, Informationen über den Passkey, z. B. wann und in welchem System er erstellt wurde, wann er zuletzt verwendet wurde und Optionen zum Verwalten des Passkeys. Wenn jemand zwei oder mehr Passkeys hat, sollte jeder Passkey eine eigene Karte haben.
![Screenshot der Passkey-Einstellungen auf der Seite mit den Sicherheitseinstellungen von Trailblazer.](https://developers-dot-devsite-v2-prod.appspot.com/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=5&hl=de)