Zusammenfassung der Formulardesigntechniken im Webdesign

„Eingaben sollten in logische Gruppen unterteilt werden, damit das Gehirn die Beziehungen zwischen den zahlreichen Bereichen verarbeiten kann.“ – Der ultimative Leitfaden zu HTML

Webanwendungen haben schon immer Formulare zur Dateneingabe und Konfiguration verwendet, aber nicht alle Formulare sind gleich. Die Ausrichtung des Eingabebereichs, seine Beschriftung, die Bedienungsmethode und die umgebenden visuellen Elemente beeinflussen das Benutzerverhalten mehr oder weniger.

Formularlayout

Wenn man bedenkt, dass die zum Ausfüllen eines Formulars benötigte Zeit so kurz wie möglich sein sollte und die erfassten Daten den Benutzern vertraut sind (wie Name, Adresse, Zahlungsinformationen usw.), sind vertikal ausgerichtete Beschriftungen und Eingabefelder wohl am besten geeignet. Die vertikale Ausrichtung jedes Etiketten- und Eingabefeldpaars vermittelt ein Gefühl der Nähe und die durchgängige Linksausrichtung reduziert die Augenbewegung und Verarbeitungszeit. Benutzer müssen sich nur in eine Richtung bewegen: nach unten.

Bei diesem Layout empfiehlt sich die Verwendung fettgedruckter Beschriftungen, da diese ihr visuelles Gewicht erhöhen und ihre Hervorhebung verbessern können. Ohne den fettgedruckten Text wären die Beschriftung und der Text im Eingabefeld aus Sicht des Benutzers nahezu identisch.

Wenn die Daten auf einem Formular unbekannt sind oder sich nur schwer logisch gruppieren lassen (wie etwa mehrere Komponenten einer Adresse), können linksbündige Beschriftungen das Überfliegen der Formularinformationen erleichtern. Der Benutzer muss nur nach oben und unten auf die Beschriftungen in der linken Spalte schauen, ohne durch das Eingabefeld unterbrochen zu werden. In diesem Fall wird jedoch normalerweise der Abstand zwischen dem Etikett und dem entsprechenden Eingabefeld durch das längere Etikett vergrößert, was sich auf die zum Ausfüllen des Formulars benötigte Zeit auswirken kann. Benutzer müssen ihre Augen hin und her bewegen, um die beiden entsprechenden Beschriftungen und Eingabefelder zu finden.

Daher wurde eine alternative Lösung geschaffen, die darin besteht, das Etikett rechtsbündig auszurichten, sodass die Verbindung zwischen dem Etikett und dem Eingabefeld enger ist. Dies führt jedoch dazu, dass die gezackten Leerzeichen und Beschriftungen auf der linken Seite es Benutzern erschweren, den Inhalt des Formulars schnell abzurufen. Da die Menschen in westlichen Ländern daran gewöhnt sind, von links nach rechts zu schreiben, bereitet diese rechtsbündige Anordnung den Benutzern Leseschwierigkeiten.

Mit visuellen Elementen

Aufgrund der Vorteile des „linksbündigen Etikettenlayouts“ (einfache Suche und reduzierte vertikale Höhe) ist es verlockend, seinen Hauptnachteil (die Trennung von Etikett und Eingabefeld) zu beheben.

Eine Lösung besteht darin, Hintergrundfarben und Trennlinien hinzuzufügen. Unterschiedliche Hintergrundfarben erzeugen eine Spalte mit vertikalen Beschriftungen und eine Spalte mit vertikalen Eingabefeldern. Jede Gruppe von Beschriftungen und Eingabefeldern ist durch eine klare horizontale Linie getrennt. Das klingt zwar gut, es gibt jedoch immer noch Probleme.

Im Vergleich zur vorherigen Form (subjektive visuelle Unterscheidung des Benutzers) werden hier 15 visuelle Elemente hinzugefügt: die Mittellinie, Zellen mit Hintergrundfarbe und horizontale Linien. Diese Elemente lenken die Aufmerksamkeit des Benutzers ab und erschweren es ihm, sich auf wichtige Elemente wie Beschriftungen und Eingabefelder zu konzentrieren. Edward Tufte weist darauf hin: „Die Differenzierung von Informationen führt zwangsläufig zu unterschiedlichen Wahrnehmungen.“ Mit anderen Worten: Jedes visuelle Element, das nicht zum Layout beiträgt, stört es ständig. Während Sie versuchen, die Registerkarten auf der linken Seite zu überfliegen, wird Ihr Blick ständig unterbrochen und muss innehalten, um über die horizontalen Linien, Zellen und Hintergrundfarben nachzudenken.

Dies bedeutet natürlich nicht, dass Sie auf Hintergrundfarben und Linien verzichten müssen. Sie sind immer noch sehr effektiv bei der Unterteilung verwandter Gebietsinformationen. Beispielsweise können eine dünne horizontale Linie oder eine helle Hintergrundfarbe zusammengehörende Daten optisch gruppieren. Hintergrundfarben und -linien eignen sich besonders gut dazu, die wichtigsten Aktionsschaltflächen eines Formulars hervorzuheben.

Primäre und sekundäre Operationen

Die primäre Aktion eines Formulars (normalerweise „Senden“ oder „Speichern“) muss optisch stark sein (im obigen Beispiel helle Farben, fette Schriftarten, Hintergrundfarben usw.). Dies entspricht einem Hinweis für den Benutzer, dass er das Formular bereits ausgefüllt hat bzw. kurz davor ist, es fertig auszufüllen.

Wenn ein Formular mehrere Aktionen enthält, etwa „Weiter“ und „Zurück“, ist es sinnvoll, die visuelle Gewichtung der sekundären Aktionen zu reduzieren. Dadurch wird das Risiko möglicher Fehlbedienungen durch den Anwender minimiert.

Obwohl die oben genannten Inhalte Ihnen dabei helfen können, Formulare besser zu gestalten, muss die Kombination aus Layout, visuellen Elementen und Inhalt noch von Benutzern und Datenanalysen (Auswertung der Fertigstellung, Fehlerberichterstattung usw.) getestet werden.