Best Practices für Anmeldeformulare

Mit plattformübergreifenden Browserfunktionen können Sie sichere, leicht zugängliche und nutzerfreundliche Anmeldeformulare erstellen.

Wenn sich Nutzer bei deiner Website anmelden müssen, ist ein gutes Design des Anmeldeformulars entscheidend. Dies gilt insbesondere für Menschen mit schlechter Verbindung, unterwegs, in Eile oder unter Stress. Schlecht gestaltete Anmeldeformulare erhalten hohe Absprungraten. Jeder Absprung kann einen verlorenen und verärgerten Nutzer bedeuten – und nicht nur eine verpasste Gelegenheit, sich anzumelden.

Hier ist ein Beispiel für ein einfaches Anmeldeformular, das alle Best Practices veranschaulicht:

Checkliste

• Aussagekräftige HTML-Elemente verwenden: <form>, <input>, <label> und <button>.
• Kennzeichnen Sie jede Eingabe mit einem <label>.
• Sie können Elementattribute verwenden, um auf integrierte Browserfunktionen zuzugreifen: type, name, autocomplete, required.
• Geben Sie den Eingabeattributen name und id stabile Werte, die sich beim Seitenaufbau oder bei Websitebereitstellungen nicht ändern.
• Verwenden Sie für die Anmeldung ein eigenes <form>-Element.
• Vergewissere dich, dass das Formular erfolgreich gesendet wurde.
• Verwenden Sie autocomplete="new-password" und id="new-password" für die Passworteingabe in einem Anmeldeformular und für das neue Passwort in einem Formular zum Zurücksetzen des Passworts.
• Verwenden Sie autocomplete="current-password" und id="current-password", um ein Anmeldepasswort einzugeben.
• Geben Sie die Funktion Passwort anzeigen an.
• Verwenden Sie aria-label und aria-describedby für Passworteingaben.
• Verdoppeln Sie Eingaben nicht.
• Gestalten Sie die Formulare so, dass die Mobilgerätetastatur keine Eingaben oder Schaltflächen verdeckt.
• Achten Sie darauf, dass Formulare auf Mobilgeräten nutzbar sind: Verwenden Sie lesbaren Text und achten Sie darauf, dass Eingaben und Schaltflächen groß genug sind, um als Berührungszielbereiche zu funktionieren.
• Sorgen Sie für Branding und Stil auf Ihren Registrierungs- und Anmeldeseiten.
• Tests sowohl im Praxis- als auch im Lab: Integrieren Sie Seitenanalysen, Interaktionsanalysen und nutzerorientierte Leistungsmessungen in Ihren Registrierungs- und Anmeldevorgang.
• Browser- und geräteübergreifende Tests: Das Formularverhalten variiert je nach Plattform erheblich.

Aussagekräftigen HTML-Code verwenden

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

„<form>“ verwenden

Sie könnten versucht sein, Eingaben in <div> zu verpacken und die Übermittlung von Eingabedaten nur mit JavaScript zu verarbeiten. Im Allgemeinen ist es besser, ein einfaches <form>-Element zu verwenden. Ihre Website wird so für Screenreader und andere Hilfsgeräte zugänglich gemacht, eine Reihe von integrierten Browserfunktionen ermöglicht, die grundlegende funktionale Anmeldung für ältere Browser vereinfacht und funktioniert auch dann, wenn JavaScript fehlschlägt.

„<label>“ verwenden

Verwenden Sie einen <label>, um einer Eingabe ein Label hinzuzufügen.

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

Zwei Gründe:

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

Verwenden Sie keine Platzhalter als Eingabelabels. Wenn Nutzer mit der Eingabe von Text begonnen haben, ist es möglich, dass sie vergessen, wofür sie verwendet wurden, insbesondere wenn sie ablenkend werden („Habe ich eine E-Mail-Adresse, eine Telefonnummer oder eine Konto-ID eingegeben?“). Es gibt noch viele weitere potenzielle Probleme mit Platzhaltern. Weitere Informationen finden Sie unter Verwenden Sie das Platzhalterattribut nicht und Placeholders in Form Fields Are Schädlich, falls Sie nicht sicher sind.

