Best Practices für Anmeldeformulare

Unterstützen Sie Ihre Nutzer bei der Registrierung, Anmeldung und Verwaltung ihrer Kontodaten.

Sam Dutton

Wenn sich Nutzer auf Ihrer Website anmelden müssen, ist ein gut gestaltetes Registrierungsformular unerlässlich. Das gilt insbesondere für Nutzer mit einer schlechten Internetverbindung, Nutzer von Mobilgeräten, Nutzer, die es eilig haben, oder Nutzer, die unter Stress stehen. Schlecht gestaltete Registrierungsformulare haben hohe Absprungraten. Jede Abmeldung kann einen verlorenen und unzufriedenen Nutzer bedeuten – nicht nur eine verpasste Registrierung.

Hier sehen Sie ein Beispiel für ein sehr einfaches Registrierungsformular, in dem alle Best Practices berücksichtigt werden:

Checkliste

Anmeldung vermeiden, wenn möglich

Bevor Sie ein Registrierungsformular implementieren und Nutzer auffordern, ein Konto auf Ihrer Website zu erstellen, sollten Sie überlegen, ob das wirklich notwendig ist. Vermeiden Sie es nach Möglichkeit, Funktionen hinter der Anmeldung zu platzieren.

Das beste Registrierungsformular ist gar kein Registrierungsformular.

Wenn Sie einen Nutzer auffordern, ein Konto zu erstellen, stellen Sie sich zwischen ihn und sein Ziel. Sie bitten um einen Gefallen und darum, dass der Nutzer Ihnen personenbezogene Daten anvertraut. Jedes Passwort und jedes gespeicherte Datenelement birgt Datenschutz- und Sicherheitsrisiken und wird zu einer Belastung für Ihre Website.

Wenn Sie Nutzer hauptsächlich dazu auffordern, ein Konto zu erstellen, um Informationen zwischen Navigationsvorgängen oder Browsersitzungen zu speichern, sollten Sie stattdessen clientseitigen Speicher verwenden. Auf Shopping-Websites ist die Pflicht, ein Konto zu erstellen, um einen Kauf zu tätigen, ein häufig genannter Grund für abgebrochene Einkäufe. Sie sollten die Gastzahlung als Standard festlegen.

Anmeldung deutlich sichtbar machen

Machen Sie es Nutzern leicht, ein Konto auf Ihrer Website zu erstellen, z. B. mit einer Schaltfläche Anmelden oder Registrieren oben rechts auf der Seite. Vermeiden Sie die Verwendung eines mehrdeutigen Symbols oder einer vagen Formulierung („Steigen Sie ein!“, „Jetzt registrieren“ oder „Registrieren“), und blenden Sie die Anmeldung nicht in einem Navigationsmenü aus. Der Usability-Experte Steve Krug fasste diesen Ansatz zur Website-Usability so zusammen: Don't make me think! (Lass mich nicht nachdenken!). Wenn Sie andere in Ihrem Webteam überzeugen müssen, verwenden Sie Analytics, um die Auswirkungen der verschiedenen Optionen zu veranschaulichen.

Zwei Screenshots einer E-Commerce-Website auf einem Android-Smartphone. Auf der linken Seite wird ein etwas mehrdeutiges Symbol für den Anmeldelink verwendet, auf der rechten Seite steht einfach „Anmelden“.
Anmeldung deutlich sichtbar machen. Ein Symbol kann mehrdeutig sein, aber eine Anmelden-Schaltfläche oder ein Anmelden-Link ist eindeutig.
Screenshots der Gmail-Anmeldung: Auf einer Seite wird die Schaltfläche „Anmelden“ angezeigt. Wenn darauf geklickt wird, wird ein Formular mit dem Link „Konto erstellen“ aufgerufen.
Auf der Gmail-Anmeldeseite befindet sich ein Link zum Erstellen eines Kontos.
Bei größeren Fenstergrößen als hier gezeigt werden in Gmail der Link Anmelden und die Schaltfläche Konto erstellen angezeigt.

Verknüpfen Sie Konten für Nutzer, die sich über einen Identitätsanbieter wie Google registrieren und sich auch mit E-Mail-Adresse und Passwort anmelden. Das ist ganz einfach, wenn Sie über die Profildaten des Identitätsanbieters auf die E-Mail-Adresse eines Nutzers zugreifen und die beiden Konten abgleichen können. Der folgende Code zeigt, wie Sie auf E-Mail-Daten für einen Google Log-in-Nutzer zugreifen.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Machen Sie es Nutzern leicht, auf Kontodetails zuzugreifen.

