Im ersten Abschnitt haben Sie gelernt, wie Sie ein einfaches Formular erstellen. In diesem Abschnitt geht es um Best Practices. In diesem Modul lernen Sie die User Experience (UX), und warum eine gut implementierte Benutzeroberfläche (UI) einen großen Unterschied machen kann.
Benutzerfreundliche Benutzeroberflächen erstellen
Das Ausfüllen von Formularen kann zeitaufwendig und frustrierend sein. Das muss nicht so sein. Um eine gute User Experience zu gewährleisten, sollte die Benutzeroberfläche intuitiv sein. Stellen Sie sicher, dass Sie eine optimale Formularstruktur und ein optimales Grafikdesign (Layout, Abstand, Schriftgröße und Farbe) und logischer Benutzeroberfläche (z. B. Label-Formulierungen und entsprechende Eingabetypen). Sehen wir uns an, wie Sie Ihr Formular optimieren und nutzerfreundlich gestalten können.
Labels
Weißt du noch, wofür das <label>-Element gedacht ist?
Ein Label beschreibt ein Formularsteuerelement.
Ein sichtbares und gut geschriebenes Label hilft den Nutzenden, den Zweck eines Formularsteuerelements zu verstehen.
Für jedes Formularsteuerelement ein Label verwenden
Möchten Sie Ihrem Formular ein neues Formularsteuerelement hinzufügen? Fügen Sie zuerst das Label für das neue Feld hinzu. So vergessen Sie nicht, ihn hinzuzufügen.
Wenn Sie zuerst Beschriftungen hinzufügen, können Sie sich auch auf die Ziele des Formulars konzentrieren. Welche Daten benötige ich hier? Sobald dies klar ist, können Sie sich darauf konzentrieren, die Nutzenden bei der Eingabe von Daten und beim Ausfüllen des Formulars zu unterstützen.
Beschriftung
Angenommen, Sie möchten ein E-Mail-Feld beschreiben. Gehen Sie dazu folgendermaßen vor:
<label for="email">Enter your email address</label>
Oder Sie könnten es so beschreiben:
<label for="email">Email address</label>
Welche Beschreibung wählst du aus?
In unserem Beispiel würde die Formulierung „E-Mail-Adresse“ bevorzugt wird, da kurze Labels sich leichter erfassen lassen, für mehr Übersichtlichkeit sorgen und helfen Nutzenden, schneller zu verstehen, welche Daten benötigt werden.
Labelposition
Bei CSS können Sie ein Label oben, unten, links und rechts von einem Formularsteuerelement positionieren. Wo platzierst du ihn?
Forschungssendungen Best Practice besteht darin, das Label über der Formularsteuerung positionieren, So kann der Nutzer ein Formular schnell scannen und erkennen, welches Label zu welchem Formularsteuerelement gehört.
Formulare entwerfen
Gutes Formulardesign kann
deutlich die Ausstiegsraten von Formularen reduzieren.
Nutzern die Dateneingabe mit dem passenden Element und dem passenden Eingabetyp erleichtern
Es gibt verschiedene
Formularelemente und Eingabetypen zur Auswahl.
Verwenden Sie das am besten geeignete Element und den für Ihren Anwendungsfall am besten geeigneten Eingabetyp, um die beste Nutzererfahrung zu bieten.
Wenn der Nutzer mehrere Textzeilen ausfüllen soll, verwende das Element <textarea>.
Wenn sie die Nutzungsbedingungen deiner Website akzeptieren müssen, verwende <input type="checkbox">.
Sie sollten auch zwischen verschiedenen Arten von Formularsteuerelementen visuell unterscheiden. Eine Schaltfläche sollte wie eine Schaltfläche aussehen. Eine Eingabe, wie eine Eingabe. Machen Sie es den Nutzern leicht, den Zweck eines Formularsteuerelements zu erkennen. Wenn etwas wie ein Link aussieht, wird durch einen Klick eine neue Seite geöffnet. und kein Formular senden.
Nutzern bei der Navigation in Formularen helfen
Ein extravagantes Layout kann Spaß machen, kann aber dem Ausfüllen eines Formulars im Weg stehen.
Insbesondere Forschungssendungen dass es am besten ist, nur eine Spalte zu verwenden. Nutzer möchten keine Zeit mit der Suche dort verbringen, wo sich das nächste Formularsteuerelement befindet. Bei Verwendung einer Spalte gibt es nur eine Richtung, der gefolgt werden kann.
Nutzern die Interaktion mit Formularen erleichtern
Um versehentliches Antippen und Klicken zu vermeiden,
und die Interaktion der Nutzenden mit Ihrem Formular zu erleichtern, sollten Sie die Schaltflächen groß genug gestalten.
Die empfohlenen
Größe des Tippziels einer Schaltfläche mindestens 48 Pixel beträgt.
Außerdem sollten Sie mithilfe der margin-Schaltfläche genügend Abstand zwischen den Formularsteuerelementen hinzufügen.
CSS-Property zu, um versehentliche Interaktionen zu vermeiden.
Die Standardgröße von Formularsteuerelementen ist zu klein, um wirklich nützlich zu sein. Sie sollten die Größe mit padding erhöhen und den Standardwert font-size ändern.
Sie können verschiedene Größen für unterschiedliche Zeigegeräte definieren,
z. B. eine Maus, die die CSS-Medienfunktion pointer verwendet.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Weitere Informationen zum
pointer CSS-Medienfunktion:
Fehler dort anzeigen, wo sie auftreten
Damit Nutzende leicht erkennen können, welche Formularsteuerelemente ihre Aufmerksamkeit erfordern, neben dem Formularsteuerelement, auf das sie sich beziehen, eine Fehlermeldung anzuzeigen. Wenn beim Senden des Formulars Fehler angezeigt werden, navigieren Sie zum ersten ungültigen Formularsteuerelement.
Machen Sie deutlich, welche Daten einzugeben sind
Sorgen Sie dafür, dass Nutzer wissen, wie sie gültige Daten eingeben. Muss das Passwort aus mindestens acht Zeichen bestehen? Sag es ihnen.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Verdeutlichen Sie den Nutzern, welche Felder erforderlich sind.
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Machen Sie es deutlich, wenn ein Feld obligatorisch ist. Im Artikel Anatomie von barrierefreien Formularen werden Alternativen zur Angabe Pflichtfelder. Wenn die meisten Felder in einem Formular Pflichtfelder sind, ist es besser, optionale Felder kennzeichnen.
Wie können Sie Fehlermeldungen mit Formularsteuerelementen verbinden, um sie für Screenreader zugänglich zu machen? Weitere Informationen dazu findest du im nächsten Modul.
Wissen testen
Testen Sie Ihr Wissen über das Entwerfen von Formularen
Wie beschreiben Sie ein Formularsteuerelement?
<description>.<label>.description.placeholder.Welche Größe wird für das Tippziel empfohlen?
Wo sollten Sie Fehlermeldungen platzieren?
<form>.