Am besten ist es, die Labels über den Eingaben zu platzieren. Dies ermöglicht ein einheitliches Design auf Mobilgeräten und Computern sowie gemäß KI-Studien von Google ein schnelleres Scannen durch die Nutzer. Sie erhalten Labels in voller Breite und Eingaben und müssen das Label und die Eingabebreite nicht an den Labeltext anpassen.

Öffnen Sie die label-position-Glitch auf einem Mobilgerät, um es selbst zu sehen.

„<button>“ verwenden

Verwenden Sie <button> für Schaltflächen. Schaltflächenelemente bieten barrierefreie Funktionen, integrierte Formularübermittlungsfunktionen und können einfach gestaltet werden. Es macht keinen Sinn, ein <div> oder ein anderes Element zu verwenden, das vorgibt, eine Schaltfläche zu sein.

Achten Sie darauf, dass auf der Schaltfläche zum Senden der Inhalt angegeben ist. Beispiele: Konto erstellen oder Anmelden, nicht Senden oder Starten.

Erfolgreiche Formulareinreichung sicherstellen

Informieren Sie Passwortmanager darüber, 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 die erfolgreiche Anmeldung in der Antwort gemeldet und verarbeitet wird, indem das Formular aus dem DOM genommen und der Erfolg des Vorgangs angezeigt wird.

Du kannst die Schaltfläche Anmelden deaktivieren, nachdem der Nutzer darauf getippt oder geklickt hat. Viele Nutzer klicken mehrmals auf Schaltflächen, auch auf Websites, die schnell und responsiv sind. Das verlangsamt Interaktionen und erhöht die Serverlast.

Umgekehrt sollten Sie die Formularübermittlung, die auf Nutzereingabe wartet, nicht deaktivieren. Deaktivieren Sie beispielsweise nicht die Schaltfläche Anmelden, wenn Nutzer nicht ihre Kunden-PIN eingegeben haben. Nutzer können etwas im Formular verpassen und versuchen dann wiederholt auf die (deaktivierte) Schaltfläche Anmelden zu tippen, und glauben, dass es nicht funktioniert. Wenn Sie das Senden des Formulars deaktivieren müssen, erklären Sie dem Nutzer zumindest, was fehlt, wenn er auf die deaktivierte Schaltfläche klickt.

Eingaben nicht verdoppeln

Auf einigen Websites müssen Nutzer ihre E-Mail-Adresse oder ihr Passwort zweimal eingeben. Das kann die Fehlerzahl für einige Nutzer reduzieren, verursacht jedoch zusätzlichen Aufwand für alle Nutzer und erhöht die Ausstiegsraten. Außerdem ist es nicht sinnvoll, die Frage zweimal zu stellen, 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 (dies müssen Sie aber dennoch tun), und es ihnen leicht machen, ihr Passwort bei Bedarf zurückzusetzen.

Elementattribute optimal nutzen

Hier kommt die Magie ins Spiel! Browser haben mehrere hilfreiche integrierte Funktionen, die Eingabeelementattribute verwenden.

Passwörter geheim halten, aber Nutzern erlauben, sie einzusehen

Passworteingaben sollten den Wert type="password" haben, um Passworttext auszublenden und dem Browser zu vermitteln, dass die Eingabe für Passwörter bestimmt ist. Hinweis: Browser verwenden eine Vielzahl von Techniken, um Eingaberollen zu verstehen und zu entscheiden, ob das Speichern von Passwörtern angeboten wird oder nicht.

Sie sollten eine Ein-/Aus-Schaltfläche für Passwort anzeigen hinzufügen, damit Nutzer den von ihnen eingegebenen Text prüfen können. Denken Sie außerdem daran, den Link 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 mobilen Nutzern eine geeignete Tastatur zu geben und die grundlegende Überprüfung der integrierten E-Mail-Adresse durch den Browser zu ermöglichen. JavaScript ist nicht erforderlich.

