Identität

Nutzern bei der Registrierung helfen

Das Registrierungsformular ist oft die erste Interaktion mit einem Formular auf Ihrer Website. Ein gutes Design des Registrierungsformulars ist entscheidend und ein sicheres Formular ist unerlässlich.

Sehen Sie sich ein Registrierungsformular an, um zu erfahren, wie Sie Nutzern helfen können, sich auf Ihrer Website zu registrieren.

Halten Sie das Registrierungsformular so kurz wie möglich und zeigen Sie nur die erforderlichen Formularsteuerelemente zum Erstellen eines Kontos an. Verwenden Sie nicht mehrere Formularsteuerelemente für dieselben Informationen, damit Nutzer ihre Kontodetails richtig eingeben können. Stattdessen eine Bestätigungs-E-Mail senden.

Kontodetails

Mit dem entsprechenden autocomplete-Attribut können Sie Nutzern helfen, ihre Kontodetails einzugeben. Verwenden Sie autocomplete="email" für das E‑Mail-Feld und autocomplete="new-password" für ein Feld für ein neues Passwort.

Weitere Informationen zum automatischen Ausfüllen von Eingabesteuerelementen

Sie können Nutzern auch dabei helfen, ein sicheres Passwort einzugeben, indem Sie eine Schaltfläche zum Einblenden des Passworts <button> anbieten. Weitere Informationen zum Muster zum Einblenden von Passwörtern

Anmeldeformular schützen

Passwörter dürfen niemals im Klartext gespeichert oder übertragen werden. Achten Sie darauf, Passwörter zu salzen und zu hashen. Versuchen Sie nicht, Ihren eigenen Hashing-Algorithmus zu entwickeln.

Bieten Sie 2-Faktor-Authentifizierung an, insbesondere wenn Sie personenbezogene oder sensible Daten speichern. In den Artikeln Best Practices für SMS-Einmalpasswörter und Starke Authentifizierung mit WebAuthn aktivieren wird beschrieben, wie die Multi-Faktor-Authentifizierung implementiert wird.

Sorgen Sie dafür, dass Nutzer keine gehackten Passwörter verwenden. Sie können beispielsweise die API von Have I Been Pwned verwenden, um kompromittierte Passwörter zu erkennen. Sie können Ihren Nutzern dann vorschlagen, ein anderes neues Passwort einzugeben, oder sie warnen, wenn ihr Passwort kompromittiert wurde.

Nutzern bei der Anmeldung helfen

Hier erfahren Sie, wie Sie ein Anmeldeformular erstellen, damit sich Nutzer auf Ihrer Website anmelden können.

Die Position der Schaltflächen für die Registrierung und Anmeldung sollte gut sichtbar sein. Achten Sie darauf, dass Ihr Formular auf Touchgeräten verwendet werden kann:

  • Die Größe des Tippzielbereichs von Schaltflächen beträgt mindestens 48 Pixel.
  • Die font-size Ihrer Formularelemente ist groß genug (20px ist auf Mobilgeräten in etwa richtig).
  • Zwischen den Formularsteuerelementen ist genügend Platz (margin) und die Eingabefelder sind groß genug (mindestens padding: 15px auf Mobilgeräten).

Nutzern beim Ausfüllen von E‑Mail-Adresse und Passwort helfen

Browser und Passwortmanager beim automatischen Ausfüllen von Kontodetails unterstützen Verwenden Sie autocomplete="email" für das E-Mail-Feld und autocomplete="current-password" für ein Feld für das aktuelle Passwort.

Damit Nutzer ihre Kontodetails manuell eingeben können, verwenden Sie type="email" für das E-Mail-Feld, um die entsprechende Bildschirmtastatur auf Mobilgeräten anzuzeigen.

Verwenden Sie das Attribut required für Ihr E-Mail- und Passwortfeld, damit Sie bei der Übermittlung des Formulars durch den Nutzer vor ungültigen Werten warnen können. Verwenden Sie die Echtzeitvalidierung, damit Nutzer ungültige Daten korrigieren können, sobald sie eingegeben wurden, anstatt bis zum Absenden des Formulars zu warten.

Sorgen Sie dafür, dass Nutzer das eingegebene Passwort sehen können.

Der Text, den Sie für <input type="password"> eingeben, wird standardmäßig unkenntlich gemacht, um die Privatsphäre der Nutzer zu schützen. Helfen Sie Nutzern, ihr Passwort einzugeben, indem Sie ein <button> zum Ein- und Ausblenden des eingegebenen Texts anzeigen.

Weitere Informationen zum Implementieren einer Passwortanzeige <button>

Anmelde- und Registrierungsformulare müssen nutzerfreundlich sein

Testen Sie Ihre Anmelde- und Registrierungsformulare regelmäßig mit echten Nutzern, um sicherzustellen, dass die Authentifizierung wie erwartet funktioniert. Verwenden Sie Analysen und RUM (Real User Measurement), um Felddaten zu erheben, und Tools wie Lighthouse und PageSpeed Insights, um selbst Tests durchzuführen. Weitere Informationen zum Testen der Benutzerfreundlichkeit und zum Erheben von Analysedaten

Prüfen Sie, ob Ihre Formulare in verschiedenen Browsern und auf unterschiedlichen Plattformen funktionieren. Testen Sie Ihr Formular auf verschiedenen Bildschirmgrößen, indem Sie nur die Tastatur oder einen Screenreader wie VoiceOver auf dem Mac oder NVDA unter Windows verwenden.

Nutzern helfen, ihre Kontoeinstellungen zu ändern

Achten Sie darauf, dass Nutzer alle Kontoeinstellungen ändern können, einschließlich E-Mail-Adressen, Passwörter und Nutzernamen.

Machen Sie transparent, welche Daten Sie speichern, und ermöglichen Sie Nutzern, alle ihre personenbezogenen Daten jederzeit herunterzuladen. Sorgen Sie dafür, dass Nutzer ihr Konto löschen können, wenn sie das möchten. Kontoverwaltungsfunktionen wie diese können in einigen Regionen gesetzlich vorgeschrieben sein.

Sorgen Sie dafür, dass Nutzer ihre Passwörter aktualisieren können

Machen Sie es Nutzern leichter, ihr Passwort zu aktualisieren.

Nutzer nach dem aktuellen Passwort fragen, bevor es geändert wird, und eine E-Mail über die Passwortänderung mit der Option senden, die Änderung rückgängig zu machen und das Konto zu sperren.

Fügen Sie die Option hinzu, ein neues Passwort anzufordern, und stellen Sie eine .well-known-URL zum Anfordern eines neuen Passworts bereit.

Ressourcen