Best Practices für das Anmeldeformular

Ermöglichen Sie Ihren Nutzern eine einfache Registrierung, Anmeldung und Verwaltung ihrer Kontodetails.

Wenn sich Nutzer auf Ihrer Website anmelden müssen, ist ein gutes Design des Registrierungsformulars entscheidend. Das gilt vor allem für Nutzer mit schlechter Internetverbindung, Nutzer von Mobilgeräten, Nutzer in Eile oder Nutzer, die gestresst sind. Schlecht gestaltete Anmeldeformulare führen zu hohen Absprungraten. Jeder einzelne Rücksprung kann einen verlorenen und verärgerten Nutzer bedeuten – nicht nur eine entgangene Registrierungschance.

Hier ist ein Beispiel für ein sehr einfaches Anmeldeformular, das alle Best Practices veranschaulicht:

Checkliste

Vermeiden Sie nach Möglichkeit die Anmeldung

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

Kein Anmeldeformular eignet sich am besten.

Wenn Sie einen Nutzer bitten, ein Konto zu erstellen, können Sie zwischen ihm und seinen Zielen hin und her wechseln. Sie bitten den Nutzer um einen Gefallen und um das Vertrauen, dass Sie seine personenbezogenen Daten schützen. Jedes Passwort und jeder Datensatz, den Sie speichern, stellt eine Datenschutz- und Sicherheitsschuld dar, die zu Kosten und Haftung für Ihre Website führt.

Wenn Sie Nutzer hauptsächlich dazu auffordern, ein Konto zu erstellen, um Informationen zwischen Navigationen oder Browsersitzungen zu speichern, sollten Sie stattdessen den clientseitigen Speicher verwenden. Bei Shopping-Websites wird die Notwendigkeit, für einen Kauf ein Konto erstellen zu müssen, als einer der Hauptgründe für das Verlassen des Einkaufswagens genannt. Sie sollten „Als Gast bezahlen“ als Standard festlegen.

Anmeldung deutlich machen

Machen Sie deutlich, wie Nutzer auf Ihrer Website ein Konto erstellen können, z. B. mit der Schaltfläche Anmelden oder Registrieren rechts oben auf der Seite. Vermeiden Sie mehrdeutige Symbole oder vage Formulierungen wie z. B. „Get on Board!“, „Treten Sie uns bei“) und blenden Sie die Anmeldung nicht in einem Navigationsmenü aus. Der Usability-Experte Steve Krug fasste diesen Ansatz zur Nutzerfreundlichkeit von Websites zusammen: Don’t make me think! Wenn Sie andere Mitglieder Ihres Webteams überzeugen möchten, können Sie mithilfe von Analysen die Auswirkungen verschiedener Optionen aufzeigen.

Zwei Screenshots eines E-Commerce-Website-Mockups, das auf einem Android-Smartphone angezeigt wird. Im linken Bereich wird ein Symbol für den Anmeldelink verwendet, das mehrdeutig ist. Das rechte Symbol besagt einfach "Anmelden".
Die Anmeldung muss klar erkennbar sein. Ein Symbol kann mehrdeutig sein, aber eine Schaltfläche oder ein Link mit der Aufschrift Anmelden ist eindeutig.
Screenshots der Anmeldung bei Gmail: eine Seite mit der Schaltfläche „Anmelden“, wenn darauf geklickt wird, führt der Nutzer zum Formular mit dem Link „Konto erstellen“.
Auf der Anmeldeseite von Gmail gibt es einen Link zum Erstellen eines Kontos.
Bei Fenstergrößen, die größer als hier gezeigt sind, zeigt Gmail den Link Anmelden und die Schaltfläche Konto erstellen an.

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 registrieren. 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 die E-Mail-Daten eines Google Log-in-Nutzers zugreifen können.

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

Machen Sie deutlich, wie Nutzer auf Kontodetails zugreifen können.

Nachdem sich ein Nutzer angemeldet hat, muss klar sein, wie er auf die Kontodetails zugreifen kann. Achten Sie insbesondere darauf, dass klar ist, wie Passwörter geändert oder zurückgesetzt werden.

Unnötige Formularelemente entfernen

Bei der Registrierung besteht Ihre Aufgabe darin, die Komplexität zu minimieren und die Aufmerksamkeit des Nutzers aufrechtzuerhalten. Mach Schluss mit dem Durcheinander. Jetzt ist nicht die Zeit für Ablenkungen und Versuchungen!

Lassen Sie die Nutzer nicht von 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 es unbedingt erforderlich ist und wenn der Nutzer einen klaren Vorteil daraus hat. Denken Sie daran, dass mit jedem Datensatz, den Sie senden und speichern, Kosten und Haftung verbunden sind.

