Best Practices für das Anmeldeformular

Helfen Sie Ihren Nutzern dabei, sich zu registrieren und ihre Kontodetails zu verwalten – ganz einfach und unkompliziert.

Sam Dutton

Für den Fall, dass sich Nutzer auf Ihrer Website anmelden müssen, ist ein gut durchdachtes Anmeldeformular unverzichtbar. Dies gilt insbesondere für Personen mit schlechter Internetverbindung, auf einem Mobilgerät, in Eile oder unter Stress. Schlecht gestaltete Anmeldeformulare erhalten hohe Absprungraten. Jeder Absprung könnte einen verlorenen und verärgerten Nutzer bedeuten – und nicht nur eine verpasste Anmeldemöglichkeit.

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

Checkliste

Vermeiden Sie die Anmeldung nach Möglichkeit

Bevor Sie ein Anmeldeformular implementieren und Nutzer bitten, ein Konto auf Ihrer Website zu erstellen, sollten Sie sich überlegen, ob das wirklich erforderlich ist. Wenn möglich, sollten Sie es vermeiden, Funktionen hinter der Anmeldung zu sperren.

Am besten eignet sich kein Anmeldeformular!

Wenn Sie einen Nutzer bitten, ein Konto zu erstellen, werden Sie zwischen ihm und dem, was er damit erreichen möchte, in Verbindung gebracht. Sie bitten den Nutzer um einen Gefallen und bitten den Nutzer, Ihnen personenbezogene Daten anzuvertrauen. Jedes von Ihnen gespeicherte Passwort und jedes gespeicherte Datenelement trägt zu Datenschutz- und Sicherheitsschulden bei, was zu Kosten und Haftung für Ihre Website wird.

Wenn Sie Nutzer hauptsächlich darum bitten, ein Konto zu erstellen, besteht darin, Informationen zwischen Navigationen oder Browsersitzungen zu speichern, nutzen Sie stattdessen clientseitigen Speicher. Bei Shopping-Websites wird die erzwungene Erstellung eines Kontos für einen Kauf als Hauptgrund für das Verlassen des Einkaufswagens angegeben. Sie sollten als Gast bezahlen als Standard festlegen.

Anmeldung deutlich machen

Mach deutlich, wie du ein Konto auf deiner Website erstellst, zum Beispiel mithilfe der Schaltfläche Anmelden oder Anmelden oben rechts auf der Seite. Vermeiden Sie mehrdeutige Symbole oder vage Formulierungen wie „Mitglied werden“) und die Anmeldung im Navigationsmenü nicht ausblenden. Der Usability-Experte Steve Krug fasste diesen Ansatz für die Nutzerfreundlichkeit von Websites zusammen: Nicht zum Nachdenken! Wenn Sie andere in Ihrem Webteam davon überzeugen möchten, verwenden Sie Analysen, um die Auswirkungen verschiedener Optionen aufzuzeigen.

Zwei Screenshots der E-Commerce-Website im Modell auf einem Android-Smartphone. Auf der linken Seite wird ein nicht eindeutiges Symbol für den Anmeldelink verwendet. Auf dem rechten Symbol steht nur „Anmelden“.
Mache die Anmeldung deutlich. Ein Symbol kann mehrdeutig sein, aber eine Schaltfläche oder ein Link Anmelden ist offensichtlich.
Screenshots der Anmeldung in Gmail: eine Seite mit der Schaltfläche „Anmelden“. Wird der Nutzer angeklickt, gelangt er zum Formular, das auch einen Link zum Erstellen eines Kontos enthält.
Auf der Gmail-Anmeldeseite befindet sich ein Link zum Erstellen eines Kontos.
In einem größeren Fenster als hier dargestellt 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 die sich ebenfalls mit E-Mail-Adresse und Passwort registrieren. Das ist 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 auf E-Mail-Daten eines Google Log-in-Nutzers zugegriffen wird.

