Best Practices für Anmeldeformulare

Nutzen Sie plattformübergreifende Browserfunktionen, um sichere, zugängliche und benutzerfreundliche Anmeldeformulare zu erstellen.

Sam Dutton

Wenn sich Nutzer auf Ihrer Website anmelden müssen, entscheidend. Das gilt insbesondere für Menschen mit schlechter Internetverbindung, oder unter Stress stehen. Schlecht gestaltete Anmeldeformulare führen zu hohen Absprungraten. Jeder Absprung kann einen verlorenen und verärgerten Nutzer bedeuten – nicht nur eine verpasste Anmeldung. Geschäftschancen.

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

Checkliste

Aussagekräftigen HTML-Code verwenden

Verwenden Sie Elemente, die für den Job erstellt wurden: <form>, <label> und <button>. Diese ermöglichen integrierte Browserfunktionen, verbessert die Barrierefreiheit und gibt Ihrem auszeichnen.

„<form>“ verwenden

Sie könnten versucht sein, Eingaben in einer <div> zu verpacken und Eingabedaten zu verarbeiten mit JavaScript übermitteln. Im Allgemeinen ist es besser, ein einfaches altes <form> -Elements. Dadurch wird Ihre Website für Screenreader und andere Hilfsmittel ermöglicht eine Reihe von integrierten Browserfunktionen, erleichtert die Entwicklung für ältere Browser und die Anmeldung funktionieren, selbst wenn JavaScript schlägt fehl.

„<label>“ verwenden

Verwenden Sie <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 dessen Eingabe verschoben. Label mit einem Eingabe mithilfe des Attributs for des Labels mit dem name oder id der Eingabe.
  • Screenreader hören Labeltext vor, wenn das Label oder die Eingabe des Labels empfangen wird fokussiert.

Verwenden Sie keine Platzhalter als Eingabelabels. Die Menschen können vergessen, wenn sie mit der Texteingabe begonnen haben, „Habe ich eine E-Mail-Adresse, eine Telefonnummer oder ein Konto ID?“). Es gibt viele andere potenzielle Probleme mit Platzhaltern. Siehe dazu Platzhalter verwenden Attribut und Platzhalter in Formularfeldern sind Schädlich, wenn Sie nicht überzeugt waren.

Es ist wahrscheinlich am besten, die Labels über den Eingaben zu platzieren. Dies ermöglicht einheitliche Designs für Mobilgeräte und Computer entwickeln und gemäß Google AI Studien, ermöglicht ein schnelleres Scannen durch Nutzer. Sie erhalten Labels und Eingaben in voller Breite und Label und Eingabebreite müssen nicht an den Labeltext angepasst werden.

<ph type="x-smartling-placeholder">
</ph> Screenshot mit der Position des Labels für die Formulareingabe auf Mobilgeräten: neben „Eingabe“ und über der Eingabe
Die Breite von Label und Eingabe ist begrenzt, wenn sich beide in derselben Zeile befinden.

Glitch label-position auf einem um es selbst zu testen.

„<button>“ verwenden

<button> verwenden für Schaltflächen! Schaltflächenelemente ermöglichen barrierefreies Verhalten und integrierte Form. und können ganz einfach gestaltet werden. Es ist sinnlos, Verwenden Sie ein <div>- oder ein anderes Element, das vorgibt, eine Schaltfläche zu sein.

Achten Sie darauf, dass auf der Schaltfläche „Senden“ die jeweilige Funktion steht. Beispiele: Konto erstellen oder Melde dich an, nicht Senden oder Starten.

Erfolgreiche Formulareinreichung sicherstellen

Erklären Sie Passwortmanagern, dass ein Formular gesendet wurde. Es gibt zwei Gehen Sie dazu so vor:

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

Prüfen Sie bei einer XMLHttpRequest- oder fetch-Anfrage, ob die Anmeldung erfolgreich war. in der Antwort gemeldet und auch im DOM verarbeitet werden. als Hinweis auf Erfolg für die Nutzenden.

Deaktivieren Sie die Schaltfläche Anmelden, nachdem der Nutzer auf das Display getippt oder darauf geklickt hat. . Viele Nutzer klicken mehrmals auf eine Schaltfläche selbst auf schnellen und reaktionsschnellen Websites. Das verlangsamt Interaktionen und und die Server-Auslastung.