Geben Sie die Eingaben nicht doppelt ein, nur um sicherzustellen, dass Nutzer ihre Kontaktdaten richtig eingeben. Das verlangsamt das Ausfüllen des Formulars und macht keinen Sinn, wenn Formularfelder automatisch ausgefüllt werden. Senden Sie stattdessen dem Nutzer einen Bestätigungscode, nachdem er seine Kontaktdaten eingegeben hat, und fahren Sie mit der Kontoerstellung fort, sobald er darauf reagiert hat. Dies ist ein gängiges Muster für die Registrierung: Nutzer sind daran gewöhnt.

Sie können auch eine passwortlose Anmeldung anbieten, indem Sie Nutzern bei jeder Anmeldung auf einem neuen Gerät oder in einem neuen Browser einen Code senden. Websites wie Slack und Medium verwenden eine Version davon.

Anmeldung ohne Passwort auf medium.com

Wie bei der föderierten Anmeldung haben Sie auch hier den Vorteil, dass Sie keine Nutzerpasswörter verwalten müssen.

Sitzungsdauer berücksichtigen

Unabhängig von Ihrem Ansatz für die Nutzeridentität müssen Sie eine sorgfältige Entscheidung über die Sitzungsdauer treffen: Wie lange bleibt der Nutzer angemeldet und was könnte dazu führen, dass er abgemeldet wird?

Überlegen Sie, ob Ihre Nutzer ein Mobilgerät oder einen Computer verwenden und ob sie Inhalte über einen Computer oder ein gemeinsam verwendetes Gerät teilen.

Passwortmanager dabei unterstützen, Passwörter sicher vorzuschlagen und zu speichern

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

Daher ist es äußerst wichtig, Anmeldeformulare richtig zu codieren, insbesondere die korrekten Werte für die automatische Vervollständigung. Verwenden Sie für Anmeldeformulare autocomplete="new-password" für neue Passwörter und fügen Sie anderen Formularfeldern nach Möglichkeit korrekte Autocomplete-Werte hinzu, z. B. autocomplete="email" und autocomplete="tel". Sie können Passwortmanager auch unterstützen, indem Sie unterschiedliche Werte für name und id in Anmelde- und Anmeldeformularen, für das Element form selbst sowie für alle Elemente input, select und textarea verwenden.

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

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

Die beste Option ist, Passwortmanager zu aktivieren, damit sie Passwörter vorschlagen. Sie sollten Nutzer dazu anregen, die von Browsern und Browsermanagern von Drittanbietern vorgeschlagenen starken Passwörter zu akzeptieren.

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

Keine gehackten Passwörter zulassen

Unabhängig von den Regeln, die Sie für Passwörter festlegen, sollten Sie niemals Passwörter zulassen, die bei Sicherheitsverletzungen offengelegt wurden.

Nachdem ein Nutzer ein Passwort eingegeben hat, müssen Sie prüfen, ob es sich dabei nicht um ein Passwort handelt, das bereits kompromittiert wurde. Die Website Have I Been Pwned bietet eine API zur Passwortprüfung. Sie können diese Prüfung auch selbst als Dienst ausführen.

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

Wenn Sie das von einem Nutzer vorgeschlagene Passwort ablehnen, teilen Sie ihm genau mit, warum es abgelehnt wurde. Zeigen Sie Probleme inline an und erläutern Sie, wie sie behoben werden können, sobald der Nutzer einen Wert eingegeben hat – nicht nachdem er das Anmeldeformular gesendet hat und auf eine Antwort von Ihrem Server warten musste.

Geben Sie klar an, warum ein Passwort abgelehnt wird.

Einfügen von Passwörtern nicht verbieten

Auf einigen Websites ist es nicht möglich, Text in Passwortfelder einzufügen.

Wenn das Einfügen von Passwörtern nicht zugelassen wird, ärgert sich der Nutzer. Es werden Passwörter empfohlen, die einprägsam sind und daher leichter zu kompromittieren sind. Laut Organisationen wie dem National Cyber Security Centre des Vereinigten Königreichs verringert dies sogar die Sicherheit. Nutzer werden erst nach dem Versuch, ihr Passwort einzufügen, darüber informiert, dass das Einfügen nicht zulässig ist. Daher werden Sicherheitslücken in der Zwischenablage nicht vermieden, wenn das Einfügen von Passwörtern nicht zulässig ist.

Passwörter niemals im Klartext speichern oder übertragen

Achten Sie darauf, Passwörter mit Salts zu versehen und zu hashen. Erfinden Sie keinen eigenen Hash-Algorithmus.

Passwortupdates nicht erzwingen

Zwinge Nutzer nicht dazu, ihre Passwörter willkürlich zu aktualisieren.

Erzwungene Passwortaktualisierungen können für IT-Abteilungen kostspielig und für Nutzer ärgerlich sein und haben nur einen geringen Einfluss auf die Sicherheit. Nutzer werden dadurch wahrscheinlich auch dazu ermutigt, unsichere, einprägsame Passwörter zu verwenden oder Passwörter zu speichern.

