Best Practices für Anmeldeformulare

Mit plattformübergreifenden Browserfunktionen können Sie Anmeldeformulare erstellen, die sicher, barrierefrei und nutzerfreundlich sind.

Sam Dutton

Wenn sich Nutzer auf Ihrer Website anmelden müssen, ist ein gutes Design des Anmeldeformulars von entscheidender Bedeutung. Das gilt insbesondere für Nutzer mit einer schlechten Internetverbindung, Nutzer von Mobilgeräten, Nutzer, die es eilig haben, oder Nutzer, die unter Stress stehen. Schlecht gestaltete Anmeldeformulare führen zu hohen Absprungraten. Jeder Absprung kann einen verlorenen und unzufriedenen Nutzer bedeuten – nicht nur eine verpasste Anmeldemöglichkeit.

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

Checkliste

• Sinnvolle HTML-Elemente verwenden: <form>, <input>, <label> und <button>.
• Weisen Sie jeder Eingabe ein <label> zu.
• Verwenden Sie Elementattribute, um auf integrierte Browserfunktionen zuzugreifen: type, name, autocomplete, required.
• Weisen Sie den Attributen name und id stabile Werte zu, die sich nicht zwischen Seitenaufrufen oder Websitebereitstellungen ändern.
• Platzieren Sie die Anmeldung in einem eigenen <form>-Element.
• Erfolgreiches Senden des Formulars sicherstellen
• Verwenden Sie autocomplete="new-password" und id="new-password" für die Passworteingabe in einem Registrierungsformular und für das neue Passwort in einem Formular zum Zurücksetzen des Passworts.
• Verwenden Sie autocomplete="current-password" und id="current-password" für die Eingabe eines Anmeldepassworts.
• Bieten Sie die Funktion Passwort anzeigen an.
• Verwenden Sie aria-label und aria-describedby für Passworteingaben.
• Eingaben nicht verdoppeln:
• Gestalten Sie Formulare so, dass die Tastatur auf Mobilgeräten Eingaben oder Schaltflächen nicht verdeckt.
• Achten Sie darauf, dass Formulare auf Mobilgeräten nutzbar sind: Verwenden Sie gut lesbaren Text und sorgen Sie dafür, dass Eingabefelder und Schaltflächen groß genug sind, um als Touch-Ziele zu dienen.
• Branding und Stil beibehalten: Achten Sie darauf, dass die Registrierungs- und Anmeldeseiten einheitlich gestaltet sind.
• Sowohl im Feld als auch im Labor testen: Bauen Sie Seitenanalysen, Interaktionsanalysen und nutzerorientierte Leistungsmessungen in Ihren Registrierungs- und Anmeldevorgang ein.
• Browser- und geräteübergreifend testen: Das Verhalten von Formularen variiert je nach Plattform erheblich.

Sinnvolles HTML verwenden

Verwenden Sie die für den Job entwickelten Elemente: <form>, <label> und <button>. Sie ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup Bedeutung.

„<form>“ verwenden

Möglicherweise möchten Sie Eingaben in ein <div> einfügen und die Übermittlung von Eingabedaten ausschließlich mit JavaScript verarbeiten. Im Allgemeinen ist es besser, ein einfaches <form>-Element zu verwenden. So ist Ihre Website für Screenreader und andere Hilfsmittel zugänglich, eine Reihe von integrierten Browserfunktionen wird aktiviert, die Entwicklung einer grundlegenden funktionalen Anmeldung für ältere Browser wird vereinfacht und die Anmeldung funktioniert auch dann, wenn JavaScript fehlschlägt.

„<label>“ verwenden

Verwenden Sie <label>, um eine Eingabe zu kennzeichnen.

<label for="email">Email</label>
<input id="email" …>

Dafür gibt es zwei Gründe:

• Wenn Sie auf ein Label tippen oder klicken, wird der Fokus auf die zugehörige Eingabe verschoben. Weisen Sie einem Eingabefeld ein Label zu, indem Sie das Attribut for des Labels mit dem Attribut name oder id des Eingabefelds verknüpfen.
• Screenreader lesen den Labeltext vor, wenn das Label oder die Eingabe des Labels den Fokus erhält.

Verwenden Sie keine Platzhalter als Eingabelabels. Nutzer vergessen leicht, was sie eingegeben haben, sobald sie mit der Texteingabe begonnen haben, insbesondere wenn sie abgelenkt werden („Habe ich eine E‑Mail-Adresse, eine Telefonnummer oder eine Konto-ID eingegeben?“). Es gibt viele andere potenzielle Probleme mit Platzhaltern. Weitere Informationen finden Sie unter Don't Use The Placeholder Attribute und Placeholders in Form Fields Are Harmful.

