Best Practices für Anmeldeformulare

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

Für den Fall, dass sich Nutzer bei Ihrer Website anmelden müssen, ist ein gutes Design der Anmeldeformulare entscheidend. Dies gilt insbesondere für Personen mit schlechter Internetverbindung, auf einem Mobilgerät, 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 Anmeldemöglichkeit.

Hier sehen Sie ein Beispiel für ein einfaches Anmeldeformular, in dem alle Best Practices veranschaulicht werden:

Checkliste

• Aussagekräftige HTML-Elemente verwenden: <form>, <input>, <label> und <button>.
• Kennzeichnen Sie jede Eingabe mit einem <label>.
• Mit Elementattributen können Sie auf integrierte Browserfunktionen zugreifen: type, name, autocomplete, required.
• Weisen Sie den Eingabeattributen name und id zu, die sich zwischen Seitenaufbauvorgängen oder Websitebereitstellungen nicht ändern.
• Fügen Sie die Anmeldung in einem eigenen <form>-Element hinzu.
• Prüfen Sie, ob 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" für die Eingabe des Anmeldepassworts.
• Stellen Sie die Funktion Passwort anzeigen bereit.
• Verwenden Sie aria-label und aria-describedby für Passworteingaben.
• Verdoppeln Sie Eingaben nicht.
• Gestalten Sie die Formulare so, dass die mobile Tastatur Eingaben oder Schaltflächen nicht verdeckt.
• Achten Sie darauf, dass Formulare auf Mobilgeräten nutzbar sind: Verwenden Sie gut lesbaren Text und achten Sie darauf, dass Eingaben und Schaltflächen groß genug sind, um als Berührungszielbereiche zu funktionieren.
• Achten Sie auf Branding und Stil auf Ihren Anmelde- und Anmeldeseiten.
• Tests im Feld und im Lab: Integrieren Sie Seitenanalysen, Interaktionsanalysen und nutzerorientierte Leistungsmessungen in Ihren Anmelde- und Anmeldevorgang.
• Browser- und geräteübergreifende Tests: Das Verhalten des Formulars variiert je nach Plattform erheblich.

Aussagekräftigen HTML-Code verwenden

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

„<form>“ verwenden

Sie könnten versucht sein, Eingaben in eine <div> zu kapseln und Eingabedaten ausschließlich mit JavaScript zu verarbeiten. Im Allgemeinen ist es besser, ein einfaches altes <form>-Element zu verwenden. Dadurch wird Ihre Website für Screenreader und andere Hilfsgeräte zugänglich und Sie können eine Reihe von integrierten Browserfunktionen nutzen. Außerdem wird es einfacher, eine grundlegende funktionale Anmeldung für ältere Browser zu erstellen, und sie funktioniert auch dann, wenn JavaScript fehlschlägt.

„<label>“ verwenden

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

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

Zwei Gründe:

• Durch Tippen oder Klicken auf ein Label wird der Fokus auf die Eingabe verschoben. Weisen Sie einer Eingabe ein Label zu, indem Sie das Attribut for des Labels mit dem name oder id der Eingabe verwenden.
• Screenreader lesen Labeltext vor, wenn das Label oder seine Eingabe fokussiert wird.

Verwenden Sie keine Platzhalter als Eingabebeschriftungen. Wenn Nutzer mit der Eingabe von Text beginnen, kann es sein, dass sie vergessen, wofür sie verwendet wurden, insbesondere wenn sie abgelenkt 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 Attribut Platzhalter nicht und Platzhalter in Formularfeldern sind schädliche Inhalte, wenn Sie nicht sicher sind.

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

Überprüfe den label-position-Glitch auf einem Mobilgerät.

„<button>“ verwenden

Verwenden Sie <button> für Schaltflächen. Schaltflächenelemente bieten eine barrierefreie Funktionsweise, integrierte Funktionen zum Senden von Formularen und können einfach gestaltet werden. Es macht keinen Sinn, ein <div> oder ein anderes Element zu verwenden, das eine Schaltfläche darstellt.

Achten Sie darauf, dass auf der Schaltfläche zum Senden der Inhalt zu sehen ist. Beispiele hierfür sind Konto erstellen oder Anmelden, nicht Senden oder Starten.

Formular senden

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 entfernt und dem Nutzer eine erfolgreiche Anmeldung angezeigt wird.