// 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 auf Kontodetails zugegriffen werden kann.

Sobald sich ein Nutzer angemeldet hat, machen Sie deutlich, wie er auf die Kontodetails zugreifen kann. Besonders deutlich machen, wie Passwörter geändert oder zurückgesetzt werden.

Durcheinander ausschneiden

Ihre Aufgabe bei der Registrierung ist es, die Komplexität zu minimieren und den Fokus der Nutzenden zu fokussieren. Alles Wichtige auf einen Blick Dies ist nicht der richtige Zeitpunkt für Ablenkungen und Versuchungen!

Lassen Sie die Nutzer nicht vom Abschluss der Registrierung ablenken.

Bitten Sie bei der Registrierung um so wenig wie möglich. Erfassen Sie zusätzliche Nutzerdaten (z. B. Name und Adresse) nur dann, wenn dies erforderlich ist und der Nutzer einen klaren Vorteil aus der Bereitstellung dieser Daten sieht. Bedenken Sie, dass für jedes Datenelement, das Sie kommunizieren und speichern, Kosten und Haftung anfallen.

Verdoppeln Sie Ihre Eingaben nicht doppelt, nur um sicherzustellen, dass die Nutzer ihre Kontaktdaten richtig erhalten. Das verlangsamt das Ausfüllen des Formulars und macht keinen Sinn, 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 Anmeldemuster: Die Nutzer sind daran gewöhnt.

Sie können sich ohne Passwort anmelden, 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.

Passwortfreie Anmeldung auf medium.com

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

Sitzungsdauer berücksichtigen

Unabhängig davon, wie Sie mit der Nutzeridentität umgehen, müssen Sie über die Dauer der Sitzung sorgfältig entscheiden: wie lange der Nutzer angemeldet bleibt und was dazu führen kann, dass er abgemeldet wird.

Überlegen Sie, ob Ihre Nutzer ein Mobilgerät oder einen Computer verwenden und ob sie auf einem Computer Dateien oder Geräte teilen.

Passwortmanagern dabei helfen, Passwörter sicher vorzuschlagen und zu speichern

Sie können Passwortmanagern von Drittanbietern und integrierten Browserpasswörtern dabei helfen, Passwörter vorzuschlagen und zu speichern, sodass Nutzer keine Passwörter selbst auswählen, sich merken oder eingeben müssen. Passwortmanager funktionieren gut in modernen Browsern, da sie Konten geräteübergreifend, plattformübergreifend, Webanwendungen und für neue Geräte synchronisieren.

Deshalb ist es sehr wichtig, die Anmeldeformulare korrekt zu codieren, insbesondere die richtigen Werte für die automatische Vervollständigung. Verwenden Sie für Anmeldeformulare autocomplete="new-password" für neue Passwörter und fügen Sie nach Möglichkeit in anderen Formularfeldern wie autocomplete="email" und autocomplete="tel" korrekte Werte für die automatische Vervollständigung hinzu. Du kannst Passwortmanagern auch helfen, indem du verschiedene Werte für name und id in Registrierungs- und Anmeldeformularen, für das Element form selbst sowie für die Elemente input, select und textarea verwendest.

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

Achten Sie darauf, dass Nutzer sichere Passwörter eingeben

Es ist die beste Option, Passwortmanagern die Möglichkeit zu ermöglichen, Passwörter vorzuschlagen. Ermutigen Sie die Nutzer, die starken Passwörter zu akzeptieren, die von Browsern und Browser-Managern von Drittanbietern vorgeschlagen werden.

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

Gehackte Passwörter nicht zulassen

Unabhängig von den Regeln, die Sie für Passwörter festlegen, sollten Sie niemals Passwörter zulassen, die durch Sicherheitslücken in Umlauf gebracht wurden.