Nachdem sich ein Nutzer angemeldet hat, sollte klar sein, wie er auf Kontodetails zugreifen kann. Machen Sie insbesondere deutlich, wie Passwörter geändert oder zurückgesetzt werden können.

Formular übersichtlicher gestalten

Im Registrierungsprozess ist es Ihre Aufgabe, die Komplexität zu minimieren und den Nutzer zu fokussieren. Unordnung reduzieren Jetzt ist nicht die Zeit für Ablenkungen und Versuchungen.

Nutzer nicht vom Abschluss der Registrierung ablenken.

Fragen Sie bei der Registrierung so wenig wie möglich ab. Erheben Sie zusätzliche Nutzerdaten (z. B. Name und Adresse) nur, wenn dies erforderlich ist und der Nutzer einen klaren Vorteil durch die Bereitstellung dieser Daten hat. Denken Sie daran, dass für jede übermittelte und gespeicherte Information Kosten und Haftung anfallen.

Wiederholen Sie die Eingabe nicht nur, um sicherzugehen, dass Nutzer ihre Kontaktdaten richtig eingeben. Das verlangsamt das Ausfüllen des Formulars und ist nicht sinnvoll, wenn Formularfelder automatisch ausgefüllt werden. Senden Sie stattdessen einen Bestätigungscode an den Nutzer, nachdem er seine Kontaktdaten eingegeben hat, und fahren Sie mit der Kontoerstellung fort, sobald er geantwortet hat. Dies ist ein gängiges Registrierungsmuster, an das Nutzer gewöhnt sind.

Sie können auch eine passwortlose Anmeldung in Betracht ziehen, bei der Nutzern jedes Mal ein Code gesendet wird, wenn sie sich auf einem neuen Gerät oder in einem neuen Browser anmelden. Websites wie Slack und Medium verwenden eine Version davon.

Anmeldung ohne Passwort auf medium.com

Wie bei der föderierten Anmeldung hat dies den zusätzlichen Vorteil, dass Sie keine Nutzerpasswörter verwalten müssen.

Sitzungslänge berücksichtigen

Unabhängig davon, welchen Ansatz Sie für die Nutzeridentität wählen, müssen Sie sorgfältig über die Sitzungslänge entscheiden: wie lange der Nutzer angemeldet bleibt und was dazu führen könnte, dass er abgemeldet wird.

Berücksichtigen Sie, ob Ihre Nutzer Mobilgeräte oder Computer verwenden und ob sie Geräte gemeinsam nutzen.

Passwortmanagern helfen, Passwörter sicher vorzuschlagen und zu speichern

Sie können Passwortmanager von Drittanbietern und integrierte Browser-Passwortmanager dabei unterstützen, Passwörter vorzuschlagen und zu speichern, damit Nutzer keine Passwörter selbst auswählen, sich merken oder eingeben müssen. Passwortmanager funktionieren gut in modernen Browsern und synchronisieren Konten geräteübergreifend, plattformspezifisch und in Web-Apps – auch auf neuen Geräten.

Daher ist es äußerst wichtig, Registrierungsformulare korrekt zu codieren und insbesondere die richtigen Autocomplete-Werte zu verwenden. Verwenden Sie für Registrierungsformulare autocomplete="new-password" für neue Passwörter und fügen Sie nach Möglichkeit korrekte Autocomplete-Werte für andere Formularfelder hinzu, z. B. autocomplete="email" und autocomplete="tel". Sie können Passwort-Manager auch unterstützen, indem Sie in Registrierungs- und Anmeldeformularen unterschiedliche name- und id-Werte für das form-Element selbst sowie für alle input-, select- und textarea-Elemente verwenden.

Sie sollten auch das entsprechende type-Attribut verwenden, um die richtige Tastatur auf Mobilgeräten bereitzustellen und die grundlegende integrierte Validierung durch den Browser zu ermöglichen. Weitere Informationen zu Best Practices für Zahlungs- und Adressformulare

Sorgen Sie dafür, dass Nutzer sichere Passwörter eingeben

Es ist am besten, wenn Passwortmanager Passwörter vorschlagen können. Sie sollten Nutzer dazu ermutigen, die von Browsern und Drittanbieter-Passwortmanagern vorgeschlagenen starken Passwörter zu akzeptieren.

Viele Nutzer möchten jedoch eigene Passwörter eingeben. Daher müssen Sie Regeln für die Passwortstärke implementieren. Das US National Institute of Standards and Technology erklärt, wie Sie unsichere Passwörter vermeiden.

Gehackte Passwörter nicht zulassen

Unabhängig davon, welche Regeln Sie für Passwörter festlegen, sollten Sie niemals Passwörter zulassen, die bei Sicherheitslücken offengelegt wurden.

