Best Practices für Anmeldeformulare

Verwenden Sie plattformübergreifende Browserfunktionen, um sichere, barrierefreie und nutzerfreundliche Anmeldeformulare zu erstellen.

Sam Dutton

Wenn sich Nutzer auf deiner Website anmelden müssen, ist ein gutes Design des Anmeldeformulars entscheidend. Das gilt insbesondere für Nutzer mit schlechter Verbindung, 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, das alle Best Practices veranschaulicht:

Checkliste

• Verwende aussagekräftige HTML-Elemente: <form>, <input>, <label> und <button>.
• Kennzeichnen Sie jede Eingabe mit einem <label>.
• Verwenden Sie Elementattribute, um auf integrierte Browserfunktionen zuzugreifen: type, name, autocomplete, required.
• Geben Sie den Eingabeattributen name und id stabile Werte, die sich zwischen Seitenaufrufen oder Website-Bereitstellungen nicht ändern.
• Fügen Sie die Anmeldung in ein eigenes <form>-Element ein.
• Formular erfolgreich einreichen
• Verwende 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 Passworts für die Anmeldung.
• Stellen Sie die Funktion Passwort anzeigen bereit.
• Verwenden Sie aria-label und aria-describedby für Passworteingaben.
• Keine doppelten Eingaben:
• Entwerfen Sie Formulare so, dass die Tastatur auf Mobilgeräten keine Eingaben oder Schaltflächen verdeckt.
• Achten Sie darauf, dass Formulare auf Mobilgeräten nutzbar sind: Verwenden Sie lesbaren Text und sorgen Sie dafür, dass Eingabefelder und Schaltflächen groß genug sind, um als Berührungszielbereiche zu funktionieren.
• Behalten Sie das Branding und den Stil auf Ihren Registrierungs- und Anmeldeseiten bei.
• In der Praxis und im Labor testen: Integriere Seitenanalysen, Interaktionsanalysen und nutzerorientierte Leistungsmessungen in deinen Registrierungs- und Anmeldevorgang.
• In verschiedenen Browsern und auf verschiedenen Geräten testen: Das Verhalten von Formularen variiert je nach Plattform erheblich.

Aussagekräftigen HTML-Code verwenden

Verwenden Sie Elemente, die für die Aufgabe geeignet sind: <form>, <label> und <button>. Sie ermöglichen integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup mehr Bedeutung.

„<form>“ verwenden

Sie könnten versucht sein, Eingaben in ein <div>-Element einzubinden und die Übermittlung der Eingabedaten ausschließlich mit JavaScript zu verarbeiten. Im Allgemeinen ist es besser, ein einfaches <form>-Element zu verwenden. Dadurch wird Ihre Website für Screenreader und andere Hilfsmittel zugänglich, es werden verschiedene integrierte Browserfunktionen aktiviert, die Erstellung einer einfachen funktionalen Anmeldung für ältere Browser wird vereinfacht und die Website kann auch dann funktionieren, wenn JavaScript fehlschlägt.

„<label>“ verwenden

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

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

Dafür gibt es zwei Gründe:

• Durch Tippen oder Klicken auf ein Label wird der Fokus auf die Eingabe verschoben. Verknüpfen Sie ein Label mit einer Eingabe, indem Sie das Attribut for des Labels mit dem Attribut name oder id der Eingabe verwenden.
• Screenreader sagen den Labeltext an, wenn das Label oder die Eingabe des Labels fokussiert wird.

Verwenden Sie keine Platzhalter als Eingabelabels. Nutzer vergessen leicht, wofür die Eingabe gedacht war, 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 weitere potenzielle Probleme mit Platzhaltern. Wenn Sie nicht überzeugt sind, lesen Sie Don't Use The Placeholder Attribute und Placeholders in Form Fields Are Harmful.

Am besten platzieren Sie die Labels über den Eingabefeldern. Dies ermöglicht ein einheitliches Design auf Mobilgeräten und Computern und laut Google AI-Forschung ein schnelleres Scannen durch Nutzer. Sie erhalten Labels und Eingaben in voller Breite und müssen die Breite von Labels und Eingaben nicht an den Labeltext anpassen.

Öffnen Sie die Demo label-position auf einem Mobilgerät, um sich selbst ein Bild zu machen.

„<button>“ verwenden

