it-swarm.com.de

Beschriftungen über dem Feld oder neben dem Feld? Was ist mit Eingabeaufforderungstexten und Validierungsnachrichten?

Welches Layout eignet sich am besten für Ihre Benutzer?:

  • Feldbezeichnungen an der Seite von Feldern
  • Feldbezeichnungen über den Dateneingabefeldern
  • Was ist mit Eingabeaufforderungstext, Formattipps, Beispielen und Validierungs- oder Fehlermeldungen?

Ich habe in den letzten Jahren viele Online-Formulare erstellt. Ich habe "vorgefertigte" Muster und Layouts, die ich immer und immer wieder verwendet habe. Einige der Layouts wurden intensiv getestet, andere weniger.

Einer meiner Kollegen forderte mich kürzlich heraus und fragte, warum ich so sicher sein könne, dass das von ihnen vorgeschlagene Layout nicht richtig sei. Es ließ mich innehalten und meinen Ansatz überdenken, von dem ich erkannte, dass er eher auf Meinungen als auf Beweisen beruhte.

Beispiele oder Beweise?

Ich habe ein vorhandenes Papierformular, mit dem ich arbeiten kann. Es ist hässlich. Wirklich hässlich. Das Letzte, was ich möchte, ist, eine Online-Version derselben Hässlichkeit zu erstellen. Haben Sie Beispiele für Formulare oder Assistenten, die Ihrer Meinung nach wirklich gut gestaltet sind? Können Sie mich auf Forschungsergebnisse oder akademisches Material verweisen, das ich verwenden könnte, um meine Empfehlung an den Produktbesitzer zu untermauern?

Meine Aufgabe: Nehmen Sie ein vorhandenes papierbasiertes Formular, konvertieren Sie es in ein Online-Formular und erweitern Sie die Funktionalität um die sofortige Validierung, das Hochladen von Dateien, Kreditkartenzahlungen und -bestätigungen sowie Status- und Fehlermeldungen.

Das Gesamtdesign: höchstwahrscheinlich 8 Bildschirme im Format eines Schritt-für-Schritt-Assistenten. Benutzer können unvollständige Formulare speichern und später wiederkommen. Die meisten Fragen müssen beantwortet werden, einige Fragen sind komplex. Benutzer müssen das Formular nur einmal alle fünf Jahre verwenden, damit sie nicht im Voraus mit den Fragen vertraut sind.

Die Herausforderung : In dieser Organisation gibt es kein Muster für Online-Formulare, es werden derzeit nicht viele ausgeführt, und keines ist so kompliziert wie dieses Formular. Ich muss den Produktbesitzer davon überzeugen, dass das Erstellen einer Replik des Papierformulars eine schlechte Idee ist. Eine wirklich schlechte Idee.

16
Nathan-W

Luke Wroblewski hat einige gute Artikel über Formulardesign. Ich empfehle Ihnen diese beiden:

Webanwendungsformular Design

Primäre und sekundäre Aktionen in Webformularen

Oder brauchen Sie etwas noch Spezifischeres?

12

Matteo Penzos Studie liefert den bislang besten Beweis für die Vorteile der Platzierung des Etiketts über der Feldkontrolle. Die Verdienste davon werden weiterhin diskutiert . Die Quintessenz scheint zu sein, dass obere Etiketten am besten zum Ausfüllen eines leeren Formulars geeignet sind, aber nicht so gut für die Verwendung eines teilweise oder vollständig ausgefüllten Formulars. Ihr Hauptvorteil ist die gleichmäßige räumliche Nähe des Etiketts zum Feld für eine einfache Zuordnung, wenn die Etiketten in der Länge erheblich variieren.

Die Hauptanliegen bei Top-Labels sind:

  • Es benötigt mehr vertikalen Platz und erfordert möglicherweise einen Bildlauf, um das gesamte Formular zu scannen.

  • Dies erschwert das Scannen der Beschriftungen oder Felder, wenn nach einem bestimmten Feld oder Wert zum Lesen, Überprüfen oder Ändern gesucht wird.

  • Dies kann es für den Designer schwieriger machen, Felder in einer visuellen Hierarchie zu gruppieren.

  • Benutzer können verwirren, welches Feld eine Bezeichnung verwenden (die oben oder unten).

Letzteres kann durch einen angemessenen Leerraum oder eine grafische Unterteilung gemildert werden, obwohl beide dazu neigen, noch mehr vertikalen Raum einzunehmen.

Ehrlich gesagt braucht dieses Thema mehr Forschung. Zum einen können Sie möglicherweise sowohl eine gute vertikale Abtastung als auch eine gute Zuordnung zwischen Beschriftungsfeldern erzielen, indem Sie linksbündige Beschriftungen mit einer grafischen Verbindung zum Feld verwenden, z. B. mit Führungspunkten oder Zebrastreifen. Wenn Sie diese ausprobieren, teilen Sie uns mit, wie dies bei Ihren Benutzertests funktioniert.

Eingabeaufforderungen und Tipps befinden sich am besten rechts neben dem Feld, wenn alle anderen gleich sind:

  • Der Abstand zwischen dem Etikett (den primären Informationen) und dem Feld wird kurz gehalten, sodass das Lesen mit weniger Fixierungen am einfachsten ist.

  • Dadurch wird die Eingabeaufforderung/der Tipp relativ auffällig, da sie nicht zwischen Etikett und Feld „vergraben“ ist.

  • Es bietet eine klare visuelle Trennung zwischen primären und sekundären Informationen und ermutigt Benutzer, all der primären Informationen zu lesen (Benutzer neigen dazu, lange Textfolgen zu überspringen).

Das Platzieren von Eingabeaufforderungen unter dem Feld ist eine weitere Option, die es möglicherweise einfacher macht, die Eingabeaufforderung zu sehen, wenn die Feldsteuerung lang ist. Dies hat jedoch alle Nachteile, wenn Beschriftungen über dem Feld platziert werden und möglicherweise irreführende scheinbare Gruppierungen von Feldern aufgrund von Felder werden in der vertikalen Dimension nicht mehr gleichmäßig getrennt.

Da Eingabeaufforderungen und Hinweise sekundäre Informationen sind, würde ich nicht zulassen, dass ihre Platzierung das Layout der primären Informationen stört, selbst wenn dies bedeutet, dass sie inkonsistent sind.

Im Gegensatz zu anderen Hinweisen/Eingabeaufforderungen sollten erforderliche Feldindikatoren (z. B. rote Sternchen) am Anfang des Etiketts angebracht werden, damit Benutzer auf einen Blick entscheiden können wenn sie das Feld wirklich ausfüllen möchten .

8

Schauen Sie sich das an http://www.csskarma.com/lab/plugin_slidinglabels/

fand es erst neulich, beeindruckte mich zu Tränen.

1
Bobby Tables

Eine weitere zu berücksichtigende Option sind Infield Top Aligned Labels.

Die meisten Websites verwenden heutzutage entweder oben ausgerichtete oder Infield-Formularbezeichnungen, da sie keinen besseren Weg kennen.

http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

0
Elliot