Authentifizierung und Onboarding

Nutzer-Onboarding und ‑Authentifizierung sind einige der häufigsten User Journeys und oft die, die Nutzer am häufigsten abbrechen und am frustrierendsten finden. Sie sind der erste Eindruck, den Nutzer von Ihrer App erhalten. Daher ist es entscheidend, dass sie sich willkommen fühlen und eine angenehme und vertrauenswürdige Erfahrung machen. Ob Sie nun ein Design für die Anmeldung, die Nutzerregistrierung oder ein Onboarding-Tutorial erstellen – die folgenden Richtlinien helfen Ihnen dabei, die ideale Erfahrung zu schaffen.

Fazit

  • Erstellen Sie ein herausragendes Onboarding-Erlebnis.
  • Verwenden Sie verfügbare Bibliotheken wie Passkeys, um das Vertrauen der Nutzer zu gewinnen und ihnen eine vertraute und bequeme Nutzung zu ermöglichen.
  • Erheben Sie nur die wichtigsten Nutzerinformationen.
  • Verwenden Sie eine klare und hilfreiche Sprache.
  • Organisieren und erklären Sie den Wert der Funktionen und die Gründe für Berechtigungen.

Jetzt starten

  1. Erheben: Überlegen Sie, was der Nutzer einrichten, lernen und autorisieren muss.

  2. In-App-Onboarding im Vergleich zu Onboarding vor der Nutzung: Trennen Sie alles in das auf, was vor der Nutzung der App erledigt werden muss, und das, was während der Nutzung der App erledigt werden muss. Vermeiden Sie es, dass Nutzer sich erst mit Ihrer App auseinandersetzen müssen, bevor sie die Inhalte nutzen können. Überlegen Sie, ob die Inhalte und Interaktionen besser als Aufforderung oder als Lernmoment präsentiert werden sollten.

  3. Geben Sie für Elemente im Kontext eine Erklärung und gegebenenfalls eine Aktion an.

  4. Gliedern Sie Schritte und Lerninhalte, die vor der Nutzung Ihrer App unbedingt abgeschlossen werden müssen, in logische Schritte. In der Regel müssen Sie den Wert der App aufzeigen, bevor Sie nach Geräteberechtigungen fragen oder Nutzer auffordern, ein Konto zu erstellen. Auf das Wertversprechen sollte immer die Aktion folgen.

  5. Wenn für Ihre App ein Konto erforderlich ist, legen Sie die Authentifizierungsmethoden fest. Passkeys können die Bedenken und Schwierigkeiten der Nutzer bei der Kontoverwaltung verringern.

  6. Geben Sie Wiederherstellungsmethoden an.

  7. Zeigen Sie den Fortschritt des Nutzers an. Sie können Komponenten wie Stepper, Pager oder eine Fortschrittsanzeige verwenden.

User Journeys

Ein herausragendes Onboarding vermittelt ein Gefühl der Erfüllung und hat eine ausgeprägte Persönlichkeit. Es hilft Nutzern, sich zurechtzufinden, indem es klare Muster für die Einrichtung, die Erteilung von Berechtigungen und die Verfolgung des Fortschritts bietet. Gleichzeitig können sie sich mit der Marke und den Konzepten Ihrer App auseinandersetzen.

Platzierung des Einstiegspunkts

Bei der Begrüßungsplatzierung werden alle Lerninhalte für Nutzer und die App-Einrichtung vorab geladen. Dieser Ansatz ist ideal, wenn für Ihre App eine Nutzerregistrierung erforderlich ist, um auf Inhalte zuzugreifen, wenn eine Vorschau von Inhalten nicht möglich ist oder wenn kontextbezogenes Lernen nicht geeignet ist. Der Hauptvorteil besteht darin, dass Nutzer sofort wissen, wie sie die App verwenden können, und schneller vollen Zugriff erhalten. Ein erheblicher Nachteil ist jedoch das höhere Risiko, Nutzer zu verlieren, bevor sie die App ausprobiert haben. Dies kann jedoch gemildert werden, indem Sie einige erste Informationen zu den Inhalten bereitstellen, wie im folgenden Bild gezeigt.

