Im ersten Abschnitt haben Sie gelernt, wie ein einfaches Formular erstellt wird. In diesem Abschnitt geht es um Best Practices. In diesem Modul erfahren Sie mehr über die User Experience (UX) und warum eine gut implementierte Benutzeroberfläche den Unterschied machen kann.
Benutzerfreundliche Oberflä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. Formularstruktur und Grafikdesign (Layout, Abstände, Schriftgröße und Farbe) sowie eine logische Benutzeroberfläche (z. B. Labelformulierung und geeignete Eingabetypen) sollten optimal strukturiert sein. Sehen wir uns an, wie Sie Ihr Formular verbessern und nutzerfreundlicher gestalten können.
Labels
Wissen Sie noch, wofür das <label>-Element gedacht ist?
Ein Label beschreibt eine Formularsteuerung.
Ein sichtbares und gut formuliertes Label hilft dem Nutzer, den Zweck einer Formularsteuerung zu verstehen.
Label für jede Formularsteuerung verwenden
Möchten Sie Ihrem Formular eine neue Formularsteuerung hinzufügen? Fügen Sie zuerst das Label für das neue Feld hinzu. So vergessen Sie nicht, ihn hinzuzufügen.
Wenn Sie zuerst Labels hinzufügen, können Sie sich auf die Ziele des Formulars konzentrieren – welche Daten brauche ich hier? Sobald dies klar ist, können Sie sich darauf konzentrieren, den Nutzenden bei der Eingabe von Daten und dem Ausfüllen des Formulars zu helfen.
Formulierung von Labels
Angenommen, Sie möchten ein E-Mail-Feld beschreiben. Sie können dies wie folgt tun:
<label for="email">Enter your email address</label>
Oder Sie könnten es so beschreiben:
<label for="email">Email address</label>
Für welche Beschreibung entscheiden Sie sich?
In unserem Beispiel wird die Formulierung „E-Mail-Adresse“ bevorzugt, da kurze Labels einfacher zu scannen sind, visuelles Durcheinander reduzieren und Nutzern helfen, schneller zu verstehen, welche Daten benötigt werden.
Labelposition
Mit CSS können Sie ein Label oben, unten, links und rechts in einem Steuerelement positionieren. Wo platzierst du sie?
Studien zufolge wird empfohlen, das Label oberhalb der Formularsteuerung zu platzieren, damit der Nutzer ein Formular schnell scannen und sehen kann, welches Label zu welcher Formularsteuerung gehört.
Formulare entwerfen
Mit einem guten Formulardesign können Sie die Ausstiegsraten von Formularen erheblich senken.
Nutzern bei der Dateneingabe mit dem entsprechenden Element und Eingabetyp helfen
Es stehen verschiedene Formularelemente und Eingabetypen zur Auswahl.
Verwenden Sie das für Ihren Anwendungsfall am besten geeignete Element und den am besten geeigneten Eingabetyp, um eine optimale Nutzerfreundlichkeit zu erzielen.
Wenn der Nutzer mehrere Textzeilen eingeben soll, verwende das Element <textarea>.
Wenn sie die Nutzungsbedingungen Ihrer Website akzeptieren müssen, verwenden Sie <input type="checkbox">.
Außerdem sollten Sie visuell zwischen verschiedenen Arten von Formularsteuerelementen unterscheiden. Eine Schaltfläche sollte wie eine Schaltfläche aussehen. Eine Eingabe wie eine Eingabe. Machen Sie den Nutzern leicht, den Zweck einer Formularsteuerung zu erkennen. Wenn etwas wie ein Link aussieht, sollte durch Klicken darauf eine neue Seite geöffnet und kein Formular gesendet werden.
Nutzern die Navigation in Formularen erleichtern
Ein extravagantes Layout kann Spaß machen, kann aber dem Ausfüllen eines Formulars lästig werden.
Untersuchungen haben insbesondere gezeigt, dass es am besten ist, nur eine Spalte zu verwenden. Nutzer möchten nicht mehr dort suchen, wo sich das nächste Formularsteuerelement befindet. Wenn Sie eine Spalte verwenden, gibt es nur eine Richtung, der sie folgen können.
Nutzer bei der Interaktion mit Formularen unterstützen
Gestalten Sie die Schaltflächen groß genug, um versehentliches Tippen oder Klicken zu vermeiden und den Nutzenden die Interaktion mit Ihrem Formular zu erleichtern.
Die empfohlene Größe des Tippziels einer Schaltfläche beträgt mindestens 48 Pixel.
Außerdem sollten Sie mithilfe der CSS-Eigenschaft margin genügend Abstand zwischen Formularsteuerelementen einfügen, um versehentliche Interaktionen zu vermeiden.
Die Standardgröße der Formularsteuerelemente ist zu klein, um wirklich nutzbar zu sein. Sie sollten die Größe erhöhen, indem Sie padding verwenden und den Standardwert font-size ändern.
Mit der CSS-Medienfunktion pointer können Sie verschiedene Größen für verschiedene Zeigegeräte definieren, z. B. für eine Maus.
// 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 CSS-Medienfeature pointer
Fehler genau dort anzeigen, wo sie auftreten
Damit Nutzer leichter erkennen können, welche Formularsteuerung ihre Aufmerksamkeit erfordert, können Fehlermeldungen neben der Formularsteuerung angezeigt werden, auf die sie sich beziehen. Wenn Fehler bei der Formularübermittlung angezeigt werden, müssen Sie das erste ungültige Formularsteuerelement aufrufen.
Nutzern deutlich machen, welche Daten sie eingeben sollen
Informieren Sie die Nutzer darüber, wie gültige Daten eingegeben werden. Müssen für ein Passwort mindestens acht Zeichen eingegeben werden? 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>
Nutzern deutlich machen, welche Felder erforderlich sind
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Wenn ein Feld obligatorisch ist, machen Sie es deutlich. In Der Abschnitt "Aufbau barrierefreier Formulare" werden Alternativen für die Angabe von Pflichtfeldern erläutert. Wenn die meisten Felder in einem Formular Pflichtfelder sind, ist es möglicherweise besser, optionale Felder anzugeben.
Wie können Sie Fehlermeldungen mit Formularsteuerelementen verbinden, um sie für Screenreader zugänglich zu machen? Weitere Informationen dazu erhalten Sie im nächsten Modul.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über das Entwerfen von Formularen
Wie beschreiben Sie eine Formularsteuerung?
<description>-Elements.<label>-Elements.description.placeholder.Welche Größe wird für Tippziele empfohlen?
Wo sollten Sie die Fehlermeldungen platzieren?
<form>.