Nachdem ein Nutzer ein Passwort eingegeben hat, müssen Sie sicherstellen, dass dies kein bereits gehacktes Passwort ist. Die Website Have I Been Pwned bietet eine API für die Passwortprüfung. Du kannst dies aber 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, erklären Sie ihm genau, warum es abgelehnt wurde. Zeige Probleme inline an und erläutere, wie du sie beheben kannst, sobald der Nutzer einen Wert eingegeben hat – und nicht, nachdem er das Anmeldeformular gesendet hat und auf eine Antwort vom Server warten musste.

Erkläre, warum ein Passwort abgelehnt wird.

Einfügen von Passwörtern nicht verbieten

Auf einigen Websites ist das Einfügen von Text in die Passworteingaben nicht zulässig.

Wenn Passwörter nicht eingefügt werden, ärgert es die Nutzer und sorgt dafür, dass sie sich leichter merken können. Laut Organisationen wie dem britischen National Cyber Security Centre kann dies die Sicherheit beeinträchtigen. Nutzern wird erst bewusst, dass das Einfügen nicht mehr möglich ist, nachdem sie versucht haben, ihr Passwort einzufügen. Das Einfügen von Passwörtern verhindert also keine Sicherheitslücken in der Zwischenablage.

Passwörter nie als unformatierten Text speichern oder übertragen

Achten Sie darauf, Passwörter zu salten und zu hashen, und versuchen Sie nicht, einen eigenen Hash-Algorithmus zu erfinden.

Aktualisierung von Passwörtern nicht erzwingen

Nutzer sollten nicht willkürlich dazu gezwungen werden, ihre Passwörter zu aktualisieren.

Das Erzwingen von Passwortaktualisierungen kann für IT-Abteilungen kostspielig und ärgerlich für Nutzer sein und hat keine großen Auswirkungen auf die Sicherheit. Außerdem werden Nutzer dazu ermuntert, unsichere, einprägsame Passwörter zu verwenden oder Passwörter aufzubewahren.

Anstatt die Aktualisierung von Passwörtern zu erzwingen, sollten Sie auf ungewöhnliche Kontoaktivitäten achten und die Nutzer warnen. Achten Sie nach Möglichkeit auch auf Passwörter, die aufgrund von Datenpannen gehackt wurden.

Sie sollten Ihren Nutzern auch Zugriff auf ihren Anmeldeverlauf gewähren, damit sie sehen, wo und wann eine Anmeldung erfolgt ist.

Seite „Gmail-Kontoaktivität“
Seite „Gmail-Kontoaktivität“.

Vereinfachen Sie das Ändern oder Zurücksetzen von Passwörtern.

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

Natürlich sollten Sie es Nutzern außerdem erleichtern, 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.

Um Ihr Unternehmen und Ihre Nutzer zu schützen, ist es besonders wichtig, Nutzer beim Ändern ihres Passworts zu unterstützen, wenn sie feststellen, dass es gehackt wurde. Der Einfachheit halber solltest du deiner Website eine /.well-known/change-password-URL hinzufügen, die auf die Seite zur Passwortverwaltung weiterleitet. Dadurch können Passwortmanager deine Nutzer direkt zu der Seite leiten, auf der sie ihr Passwort für deine Website ändern können. Diese Funktion ist jetzt in Safari und Chrome implementiert und wird auch in anderen Browsern eingeführt. Unter Nutzern helfen, Passwörter auf einfache Weise zu ändern, indem Sie eine bekannte URL zum Ändern von Passwörtern hinzufügen, erfahren Sie, wie dies implementiert wird.

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

Anmeldung über externe Identitätsanbieter anbieten

Viele Nutzer verwenden für die Anmeldung auf Websites lieber eine E-Mail-Adresse und ein Passwort-Anmeldeformular. Sie sollten Nutzern jedoch auch die Möglichkeit bieten, sich über einen externen Identitätsanbieter anzumelden, der auch als föderierte Anmeldung bezeichnet wird.

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