Übersicht über die UX für das Onboarding auf Mobilgeräten

Das kontextbezogene oder Just-in-Time-In-App-Onboarding bietet mehr Flexibilität in Bezug auf die Bekanntheit von Inhalten, die Registrierung und das Lernen. Es ermöglicht Muster wie das Priming von Berechtigungen, bei dem Anfragen zum Zeitpunkt des Bedarfs gestellt werden. Dieser Ansatz eignet sich am besten, wenn Sie eine Vorschau anbieten möchten, um Nutzer zur Registrierung zu bewegen, oder wenn Sie die Registrierung und das Lernen in kleinere, einprägsamere und besser zu bewältigende Schritte aufteilen möchten. So können Nutzer lernen, während sie etwas tun, und die Wahrscheinlichkeit, dass sie die App weiter nutzen, ist höher.

Zwei Muster für das In-App-Onboarding.

Registrierung / Anmeldung

Der Registrierungs- oder Anmeldevorgang hilft Nutzern, ein Konto für Ihre App zu erstellen. Überlegen Sie, ob sich Nutzer vorab registrieren müssen, um Ihre App zu verwenden, oder ob sie auf bestimmte Inhalte und Funktionen zugreifen können.

Um den Registrierungsvorgang zu optimieren, erheben Sie nur die erforderlichen Mindestinformationen, z. B. E-Mail-Adresse und Passwort, oder kombinieren Sie Schritte, um Reibungsverluste zu vermeiden. Wenn Sie nur die wichtigsten Eigenschaften wie einen Nutzernamen zur Bestätigung erfassen, überfordern Sie den Nutzer nicht mit Optionen. Bei längeren Vorgängen sollten Sie sie auf mehrere Bildschirme aufteilen, aber nicht übertreiben und nur eine Eingabe pro Bildschirm zulassen. Die Anforderungen an das Passwort müssen klar und logisch sein.

Anmelden / Einloggen

Wiederkehrende Nutzer müssen sich wieder in ihrem Konto anmelden können. Die Anmeldung sollte schnell und unaufdringlich sein. Wenn für Ihre App nur eine Authentifizierung für Konten erforderlich ist, können Sie die Registrierung und die Anmeldung über eine Methode für die Einmalanmeldung kombinieren.

Anmeldeoptionen wie E-Mail-Adresse und Passkeys

Bei effektiven Anmeldevorgängen sollte der Nutzerkomfort im Vordergrund stehen. Dazu können moderne Authentifizierungsmuster implementiert werden. Dazu gehören biometrische Aufforderungen und Funktionen zum automatischen Ausfüllen, um die kognitive Belastung und die manuelle Eingabe durch den Nutzer zu reduzieren.

Nutzern erlauben, sich schneller mit Passkeys anzumelden

Onboarding-Tutorial und ‑Anpassung

Bevor Sie ein vollständiges Tutorial implementieren, sollten Sie kritisch prüfen, ob Ihre Anwendung wirklich eines benötigt. Oft können komplexe Funktionen auf natürlichere Weise durch subtile Bewegungen oder kontextbezogene Tooltips eingeführt werden, die den ursprünglichen Ablauf des Nutzers nicht unterbrechen.

Wenn Geräteberechtigungen erforderlich sind, erklären Sie mit „Priming von Berechtigungen“ den Wert des angeforderten Zugriffs. Dies ist am effektivsten, wenn es zum Zeitpunkt des Bedarfs erfolgt und nicht als Massenanfrage zu Beginn der App-Nutzung.

Nutzern erklären, warum eine App Berechtigungen benötigt

Erklären Sie, warum Ihre App bestimmte Berechtigungen benötigt, wenn sie erforderlich sind.
Fordern Sie keine Berechtigungen an, die für Ihre App nicht sinnvoll sind oder die Sie nicht erklären können.