Umgekehrt sollten Sie das Senden von Formularen, die auf eine Nutzereingabe warten, nicht deaktivieren. Beispiel: Deaktivieren Sie die Schaltfläche Anmelden nicht, wenn Nutzer ihre Kundendaten nicht eingegeben haben. PIN. Nutzer können im Formular etwas übersehen und dann versuchen, wiederholt auf das Symbol (deaktiviert) Anmelden und der Meinung sind, dass sie nicht funktioniert. Wenn es zumindest müssen Sie das Senden von Formularen deaktivieren und dem Nutzer erklären, was fehlt, klicken Sie auf die Schaltfläche „Deaktiviert“.

Eingaben nicht verdoppeln

Auf einigen Websites müssen Nutzer ihre E-Mail-Adressen oder Passwörter zweimal eingeben. Dadurch könnte die bei einigen Nutzern Fehler verursacht, aber zusätzlichen Aufwand für alle Nutzer verursacht und sich erhöht. Ausstieg Zweimal nachzufragen macht auch keinen Sinn, wenn Browser E-Mail-Adressen oder starke Passwörter vorschlagen. Es ist besser, den Nutzern die Bestätigung ihrer E-Mail-Adresse zu ermöglichen (müssen Sie dies trotzdem tun) und machen Sie es ihnen leicht, Passwort ändern.

Elementattribute optimal nutzen

Hier geschieht in Wirklichkeit die Magie. Browser haben mehrere hilfreiche integrierte Funktionen, die Eingabeelementattribute verwenden.

Bewahren Sie Passwörter geheim, aber geben Sie Nutzern die Möglichkeit, diese bei Bedarf anzuzeigen.

Passworteingaben sollten type="password" enthalten, um den Passworttext auszublenden und dem dass Passwörter eingegeben werden. (Beachten Sie, dass Browser verschiedene Techniken, um Eingaberollen zu verstehen und zu entscheiden, ob Sie das Speichern von Passwörtern anbieten oder nicht.)

Sie sollten die Ein/Aus-Schaltfläche Passwort anzeigen hinzufügen, damit Nutzer die eingegeben haben, und vergessen Sie nicht, den Link Passwort vergessen hinzuzufügen. Weitere Informationen finden Sie unter Passwortanzeige aktivieren

<ph type="x-smartling-placeholder">
</ph> Google-Anmeldeformular mit dem Symbol „Passwort anzeigen“.
Passworteingabe über das Google-Anmeldeformular: mit dem Symbol Passwort anzeigen und dem Link Passwort vergessen.

Die richtige Tastatur für mobile Nutzer

Verwenden Sie <input type="email">, um mobilen Nutzern eine geeignete Tastatur und Aktivierung der grundlegenden integrierten Validierung der E-Mail-Adresse durch den Browser... kein JavaScript erforderlich!

Wenn Sie statt einer E-Mail-Adresse eine Telefonnummer verwenden müssen, aktiviert <input type="tel"> die Wähltastatur auf Mobilgeräten. Sie können auch die Attribut inputmode, wo erforderlich: inputmode="numeric" ist ideal für PIN Zahlen. Alles, was Sie schon immer wissen wollten inputmode enthält weitere Details.

Verhindern, dass die Tastatur des Mobilgeräts die Schaltfläche Anmelden verdeckt

Wenn Sie nicht aufpassen, verdecken mobile Tastaturen Ihr Formular oder die Schaltfläche Anmelden teilweise verdeckt. Nutzende geben auf, bevor zu verstehen, was passiert ist.

<ph type="x-smartling-placeholder">
</ph> Zwei Screenshots eines Anmeldeformulars auf einem Android-Smartphone. Auf einem ist zu sehen, dass die Schaltfläche „Senden“ von der Tastatur des Smartphones verdeckt wird.
Die Schaltfläche Anmelden: Jetzt wird sie angezeigt, jetzt nicht mehr.

Vermeiden Sie dies nach Möglichkeit, indem Sie oben auf der Anmeldeseite nur die E-Mail-Adresse/Telefonnummer und das Passwort sowie die Schaltfläche Anmelden anzeigen. Fügen Sie unten weitere Inhalte hinzu.

<ph type="x-smartling-placeholder">
</ph> Screenshot eines Anmeldeformulars auf einem Android-Smartphone: Die Schaltfläche „Anmelden“ wird nicht durch die Tastatur des Smartphones verdeckt.
Die Tastatur verdeckt die Schaltfläche Anmelden nicht.

Auf verschiedenen Geräten testen

Sie müssen auf verschiedenen Geräten für Ihre Zielgruppe testen entsprechend anpassen. BrowserStack ermöglicht kostenloses Testen von Open Source Projekten auf verschiedenen realen Geräten und Browser.