Verwenden Sie <button> für Schaltflächen. Schaltflächenelemente bieten barrierefreies Verhalten und integrierte Funktionen zum Senden von Formularen und können einfach gestaltet werden. Es macht keinen Sinn, ein <div>-Element oder ein anderes Element zu verwenden, das so tut, als wäre es eine Schaltfläche.

Achten Sie darauf, dass die Beschriftung des Buttons zum Senden die Funktion des Buttons beschreibt. Beispiele: Konto erstellen oder Anmelden, nicht Senden oder Starten.

Erfolgreiches Einreichen des Formulars sicherstellen

Passwortmanagern helfen, zu erkennen, dass ein Formular gesendet wurde. Dafür gibt es zwei Möglichkeiten:

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

Achte bei einer XMLHttpRequest- oder fetch-Anfrage darauf, dass die erfolgreiche Anmeldung in der Antwort gemeldet und verarbeitet wird, indem das Formular aus dem DOM entfernt und der Erfolg dem Nutzer angezeigt wird.

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

Deaktivieren Sie das Senden des Formulars nicht, während Sie auf die Nutzereingabe warten. Deaktivieren Sie beispielsweise nicht die Schaltfläche Anmelden, wenn Nutzer ihre Kunden-PIN nicht eingegeben haben. Nutzer übersehen möglicherweise etwas im Formular und tippen dann wiederholt auf die (deaktivierte) Schaltfläche Anmelden, weil sie denken, dass sie nicht funktioniert. Wenn Sie das Senden von Formularen deaktivieren müssen, erklären Sie dem Nutzer zumindest, was fehlt, wenn er auf die deaktivierte Schaltfläche klickt.

Keine doppelten Eingaben

Auf einigen Websites müssen Nutzer ihre E‑Mail-Adresse oder ihr Passwort zweimal eingeben. Das kann zwar bei einigen Nutzern Fehler reduzieren, verursacht aber bei allen Nutzern zusätzlichen Aufwand und erhöht die Abbruchrate. Zweimal zu fragen, ist auch nicht sinnvoll, wenn Browser E-Mail-Adressen automatisch ausfüllen oder starke Passwörter vorschlagen. Es ist besser, Nutzern die Möglichkeit zu geben, ihre E-Mail-Adresse zu bestätigen (was ohnehin erforderlich ist) und ihr Passwort bei Bedarf einfach zurückzusetzen.

Elementattribute optimal nutzen

Hier geschieht die eigentliche Arbeit. Browser haben mehrere hilfreiche integrierte Funktionen, die Attribute von Eingabeelementen verwenden.

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

Passworteingaben sollten type="password" enthalten, um den Passworttext auszublenden und dem Browser zu signalisieren, dass es sich um eine Passworteingabe handelt. (Beachte, dass Browser verschiedene Techniken verwenden, um Eingaberollen zu verstehen und zu entscheiden, ob sie das Speichern von Passwörtern anbieten.)

Füge die Option Passwort anzeigen hinzu, damit Nutzer den eingegebenen Text überprüfen können. Vergiss auch nicht, einen Link für Passwort vergessen hinzuzufügen. Weitere Informationen finden Sie unter Passwortanzeige aktivieren.

Nutzern von Mobilgeräten die richtige Tastatur zur Verfügung stellen

Verwenden Sie <input type="email">, um Nutzern von Mobilgeräten eine geeignete Tastatur zur Verfügung zu stellen und die grundlegende integrierte E-Mail-Adressvalidierung durch den Browser zu aktivieren – kein JavaScript erforderlich!

Wenn Sie eine Telefonnummer anstelle einer E‑Mail-Adresse verwenden müssen, wird mit <input type="tel"> auf Mobilgeräten ein Tastenfeld aktiviert. Bei Bedarf können Sie auch das Attribut inputmode verwenden: inputmode="numeric" eignet sich ideal für PINs. Everything You Ever Wanted to Know About inputmode enthält weitere Informationen.

Verhindern, dass die mobile Tastatur die Schaltfläche Anmelden verdeckt

Wenn Sie nicht aufpassen, können mobile Tastaturen Ihr Formular verdecken oder, noch schlimmer, die Schaltfläche Anmelden teilweise verdecken. Nutzer geben möglicherweise auf, bevor sie merken, was passiert ist.