Du kannst die Schaltfläche Anmelden deaktivieren, sobald der Nutzer darauf getippt oder angeklickt hat. Viele Nutzer klicken mehrmals auf Schaltflächen, selbst auf schnellen und responsiven Websites. Das verlangsamt Interaktionen und erhöht die Serverlast.

Umgekehrt sollten Sie nicht die Formularübermittlung, die auf Nutzereingaben wartet, deaktivieren. Deaktivieren Sie beispielsweise die Schaltfläche Anmelden nicht, wenn Nutzer nicht ihre Kunden-PIN eingegeben haben. Nutzer können etwas im Formular verpassen. Anschließend versuchen sie, wiederholt auf die (deaktivierte) Schaltfläche Anmelden zu tippen, und denken, dass es 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.

Eingaben nicht verdoppeln

Einige Websites zwingen Nutzer dazu, E-Mail-Adressen oder Passwörter zweimal einzugeben. Das kann die Anzahl der Fehler bei einigen Nutzern reduzieren, verursacht jedoch zusätzlichen Aufwand für alle Nutzer und erhöht die Ausstiegsraten. Außerdem macht es keinen Sinn, 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 trotzdem tun), und ihnen die Möglichkeit zu geben, ihr Passwort bei Bedarf zurückzusetzen.

Elementattribute optimal nutzen

Hier kommt die Magie ins Spiel! Browser verfügen über mehrere hilfreiche integrierte Funktionen, die Eingabeelement-Attribute verwenden.

Passwörter geheim halten, aber den Nutzern erlauben, sie zu sehen