<ph type="x-smartling-placeholder">
</ph> Screenshots eines Anmeldeformulars auf dem iPhone 7, 8 und 11 Bei iPhone 7 und 8 wird die Anmeldeschaltfläche durch die Telefontastatur verdeckt, beim iPhone 11 jedoch nicht.
Die Schaltfläche Anmelden: wird auf dem iPhone 7 und 8 ausgeblendet, aber nicht auf dem iPhone 11.

Verwenden Sie zwei Seiten.

Einige Websites (einschließlich Amazon und eBay) vermeiden das Problem, indem sie E-Mail-Adresse/Telefonnummer und Passwort auf zwei Seiten. Dieser Ansatz vereinfacht auch die User Experience: Nutzende müssen jeweils nur eine Sache erledigen.

<ph type="x-smartling-placeholder">
</ph> Screenshot eines Anmeldeformulars auf der Amazon-Website: E-Mail-Adresse/Telefonnummer und Passwort auf zwei separaten „Seiten“.
Anmeldung in zwei Phasen: E-Mail oder Telefon, dann Passwort.

Idealerweise sollte dies mit einem einzelnen <form>-Tag implementiert werden. JavaScript verwenden , um anfangs nur die E-Mail-Eingabe anzuzeigen, dann ausgeblendet und die Passworteingabe wieder einzublenden. Wenn Sie den Nutzer dazu zwingen müssen, zwischen der Eingabe seiner E-Mail-Adresse und sollte das Formular auf der zweiten Seite ein verstecktes Eingabeelement mit E-Mail-Wert, damit Passwortmanager den richtigen Wert speichern können. Passwort Formularstile, die Chromium versteht ein Codebeispiel.

Nutzer dabei unterstützen, die erneute Eingabe von Daten zu vermeiden

Sie können Browser dabei helfen, Daten korrekt zu speichern und Eingaben automatisch ausfüllen zu lassen, damit Nutzer keine müssen Sie E-Mail-Adresse und Passwort eingeben. Das ist besonders wichtig, auf Mobilgeräten und entscheidend für die E-Mail-Eingabe, da diese zu hohen Ausstiegsraten führt.

Dieser besteht aus zwei Teilen:

  1. Die Attribute autocomplete, name, id und type helfen Browsern dabei, die Rolle von Eingaben, um Daten zu speichern, die später für Autofill verwendet werden können. Damit Daten für die Autofill-Funktion gespeichert werden können, müssen moderne Browser auch Eingaben für einen stabilen name- oder id-Wert haben (nicht bei jedem Seitenaufbau zufällig generiert oder Website-Bereitstellung) und in einem <form> mit einer submit-Schaltfläche.

  2. Das Attribut autocomplete hilft Browsern dabei, Eingaben mithilfe von Daten gespeichert werden.

Verwende für E-Mail-Eingaben autocomplete="username", da username erkannt wird in modernen Browsern durch Passwortmanager – obwohl Sie type="email" verwenden sollten. und Sie können id="email" und name="email" verwenden.

Verwende bei Passworteingaben die entsprechenden autocomplete- und id-Werte, um Browsern zu helfen zwischen neuen und aktuellen Passwörtern zu unterscheiden.

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 bei einer Registrierung oder das neue Passwort in einem Formular zur Passwortänderung angeben.

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

  • Verwenden Sie autocomplete="current-password" und id="current-password" für die Passworteingabe in einem oder das alte Passwort des Nutzers in einem Formular zur Passwortänderung eingeben. So weiß das System, ob das aktuell für die Website gespeicherte Passwort verwendet werden soll.

Anmeldeformular:

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

Anmeldung:

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

Passwortmanager unterstützen

Verschiedene Browser verarbeiten E-Mail-Autofill und Passwortvorschläge eher unterscheiden, aber die Auswirkungen sind weitgehend gleich. In Safari 11 und höher auf dem Computer z. B. der Passwort-Manager, und dann biometrische -Authentifizierung (Fingerabdruck oder Gesichtserkennung) wird verwendet, sofern verfügbar.

<ph type="x-smartling-placeholder">
</ph> Screenshots von drei Phasen des Anmeldevorgangs in Safari auf dem Computer: Passwortmanager, biometrische Authentifizierung, Autofill
Automatische Vervollständigung – keine Texteingabe erforderlich!

Auf dem Computer werden in Chrome E-Mail-Vorschläge und der Passwortmanager angezeigt sowie das Passwort automatisch ausgefüllt.

