Best Practices für das Anmeldeformular

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

Sam Dutton

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 sehen Sie 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 sperren.

Das beste Anmeldeformular ist gar kein Anmeldeformular.

Wenn Sie Nutzer auffordern, ein Konto zu erstellen, stehen Sie zwischen ihnen und dem, was sie erreichen möchten. 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 Haftungen 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 die Option „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 „Jetzt mitmachen!“ oder „Treten Sie uns bei“) und blenden Sie die Anmeldung nicht in einem Navigationsmenü aus. Der Usability-Experte Steve Krug hat diesen Ansatz für die Nutzerfreundlichkeit von Websites so zusammengefasst: Don't make me think! (Machen Sie mich nicht zum Nachdenken!) 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. Auf der linken Seite wird für den Anmeldelink ein etwas zweideutiges Symbol verwendet. Auf der rechten Seite steht 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 in Gmail: Eine Seite mit der Schaltfläche „Anmelden“, über die ein Formular mit dem Link „Konto erstellen“ aufgerufen wird.
Auf der Anmeldeseite von Gmail gibt es einen Link zum Erstellen eines Kontos.
Bei Fenstergrößen, die größer als hier dargestellt 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 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 deutlich, wie Nutzer auf Kontodetails zugreifen können.

Nachdem sich ein Nutzer angemeldet hat, muss klar sein, wie er auf die Kontodetails zugreifen kann. Machen Sie insbesondere deutlich, 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. Weniger ist mehr. 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?

Berücksichtigen Sie, ob Ihre Nutzer ein Mobilgerät oder einen Computer verwenden und ob sie Inhalte auf einem Computer oder auf einem Gerät teilen.

Passwortmanagern dabei helfen, 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 keine Passwörter 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, Registrierungsformulare richtig zu codieren und insbesondere die richtigen Werte für die automatische Vervollständigung zu verwenden. 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 Passwortmanagern auch helfen, 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 auf Mobilgeräten die richtige Tastatur bereitzustellen und die grundlegende integrierte Validierung durch den Browser zu aktivieren. 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 eines Ihrer vorhandenen Passwörter kompromittiert wurde.

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

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 zulässig ist, ärgern sich die Nutzer, sie neigen dazu, sich Passwörter zu merken, die daher leichter gehackt werden können, und laut Organisationen wie dem National Cyber Security Centre des Vereinigten Königreichs kann das sogar die Sicherheit verringern. 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. Außerdem werden Nutzer wahrscheinlich dazu verleitet, unsichere, leicht zu merkende Passwörter zu verwenden oder Passwörter auf einem physischen Medium aufzubewahren.

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

Außerdem sollten Sie Ihren Nutzern 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-Konto“
Seite mit den Aktivitäten Ihres Gmail-Kontos

Passwortänderung oder -zurücksetzung vereinfachen

Machen Sie es Nutzern 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 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 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. Nutzer dabei unterstützen, Passwörter ganz einfach zu ändern, indem eine bekannte URL zum Ändern von Passwörtern hinzugefügt 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. Die Anmeldung über eine föderierte Identität kann es Nutzern auch viel einfacher machen, wenn sie ein neues Gerät kaufen.

Im Artikel Google Log-in in Ihre Webanwendung einbinden wird beschrieben, wie Sie Ihren Anmeldeoptionen die Option für die föderierte Anmeldung hinzufügen. Es gibt viele andere Identity Platforms.

Kontowechsel vereinfachen

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. In den Artikeln Best Practices für SMS-OTP und Starke Authentifizierung mit WebAuthn aktivieren wird beschrieben, wie Sie die Multi-Faktor-Authentifizierung implementieren.

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

Bestehen Sie nicht auf einem Nutzernamen, es sei denn, Sie benötigen 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 die Kinder 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 Real User Monitoring implementieren

Sie benötigen Feld- und Lab-Daten, um zu verstehen, wie Nutzer Ihre Anmeldeformulare wahrnehmen. 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 den Ausfüllraten 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.