Passworteingaben sollten type="password" enthalten, um Passworttext auszublenden und den Browser zu verstehen, dass die Eingabe für Passwörter bestimmt ist. (Beachten Sie, dass Browser eine Vielzahl von Techniken verwenden, um Eingaberollen zu verstehen und zu entscheiden, ob das Speichern von Passwörtern angeboten werden soll oder nicht.

Sie sollten die Ein/Aus-Schaltfläche Passwort anzeigen hinzufügen, damit Nutzer den eingegebenen Text prüfen können. Denken Sie außerdem daran, den Link Passwort vergessen hinzuzufügen. Weitere Informationen finden Sie unter Passwortanzeige aktivieren.

Die richtige Tastatur für mobile Nutzer

Verwenden Sie <input type="email">, um mobilen Nutzern eine geeignete Tastatur zu bieten und die grundlegende Validierung der integrierten E-Mail-Adressen durch den Browser zu aktivieren. JavaScript ist nicht erforderlich.

Wenn Sie statt einer E-Mail-Adresse eine Telefonnummer verwenden müssen, können Sie auf Mobilgeräten mit <input type="tel"> eine Telefontastatur verwenden. 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, finden Sie im Detail.

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

Wenn Sie nicht aufpassen, kann es passieren, dass mobile Tastaturen das Formular verdecken oder die Schaltfläche Anmelden teilweise verdeckt. Die Nutzenden geben möglicherweise auf, bevor sie erkennen, was passiert ist.

Wenn möglich, können Sie dies vermeiden, indem Sie nur die eingegebenen E-Mail-Adresse/Telefonnummer und das Passwort sowie die Schaltfläche Anmelden oben auf der Anmeldeseite anzeigen. Platzieren Sie andere Inhalte unten.

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 kostenlose Tests für Open-Source-Projekte 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 kann jeweils nur eine Sache bearbeiten.

Idealerweise sollte dies mit einem einzigen <form>-Format erfolgen. Verwenden Sie JavaScript, um zu Beginn nur die E-Mail-Eingabe anzuzeigen, blende sie dann aus und blendet die Eingabe des Passworts ein. Wenn Sie den Nutzer zwingen müssen, zwischen der Eingabe seiner E-Mail-Adresse und seinem Passwort 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. Hier finden Sie ein Codebeispiel unter Passwortstile, die Chromium versteht,.

Nutzern helfen, die erneute Eingabe von Daten zu vermeiden

Sie können Browser dabei unterstützen, Daten korrekt zu speichern und Eingaben automatisch auszufüllen, sodass Nutzer nicht daran denken müssen, E-Mail-Adresse und Passwortwerte einzugeben. Das ist besonders wichtig auf Mobilgeräten und bei der Eingabe von E-Mails, die hohe Ausstiegsraten haben.

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 Autofill verwendet werden können. Damit Daten für Autofill gespeichert werden können, müssen in modernen Browsern Eingaben außerdem einen stabilen name- oder id-Wert haben (nicht bei jedem Seitenaufbau oder Website-Deployment zufällig generiert) und in einem <form>-Element mit einer submit-Schaltfläche vorhanden sein.

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

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

Verwenden Sie bei der Passworteingabe die entsprechenden autocomplete- und id-Werte, 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 ein Anmeldeformular oder das alte Passwort des Nutzers in ein Formular zur Passwortänderung. Dadurch wird dem Browser mitgeteilt, dass das aktuelle Passwort, das er für die Website gespeichert hat, verwendet werden soll.

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

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

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. Hidde de Vries hat beispielsweise darauf hingewiesen: „Der Passwortmanager von Firefox ergänzt seine Heuristik durch ein Rezeptsystem.“

Autofill: What web devs sollten wissen, aber nicht finden Sie viele weitere Informationen zur Verwendung von name und autocomplete. In der HTML-Spezifikation sind alle 59 möglichen Werte aufgelistet.

Browser zum Vorschlagen eines starken Passworts aktivieren

Moderne Browser verwenden Heuristiken, um zu entscheiden, wann die Passwortmanager-UI angezeigt und ein starkes Passwort vorgeschlagen wird.

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 Sie Nutzer dazu ermutigen, die Vorteile der integrierten Passwortgeneratoren für Browser zu nutzen, ist es auch wahrscheinlicher, dass sie auf Ihrer Website ein eindeutiges, starkes Passwort verwenden und Passwörter, die an anderer Stelle gehackt werden könnten, seltener wiederverwenden.

Nutzer vor versehentlich fehlenden Eingaben bewahren

Fügen Sie das Attribut required sowohl in die E-Mail- als auch in das Passwortfelder ein. Moderne Browser fordern automatisch eine Aufforderung an und legen den Fokus auf fehlende Daten. JavaScript ist nicht erforderlich.

Design für Finger und Daumen

Die Standard-Browsergröße ist für fast alles in Bezug auf Eingabeelemente und Schaltflächen zu klein, vor allem 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 Tasten groß genug sind.

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

Gemäß den Android-Richtlinien zur Barrierefreiheit wird eine Zielgröße für Touchscreen-Objekte zwischen 7 und 10 mm empfohlen. Die Richtlinien für die Apple-Oberfläche empfehlen 48 x 48 Pixel und das W3C mindestens 44 x 44 CSS-Pixel. Fügen Sie dann den Eingabeelementen und -schaltflächen für Mobilgeräte mindestens 15 Pixel und für Desktop-Computer etwa 10 Pixel hinzu. Probieren Sie dies mit einem echten Mobilgerät und einem echten Finger oder Daumen aus. Sie sollten alle Eingaben und Schaltflächen bequem antippen können.

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

Design für Daumen

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

Der Text muss groß genug sein.

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

Da Browser auf verschiedenen Plattformen die Schriftgröße unterschiedlich festlegen, ist es schwierig, eine bestimmte Schriftgröße festzulegen, die überall gut funktioniert. Eine kurze Umfrage zu beliebten Websites zeigt Größen von 13 bis 16 Pixeln auf Desktop-Computern. Für Text auf Mobilgeräten ist eine solche 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 recht gut lesbar, aber selbst mit gutem Sehvermögen ist 16px-Text in Chrome für Android schwer zu lesen. Sie können mithilfe von Medienabfragen unterschiedliche Schrift-Pixelgrößen für unterschiedliche Größen des Darstellungsbereichs festlegen. 20px ist in etwa für Mobilgeräte geeignet, aber ihr solltet dies mit Freunden oder Kollegen testen, die ein eingeschränktes Sehvermögen haben.

Das Dokument verwendet keine lesbaren Schriftgrößen. In der Lighthouse-Prüfung können Sie den Prozess der Erkennung von zu kleinen Texten automatisieren.

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

Legen Sie einen ausreichenden Rand fest, damit die Eingabe und die Berührungszielbereiche gut funktionieren. Mit anderen Worten: Der Rand sollte etwa einen Finger breit sein.

Achten Sie darauf, dass Ihre Eingaben deutlich sichtbar sind.

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.

Fügen Sie neben einem Innenabstand auch einen Rahmen hinzu. Auf weißem Hintergrund empfiehlt es sich, #ccc oder einen dunkleren zu verwenden.

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

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

Mit dem CSS-Selektor :invalid können Sie ungültige Daten hervorheben. Verwenden Sie :not(:placeholder-shown), um die Auswahl von Eingaben ohne Inhalt zu vermeiden.

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

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

Gegebenenfalls 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. Nutzerfreundlichkeit beeinträchtigt, 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 das CSS, damit 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 das JavaScript 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:

Eingabe von Passwörtern zugänglich machen

Verwenden Sie aria-describedby, um Passwortregeln festzulegen. Dazu erhalten Sie die ID des Elements, 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, um zu warnen, 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>

Im folgenden Glitch kannst du beide ARIA-Funktionen in Aktion sehen:

Im Artikel Formulare barrierefrei erstellen finden Sie weitere Tipps, wie Sie Formulare barrierefrei gestalten können.

Validierung in Echtzeit und vor der Einreichung

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, wenn Nutzer Daten eingeben oder das Formular senden möchten.

In Schritt 5 des Codelab für das Anmeldeformular wird die Constraint Validation API verwendet, die weitgehend unterstützt wird. Damit wird eine benutzerdefinierte Validierung mithilfe der integrierten Browser-UI zum Festlegen des Fokus und Anzeigen von Aufforderungen hinzugefügt.

Weitere Informationen erhalten Sie unter JavaScript für eine komplexere Echtzeitvalidierung verwenden.

Analytics und RUM

„Was man nicht messen kann, kann man nicht verbessern“ gilt insbesondere für Registrierungs- und Anmeldeformulare. Legen Sie Ziele fest, messen Sie den Erfolg, verbessern Sie Ihre Website – und wiederholen Sie den Schritt.

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

• Seitenanalyse: Seitenaufrufe von Registrierungs- und Anmeldeseiten, Absprungraten und Ausstiege
• Interaktionsanalysen: Zieltrichter (wo verlassen Nutzer den Anmelde- oder Anmeldevorgang?) und Ereignisse (Welche Aktionen führen Nutzer aus, wenn sie mit Ihren Formularen interagieren?)
• Websiteleistung: Nutzerbezogene Messwerte. Sind 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 Änderungen für alle Nutzer freigeben.

Allgemeine Richtlinien

Eine gut durchdachte Benutzeroberfläche und UX können die Abbruchrate von Anmeldeformularen reduzieren:

• Lassen Sie Nutzer nach der Anmeldung nicht jagen! Fügen Sie oben auf der Seite einen Link zum Anmeldeformular ein. Verwenden Sie dabei gut verständliche Formulierungen wie Anmelden, Konto erstellen oder Registrieren.
• Bleib konzentriert! Anmeldeformulare eignen sich nicht dazu, Nutzer durch Angebote und andere Funktionen der Website abzulenken.
• Minimieren Sie die Komplexität bei der Anmeldung. Erfassen Sie andere Nutzerdaten wie Adressen oder Kreditkartendetails nur dann, wenn die Nutzer deutlich von der Bereitstellung dieser Daten profitieren.
• Verdeutlichen Sie Nutzern vor Beginn des Registrierungsformulars das Nutzenversprechen. Wie profitieren sie von der Anmeldung? Bieten Sie den Nutzern konkrete Anreize, sich zu registrieren.
• 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 den Nutzern einfach, ihr Passwort zurückzusetzen, und machen Sie den Link Passwort vergessen? deutlich sichtbar.
• Link zu den Nutzungsbedingungen und der Datenschutzerklärung: Erläutern Sie den Nutzern von Anfang an, wie Sie ihre Daten schützen.
• Füge auf den Anmelde- und Anmeldeseiten das Logo und den Namen deines Unternehmens oder deiner Organisation ein. Achte darauf, dass Sprache, Schriftarten und Stile zum Rest deiner Website passen. Einige Formulare haben nicht das Gefühl, dass sie zur selben Website gehören wie andere Inhalte, insbesondere wenn sie eine völlig andere URL haben.

Weiterlernen

• Großartige Formulare erstellen
• Best Practices für das Design 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.