<ph type="x-smartling-placeholder">
</ph> Screenshots der vier Phasen des Anmeldevorgangs in Chrome auf dem Computer: Vervollständigung der E-Mail, E-Mail-Vorschlag, Passwortmanager, Autofill bei Auswahl.
Automatische Vervollständigung der Anmeldung in Chrome 84.

Browserpasswörter und Autofill-Systeme sind nicht einfach. Die Algorithmen für Raten, Speichern und Anzeigen von Werten sind nicht standardisiert und variieren von von einer Plattform zur anderen. Wie beispielsweise von Hidde de Vries: „Der Passwortmanager von Firefox ergänzt seine Heuristik um Rezeptsystem“.

Autofill: Was Webentwickler wissen sollten, nicht enthält weitere Informationen zur Verwendung von name und autocomplete. Die HTML- Technische Daten listet alle 59 möglichen Werte auf.

Aktivieren Sie den Browser, um ein starkes Passwort vorzuschlagen

Moderne Browser nutzen Heuristiken, um zu entscheiden, wann die Benutzeroberfläche des Passwortmanagers und ein starkes Passwort vorschlagen.

So funktioniert Safari auf Desktop-Computern:

<ph type="x-smartling-placeholder">
</ph> Screenshot des Firefox-Passwortmanagers auf dem Desktop
Ablauf zum Vorschlagen von Passwörtern in Safari.

In Safari gibt es seit Version 12.0 einen eindeutigen und eindeutigen Passwortvorschlag.

Integrierte Browser-Passwortgeneratoren sorgen dafür, dass Nutzer und Entwickler keine um herauszufinden, was für ein „starkes Passwort“ ist. Da Browser die Möglichkeit haben, und bei Bedarf automatisch ausfüllen lassen, müssen sich die Nutzer oder Passwörter eingeben. Ermutigen Sie die Nutzer, die Vorteile des integrierten Browsers zu nutzen. Außerdem sorgen sie dafür, dass sie eher eine eindeutige, auf Ihrer Website ein und verwenden Sie seltener ein Passwort, woanders kompromittiert wurde.

Nutzer vor versehentlich fehlenden Eingaben bewahren

Fügen Sie das Attribut required in den Feldern „E-Mail-Adresse“ und „Passwort“ hinzu. In modernen Browsern werden fehlende Daten automatisch gefragt und hervorgehoben. JavaScript ist nicht erforderlich.

<ph type="x-smartling-placeholder">
</ph> Screenshot des Desktop-Browsers von Firefox und Chrome für Android mit der Meldung „Bitte füllen Sie dieses Feld aus“. Aufforderung zu fehlenden Daten. <ph type="x-smartling-placeholder">
</ph> Aufforderung und Fokus auf fehlende Daten in Firefox für Desktop-Computer (Version 76) und Chrome für Android (Version 83).

Bedienelemente für Finger und Daumen berücksichtigen

Die Standard-Browsergröße für nahezu alles, was mit Eingabeelementen zu tun hat Schaltflächen und Schaltflächen sind zu klein, insbesondere auf Mobilgeräten. Das mag offensichtlich erscheinen, 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 Abstand für Eingaben und Schaltflächen sind auf Desktop- und auf Mobilgeräten sogar noch schlechter.

Screenshot eines nicht formatierten Formulars in Chrome für Computer und Chrome für Android.

Gemäß der Android-Bedienungshilfen Anleitung Die empfohlene Zielgröße für Touchscreen-Objekte liegt bei 7–10 mm. Apple-Oberfläche 48 x 48 Pixel und W3C-Richtlinien empfehlen mindestens 44 x 44 Pixel Pixel dargestellt werden. Dabei fügen Sie für Eingabeelemente und Schaltflächen für mobil und auf Desktop etwa 10 Pixel groß. Probieren Sie es mit einem echten Mobilgerät aus und echten Finger oder Daumen. Sie sollten in der Lage sein, jedes Ihrer Geräte und Tasten.

Die Schaltfläche Tippziele haben nicht die richtige Größe Mit einer Lighthouse-Prüfung können Sie die Erkennung von Eingabeelementen automatisieren die zu klein sind.

Daumenfreundliches Design

Suchen Sie nach Touch target und sehen Sie viele Bilder mit Zeigefingern. In der realen Welt Nutzer verwenden ihre Daumen, um mit ihrem Smartphone zu interagieren. Daumen sind größer als und die Steuerung ist weniger präzise. Ein Grund mehr dafür, großen Berührungszielbereichen.