Wenn Sie App-Funktionen präsentieren, um Nutzer zur Registrierung zu bewegen, sollten Sie überlegen, ob eine Vorschau von echten Inhalten überzeugender wäre als eine Reihe statischer Interstitial-Folien. Wenn Sie ein Tutorial verwenden, muss es immer eine klare und dauerhafte Option geben, es zu überspringen oder sich sofort anzumelden.

Bieten Sie eine Möglichkeit, das Tutorial zu überspringen und später fortzusetzen, z. B. durch das Speichern des Fortschritts im Cache. Wenn Sie eine Möglichkeit zum Speichern anbieten, wird ein Kontrollpunkt erstellt. So ist es wahrscheinlicher, dass Nutzer dort weitermachen, wo sie aufgehört haben, anstatt das Tutorial ganz abzubrechen. Kommunizieren Sie immer klar, was mit dem Fortschritt geschieht, um Nutzer zu beruhigen.

Nutzern erlauben, lange Onboarding-Schritte zu überspringen

Visuelle Hinweise durch Stepper und Fortschrittsanzeigen helfen, die Erwartungen der Nutzer zu erfüllen. Diese Elemente vermitteln ein klares Gefühl dafür, wie viele Schritte noch ausstehen, und reduzieren so die Abbruchrate bei längeren Onboarding- oder Einrichtungsvorgängen.

Verwenden Sie gängige Muster für den Fortschritt. Zum Beispiel Stepper und Fortschrittsanzeigen.
Geben Sie keine Fortschrittsanzeigen an, die mit Dekorationen oder anderen Interaktionen verwechselt werden könnten. Eine Illustration, die sich mit jedem Schritt ändert, kann zwar ästhetisch sein, aber als Fortschrittsanzeige nicht erkannt werden.

Recovery

Wiederherstellungsvorgänge sollten mit Empathie und Respekt für die Privatsphäre der Nutzer gestaltet werden. Gehen Sie niemals nur von einem reibungslosen Ablauf aus. Nutzer müssen klare Möglichkeiten haben, Fehler ohne Frustration zu beheben.

Bieten Sie Wiederherstellungsmöglichkeiten wie **Passwort vergessen** an einer leicht zugänglichen Stelle an.
Fügen Sie keine Reibungsverluste hinzu und verbergen Sie keine Wiederherstellungsoptionen.

Wenn für Ihre App ein bestimmter Nutzername erforderlich ist, bieten Sie Methoden an, mit denen sich Nutzer daran erinnern oder ihn ganz einfach zurücksetzen können.

Geben Sie Kontovoraussetzungen an, z. B. spezifische Anforderungen an das Passwort.
Lassen Sie Nutzer nicht raten, welche Anforderungen an das Passwort gestellt werden.

Das Vorab-Ausfüllen bestimmter Felder wie einer E-Mail-Adresse kann bei der Registrierung praktisch sein. Sensible Informationen wie Passwörter sollten jedoch bei einem Abruf- oder Zurücksetzungsvorgang niemals vorab ausgefüllt werden. Maskieren Sie sensible Eingaben standardmäßig, um die Privatsphäre der Nutzer in öffentlichen Bereichen zu schützen.

SSO / Passkeys

Die Integration mit etablierten Bibliotheken wie Passkeys und Anbietern für die Einmalanmeldung (Single Sign-On, SSO) stärkt das Vertrauen und bietet eine nahtlose, vertraute Erfahrung. Mit diesen Systemen können Nutzer vorhandene Sicherheitshardware und Anmeldedaten für einen reibungslosen Einstieg in Ihre App nutzen.

Layouts und Komponenten

Beim Erstellen von Authentifizierungsformularen ist es wichtig, die Eindämmung zu nutzen, indem Sie ähnliche und verwandte Einträge gruppieren, z. B. die Felder „Vorname“ und „Nachname“ in unmittelbarer Nähe platzieren. So können Sie flexible Layouts erstellen, die sich anpassen lassen.

