Best Practices für das Anmeldeformular

Helfen Sie Ihren Nutzern dabei, sich schnell und einfach anzumelden, sich anzumelden und ihre Kontodaten zu verwalten.

Sam Dutton

Wenn sich Nutzer auf Ihrer Website anmelden müssen, ist ein gutes Design des Anmeldeformulars entscheidend. Das gilt insbesondere für Menschen mit schlechter Internetverbindung, oder unter Stress stehen. Schlecht gestaltete Anmeldeformulare führen zu hohen Absprungraten. Jeder Absprung kann einen verlorenen und verärgerten Nutzer bedeuten – nicht nur eine verpasste Anmeldung. Geschäftschancen.

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 implementieren und Nutzer bitten, ein Konto auf Ihrer Website zu erstellen, sollten Sie sich ob es wirklich nötig ist. Nach Möglichkeit solltest du keine Gating-Funktionen hinter der Anmeldung verwenden.

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 um einen Gefallen und bitten den Nutzer, Ihnen personenbezogene Daten anvertrauen zu lassen. Jedes Passwort und Element der von Ihnen gespeicherten Daten trägt zu Datenschutz- und Sicherheitsvorfällen bei, was zu Kosten und Verbindlichkeiten für für Ihre Website.

Wenn der Hauptgrund für die Kontoerstellung darin besteht, dass Informationen zwischen Browsersitzungen zu verwenden, erwägen Sie stattdessen die Verwendung von clientseitigem Speicher. Zum Einkaufen Websites werden als Hauptgrund genannt, Nutzer zum Erstellen eines Kontos zu zwingen, um einen Kauf zu tätigen. Ausstiegsraten des Einkaufswagens. Sie sollten „Als Gast bezahlen“ als Standard festlegen.

Anmeldung deutlich machen

Machen Sie deutlich, wie ein Konto auf Ihrer Website erstellt wird, z. B. mit einem Log-in oder einer Anmeldung. oben rechts auf der Seite. Vermeiden Sie mehrdeutige Symbole oder vage Formulierungen wie z. B. „Get on Board!“, „Mitglied werden“) und die Anmeldung in einem Navigationsmenü nicht ausblenden. Der Usability-Experte Steve Krug fasste Ansatz zur Nutzerfreundlichkeit von Websites: Fühlen Sie mich nicht zum Nachdenken! Bei Bedarf andere Mitglieder Ihres Webteams davon überzeugen, mithilfe von Analysen die Auswirkungen verschiedener Optionen.

<ph type="x-smartling-placeholder">
</ph> Zwei Screenshots einer E-Commerce-Website, die auf einem Android-Smartphone angezeigt werden. Im linken Fenster wird ein Symbol für den Anmeldelink verwendet, das etwas mehrdeutig ist: auf der rechten Seite steht einfach „Anmelden“.
Machen Sie die Anmeldung einfach. Ein Symbol kann mehrdeutig sein, aber ein Zeichen auf die Schaltfläche oder den Link.
<ph type="x-smartling-placeholder">
</ph> 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“.
Die Gmail-Anmeldeseite enthält einen Link, über den Sie ein Konto erstellen können.
Bei Fenstergrößen, die größer als hier dargestellt sind, werden in Gmail ein Link Anmelden und eine Konto.