Text groß genug machen

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

<ph type="x-smartling-placeholder">
</ph> Screenshot eines nicht formatierten Formulars in Chrome auf dem Computer und auf Android-Geräten.
Standardstil auf Computern und Mobilgeräten: Der Eingabetext ist zu klein, um für viele Nutzer lesbar zu sein.

Browser auf verschiedenen Plattformen haben unterschiedliche Schriftgrößen. Daher ist es schwierig, Schriftgröße angeben, die überall gut funktioniert. Eine kurze Umfrage über Bei beliebten Websites werden für Desktop-Computer 13 bis 16 Pixel angezeigt, was der physischen Größe entspricht. ist ein gutes Minimum für Text auf Mobilgeräten.

Das bedeutet, dass du auf Mobilgeräten eine größere Pixelgröße verwenden musst: 16px unter Chrome für Desktop ist gut lesbar, aber selbst mit gutem Sehvermögen ist es schwierig zu lesen. 16px in Chrome für Android. Sie können verschiedene Schriftpixelgrößen für verschiedene Darstellungsbereich-Größen mit Medien abfragen. 20px ist auf Mobilgeräten in etwa richtig – aber Sie sollten dies mit Freunden oder mit eingeschränktem Sehvermögen.

Das Dokument verwendet nicht gut lesbare Schriftgrößen Mit einer Lighthouse-Prüfung können Sie die Texterkennung automatisieren, klein ist.

Ausreichend Abstand zwischen Eingaben

Der Rand sollte groß genug sein, damit die Eingaben gut funktionieren. Mit anderen Worten: etwa einen Fingerbreit sein.

Ihre Eingaben müssen deutlich sichtbar sein

Durch den Standardrahmenstil für Eingaben sind Eingaben schwer zu erkennen. Sie sind fast auf einigen Plattformen wie Chrome für Android unsichtbar sind.

Fügen Sie neben dem Abstand noch einen Rahmen hinzu: Auf einem weißen Hintergrund ist eine gute allgemeine Regel: um #ccc oder dunkler zu verwenden.

<ph type="x-smartling-placeholder">
</ph> Screenshot des Formulars mit benutzerdefinierten Stilen in Chrome unter Android
Lesbarer Text, sichtbare Eingaberahmen, ausreichender Abstand und ausreichende Ränder

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

Browser verfügen über integrierte Funktionen zur grundlegenden Formularvalidierung für Eingaben mit einem Attribut „type“. Browser warnen, wenn Sie ein Formular mit einem ungültigen Wert senden. und den Fokus auf die problematische Eingabe legen.

<ph type="x-smartling-placeholder">
</ph> Screenshot eines Anmeldeformulars in Chrome auf einem Computer mit Browseraufforderung und Fokus auf einen ungültigen E-Mail-Wert.
Grundlegende integrierte Validierung durch den Browser.

Mit dem CSS-Selektor :invalid können Sie ungültige Daten hervorheben. 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, um Eingaben mit ungültigen Werten hervorzuheben.

Wo nötig JavaScript verwenden

Passwortanzeige ein-/ausblenden

Sie sollten die Ein/Aus-Schaltfläche Passwort anzeigen hinzufügen, damit Nutzer die Text, den sie eingegeben haben. Nutzerfreundlichkeit leidet, wenn Nutzer:innen kann den eingegebenen Text nicht sehen. Derzeit gibt es keine integrierte Methode, aber es gibt Pläne, Implementierung. Sie werden JavaScript verwenden.

<ph type="x-smartling-placeholder">
</ph> Google-Anmeldeseite mit Ein/Aus-Schaltfläche „Passwort anzeigen“ und einem Link „Passwort vergessen“.
Google-Anmeldeformular: mit der Ein/Aus-Schaltfläche Passwort anzeigen und dem Link Passwort vergessen.

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 ist der CSS-Code, mit dem die Schaltfläche wie Klartext 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 den 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.');
  }
}

So sieht das Endergebnis aus:

<ph type="x-smartling-placeholder">
</ph> Screenshots des Anmeldeformulars mit dem Text zum Anzeigen des Passworts &quot;button&quot; in Safari auf einem Mac und auf dem iPhone 7.
Anmeldeformular mit dem Text Passwort anzeigen „button“ in Safari auf einem Mac und iPhone 7.

Passworteingabe zugänglich machen

Verwenden Sie aria-describedby, um Passwortregeln festzulegen. Geben Sie dazu die ID der -Element, das die Einschränkungen beschreibt. Screenreader geben den Labeltext, den Eingabetyp (Passwort) und dann die Beschreibung.

