Webstandard

 

Usability und Formulare

Formulare. Für viele Webanwendungen absolut unverzichtbar, für andere wiederum stellt es eher ein lästiges Übel dar, womit gerade mal eine Kontaktseite versehen wird. In der Welt der Weblogs hingegen, sind die Formulare nicht wegzudenken. Letztendlich geht es immer darum Daten einzugeben, aber genau das stellt den ein oder anderen User bereits ein Problem. Einige werden jetzt vielleicht denken, Probleme? Wieso? Eine Ursache dafür ist, dass der User ab dem Moment in dem er beispielsweise ein Registrierungsformular ausfüllt, die Anonymität des WWW verlässt. Denn nun muss er persönliche Informationen von sich preisegeben, die beim normalen surfen im Internet nicht benötigt werden. Kommen die Daten dort an wo sie hingehören? Habe ich alles richtig ausgefüllt? Fragen die sich bestimmt ein Jeder von uns schon mal gestellt hat. Genau aus diesem Grund ist es wichtig, vor allem den weniger versierten Usern das ausfüllen und absenden von Onlineformularen so einfach wie möglich zu machen und den Usern die Unsicherheit zu nehmen. Eine wichtige Aufgabe die hierbei dem Layout und Design eines Formulares zukommt, ist es hierbei eine Beziehung zwischen den jeweiligen Formularelementen ( Eingabefeld, Auswahlmenü, Checkboxen etc. ) und dem dem dazugehörigen beschreibenden Text zu schaffen, welcher idealerweise als Label bezeichnet wird.

Wo ist die ideale Position für ein Label?

Vor genau dieser Frage stehen bei der Erstellung eines Layouts für ein Formular, in erster Linie derjenige der das Design entwirft. Im Konzept wurden vorher alle nötigen Daten und Informationen definiert die bspw. mittels eines Registrierungsformulares übertragen werden sollen und für eine Registrierung seitens des Betreibers der Seite, unerlässlich sind. Aber in welcher Reihenfolge positioniert man nun die abzufragenden Daten? Für Daten innerhalb von Formularen bei denen ein thematischer Zusammenhang besteht ( bspw. persönliche Daten wie Name, Vorname, Anschrift etc.) kann und sollte innerhalb eines sogenannten Fieldsets definiert werden. Diese Art der Gruppierung, ein entsprechendes grafisches Layout vorausgesetzt, vereinfacht es dem User sich innerhalb eines Formular orientieren zu können. Man muss sich als User so auf einen wesentlich kleineren Bereich des Monitors konzentrieren und wird weniger von anderen Dingen auf der Seite abgelenkt. Eine der hierbei am häufigsten anzutreffende Frage, ist die der Positionierung der Label in Position zum entsprechenden Formularelement innerhalb eines Fieldsets. Dieser Frage geht Matteo Penzo in einem sehr interessanten Artikel mit dem Titel "Label Placement in Forms" nach. Eines der Merkmale welches er unter anderem in dieser Studie analysierte, die unter anderem mittels Eyetracking-Software durchgeführt wurde, war die Usability der einzelnen Label-Positionen in Formularen. Grundlage für die einzelnen Analyseschritte war der dem ein oder anderen bereits bekannte Artikel "Web Application Form Design".

Luke und Matteo haben in Ihren Studien 4 Varianten des Label Placements unterschieden. Um diese Varianten vielleicht etwas bildlicher zu gestalten anbei noch ein paar Screenshots von Formularen.

Label Placement in Forms

• left-aligned labels to the left of Input Fields ( siehe erste Grafik oben )
• right-aligned labels to the left of Input Fields ( siehe erste Grafik unten )
• left-aligned labels above Input Fields ( siehe zweite Grafik links )
• left-aligned bold labels above Input Fields ( siehe zweite Grafik rechts )

Um die einzelenen Vor- und Nachteile dieser Varianten besser erklären zu können, anbei zwei Grafiken die dies ein wenig verdeutlichen sollen. Die Differenz des Abstandes bei den beiden links neben dem Formularelement befindlichen Labels ( siehe erste Grafik ), könnte kaum grösser sein. Die Labelposition oberhalb des Formularelements ( siehe zweite Grafik ) vereinfacht es dem User insofern, dass er Label und Formularelement in einem wahrnimmt und nicht seperat noch einmal den zum Label befindlichen Teil des Formularelements "aufsuchen" muss. Wird das Schriftgewicht hinggen zu sehr erhöht, verwirrt es den User mehr als dem besseren Verständnis nützt.

Die gängigste Variante ist sicherlich eine linksbündige textliche Ausrichtung auf der linken Seite neben dem Formularelement ( bspw. einem Eingabefeld - siehe erste Beispielgrafik ). Das Problem welches vorallem bei umfangreichen Formularen hier oft entsteht, ist der grosse Abstand zwischen dem Ende des Labels und dem Beginn des Eingabefeldes. Insbesondere bei international agierenden Firmen, auch auf die Darstellung der Webanwendung bei verschiedenen Sprachen Rücksicht nehmen. Was allerdings nicht zum Schluss führen sollte, das der Abstand noch grösser gemacht wird damit bspw. Russisch oder Spanisch noch entsprechend dargestellt werden können. Ebenso ein Vorteil für die Positionierung des Labels oberhalb des Formularelementes, wie der daraus resultierende bessere und schnellere Lesefluss für den User und die damit verbundene Hoffnung des Webseitenbetreibers, eventuell die für die User angenehmer gestaltet zu haben.

Alles in allem, zwei sehr lesenswerte Artikel.

Webstandard - LinkZone 

Auf interessante Webpages, -anwendungen, Inspirationen, Tutorials oder einfach nur informative Diskussionen, wird in dem Bereich “LinkZone” verwiesen. Da der Webstandardlog für die Leser gemacht ist, können diese auch die Inhalte in diesem Bereich beinflussen. Wer lesenswertes zu Themengebieten wie Webdesign, Webentwicklung, Webstandards, SEO & SEM empfehlen möchte, kann dies gern tun.

• Monats-Archiv

  • 10/2005 - today

• Kategorien

  • CSS [47]
  • Browser [101]
  • Graphic Corner [28]
  • JavaScript [47]
  • SEO [42]
  • Webstuff [153]
  • Inspiration [27]
  • (X)HTML [7]
  • Veranstaltungen [14]
  • Webstandard [25]
  • Usability [17]
  • Bücher [35]
  • Mobile Corner [11]
  • Intern [12]
  • Typografie [8]
  • Mikroformate [2]
  • Webdevelopment [9]
  • W3C [7]
  • Accessibility [10]
  • Mobile Development [7]
  • Edge of Links [29]
  • Site of the week [17]

• Webseiten

  • Bartelme
  • Der Webzeugkoffer
  • DasWebdesignBlog
  • Pixelgraphix
  • Web Design Showcase
  • Farbwolke
  • Jens Meiert
  • Webstyle-Blog
  • Peruns weblog
  • Webstandards in D
  • 456bereastreet
  • Mark Boulton
  • Bloggerschmidt
  • cayou webdesign
  • Manuel Bieh
  • NotizBlog
  • John Resig
  • Michael Dunker - SEO
  • marketing NEXT
  • Selbstständig im Netz
  • Photoshop-Buch
  • Muse-Design

• RSS 2.0
• Atom 0.3
• Impressum
• Datenschutzbestimmungen
• Sitemap
• this site is licensed under a CC-License
• powered by kulando.de