Nachdem ein Nutzer ein Passwort eingegeben hat, müssen Sie prüfen, ob es sich um ein bereits kompromittiertes Passwort handelt. Die Website Have I Been Pwned bietet eine API für die Passwortprüfung. Sie können diese aber auch selbst als Dienst ausführen.

Mit dem Passwortmanager von Google können Sie auch prüfen, ob eines Ihrer vorhandenen Passwörter gehackt wurde.

Wenn Sie das von einem Nutzer vorgeschlagene Passwort ablehnen, teilen Sie ihm genau mit, warum es abgelehnt wurde. Probleme inline anzeigen und erklären, wie sie behoben werden können, sobald der Nutzer einen Wert eingegeben hat – nicht erst, nachdem er das Registrierungsformular gesendet und auf eine Antwort von Ihrem Server gewartet hat.

Deutlich machen, warum ein Passwort abgelehnt wird
:

Das Einfügen von Passwörtern nicht verbieten

Auf einigen Websites kann kein Text in Passworteingabefelder eingefügt werden.

Das Verhindern des Einfügens von Passwörtern ist für Nutzer lästig, führt zu Passwörtern, die leicht zu merken sind (und daher leichter kompromittiert werden können), und kann laut Organisationen wie dem britischen National Cyber Security Centre die Sicherheit tatsächlich verringern. Nutzer bemerken erst nach dem Versuch, ihr Passwort einzufügen, dass das Einfügen nicht zulässig ist. Durch das Deaktivieren des Einfügens von Passwörtern werden also keine Sicherheitslücken im Zusammenhang mit der Zwischenablage vermieden.

Passwörter niemals als Klartext speichern oder übertragen

Achten Sie darauf, Passwörter zu salzen und zu hashen. Versuchen Sie nicht, einen eigenen Hashing-Algorithmus zu entwickeln.

Passwort-Updates nicht erzwingen

Nutzer nicht willkürlich dazu zwingen, ihre Passwörter zu aktualisieren:

Das Erzwingen von Passwortaktualisierungen kann für IT-Abteilungen kostspielig und für Nutzer ärgerlich sein und wirkt sich kaum auf die Sicherheit aus. Außerdem werden Nutzer wahrscheinlich dazu ermutigt, unsichere, leicht zu merkende Passwörter zu verwenden oder Passwörter physisch aufzubewahren.

Anstatt Passwortaktualisierungen zu erzwingen, sollten Sie ungewöhnliche Kontoaktivitäten beobachten und Nutzer warnen. Wenn möglich, sollten Sie auch nach Passwörtern suchen, die aufgrund von Datenpannen nicht mehr sicher sind.

Sie sollten Ihren Nutzern auch Zugriff auf den Anmeldeverlauf ihres Kontos gewähren, damit sie sehen können, wo und wann eine Anmeldung erfolgt ist.

Seite „Aktivitäten in Gmail“
Seite „Gmail-Kontoaktivität“

Passwörter einfach ändern oder zurücksetzen

Machen Sie es Nutzern leicht, ihr Kontopasswort zu aktualisieren. Auf einigen Websites ist das überraschend schwierig.

Sie sollten es Nutzern natürlich auch leicht machen, ihr Passwort zurückzusetzen, wenn sie es vergessen haben. Das Open Web Application Security Project bietet eine detaillierte Anleitung zum Umgang mit verlorenen Passwörtern.

Zum Schutz Ihres Unternehmens und Ihrer Nutzer ist es besonders wichtig, Nutzern zu helfen, ihr Passwort zu ändern, wenn sie feststellen, dass es manipuliert wurde. Um dies zu vereinfachen, sollten Sie Ihrer Website eine /.well-known/change-password-URL hinzufügen, die zu Ihrer Seite zur Passwortverwaltung weiterleitet. So können Passwortmanager Ihre Nutzer direkt auf die Seite weiterleiten, auf der sie ihr Passwort für Ihre Website ändern können. Diese Funktion ist jetzt in Safari und Chrome verfügbar und wird bald auch in anderen Browsern eingeführt. Unter Nutzern das Ändern von Passwörtern erleichtern, indem Sie eine bekannte URL zum Ändern von Passwörtern hinzufügen wird beschrieben, wie Sie dies implementieren.

Außerdem sollten Sie es Nutzern leicht machen, ihr Konto zu löschen, wenn sie das möchten.

Anmeldung über externe Identitätsanbieter anbieten

Viele Nutzer bevorzugen es, sich auf Websites über ein Anmeldeformular mit E-Mail-Adresse und Passwort anzumelden. Sie sollten Nutzern jedoch auch die Möglichkeit geben, sich über einen externen Identitätsanbieter anzumelden. Dies wird auch als „Verbundanmeldung“ bezeichnet.