Wenn Sie statt einer E-Mail-Adresse eine Telefonnummer verwenden müssen, können Sie mit <input type="tel"> die Telefontastatur auf Mobilgeräten aktivieren. Bei Bedarf können Sie auch das Attribut inputmode verwenden: inputmode="numeric" ist ideal für PIN-Nummern. Alles, was Sie über den Eingabemodus wissen wollten, enthält weitere Informationen.

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

Wenn Sie nicht aufpassen, können mobile Tastaturen das Formular verdeckt oder die Schaltfläche Anmelden teilweise verdeckt werden. Nutzende geben möglicherweise auf, bevor sie erkennen, was passiert ist.

Dies lässt sich vermeiden, indem nur die Eingaben für E-Mail-Adresse, Telefonnummer und Passwort sowie die Schaltfläche Anmelden oben auf der Anmeldeseite angezeigt werden. Sonstige Inhalte unten platzieren.

Auf verschiedenen Geräten testen

Die Tests müssen auf verschiedenen Geräten für Ihre Zielgruppe durchgeführt und entsprechend angepasst werden. BrowserStack ermöglicht kostenloses Testen von Open-Source-Projekten auf einer Reihe von echten Geräten und Browsern.

Verwenden Sie zwei Seiten.

Einige Websites (einschließlich Amazon und eBay) umgehen dieses Problem, indem sie auf zwei Seiten nach der E-Mail-Adresse/Telefonnummer und dem Passwort fragen. Dieser Ansatz vereinfacht auch die Nutzung: Der Nutzer wird jeweils nur mit einer Sache betraut.

Idealerweise sollte dies mit einem einzigen <form>-Element implementiert werden. Verwenden Sie JavaScript, um zunächst nur die E-Mail-Eingabe anzuzeigen. Blenden Sie sie dann aus und blenden Sie die Passworteingabe ein. Wenn Sie den Nutzer zwingen müssen, zwischen der Eingabe der E-Mail-Adresse und des Passworts zu einer neuen Seite zu wechseln, sollte das Formular auf der zweiten Seite ein verstecktes Eingabeelement mit dem E-Mail-Wert enthalten, damit Passwortmanager den richtigen Wert speichern können. Unter Passwortformstile, die Chromium versteht finden Sie ein Codebeispiel.

Nutzer müssen keine Daten immer wieder neu eingeben

Sie können Browsern dabei helfen, Daten korrekt zu speichern und automatisch ausgefüllte Eingaben vorzunehmen, sodass Nutzer nicht daran denken müssen, E-Mail- und Passwortwerte einzugeben. Dies ist besonders wichtig auf Mobilgeräten und für E-Mail-Eingaben wichtig, da diese zu hohen Ausstiegsraten führen.

Dieser Vorgang besteht aus zwei Teilen:

1. Die Attribute autocomplete, name, id und type helfen Browsern dabei, die Rolle von Eingaben zu verstehen, um Daten zu speichern, die später für die Autofill-Funktion verwendet werden können. Damit Daten für die Autofill-Funktion gespeichert werden können, benötigen moderne Browser außerdem einen stabilen name- oder id-Wert, der nicht bei jedem Seitenaufbau oder bei jedem Website-Deployment zufällig generiert wird und in einem <form>-Element mit einer submit-Schaltfläche vorhanden sein muss.

2. Das Attribut autocomplete unterstützt Browser dabei, Eingaben automatisch mit gespeicherten Daten automatisch auszufüllen.

Verwenden Sie für E-Mail-Eingaben autocomplete="username", da username von Passwortmanagern in modernen Browsern erkannt wird. Allerdings sollten Sie type="email" verwenden und eventuell id="email" und name="email" verwenden.

Verwenden Sie bei der Passworteingabe die entsprechenden Werte für autocomplete und id, damit Browser zwischen neuen und aktuellen Passwörtern unterscheiden können.

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

• Verwenden Sie autocomplete="new-password" und id="new-password" für die Passworteingabe in einem Anmeldeformular oder das neue Passwort in einem Formular zur Passwortänderung.

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