Vermeiden Sie dies nach Möglichkeit, indem Sie oben auf der Anmeldeseite nur die Eingabefelder für die E‑Mail-Adresse (oder Telefonnummer) und das Passwort sowie die Schaltfläche Anmelden anzeigen. Andere Inhalte darunter platzieren.

Auf verschiedenen Geräten testen

Du musst deine App auf verschiedenen Geräten testen, die von deiner Zielgruppe verwendet werden, und sie entsprechend anpassen. BrowserStack ermöglicht kostenlose Tests für Open-Source-Projekte auf einer Reihe von echten Geräten und Browsern.

Verwenden Sie zwei Seiten

Einige Websites (darunter Amazon und eBay) umgehen das Problem, indem sie E-Mail-Adresse (oder Telefonnummer) und Passwort auf zwei Seiten abfragen. Dieser Ansatz vereinfacht auch die Nutzung: Der Nutzer muss sich jeweils nur auf eine Sache konzentrieren.

Idealerweise sollte dies mit einem einzigen <form> implementiert werden. Verwende JavaScript, um zuerst nur die E-Mail-Eingabe anzuzeigen, sie dann auszublenden und die Passworteingabe anzuzeigen. Wenn du den Nutzer zwingen musst, zwischen der Eingabe seiner E-Mail-Adresse und seines Passworts zu einer neuen Seite zu wechseln, sollte das Formular auf der zweiten Seite ein ausgeblendetes Eingabeelement mit dem E-Mail-Wert enthalten, damit Passwortmanager den richtigen Wert speichern können. Unter Password Form Styles that Chromium Understands finden Sie ein Codebeispiel.

Nutzern helfen, die erneute Eingabe von Daten zu vermeiden

Du kannst Browsern helfen, Daten korrekt zu speichern und Eingaben automatisch auszufüllen, damit Nutzer sich nicht merken müssen, E‑Mail- und Passwortwerte einzugeben. Das ist besonders auf Mobilgeräten wichtig und entscheidend für E-Mail-Eingaben, die hohe Abbruchraten aufweisen.

Dazu sind zwei Schritte erforderlich:

1. Die Attribute autocomplete, name, id und type helfen Browsern, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für das automatische Ausfüllen verwendet werden können. Damit Daten für Autofill gespeichert werden können, müssen Eingaben in modernen Browsern außerdem einen stabilen name- oder id-Wert haben (nicht zufällig bei jedem Seitenaufbau oder jeder Websitebereitstellung generiert) und sich in einem <form> mit einer submit-Schaltfläche befinden.

2. Das Attribut autocomplete hilft Browsern, Eingaben mithilfe gespeicherter Daten korrekt automatisch auszufüllen.

Verwenden Sie für E‑Mail-Eingaben autocomplete="username", da username von Passwortmanagern in modernen Browsern erkannt wird. Sie sollten jedoch type="email" verwenden und können auch id="email" und name="email" verwenden.

Verwende für Passworteingaben die entsprechenden Werte für autocomplete und id, damit Browser zwischen neuen und aktuellen Passwörtern unterscheiden können.

autocomplete="new-password" und id="new-password" für ein neues Passwort verwenden

• Verwende autocomplete="new-password" und id="new-password" für die Passworteingabe in einem Registrierungsformular oder für das neue Passwort in einem Formular zum Ändern des Passworts.

autocomplete="current-password" und id="current-password" für ein vorhandenes Passwort verwenden

• Verwende autocomplete="current-password" und id="current-password" für die Passworteingabe in einem Anmeldeformular oder für die Eingabe des alten Passworts des Nutzers in einem Formular zum Ändern des Passworts. Dadurch wird dem Browser mitgeteilt, dass er das aktuelle Passwort verwenden soll, das er für die Website gespeichert hat.

Bei einem Anmeldeformular:

<input type="password" autocomplete="new-password" id="new-password" …>

Für die Anmeldung:

<input type="password" autocomplete="current-password" id="current-password" …>

Passwortmanager unterstützen

Verschiedene Browser handhaben das automatische Ausfüllen von E-Mail-Adressen und Passwortvorschläge etwas unterschiedlich, die Auswirkungen sind jedoch weitgehend gleich. In Safari 11 und höher auf dem Computer wird beispielsweise der Passwortmanager angezeigt und dann die biometrische Authentifizierung (Fingerabdruck- oder Gesichtserkennung) verwendet, sofern verfügbar.