Anstatt Passwortaktualisierungen zu erzwingen, sollten Sie ungewöhnliche Kontoaktivitäten überwachen und Nutzer warnen. Wenn möglich, solltest du auch nach Passwörtern suchen, die aufgrund von Datenpannen gehackt wurden.

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

Seite „Aktivitäten in Gmail-Konto“
Seite mit den Aktivitäten Ihres Gmail-Kontos

Passwortänderung oder -zurücksetzung vereinfachen

Machen Sie deutlich, wo und wie sie ihr Kontopasswort aktualisieren können. Auf einigen Websites ist das überraschend schwierig.

Außerdem sollten Sie es Nutzern natürlich einfach machen, ihr Passwort zurückzusetzen, wenn sie es vergessen haben. Das Open Web Application Security Project enthält 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 gehackt 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 implementiert und wird bald auch in anderen Browsern verfügbar sein. Unter Nutzern helfen, Passwörter einfach zu ändern, indem eine bekannte URL zum Ändern von Passwörtern hinzugefügt wird erklärt, wie dies umgesetzt wird.

Außerdem sollten Sie es Nutzern einfach machen, ihr Konto zu löschen, wenn sie dies wünschen.

Anmeldung über externe Identitätsanbieter anbieten

Viele Nutzer bevorzugen es, sich über ein Anmeldeformular mit E-Mail-Adresse und Passwort auf Websites anzumelden. Sie sollten Nutzern jedoch auch die Anmeldung über einen Identitätsanbieter von Drittanbietern ermöglichen, auch als föderierte Anmeldung bezeichnet.

WordPress-Anmeldeseite
WordPress-Anmeldeseite mit Anmeldeoptionen für Google und Apple

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 zugreifen, z. B. auf eine E-Mail-Adresse. Das bedeutet, dass der Nutzer diese Daten nicht eingeben muss und Sie die Bestätigung nicht selbst vornehmen müssen. Außerdem kann die föderierte Anmeldung den Nutzern viel einfacher machen, wenn sie ein neues Gerät erhalten.

Unter Integration von Google Log-in in Ihre Webanwendung wird erläutert, wie Sie den Anmeldeoptionen die föderierte Anmeldung hinzufügen. Es gibt viele weitere Identitätsplattformen.

Einfacher Kontowechsel

Viele Nutzer teilen sich Geräte und wechseln mit demselben Browser zwischen Konten. Unabhängig davon, ob Nutzer die föderierte Anmeldung nutzen, sollten Sie den Kontowechsel vereinfachen.

Gmail, Kontowechsel
Kontowechsel 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 festlegen, dass der Nutzer nicht nur ein Passwort festlegen, sondern sich auch per E-Mail oder SMS mit einem Einmalpasscode oder per App mit einem Einmalpasscode, Sicherheitsschlüssel oder Fingerabdrucksensor authentifizieren muss. Unter Best Practices für SMS-OTP und Starke Authentifizierung mit WebAuthn aktivieren wird erläutert, wie die Multi-Faktor-Authentifizierung implementiert wird.

Sie sollten auf jeden Fall die Multi-Faktor-Authentifizierung anbieten (oder erzwingen), wenn auf Ihrer Website personenbezogene oder vertrauliche Daten verarbeitet werden.

Vorsicht bei Nutzernamen

Besteht nicht auf einen Nutzernamen, es sei denn, du brauchst einen. Erlauben Sie Nutzern, sich nur mit einer E-Mail-Adresse (oder Telefonnummer) und einem Passwort anzumelden oder, wenn sie es bevorzugen, mit der föderierten Anmeldung. Sie sollten sie nicht zwingen, einen Nutzernamen auszuwählen und sich daran zu erinnern.

Wenn auf Ihrer Website Nutzernamen erforderlich sind, sollten Sie keine unangemessenen Regeln für sie festlegen und Nutzer nicht daran hindern, ihren Nutzernamen zu aktualisieren. Sie sollten in Ihrem Backend eine eindeutige ID für jedes Nutzerkonto generieren, keine 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 Anmeldeformulare auf den Plattformen, die für Ihre Nutzer am häufigsten genutzt werden. Die Funktionalität von Formularelementen kann variieren und Unterschiede in der Größe des Darstellungsbereichs können zu Layoutproblemen führen. BrowserStack ermöglicht kostenlose Tests für Open-Source-Projekte auf einer Vielzahl von Geräten und Browsern.

Analysen und Echtzeitüberwachung von Nutzern implementieren

Sie benötigen Feld- und Labdaten, um zu verstehen, wie Nutzer Ihre Anmeldeformulare 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.

Kleine Änderungen können einen großen Unterschied bei der Ausfüllrate von Registrierungsformularen ausmachen. Mit Analytics und RUM können Sie Änderungen optimieren und priorisieren und Ihre Website auf Probleme prüfen, die bei lokalen Tests nicht auftreten.

Weiter lernen

Foto von @ecowarriorprincess auf Unsplash.