Begrenzungen im Layout für adaptive Layouts verwenden

Vermeiden Sie lange, scrollende Formulare, die eine große Quelle der Frustration für Nutzer sind.

Bevor Sie ein Eingabefeld hinzufügen, sollten Sie kritisch prüfen, ob die Informationen wirklich erforderlich sind. Wenn ein Nutzer versehentlich ein umfangreiches Formular verlässt und alle Informationen noch einmal eingeben muss, kann dies zu hohen Abbruchraten führen.

Teilen Sie lange Onboarding-Vorgänge in kleinere Schritte auf.
Überfordern Sie Nutzer nicht mit zu vielen Schritten oder Eingaben.

Erweiterte Layouts

Beim Anpassen von Layouts für erweiterte oder Querformatansichten müssen Designer darauf achten, dass die Benutzeroberfläche nutzbar und ästhetisch ansprechend bleibt. Vermeiden Sie insbesondere, interaktive Komponenten wie Schaltflächen über die gesamte Bildschirmbreite zu strecken, da dies unnatürlich aussehen und die Nutzerfreundlichkeit verringern kann.

Verwenden Sie stattdessen weiterhin die Prinzipien der Eindämmung und legen Sie eine maximale sinnvolle Breite für Formularelemente und Inhaltsblöcke fest, um die Lesbarkeit und das visuelle Gleichgewicht auf größeren Displays zu gewährleisten.

Lassen Sie Schaltflächen und Eingaben über einen Bildschirm hinausgehen.

Komponenten für die Nutzerinformation

Wenn Sie Nutzern neue Funktionen vorstellen und sie onboarden, stehen Ihnen mehrere Komponenten zur Verfügung. Mit Rich-Tooltips und ‑Dialogfeldern können Sie die Entdeckung von Funktionen hervorheben und Nutzer in Ihrer App informieren. Mit Sheets können Sie einen Interstitial-Status bereitstellen, um Onboarding- und Lerninhalte zu präsentieren.

Verwenden Sie Tooltips, Ansichten am unteren Rand und Dialogfelder, um Nutzer auf Funktionen aufmerksam zu machen.

Andere Formate

Das Onboarding kann die Übergabe von Geräten für die geräteübergreifende und erweiterte App-Nutzung umfassen.

Die mobile App-Nutzung kann eine ergonomischere Möglichkeit zur Verwaltung der Authentifizierung bieten. Daher kann das Onboarding auch über andere Formate erfolgen. Ein Nutzer kann sich beispielsweise auf seinem Mobilgerät anmelden, nachdem er den Vorgang in einer Google TV-App gestartet hat.

Wenn Ihre App erweiterte Aktivitäten auf anderen Formaten wie AI Glasses oder Wear OS bietet, verwenden Sie Aufforderungen zur Entdeckung und Nutzerinformationen, um Nutzer zu onboarden. Weitere Informationen zum Erstellen von Onboarding-Erlebnissen für AI Glasses.

UX-Texte

Verwenden Sie unaufdringliche Feedbackmechanismen wie Snackbars und Toasts, um Nutzeraktionen zu bestätigen oder kurze Statusaktualisierungen bereitzustellen. So wissen Nutzer immer, was gerade passiert, ohne modale Dialogfelder für kleinere Feedbackmeldungen schließen zu müssen.

Ton

Der Ton Ihrer Texte bei Fehlern ist entscheidend. Vermeiden Sie eine Sprache, die den Nutzer verspottet oder frustriert. Verwenden Sie klare, hilfreiche und ermutigende Texte, die sich auf die Lösung und nicht auf den Fehler konzentrieren, insbesondere in stressigen Situationen wie der Passwortwiederherstellung.

Ressource

Im Android Onboarding Figma Kit finden Sie Onboarding-Vorlagen, User Flows und Assets für die Nutzerinformation.