In Chrome auf dem Computer werden E‑Mail-Vorschläge angezeigt, der Passwortmanager wird eingeblendet und das Passwort wird automatisch ausgefüllt.

Passwort- und Autofill-Systeme in Browsern sind nicht einfach. Die Algorithmen zum Erraten, Speichern und Anzeigen von Werten sind nicht standardisiert und variieren von Plattform zu Plattform. Hidde de Vries weist beispielsweise darauf hin, dass der Passwortmanager von Firefox seine Heuristik durch ein Rezeptsystem ergänzt.

Autofill: What web devs should know, but don't enthält viele weitere Informationen zur Verwendung von name und autocomplete. In der HTML-Spezifikation sind alle 59 möglichen Werte aufgeführt.

Browser erlauben, ein starkes Passwort vorzuschlagen

Moderne Browser verwenden Heuristiken, um zu entscheiden, wann die Passwortmanager-Benutzeroberfläche angezeigt und ein starkes Passwort vorgeschlagen werden soll.

So funktioniert es in Safari auf dem Computer.

(Vorschläge für starke, eindeutige Passwörter sind in Safari seit Version 12.0 verfügbar.)

Dank integrierter Passwortgeneratoren in Browsern müssen sich Nutzer und Entwickler keine Gedanken darüber machen, was ein „starkes Passwort“ ist. Da Browser Passwörter sicher speichern und bei Bedarf automatisch ausfüllen können, müssen sich Nutzer keine Passwörter merken oder eingeben. Wenn Sie Nutzer dazu ermutigen, die integrierten Passwortgeneratoren des Browsers zu verwenden, ist es wahrscheinlicher, dass sie ein eindeutiges, starkes Passwort auf Ihrer Website verwenden und ein Passwort nicht wiederverwenden, das an anderer Stelle kompromittiert werden könnte.

Nutzer davor bewahren, versehentlich Eingaben zu verpassen

Fügen Sie das Attribut required sowohl dem E-Mail- als auch dem Passwortfeld hinzu. Moderne Browser fordern Nutzer automatisch auf, fehlende Daten einzugeben, und setzen den Fokus auf die entsprechenden Felder. Kein JavaScript erforderlich.

Für Finger und Daumen entwerfen

Die Standardbrowsergröße für fast alles, was mit Eingabeelementen und Schaltflächen zu tun hat, ist zu klein, insbesondere auf Mobilgeräten. Das mag offensichtlich klingen, ist aber ein häufiges Problem bei Anmeldeformularen auf vielen Websites.

Achten Sie darauf, dass Eingabefelder und Schaltflächen groß genug sind.

Die Standardgröße und das Padding für Eingaben und Schaltflächen sind auf Computern zu klein und auf Mobilgeräten noch schlechter.

Gemäß den Android-Richtlinien zur Barrierefreiheit im Internet beträgt die empfohlene Zielgröße für Touchscreen-Objekte 7–10 mm. Die Apple-Schnittstellenrichtlinien empfehlen 48 × 48 Pixel und das W3C mindestens 44 × 44 CSS-Pixel. Füge auf dieser Grundlage (mindestens) etwa 15 Pixel Abstand zu Eingabeelementen und Schaltflächen für Mobilgeräte und etwa 10 Pixel auf Computern hinzu. Probieren Sie das mit einem echten Mobilgerät und einem echten Finger oder Daumen aus. Sie sollten alle Eingaben und Schaltflächen problemlos antippen können.

Mit der Lighthouse-Prüfung Die Größe der Berührungsziele ist nicht angemessen können Sie den Prozess der Erkennung zu kleiner Eingabeelemente automatisieren.

Für Daumen optimieren

Suchen Sie nach Berührungszielbereich und Sie sehen viele Bilder von Zeigefingern. In der Realität verwenden jedoch viele Menschen ihre Daumen, um mit Smartphones zu interagieren. Daumen sind größer als Zeigefinger und die Steuerung ist weniger präzise. Umso wichtiger sind ausreichend große Berührungszielbereiche.

Text groß genug machen

Wie bei der Größe und dem Abstand ist die Standard-Schriftgröße des Standardbrowsers für Eingabeelemente und Schaltflächen zu klein, insbesondere auf Mobilgeräten.

