Mobile Anmeldung und Registrierung gestalten: Den Kontoschritt verständlich machen

Wählen Sie den Moment, in dem ein Konto nützlich wird

Beginnen Sie mit der Arbeit, für die die Person gekommen ist. Wenn das Kernerlebnis ohne Konto funktionieren kann, lassen Sie die Benutzer zunächst die Funktion erkunden und fordern Sie eine Anmeldung an, wenn sie eine Funktion erreichen, die gespeicherte Einstellungen, geräteübergreifenden Zugriff, Zusammenarbeit oder eine Transaktion erfordert. In den Human Interface Guidelines von Apple wird empfohlen, die Anmeldung nach Möglichkeit zu verzögern und den Vorteil zu erläutern, wenn ein Konto erforderlich ist.

Eine kontextbezogene Eingabeaufforderung ist leichter zu verstehen als eine Startzeitwand. Beispielsweise könnte eine Lese-App jemandem das Durchsuchen von Titeln ermöglichen und ihn dann auffordern, ein Konto zu erstellen, wenn er sich für die Synchronisierung einer Leseliste entscheidet. Wenn die Erstellung eines Kontos von Anfang an unerlässlich ist, sagen Sie den Grund dafür, bevor Sie Felder präsentieren. Halten Sie die Erklärung konkret und verhältnismäßig: „Erstellen Sie ein Konto, um Ihre Projekte zu speichern und auf einem anderen Gerät zu öffnen“ ist sinnvoller als „Treten Sie unserer Community bei.“

• Trennen Sie erforderliche Informationen von optionalen Profildetails.
• Überlegen Sie bei Gastzahlungen oder einer einmaligen Aufgabe, ob die Kontoerstellung warten kann, bis der unmittelbare Wert geliefert wird.
• Nachdem die Authentifizierung erfolgreich war, führen Sie die Personen zu der Aktion, die sie ausführen wollten.

Machen Sie die Anmeldeoptionen klar und erkennbar

Eine Person sollte erkennen können, ob sie ein Konto erstellt oder zu einem zurückkehrt. Geben Sie den beiden Routen unterschiedliche Bezeichnungen, sorgen Sie dafür, dass die primäre Aktion visuell klar ist, und platzieren Sie alternative Methoden so, dass sie verglichen werden können, ohne den Bildschirm zu überfordern. Verwenden Sie gegebenenfalls Anbieternamen und von der Plattform genehmigte Schaltflächenbehandlungen. Eine allgemeine Aufschrift „Weiter“ allein erklärt nicht, was als nächstes passiert.

Bieten Sie nur Methoden an, die das Produkt unterstützt und warten kann. E-Mail, ein Passkey oder eine Plattformidentitätsoption können für unterschiedliche Zielgruppen geeignet sein. Stellen Sie sie als Möglichkeiten dar und nicht als Behauptung, dass eine Methode allgemein am einfachsten oder sichersten ist. Erläutern Sie alle zusätzlich erforderlichen Informationen.

Wiederkehrende Benutzer erinnern sich möglicherweise nicht an ihre Anmeldemethode. Machen Sie Wiederherstellung und alternative Anmeldung erkennbar und erklären Sie, was zu tun ist, wenn eine E-Mail mit einer anderen Methode verknüpft ist. Anleitungen zur Kontoverknüpfung können dabei helfen, den Zugriff auf ein bestehendes Konto zu behalten.

Sorgen Sie dafür, dass Formulare fokussiert und mit den Tools der Benutzer kompatibel sind

Fragen Sie nur nach Feldern, die zum Erstellen oder Zugreifen auf das Konto erforderlich sind. Verwenden Sie dauerhafte Beschriftungen, anstatt sich auf Platzhaltertext als einzige Beschriftung zu verlassen, wählen Sie einen geeigneten Eingabetyp und eine geeignete Tastatur und machen Sie die nächste Aktion klar. Wenn für die Anmeldung mehrere Informationen erforderlich sind, gruppieren Sie verwandte Felder und verschieben Sie optionale Präferenzen, bis die Person das Produkt erreicht hat.

Die Authentifizierung sollte mit Autofill- und Passwort-Managern funktionieren. Verwenden Sie Standardfeldnamen und -semantik und vermeiden Sie benutzerdefiniertes Verhalten, das das Ausfüllen von Anmeldeinformationen verhindert. Blockieren Sie das Einfügen von Passwörtern nicht: Benutzer könnten einen Passwort-Manager oder ein anderes Tool verwenden. Die Leitlinien der WCAG fordern, Browsern und Passwort-Managern von Drittanbietern das Ausfüllen von Anmeldefeldern zu erlauben.