<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, aria-label, um zu warnen, dass das Passwort angezeigt wird. Andernfalls können Nutzer unbeabsichtigt 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 folgendem Glitch kannst du beide ARIA-Funktionen in Aktion sehen:

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

Validierung in Echtzeit und vor der Einreichung

HTML-Formularelemente und -attribute haben integrierte Funktionen für eine einfache Validierung, Sie sollten aber auch JavaScript verwenden, um eine zuverlässigere Validierung durchzuführen, Daten eingeben und beim Versuch, das Formular zu senden.

Schritt 5 des Anmeldeformulars in Codelab die Einschränkungsüberprüfung API (die umfassend unterstützt), Benutzerdefinierte Validierung mithilfe der integrierten Browser-Benutzeroberfläche, um Fokus festzulegen und Aufforderungen anzuzeigen.

Weitere Informationen: JavaScript für komplexere Echtzeitberichte verwenden Validierung.

Analytics und RUM

„Was nicht gemessen werden kann, lässt sich auch nicht verbessern.“ gilt insbesondere für Anmeldungen und Anmeldeformulare. Sie müssen Ziele festlegen, den Erfolg messen, Ihre Website optimieren und wiederholen.

Nutzerfreundlichkeit bei Rabatten Tests können ist hilfreich, um Änderungen auszuprobieren. Sie brauchen jedoch reale Daten, um wirklich So können Sie nachvollziehen, wie Nutzer Ihre Registrierungs- und Anmeldeformulare verwenden:

  • Seitenanalyse: Seitenaufrufe für Anmeldungen und Anmeldungen, Absprungraten, und Exits.
  • Interaktionsanalysen: Ziel Trichter (wo genau Nutzer den Anmelde- oder Anmeldevorgang abbrechen?) Ereignisse (Welche Aktionen führen die Nutzer aus, wenn sie mit Ihren Formularen interagieren?)
  • Websiteleistung: nutzerorientiert Messwerte (Anmeldung und Anmeldung die Formulare aus irgendeinem Grund langsam sind, und wenn ja, was ist die Ursache?).

Sie können auch A/B-Tests in Betracht ziehen, um verschiedene Ansätze für Registrierung und Anmeldung und gestaffelte Einführungen, um die Änderungen für eine Untergruppe von Nutzern, bevor Änderungen für alle Nutzer freigegeben werden.

Allgemeine Richtlinien

Durch eine durchdachte Benutzeroberfläche und Nutzererfahrung lassen sich Verlassen von Anmeldeformularen reduzieren:

  • Nutzer sollten sich nicht anmelden müssen. Link zum Anmeldeformular oben einfügen der Seite und verwende verständliche Formulierungen wie Anmelden, Konto erstellen oder Registrieren.
  • Bleib konzentriert! Anmeldeformulare sind kein Ort, um Menschen abzulenken, und andere Website-Funktionen.
  • Vereinfachen Sie die Anmeldung. andere Nutzerdaten wie Adressen oder Kreditkartendaten), wenn Nutzer durch die Bereitstellung dieser Informationen einen klaren Vorteil erkennen Daten.
  • Bevor Nutzer das Anmeldeformular ausfüllen, sollten sie deutlich machen, ist. Wie profitieren sie von der Anmeldung? Nutzern konkrete Informationen bieten um die Registrierung abzuschließen.
  • Nutzern nach Möglichkeit die Möglichkeit geben, sich mit einer Mobiltelefonnummer zu identifizieren anstelle einer E-Mail-Adresse, da einige Nutzer E-Mail-Adressen möglicherweise nicht verwenden.
  • Machen Sie es den Nutzern leicht, ihr Passwort zurückzusetzen, und sorgen Sie dafür, dass die Seite Passwort? der Link ist offensichtlich.
  • Link zu Ihren Nutzungsbedingungen und Dokumenten zur Datenschutzerklärung: Machen Sie deutlich, von Anfang an darauf achten, ihre Daten zu schützen.
  • Fügen Sie das Logo und den Namen Ihres Unternehmens oder Ihrer Organisation in Ihre Anmeldung ein und und stellen Sie sicher, dass Sprache, Schriftarten und Stile für Ihre Website. Einige Formulare scheinen nicht zur selben Website zu gehören wie andere insbesondere wenn sie eine deutlich abweichende URL haben.

Weiterlernen

Foto von Meghan Schiereck auf Unsplash