Browser auf verschiedenen Plattformen stellen Schriftarten unterschiedlich groß dar. Daher ist es schwierig, eine bestimmte Schriftgröße anzugeben, die überall gut funktioniert. Eine kurze Umfrage zu beliebten Websites zeigt, dass auf Computern Größen von 13–16 Pixeln verwendet werden. Diese physische Größe ist ein guter Mindestwert für Text auf Mobilgeräten.

Das bedeutet, dass ihr auf Mobilgeräten eine größere Pixelgröße verwenden müsst: 16px ist in Chrome für Computer gut lesbar, aber selbst mit guter Sehkraft ist es schwierig, Text mit 16px in Chrome für Android zu lesen. Mit Medienabfragen können Sie für verschiedene Darstellungsbereichsgrößen unterschiedliche Schriftgrößen in Pixeln festlegen. 20px ist auf Mobilgeräten in Ordnung, aber du solltest das mit Freunden oder Kollegen mit eingeschränktem Sehvermögen testen.

Mit der Lighthouse-Prüfung Dokument verwendet keine lesbaren Schriftgrößen können Sie den Prozess der Erkennung von zu kleinem Text automatisieren.

Ausreichend Platz zwischen Eingaben lassen

Fügen Sie genügend Abstand hinzu, damit Eingaben als Berührungszielbereiche gut funktionieren. Mit anderen Worten: Lassen Sie etwa einen Fingerbreit Platz.

Achte darauf, dass deine Eingaben gut sichtbar sind.

Die Standardrahmenstile für Eingaben machen sie schwer erkennbar. Auf einigen Plattformen wie Chrome für Android sind sie fast unsichtbar.

Fügen Sie neben dem Padding auch einen Rahmen hinzu: Auf einem weißen Hintergrund ist es im Allgemeinen sinnvoll, #ccc oder dunkler zu verwenden.

Integrierte Browserfunktionen verwenden, um vor ungültigen Eingabewerten zu warnen

Browser haben integrierte Funktionen, um eine grundlegende Formularvalidierung für Eingaben mit einem type-Attribut durchzuführen. Browser warnen, wenn Sie ein Formular mit einem ungültigen Wert senden, und setzen den Fokus auf die problematische Eingabe.

Sie können den CSS-Selektor :invalid verwenden, um ungültige Daten hervorzuheben. Verwenden Sie :not(:placeholder-shown), um zu vermeiden, dass Eingaben ohne Inhalt ausgewählt werden.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Probieren Sie verschiedene Möglichkeiten aus, Eingaben mit ungültigen Werten hervorzuheben.

JavaScript bei Bedarf verwenden

Passwortanzeige ein-/ausblenden

Sie sollten die Ein-/Aus-Schaltfläche Passwort anzeigen hinzufügen, damit Nutzer den eingegebenen Text prüfen können. Die Nutzerfreundlichkeit leidet, wenn Nutzer den eingegebenen Text nicht sehen können. Derzeit gibt es keine integrierte Möglichkeit, dies zu tun, aber es gibt Pläne für die Implementierung. Stattdessen müssen Sie JavaScript verwenden.

Im folgenden Code wird ein Text-Button verwendet, um die Funktion Passwort anzeigen hinzuzufügen.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Hier ist der CSS-Code, mit dem der Button wie Nur-Text aussieht:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

Und der JavaScript-Code zum Anzeigen des Passworts:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Hier ist das Endergebnis:

Passworteingaben barrierefrei machen

Verwende aria-describedby, um Passwortregeln zu beschreiben, indem du die ID des Elements angibst, das die Einschränkungen beschreibt. Screenreader geben den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung aus.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Wenn du die Funktion Passwort anzeigen hinzufügst, solltest du eine aria-label einfügen, um darauf hinzuweisen, dass das Passwort angezeigt wird. Andernfalls könnten Nutzer versehentlich Passwörter preisgeben.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

In der folgenden Demo können Sie beide ARIA-Funktionen in Aktion sehen:

Weitere Tipps finden Sie unter Barrierefreie Formulare erstellen.

In Echtzeit und vor dem Einreichen validieren

HTML-Formularelemente und -attribute haben integrierte Funktionen für die grundlegende Validierung. Sie sollten aber auch JavaScript verwenden, um eine robustere Validierung durchzuführen, während Nutzer Daten eingeben und wenn sie versuchen, das Formular zu senden.