• Verwenden Sie autocomplete="current-password" und id="current-password" für die Passworteingabe in einem Anmeldeformular oder das alte Passwort des Nutzers in ein Formular zum Ändern des Passworts. Dadurch weiß der Browser, dass das aktuelle Passwort, das er für die Website gespeichert hat, verwendet werden soll.

Registrierungsformular:

<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 die Autofill-Funktion für E-Mails und Passwortvorschläge etwas unterschiedlich, aber die Auswirkungen sind weitgehend gleich. In Safari 11 und höher auf dem Computer wird beispielsweise der Passwortmanager angezeigt und dann wird gegebenenfalls die biometrische Authentifizierung (Fingerabdruck oder Gesichtserkennung) verwendet.

Chrome auf dem Desktop zeigt E-Mail-Vorschläge an, zeigt den Passwortmanager an und fügt das Passwort automatisch ein.

Browserpasswort und Autofill-Systeme sind nicht einfach. Die Algorithmen zum Erraten, Speichern und Anzeigen von Werten sind nicht standardisiert und variieren von Plattform zu Plattform. Wie von Hidde de Vries erwähnt wird: „Der Passwortmanager von Firefox ergänzt seine Heuristik durch ein Rezeptsystem.“

Autofill: Was Web-Entwickler wissen sollten, aber nicht haben viele weitere Informationen zur Verwendung von name und autocomplete. In der HTML-Spezifikation sind alle 59 möglichen Werte aufgelistet.

Browser aktivieren, um ein starkes Passwort vorzuschlagen

In modernen Browsern wird anhand von Heuristiken entschieden, wann die Benutzeroberfläche des Passwortmanagers angezeigt und ein starkes Passwort vorgeschlagen werden soll.

So funktioniert Safari auf dem Computer:

(Seit Version 12.0 gibt es in Safari einen starken Vorschlag für eindeutige Passwörter.)

Integrierte Passwortgeneratoren für Browser sorgen dafür, dass Nutzer und Entwickler nicht herausfinden müssen, 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 Nutzer dazu ermutigt werden, integrierte Browser-Passwortgeneratoren zu verwenden, erhöht sich auch die Wahrscheinlichkeit, dass sie ein eindeutiges, starkes Passwort auf Ihrer Website verwenden und ein Passwort wiederverwenden, das an anderer Stelle gehackt werden könnte.

Nutzern helfen, versehentlich fehlende Eingaben zu vermeiden

Fügen Sie das Attribut required sowohl in die E-Mail- als auch in das Passwortfeld ein. In modernen Browsern werden fehlende Daten automatisch erkannt und der Fokus darauf gesetzt. JavaScript ist nicht erforderlich.

Design für Finger und Daumen

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 erscheinen, aber es ist ein häufiges Problem mit Anmeldeformularen auf vielen Websites.

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

Die Standardgröße und der Abstand für Eingaben und Schaltflächen sind auf Computern zu klein und auf Mobilgeräten sogar zu klein.

Gemäß den Android-Richtlinien zur Barrierefreiheit beträgt die empfohlene Zielgröße für Touchscreen-Objekte 7–10 mm. Die Richtlinien für die Apple-Benutzeroberfläche empfehlen 48 x 48 Pixel und das W3C empfiehlt mindestens 44 x 44 CSS-Pixel. Fügen Sie daher Eingabeelementen und -schaltflächen für Mobilgeräte mindestens 15 Pixel und auf Computern etwa 10 Pixel hinzu. Probieren Sie dies mit einem echten Mobilgerät und einem echten Finger oder Daumen aus. Sie sollten ruhig alle Eingaben und Schaltflächen antippen können.

Die Größe der Tippziele hat nicht die richtige Größe. Mit der Lighthouse-Prüfung können Sie den Prozess zur Erkennung von zu kleinen Eingabeelementen automatisieren.

Design für Daumen

Wenn Sie nach Berührungsziel suchen, finden Sie viele Bilder der Zeigefinger. In der realen Welt verwenden viele Menschen ihren Daumen. Daumen sind größer als Zeigefinger, und die Steuerung ist weniger präzise. Umso mehr Gründe für angemessen große Berührungszielbereiche.

Text groß genug machen