Am besten platzieren Sie die Labels über den Eingabefeldern. So wird ein einheitliches Design auf Mobilgeräten und Computern ermöglicht. Laut Google AI-Studien können Nutzer Inhalte so schneller erfassen. Sie erhalten Labels und Eingaben in voller Breite und müssen die Breite von Label und Eingabe nicht an den Labeltext anpassen.

Sehen Sie sich die label-position-Demo auf einem Mobilgerät an.

„<button>“ verwenden

Verwende <button> für Schaltflächen. Schaltflächenelemente bieten barrierefreies Verhalten und eine integrierte Funktion zum Senden von Formularen und lassen sich einfach gestalten. Es ist nicht sinnvoll, ein <div> oder ein anderes Element zu verwenden, das als Schaltfläche dargestellt wird.

Achten Sie darauf, dass auf der Schaltfläche „Senden“ steht, was sie bewirkt. Beispiele: Konto erstellen oder Anmelden, nicht Senden oder Starten.

Erfolgreiches Senden des Formulars sicherstellen

Passwortmanager können so erkennen, dass ein Formular gesendet wurde. Dafür gibt es zwei Möglichkeiten:

• Rufen Sie eine andere Seite auf.
• Emulieren Sie die Navigation mit History.pushState() oder History.replaceState() und entfernen Sie das Passwortformular.

Achten Sie bei einer XMLHttpRequest- oder fetch-Anfrage darauf, dass der Anmeldevorgang in der Antwort als erfolgreich gemeldet und entsprechend behandelt wird. Das Formular muss aus dem DOM entfernt und dem Nutzer muss der Erfolg angezeigt werden.

Deaktivieren Sie die Schaltfläche Anmelden, sobald der Nutzer darauf getippt oder geklickt hat. Viele Nutzer klicken mehrmals auf Schaltflächen, auch auf schnellen und reaktionsschnellen Websites. Das verlangsamt die Interaktionen und erhöht die Serverlast.

Deaktivieren Sie die Formularübermittlung nicht, wenn auf eine Nutzereingabe gewartet wird. Deaktivieren Sie beispielsweise nicht die Schaltfläche Anmelden, wenn Nutzer ihre Kunden-PIN noch nicht eingegeben haben. Nutzer übersehen möglicherweise etwas im Formular und versuchen dann wiederholt, auf die (deaktivierte) Schaltfläche Anmelden zu tippen, und denken, dass sie nicht funktioniert. Wenn Sie die Formulareinreichung deaktivieren müssen, sollten Sie dem Nutzer zumindest erklären, was fehlt, wenn er auf die deaktivierte Schaltfläche klickt.

Eingaben nicht verdoppeln

Auf einigen Websites müssen Nutzer E-Mail-Adressen oder Passwörter zweimal eingeben. Das kann die Anzahl der Fehler für einige Nutzer verringern, verursacht aber zusätzlichen Aufwand für alle Nutzer und erhöht die Abbruchraten. Auch wenn Browser E‑Mail-Adressen automatisch ausfüllen oder starke Passwörter vorschlagen, ist es nicht sinnvoll, zweimal nachzufragen. Es ist besser, Nutzern die Möglichkeit zu geben, ihre E‑Mail-Adresse zu bestätigen (das müssen Sie ohnehin tun), und ihnen das Zurücksetzen ihres Passworts zu erleichtern.

Elementattribute optimal nutzen

Hier passiert die eigentliche Magie. Browser haben mehrere hilfreiche integrierte Funktionen, die Attribute von Eingabeelementen verwenden.

Passwörter privat halten, aber Nutzern die Möglichkeit geben, sie bei Bedarf einzusehen

Passwortfelder sollten type="password" enthalten, um Passworttext auszublenden und dem Browser mitzuteilen, dass die Eingabe für Passwörter vorgesehen ist. Browser verwenden verschiedene Techniken, um Eingaberollen zu erkennen und zu entscheiden, ob Passwörter gespeichert werden sollen.

Fügen Sie einen Passwort anzeigen-Schalter hinzu, damit Nutzer den eingegebenen Text prüfen können. Vergessen Sie außerdem nicht, einen Passwort vergessen-Link hinzuzufügen. Weitere Informationen finden Sie unter Passwortanzeige aktivieren.