In Schritt 5 des Codelabs für das Anmeldeformular wird die Constraint Validation API (die weitgehend unterstützt wird) verwendet, um eine benutzerdefinierte Validierung mit der integrierten Browser-UI hinzuzufügen, um den Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen zur Verwendung von JavaScript für komplexere Echtzeitvalidierungen

Analysen und RUM

„Was man nicht misst, kann man auch nicht verbessern“ gilt insbesondere für Registrierungs- und Anmeldeformulare. Sie müssen sich Ziele setzen, den Erfolg messen, Ihre Website verbessern und den Vorgang wiederholen.

Discount-Usability-Tests können hilfreich sein, um Änderungen auszuprobieren. Sie benötigen jedoch reale Daten, um wirklich zu verstehen, wie Ihre Nutzer Ihre Registrierungs- und Anmeldeformulare erleben:

• Seitenanalysen: Aufrufe der Registrierungs- und Anmeldeseite, Absprungraten und Ausstiege.
• Interaktionsanalysen: Zieltrichter (Wo brechen Nutzer den Anmelde- oder Registrierungsvorgang ab?) und Ereignisse (Welche Aktionen führen Nutzer aus, wenn sie mit Ihren Formularen interagieren?)
• Websiteleistung: Nutzerorientierte Messwerte (Sind Ihre Registrierungs- und Anmeldeformulare aus irgendeinem Grund langsam und wenn ja, was ist die Ursache?).

Du kannst auch A/B-Tests implementieren, um verschiedene Ansätze für die Registrierung und Anmeldung auszuprobieren, und gestaffelte Roll-outs, um die Änderungen an einer Teilmenge von Nutzern zu testen, bevor du sie für alle Nutzer veröffentlichst.

Allgemeine Richtlinien

Eine gut gestaltete Benutzeroberfläche und Nutzererfahrung können dazu beitragen, dass weniger Anmeldeformulare abgebrochen werden:

• Nutzer sollten nicht nach der Anmeldung suchen müssen. Fügen Sie oben auf der Seite einen Link zum Anmeldeformular ein und verwenden Sie dabei gängige Begriffe wie Anmelden, Konto erstellen oder Registrieren.
• Konzentrieren Sie sich auf das Wesentliche. Anmeldeformulare sind nicht der richtige Ort, um Nutzer mit Angeboten und anderen Websitefunktionen abzulenken.
• Minimieren Sie die Komplexität der Anmeldung. Erhebe andere Nutzerdaten (z. B. Adressen oder Kreditkartendetails) nur, wenn Nutzer einen klaren Vorteil darin sehen, diese Daten anzugeben.
• Bevor Nutzer mit dem Ausfüllen des Anmeldeformulars beginnen, sollten Sie die Vorzüge klar darlegen. Welche Vorteile hat die Anmeldung? Geben Sie Nutzern konkrete Anreize, die Registrierung abzuschließen.
• Ermöglichen Sie Nutzern, sich mit einer Mobiltelefonnummer statt einer E‑Mail-Adresse zu identifizieren, da einige Nutzer möglicherweise keine E‑Mail-Adresse haben.
• Machen Sie es Nutzern leicht, ihr Passwort zurückzusetzen, und platzieren Sie den Link Passwort vergessen? gut sichtbar.
• Verlinke deine Nutzungsbedingungen und deine Datenschutzerklärung: Mach den Nutzern von Anfang an klar, wie du ihre Daten schützt.
• Fügen Sie das Logo und den Namen Ihres Unternehmens oder Ihrer Organisation auf den Registrierungs- und Anmeldeseiten ein und achten Sie darauf, dass Sprache, Schriftarten und Stile mit dem Rest Ihrer Website übereinstimmen. Einige Formulare wirken, als würden sie nicht zur selben Website wie andere Inhalte gehören, insbesondere wenn sie eine deutlich andere URL haben.

Weiterlernen

• Tolle Formulare erstellen
• Best Practices für das Design mobiler Formulare
• Leistungsfähigere Formularsteuerelemente
• Barrierefreie Formulare erstellen
• Streamlining the Sign-in Flow Using Credential Management API
• Telefonnummern im Web mit der WebOTP API bestätigen