Wie bei Größe und Abstand ist die Standardschriftgröße des Browsers für Eingabeelemente und Schaltflächen zu klein, insbesondere auf Mobilgeräten.

Da Browser auf verschiedenen Plattformen die Schriftgröße unterschiedlich anpassen, ist es schwierig, eine bestimmte Schriftgröße festzulegen, die überall gut funktioniert. Eine kurze Umfrage zu beliebten Websites zeigt eine Bildschirmgröße von 13 bis 16 Pixeln auf Computern. Für Text auf Mobilgeräten ist diese physische Größe ein gutes Minimum.

Das bedeutet, dass Sie auf Mobilgeräten ein größeres Pixel verwenden müssen: 16px in Chrome für Desktop-Computer ist gut lesbar, aber selbst mit gutem Sehvermögen ist es in Chrome für Android schwierig, 16px-Text zu lesen. Mithilfe von Medienabfragen können Sie unterschiedliche Schrift-Pixelgrößen für unterschiedliche Größen des Darstellungsbereichs festlegen. 20px ist in etwa auf Mobilgeräten richtig, aber du solltest dies mit Freunden oder Kollegen testen, die ein eingeschränktes Sehvermögen haben.

Das Dokument verwendet nicht lesbare Schriftgrößen. Mit der Lighthouse-Prüfung können Sie den Prozess zur Erkennung von zu kleinerem Text automatisieren.

Achten Sie darauf, dass zwischen den Eingaben genügend Platz ist.

Fügen Sie einen ausreichenden Rand hinzu, damit Eingaben gut funktionieren und Berührungsziele gut funktionieren. Anders ausgedrückt: Streben Sie einen Rand von etwa einem Finger aus.

Eingaben müssen deutlich sichtbar sein

Durch den standardmäßigen Rahmenstil für Eingaben sind sie schwer zu erkennen. Auf einigen Plattformen, wie Chrome für Android, sind sie fast unsichtbar.

Zusätzlich zum Abstand sollten Sie einen Rahmen hinzufügen. Auf weißem Hintergrund empfiehlt es sich, #ccc oder einen dunkleren Wert zu verwenden.

Mit integrierten Browserfunktionen vor ungültigen Eingabewerten warnen

Browser haben integrierte Funktionen für eine grundlegende Formularvalidierung für Eingaben mit einem type-Attribut. Browser geben eine Warnung aus, wenn Sie ein Formular mit einem ungültigen Wert senden und den Fokus auf die problematische Eingabe legen.

Mit dem CSS-Selektor :invalid können Sie ungültige Daten hervorheben. Verwenden Sie :not(:placeholder-shown), um keine Eingaben ohne Inhalt auszuwählen.

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

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

Bei Bedarf JavaScript verwenden

Passwortanzeige ein-/ausschalten

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

Im folgenden Code wird eine Textschaltfläche 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 sehen Sie den CSS-Code, mit dem die Schaltfläche wie reiner 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 zur Anzeige 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 das Endergebnis:

Passworteingaben zugänglich machen

Verwenden Sie aria-describedby, um Passwortregeln festzulegen. Geben Sie dazu die ID des Elements an, das die Einschränkungen beschreibt. Screenreader stellen den Labeltext, den Eingabetyp (Passwort) und die Beschreibung bereit.

<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 Sie die Funktion Passwort anzeigen hinzufügen, müssen Sie ein aria-label einfügen, das darauf hinweist, dass das Passwort angezeigt wird. Andernfalls könnten Nutzende ungewollt 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 Glitch kannst du beide ARIA-Funktionen in Aktion sehen:

Im Artikel Formulare barrierefrei erstellen finden Sie weitere Tipps dazu, wie Sie Formulare barrierefrei gestalten.

In Echtzeit und vor der Einreichung validieren

HTML-Formularelemente und -attribute haben integrierte Funktionen für die grundlegende Validierung. Sie sollten jedoch auch JavaScript verwenden, um eine zuverlässigere Validierung durchzuführen, während Nutzer Daten eingeben und das Formular senden möchten.