Dieser Ansatz bietet mehrere Vorteile. Für Nutzer, die ein Konto mithilfe der föderierten Anmeldung erstellen, müssen Sie keine Passwörter anfordern, kommunizieren oder speichern.

Möglicherweise können Sie über die föderierte Anmeldung auch auf zusätzliche verifizierte Profilinformationen zugreifen, z. B. eine E-Mail-Adresse. Das bedeutet, dass der Nutzer diese Daten nicht eingeben muss und Sie die Bestätigung nicht selbst durchführen müssen. Die föderierte Anmeldung kann Nutzern auch viel einfacher machen, wenn sie ein neues Gerät erhalten.

Unter Google Log-in in deine Webanwendung integrieren wird erläutert, wie du die föderierte Anmeldung zu deinen Registrierungsoptionen hinzufügen kannst. Viele andere Identitätsplattformen sind verfügbar.

Einfacher Kontowechsel

Viele Nutzer verwenden denselben Browser gemeinsam mit anderen Nutzern und wechseln zwischen Konten. Unabhängig davon, ob Nutzer auf die föderierte Anmeldung zugreifen oder nicht, sollten Sie den Kontowechsel vereinfachen.

Gmail, Darstellung des Kontowechsels
Kontowechsel in Gmail

Multi-Faktor-Authentifizierung anbieten

Multi-Faktor-Authentifizierung bedeutet, dass Nutzer die Authentifizierung auf mehrere Arten durchführen können. Sie können beispielsweise die Bestätigung durch einen einmaligen Sicherheitscode per E-Mail oder SMS oder einen App-basierten Einmalcode, Sicherheitsschlüssel oder Fingerabdrucksensor erzwingen. In den Best Practices für SMS-OTP und unter Starke Authentifizierung mit WebAuthn aktivieren wird erläutert, wie die Multi-Faktor-Authentifizierung implementiert wird.

Du solltest auf jeden Fall eine Multi-Faktor-Authentifizierung anbieten oder erzwingen, wenn deine Website personenbezogene oder vertrauliche Informationen verarbeitet.

Vorsicht bei Nutzernamen

Bestehen Sie nicht auf einen Nutzernamen, es sei denn, (oder so lange) Sie einen benötigen. Ermöglichen Sie es Nutzern, sich nur mit einer E-Mail-Adresse (oder Telefonnummer) und einem Passwort oder einer föderierten Anmeldung zu registrieren und anzumelden, wenn sie dies bevorzugen. Erzwinge nicht die Auswahl und Speicherung eines Nutzernamens.

Wenn auf Ihrer Website Nutzernamen erforderlich sind, sollten Sie keine unangemessenen Regeln auferlegen und Nutzer nicht daran hindern, ihren Nutzernamen zu aktualisieren. In Ihrem Back-End sollten Sie für jedes Nutzerkonto eine eindeutige ID generieren, nicht eine auf personenbezogenen Daten wie dem Nutzernamen basierende ID.

Verwenden Sie außerdem autocomplete="username" als Nutzernamen.

Tests auf verschiedenen Geräten, Plattformen, Browsern und Versionen

Testen Sie die Anmeldeformulare auf den Plattformen, die Ihre Nutzer am häufigsten verwenden. 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 Reihe von Geräten und in verschiedenen Browsern.

Analysen und echtes Nutzermonitoring implementieren

Sie benötigen Feld- und Labdaten, um zu verstehen, wie Nutzer Ihre Anmeldeformulare erleben. Analytics und Real User Monitoring (RUM) liefern Daten über das tatsächliche Erlebnis Ihrer Nutzer, z. B. wie lange Anmeldeseiten zum Laden brauchen, mit welchen UI-Komponenten Nutzer interagieren (oder nicht) und wie lange es für die Registrierung dauert.

Kleine Änderungen können eine große Wirkung auf die Abschlussquoten von Anmeldeformularen haben. 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.