Das Verhalten kann je nach Gerät und Passwort-Manager unterschiedlich sein. Überprüfen Sie daher den Ablauf auf unterstützten Plattformen und lassen Sie manuelle Korrekturen zu. Behalten Sie nach einem fehlgeschlagenen Versuch, wenn möglich, nützliche, nicht vertrauliche Werte wie eine E-Mail-Adresse bei.

• Verwenden Sie eine sichtbare Beschriftung wie „E-Mail-Adresse“ und eine deutliche Passwortbeschriftung.
• Ermöglichen Sie es Personen, bei Bedarf ein Passwort preiszugeben oder zu überprüfen, ohne diese Kontrolle zur einzigen Möglichkeit zur Korrektur der Eingabe zu machen.
• Belassen Sie die primäre Schaltfläche in der Nähe der Felder und geben Sie ihr eine aktionsspezifische Bezeichnung wie „Konto erstellen“ oder „Anmelden“.

Gestalten Sie Fehlermeldungen, Wiederherstellung und den nächsten Besuch

Ein nützlicher Fehler identifiziert das betroffene Feld oder den fehlgeschlagenen Schritt im Text und teilt der Person mit, wie sie fortfahren soll. „Etwas ist schief gelaufen“ reicht nicht aus, wenn ein E-Mail-Format ungültig ist oder ein Feld leer ist. WCAG 2.2 Erfolgskriterium 3.3.1 verlangt, dass erkannte Eingabefehler identifiziert und im Text beschrieben werden; Farbe oder ein Symbol sollten die Botschaft nicht allein tragen.

Verwenden Sie eine neutrale Sprache und platzieren Sie feldspezifische Anleitungen in der Nähe des Feldes. Eine hypothetische Kopie für eine fehlerhafte Adresse könnte beispielsweise lauten: „Geben Sie eine E-Mail-Adresse im Format [email protected] ein.“ Bei einer fehlgeschlagenen Anmeldung könnte ein Produkt sagen: „Wir konnten Sie mit diesen Daten nicht anmelden. Überprüfen Sie Ihre E-Mail-Adresse und Ihr Passwort oder setzen Sie Ihr Passwort zurück.“ Vermeiden Sie es, vertrauliche Kontoinformationen in Fehlermeldungen preiszugeben; wählen Sie eine Formulierung, die den Datenschutz- und Missbrauchspräventionsanforderungen des Produkts entspricht.

Erklären Sie, was passiert, nachdem jemand ein Zurücksetzen angefordert hat, bieten Sie einen Weg zurück zur Anmeldung und helfen Sie den Benutzern, die Methode wiederzufinden, die sie zuvor verwendet haben. Zeigen Sie bei späteren Besuchen den Anmeldestatus deutlich an und stellen Sie einen Weg zu den Kontoeinstellungen, zur Abmeldung und zur Hilfe bereit. Wenn in der App Konten erstellt werden können, sorgen Sie dafür, dass die Kontolöschung leicht zu finden ist.

• Ordnen Sie einen Fehler dem von ihm beschriebenen Feld zu und machen Sie ihn ohne Farbe allein erkennbar.
• Halten Sie Wiederherstellungsaktionen in der Nähe des Anmeldeformulars und vermeiden Sie unnötige Neustarts der Benutzer.
• Überprüfen Sie sowohl den Erstnutzungsstatus als auch den Status wiederkehrender Benutzer, einschließlich geänderter E-Mail-Adressen und nicht verfügbarer Anmeldemethoden.

Eine praktische Übersicht über den Kontofluss

Gehen Sie als neue Person, als zurückkehrende Person und als jemand, der den Zugang wiedererlangt, durch den Fluss. Überprüfen Sie die Bildschirme im Kontext. Mithilfe der mobilen Musterbibliothek können Teams vergleichen, wie Formulare Eingaben, Beschriftungen und Aktionen organisieren.

• Können Menschen einen nützlichen Produktwert erreichen, bevor sie sich anmelden, wenn das Konto nicht unbedingt erforderlich ist?
• Wird auf dem Bildschirm angezeigt, warum ein Konto benötigt wird und welche Informationen erforderlich sind?
• Kann eine Person zwischen Registrierung, Anmeldung, alternativen Methoden und Kontowiederherstellung unterscheiden?
• Bleiben Feldbeschriftungen sichtbar und können Anmeldeinformationen automatisch ausgefüllt und eingefügt werden?
• Benennen Fehler das Problem im Text, behalten nützliche Eingaben bei und schlagen einen nächsten Schritt vor?
• Kehrt die Person nach Erfolg zu der Aufgabe zurück, die sie begonnen hat?