Verknüpfen Sie die Konten für Nutzer, die sich über einen Identitätsanbieter wie Google registrieren und können Sie sich auch mit E-Mail-Adresse und Passwort anmelden. Das ist ganz einfach, wenn Sie auf die E-Mail-Adresse eines Nutzers zugreifen können aus den Profildaten des Identitätsanbieters abzurufen und die beiden Konten abzugleichen. 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()}`);
}

Verdeutlichen Sie den Zugriff auf Kontodetails.

Sobald sich ein Nutzer angemeldet hat, erklären Sie ihm, wie er auf die Kontodetails zugreifen kann. Achten Sie insbesondere darauf, Passwörter ändern oder zurücksetzen.

Unordnung ausschneiden

Beim Registrierungsvorgang besteht Ihre Aufgabe darin, die Komplexität zu minimieren und die Nutzer zu fokussieren. Schluss mit dem Durcheinander. Das ist nicht die Zeit für Ablenkungen und Versuchungen!

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Lehnen Sie Nutzer nicht von der Registrierung ab.

Fordern Sie bei der Registrierung so wenig wie möglich an. Zusätzliche Nutzerdaten wie Name und Adresse erheben wenn es notwendig ist und die Nutzenden einen deutlichen Vorteil aus der Bereitstellung dieser Daten erkennen. Wichtige Hinweise dass jedes Element von Daten, das Sie kommunizieren und speichern, Kosten und Haftung verursacht.

Sie sollten nicht verdoppeln, nur um sicherzustellen, dass Nutzer ihre Kontaktdaten korrekt erhalten. Dadurch wird es langsamer ausgefüllt werden. Dies macht keinen Sinn, wenn Formularfelder automatisch ausgefüllt werden. Senden Sie stattdessen eine Bestätigung. an den Nutzer, nachdem er seine Kontaktdaten eingegeben hat, und fährt mit der Kontoerstellung fort sobald sie eine Antwort erhalten. Dies ist ein gängiges Anmeldemuster: Nutzer sind daran gewöhnt.

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
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

Welchen Ansatz Sie in Bezug auf die Nutzeridentität verfolgen, Sie müssen eine sorgfältige Entscheidung bezüglich der Sitzung treffen. length: Wie lange der Nutzer angemeldet bleibt und was dazu führen könnte, dass Sie ihn abmelden.

Überlegen Sie, ob Ihre Nutzer Mobilgeräte oder Desktop-Computer verwenden Desktops oder Geräte teilen.

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

Sie können Passwortmanager von Drittanbietern und integrierte Browser beim Vorschlagen und Speichern von Passwörtern unterstützen, Nutzer müssen sich keine Passwörter selbst festlegen, sie sich merken oder sie eingeben. Passwortmanager eignen sich gut für moderne Browser, die geräteübergreifende Synchronisierung von Konten, plattformspezifische Apps und Webanwendungen – und für neue Geräte.

Aus diesem Grund ist es sehr wichtig, die Anmeldeformulare richtig zu codieren, insbesondere die korrekten automatisch vervollständigten Werten. Verwende bei Anmeldeformularen autocomplete="new-password" für neue Passwörter und füge Korrigieren Sie Werte für die automatische Vervollständigung nach Möglichkeit in andere Formularfelder, z. B. autocomplete="email". und autocomplete="tel". Sie können Passwortmanager auch unterstützen, indem Sie verschiedene name und id verwenden. Werte in Anmelde- und Anmeldeformularen, für das form-Element selbst sowie für input, select und textarea.

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

Sicherstellen, dass Nutzer sichere Passwörter eingeben

Es ist die beste Option, Passwortmanagern das Vorschlagen von Passwörtern zu ermöglichen, und Sie sollten die Nutzer die starken Passwörter akzeptieren, die von Browsern und Browsermanagern von Drittanbietern vorgeschlagen werden.

Da viele Nutzer jedoch ihre eigenen Passwörter eingeben möchten, müssen Sie Regeln für Stärke. Das US National Institute of Standards and Technology erklärt, wie Sie unsichere Passwörter vermeiden.

Gehackte Passwörter nicht zulassen

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

Sobald ein Nutzer ein Passwort eingegeben hat, müssen Sie überprüfen, ob es sich um ein Passwort handelt, kompromittiert wurden. Die Website Have I Been Pwned stellt eine API für Passwörter zur Verfügung. oder Sie können dies selbst als Dienst ausführen.

Mit dem Passwortmanager von Google können Sie überprüfen, ob Ihre bestehenden Passwörter gehackt.

Wenn Sie das vom Nutzer vorgeschlagene Passwort ablehnen, teilen Sie ihm genau mit, warum es abgelehnt wurde. Probleme inline anzeigen und erklären, wie sie behoben werden, sobald der Nutzer einen Wert eingegeben hat – nicht nachdem er das Anmeldeformular abgesendet und auf eine Antwort vom Server warten.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Erklären Sie, warum ein Passwort abgelehnt wird.

Einfügen von Passwörtern nicht verbieten

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

Verhindern, dass Passwörter eingefügt werden, ärgert sich die Nutzer und es werden Passwörter empfohlen, die sich leicht merken können. könnte einfacher zu kompromittieren sein) und laut Organisationen wie der Das Cybersicherheitszentrum könnte tatsächlich sogar die Sicherheit verringern. Nutzer merken erst, dass das Einfügen nicht möglich ist, nachdem sie versucht haben, ihr Passwort einzufügen. Durch das Verhindern des Einfügens von Passwörtern lassen sich Sicherheitslücken in der Zwischenablage nicht vermeiden.

Passwörter nie als Klartext speichern oder übertragen

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

Passwortaktualisierungen nicht erzwingen

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

Das Erzwingen von Passwortaktualisierungen kann für IT-Abteilungen kostspielig, lästig für Nutzer und nicht viel Auswirkungen auf die Sicherheit. Außerdem werden dadurch wahrscheinlich unsichere, einprägsame Passwörter zu verwenden oder Passwörter zu speichern.

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

Außerdem sollten Sie Ihren Nutzern Zugriff auf den Log-in-Verlauf ihres Kontos gewähren, damit sie sehen, wo und wann eine Anmeldung erfolgte.

<ph type="x-smartling-placeholder">
</ph> Seite „Kontoaktivität“ in Gmail
Seite „Kontoaktivität“ in Gmail

Passwörter einfach ändern oder zurücksetzen

Machen Sie deutlich, wo und wie sie ihr Kontopasswort aktualisieren können. Auf einigen Websites erstaunlich schwierig.

Natürlich sollten Sie es den Nutzern auch einfach machen, ihr Passwort zurückzusetzen, falls sie es vergessen haben. Das Open Web Application Security Project enthält eine detaillierte Anleitung zum Umgang mit verloren gegangenen Passwörter.

Zum Schutz Ihres Unternehmens und Ihrer Nutzer ist es besonders wichtig, Nutzern dabei zu helfen, ihre wenn sie feststellen, dass es kompromittiert wurde. Um dies zu vereinfachen, sollten Sie /.well-known/change-password URL zu Ihrem Website, die auf Ihre Seite für die Passwortverwaltung weiterleitet. Dadurch können Passwortmanager direkt auf die Seite weiterleiten, auf der sie ihr Passwort für Ihre Website ändern können. Diese Funktion ist die mittlerweile in Safari und Chrome implementiert sind. Nutzern beim Ändern von Passwörtern helfen einfach eine bekannte URL zum Ändern des Passworts hinzufügen, erklärt, implementieren können.

Machen Sie es den Nutzern auch einfach, ihr Konto zu löschen, wenn sie das möchten.

Bieten Sie eine Anmeldung über externe Identitätsanbieter an.

Viele Nutzer melden sich am liebsten mit einer E-Mail-Adresse und einem Passwort-Anmeldeformular auf Websites an. Sie sollten es Ihren Nutzern jedoch auch ermöglichen, sich über einen externen Identitätsanbieter anzumelden, der auch als föderierte Anmeldung.

<ph type="x-smartling-placeholder">
</ph> WordPress-Anmeldeseite
WordPress-Anmeldeseite mit Google- und Apple-Anmeldeoptionen

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

Möglicherweise können Sie auch über die föderierte Anmeldung auf zusätzliche bestätigte Profilinformationen zugreifen, z. B. als E-Mail-Adresse. Das bedeutet, dass der Nutzer diese Daten nicht eingeben muss die Bestätigung selbst durchzuführen. Die föderierte Anmeldung kann Nutzern auch viel einfacher machen, auf einem neuen Gerät.

Google Log-in in Ihre Webanwendung integrieren wird erläutert, wie Sie Ihre Anmeldeoptionen um die föderierte Anmeldung ergänzen. Es sind viele weitere Identitätsplattformen verfügbar.

Einfacher Kontowechsel

Viele Nutzer teilen sich Geräte und wechseln mit demselben Browser zu einem anderen Konto. Ob Nutzer auf oder nicht, sollte der Kontowechsel einfach sein.

<ph type="x-smartling-placeholder">
</ph> In Gmail wird der Kontowechsel angezeigt.
Kontowechsel in Gmail

Multi-Faktor-Authentifizierung anbieten

Bei der Multi-Faktor-Authentifizierung wird sichergestellt, dass Nutzer sich auf mehrere Arten authentifizieren können. Beispielsweise können Sie nicht nur erzwingen, dass der Nutzer ein Passwort festlegt, sondern auch die Bestätigung. Verwenden Sie einen einmaligen Sicherheitscode, der per E-Mail oder SMS gesendet wird, oder nutzen Sie einen einmaligen Sicherheitscode in einer App. Code, Sicherheitsschlüssel oder Fingerabdrucksensor. Best Practices für SMS-OTP und Starke Authentifizierung mit WebAuthn aktivieren erfahren Sie, wie Sie die Multi-Faktor-Authentifizierung implementieren.

Sie sollten auf jeden Fall Multi-Faktor-Authentifizierung anbieten (oder erzwingen), wenn Ihre Website persönliche oder vertraulichen Informationen enthält.

Vorsicht bei Nutzernamen

Besteht nicht auf einen Nutzernamen, es sei denn, du brauchst einen. Nutzern ermöglichen, sich zu registrieren und anzumelden: nur eine E-Mail-Adresse (oder Telefonnummer) und ein Passwort – oder eine föderierte Anmeldung wenn sie es bevorzugen. Erzwingen Sie sie nicht, einen Nutzernamen zu wählen und sich zu merken.

Falls auf Ihrer Website Nutzernamen erforderlich sind, sollten Sie für diese keine unangemessenen Regeln festlegen und Nutzer nicht davon abhalten, ihren Nutzernamen nicht aktualisieren. Auf Ihrem Back-End sollten Sie eine eindeutige ID für jedes Nutzerkonto generieren, und keine Kennung, die auf personenbezogenen Daten wie dem Nutzernamen basiert.

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

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

Testen Sie 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 zu Layoutproblemen führen können. BrowserStack ermöglicht kostenlose Tests für Open-Source-Projekten auf einer Reihe von Geräten und Browsern.

Analysen und Echtzeitüberwachung von Nutzern implementieren

Sie benötigen Feld- und Labdaten um nachzuvollziehen, wie die Nutzer Ihre Anmeldeformulare erleben. Analytics und Real User Monitoring (RUM) liefern Daten zur tatsächlichen Nutzererfahrung, z. B. wie lange Anmeldeseiten bis zum die Last, mit welchen UI-Komponenten Nutzer interagieren (oder nicht) und wie lange es dauert, bis die Nutzenden zur Registrierung.

Schon kleine Änderungen können einen großen Unterschied bei den Abschlussquoten für Anmeldeformulare ausmachen. Analytics und RUM können Sie Änderungen optimieren und priorisieren und Ihre Website auf Probleme überwachen, die nicht bei lokalen Tests.

Weiterlernen

Foto von @ecowarriorprincess auf Unsplash.