WordPress-Anmeldeseite
WordPress-Anmeldeseite mit Google- und Apple-Anmeldeoptionen.

Dieser Ansatz bietet mehrere Vorteile. Bei Nutzern, die ein Konto über die föderierte Anmeldung erstellen, müssen Sie keine Passwörter abfragen, weitergeben oder speichern.

Möglicherweise können Sie auch über die föderierte Anmeldung auf zusätzliche bestätigte Profilinformationen wie eine E-Mail-Adresse zugreifen. Das bedeutet, dass der Nutzer diese Daten nicht eingeben muss und Sie die Bestätigung nicht selbst vornehmen müssen. Die föderierte Anmeldung kann Nutzern auch die Einrichtung eines neuen Geräts erleichtern.

Im Artikel Google Log-in in Ihre Webanwendung einbinden wird beschrieben, wie Sie Ihren Registrierungsoptionen einen föderierten Log-in hinzufügen. Es gibt viele weitere Identitätsplattformen.

Kontowechsel vereinfachen

Viele Nutzer verwenden gemeinsam Geräte und wechseln im selben Browser zwischen Konten. Unabhängig davon, ob Nutzer auf die föderierte Anmeldung zugreifen oder nicht, sollten Sie den Kontowechsel einfach gestalten.

Gmail mit Kontowechsel
Kontoauswahl in Gmail

Multi-Faktor-Authentifizierung anbieten

Bei der Multi-Faktor-Authentifizierung müssen Nutzer sich auf mehr als eine Weise authentifizieren. Sie können beispielsweise nicht nur ein Passwort vom Nutzer verlangen, sondern auch eine Bestätigung per Einmalpasswort, das per E‑Mail oder SMS gesendet wird, oder per App-basiertem Einmalcode, Sicherheitsschlüssel oder Fingerabdrucksensor erzwingen. In den Best Practices für SMS-Einmalpasswörter und unter Starke Authentifizierung mit WebAuthn aktivieren wird beschrieben, wie Sie die Multi-Faktor-Authentifizierung implementieren.

Wenn auf Ihrer Website personenbezogene oder vertrauliche Daten verarbeitet werden, sollten Sie unbedingt eine Multi-Faktor-Authentifizierung anbieten oder erzwingen.

Vorsicht bei Nutzernamen

Bestehen Sie nicht auf einem Nutzernamen, es sei denn, Sie benötigen ihn. Ermöglichen Sie Nutzern, sich nur mit einer E-Mail-Adresse (oder Telefonnummer) und einem Passwort anzumelden und zu registrieren – oder mit Verbundanmeldung, wenn sie das bevorzugen. Zwingen Sie sie nicht, einen Nutzernamen auszuwählen und sich diesen zu merken.

Wenn für Ihre Website Nutzernamen erforderlich sind, sollten Sie keine unangemessenen Regeln dafür festlegen und Nutzern nicht verbieten, ihren Nutzernamen zu aktualisieren. In Ihrem Backend sollten Sie für jedes Nutzerkonto eine eindeutige ID generieren, nicht eine Kennung, die auf personenbezogenen Daten wie dem Nutzernamen basiert.

Verwenden Sie außerdem autocomplete="username" für Nutzernamen.

Auf verschiedenen Geräten, Plattformen, Browsern und Versionen testen

Testen Sie Registrierungsformulare auf den Plattformen, die Ihre Nutzer am häufigsten verwenden. Die Funktionalität von Formularelementen kann variieren und Unterschiede in der Darstellungsbereichsgröße können zu Layoutproblemen führen. BrowserStack bietet kostenlose Tests für Open-Source-Projekte auf einer Vielzahl von Geräten und in verschiedenen Browsern.

Analysen und Real User Monitoring implementieren

Sie benötigen Feld- und Labordaten, um zu verstehen, wie Nutzer Ihre Registrierungsformulare verwenden. Analytics und Real User Monitoring (RUM) liefern Daten zur tatsächlichen Nutzererfahrung, z. B. wie lange es dauert, bis Registrierungsseiten geladen werden, mit welchen UI-Komponenten Nutzer interagieren (oder nicht) und wie lange es dauert, bis Nutzer die Registrierung abschließen.

Schon kleine Änderungen können einen großen Unterschied bei den Abschlussraten von Registrierungsformularen machen. Mit Analytics und RUM können Sie Änderungen optimieren und priorisieren und Ihre Website auf Probleme überwachen, die bei lokalen Tests nicht auftreten.

Weiterlernen

Foto von @ecowarriorprincess auf Unsplash.