In Schritt 5 des Codelab zu Anmeldeformularen wird die Constraint Validation API (die allgemein unterstützt) verwendet, um eine benutzerdefinierte Validierung mithilfe der integrierten Browser-Benutzeroberfläche hinzuzufügen, um Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen finden Sie unter JavaScript für komplexere Echtzeitvalidierungen verwenden.

Analytics und RUM

Das gilt insbesondere für Registrierungs- und Anmeldeformulare. Legen Sie Ziele fest, messen Sie den Erfolg, verbessern Sie Ihre Website und wiederholen Sie den Vorgang.

Rabatte auf Nutzerfreundlichkeit testen können hilfreich sein, um Änderungen auszuprobieren. Sie benötigen jedoch reale Daten, um wirklich zu verstehen, wie Nutzer die Registrierungs- und Anmeldeformulare erleben:

• Seitenanalyse: Anzahl der Registrierungs- und Anmeldeseiten, Absprungraten und Ausstiege
• Interaktionsanalyse: Zieltrichter (wo werden Nutzer den Anmelde- oder Anmeldevorgang abbrechen?) und Ereignisse (Welche Aktionen führen Nutzer aus, wenn sie mit Ihren Formularen interagieren?)
• Websiteleistung: Nutzerbezogene Messwerte. Sind Ihre Registrierungs- und Anmeldeformulare aus irgendeinem Grund langsam und wenn ja, woran liegt das?

Sie können auch A/B-Tests implementieren, um verschiedene Ansätze für die Registrierung und Anmeldung auszuprobieren, oder gestaffelte Roll-outs, um die Änderungen für eine Untergruppe von Nutzern zu validieren, bevor sie für alle Nutzer freigegeben werden.

Allgemeine Richtlinien

Eine gut durchdachte Benutzeroberfläche und eine gute UX können das Verlassen von Anmeldeformularen verringern:

• Lassen Sie die Nutzer nicht ständig nach der Anmeldung suchen! Fügen Sie oben auf der Seite einen Link zum Anmeldeformular ein. Verwenden Sie gut verständliche Formulierungen wie Anmelden, Konto erstellen oder Registrieren.
• Bleib fokussiert! Anmeldeformulare sind nicht dafür gedacht, Nutzer durch Angebote und andere Funktionen der Website abzulenken.
• Vereinfachen Sie die Anmeldung. Erheben Sie andere Nutzerdaten (z. B. Adressen oder Kreditkartendetails) nur, wenn Nutzer deutlich von der Bereitstellung dieser Daten sehen.
• Bevor Nutzer mit dem Anmeldeformular beginnen, verdeutlichen Sie Nutzern, was das Wertversprechen ist. Wie profitieren sie von einer Anmeldung? Bieten Sie den Nutzern konkrete Anreize, um die Registrierung abzuschließen.
• Nutzer sollten sich nach Möglichkeit mit einer Mobiltelefonnummer anstelle einer E-Mail-Adresse identifizieren, da einige Nutzer möglicherweise keine E-Mail-Adresse verwenden.
• Machen Sie es Nutzern einfach, ihr Passwort zurückzusetzen, und achten Sie darauf, dass der Link Passwort vergessen? deutlich erkennbar ist.
• Link zu den Nutzungsbedingungen und der Datenschutzerklärung: Erläutern Sie den Nutzern von Anfang an, wie Sie ihre Daten schützen.
• Füge das Logo und den Namen deines Unternehmens oder deiner Organisation auf deinen Anmelde- und Anmeldeseiten ein. Achte darauf, dass Sprache, Schriftarten und Stile zum Rest deiner Website passen. Manche Formulare haben den Eindruck, dass sie nicht zur selben Website gehören wie andere Inhalte, insbesondere wenn sie eine völlig andere URL haben.

Weiter lernen

• Atemberaubende Formulare erstellen
• Best Practices für die Gestaltung mobiler Formulare
• Mehr Funktionen für Formularsteuerelemente
• Barrierefreie Formulare erstellen
• Anmeldevorgang mit der Credential Management API optimieren
• Telefonnummern im Web mit der WebOTP API bestätigen

Foto von Meghan Schiereck auf Unsplash