Im ersten Abschnitt haben Sie gelernt, wie Sie ein einfaches Formular erstellen. 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 (UI) einen großen Unterschied machen kann.
Nutzerfreundliche Oberflächen erstellen
Das Ausfüllen von Formularen kann zeitaufwendig und frustrierend sein, muss es aber nicht. Damit die Nutzererfahrung optimal ist, sollte die Benutzeroberfläche intuitiv sein. Achten Sie auf eine optimale Formularstruktur und ein optimales Grafikdesign (Layout, Abstände, Schriftgröße und ‑farbe) sowie eine logische Benutzeroberfläche (z. B. Beschriftung und geeignete Eingabetypen). Hier erfahren Sie, wie Sie Ihr Formular verbessern und nutzerfreundlicher gestalten können.
Labels
Wissen Sie noch, wofür das <label>-Element verwendet wird?
Ein Label beschreibt ein Formularsteuerelement.
Ein sichtbares und gut geschriebenes Label hilft dem Nutzer, 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, sie hinzuzufügen.
Wenn Sie zuerst Labels hinzufügen, können Sie sich auch besser auf die Ziele des Formulars konzentrieren: Welche Daten benötige ich hier? Sobald das geklärt ist, können Sie dem Nutzer helfen, Daten einzugeben und das Formular auszufüllen.
Label-Formulierung
Sagen Sie, dass Sie ein E‑Mail-Feld beschreiben möchten. Das könnte so aussehen:
<label for="email">Enter your email address</label>
Oder Sie könnten es so beschreiben:
<label for="email">Email address</label>
Welche Beschreibung wählen Sie?
In unserem Beispiel ist die Formulierung „E-Mail-Adresse“ vorzuziehen, da kurze Labels leichter zu erfassen sind, die visuelle Unordnung verringern und Nutzern helfen, schneller zu verstehen, welche Daten benötigt werden.
Labelposition
Mit CSS können Sie ein Label oben, unten, links und rechts von einem Formularsteuerelement positionieren. Wo platzieren Sie sie?
Studien haben gezeigt, dass es am besten ist, das Label über dem Formularsteuerelement zu platzieren, damit der Nutzer ein Formular schnell überblicken und sehen kann, welches Label zu welchem Formularsteuerelement gehört.
Formulare gestalten
Ein gutes Formulardesign kann die Abbruchraten deutlich senken.
Nutzer bei der Dateneingabe unterstützen, indem Sie das richtige Element und den richtigen Eingabetyp verwenden
Es gibt verschiedene Formularelemente und Eingabetypen, aus denen Sie auswählen können.
Um die Nutzerfreundlichkeit zu optimieren, sollten Sie das für Ihren Anwendungsfall am besten geeignete Element und den am besten geeigneten Eingabetyp verwenden.
Wenn der Nutzer mehrere Textzeilen ausfüllen soll, verwenden Sie das <textarea>-Element.
Wenn Nutzer die Nutzungsbedingungen Ihrer Website akzeptieren müssen, verwenden Sie <input type="checkbox">.
Sie sollten auch visuell zwischen verschiedenen Arten von Formularsteuerelementen unterscheiden. Eine Schaltfläche sollte wie eine Schaltfläche aussehen. Eine Eingabe wie eine Eingabe. Es Nutzern leichter machen, den Zweck eines Formularsteuerelements zu erkennen. Wenn etwas wie ein Link aussieht, sollte durch Klicken darauf eine neue Seite geöffnet und nicht ein Formular gesendet werden.
Nutzern helfen, sich in Formularen zurechtzufinden
Ein extravagantes Layout kann zwar ansprechend sein, aber das Ausfüllen eines Formulars erschweren.
Studien haben gezeigt, dass es am besten ist, nur eine Spalte zu verwenden. Nutzer möchten nicht lange suchen müssen, wo sich das nächste Formularelement befindet. Wenn Sie nur eine Spalte verwenden, gibt es nur eine Richtung, in die sie sich bewegen müssen.
Nutzern bei der Interaktion mit Formularen helfen
Damit Nutzer nicht versehentlich auf Schaltflächen tippen oder klicken und das Formular besser nutzen können, sollten Sie die Schaltflächen groß genug gestalten. Die empfohlene Größe des Tippziels einer Schaltfläche beträgt mindestens 48 Pixel. Außerdem sollten Sie mit der CSS-Eigenschaft margin genügend Abstand zwischen den Formularsteuerelementen einfügen, um versehentliche Interaktionen zu vermeiden.
Die Standardgröße von Formularsteuerelementen ist zu klein, um wirklich nutzbar zu sein. Sie sollten die Größe mit padding erhöhen und den Standardwert für font-size ändern.
Mit der CSS-Media-Funktion pointer können Sie verschiedene Größen für unterschiedliche Zeigegeräte wie z. B. eine Maus definieren.
// 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 zur CSS-Medienfunktion pointer
Fehler an der Stelle anzeigen, an der sie auftreten
Damit Nutzer leicht erkennen können, welche Formularsteuerung ihre Aufmerksamkeit erfordert, sollten Sie Fehlermeldungen neben der entsprechenden Formularsteuerung anzeigen. Wenn Sie Fehler beim Senden des Formulars anzeigen, müssen Sie zum ersten ungültigen Formularsteuerelement navigieren.
Nutzern klar machen, welche Daten eingegeben werden müssen
Achten Sie darauf, dass Nutzer wissen, wie sie gültige Daten eingeben. Müssen sie mindestens acht Zeichen für ein Passwort eingeben? Informieren Sie sie.
<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 ein Pflichtfeld ist, machen Sie das deutlich. Im Artikel The Anatomy of Accessible Forms (Die Anatomie barrierefreier Formulare) werden Alternativen zur Kennzeichnung 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 verknüpfen, damit sie für Screenreader zugänglich sind? Weitere Informationen dazu finden Sie im Modul „Barrierefreiheit“.
Wissen testen
Wissen zum Entwerfen von Formularen testen
Wie würden Sie ein Formularsteuerelement beschreiben?
<description>-Element.<label>-Element.description verwenden.placeholder verwenden.Welche Größe wird für Tippzielbereiche empfohlen?
Wo sollten Fehlermeldungen platziert werden?
<form>