sprungmarker testet

Schlagwort: Formular

[extern] Technikwürze – Formulare total 1+ 2

Sascha Postner und Daniel Jagszent formulieren es treffend: Auf jeder Webseite sind sie zu finden – Formulare. Und so ist eine richtige Technikwürze daraus geworden: In der ersten Sendung Formulare total 1 geht es vor allem um Usabililty und Design von Formularen, in der zweiten Sendung Formulare total 2 (Barrierefreie Formulare) haben wir uns die Formulare mal ausführlich aus der barrierefreien Perspektive angesehen.

Sascha Postner sprach mich vor einiger Zeit an, ob wir nicht eine Spezialsendung zu Formularen machen sollten. Daniel Jagszent hat sich spontan dazugesellt. Für mich diesmal – weil bald klar war, dass das Thema für eine Sendung zu umfangreich ist – recht intensive Vorarbeit für zwei Sendungen. Für Sendung 1 zur Usability von Formularen hatten wir uns vor allem auf die drei in den letzten zwei Jahren erschienen Bücher von Luke Wroblewski (Web Form Design), Jarrett und Gaffney (Forms that work) und Featherstone, Connell und Bolton (Fancy Form Design) konzentriert. Für Sendung 2 zur Barrierefreiheit von Formularen habe ich mir einen zugleich festen und offenen Rahmen vorgenommen: Es sollten die klassischen Standards für barrierefreie Formulare abgehandelt werden, aber auch – weil mir das immer wichtig ist, einen Schritt über meinen eigenen Tellerrand zu gehen – Aktuelles und Neues einzuarbeiten wie das WCAG 2, einen Ausblick auf HTML 5 und WAIARIA zu machen. Selbst für mich war das mitunter halb Neuland und halb Glaskugel. Um dem auditiven Medium gerecht zu werden und weil Beispiele ja unterstützen, habe ich einige Screenreader-Beispiele mit JAWS und NVDA erstellt.

Weiterlesen „[extern] Technikwürze – Formulare total 1+ 2“

Formulare: wie werden Buttons optimal positioniert

Luke Wroblewski & Etre haben eine kleine Studie gemacht: Primary & Secondary Actions in Web Forms. Die Fragestellung war, wie positioniert man am besten für den Nutzer die Buttons in Formularen.

Wichtig dabei ist der Unterschied zwischen primären und sekundären Buttons oder Aktionen. Als primäre Buttons werden jene bezeichnet, die zum Absenden, zum Vollenden des Formulars genutzt werden. Als sekundäre Aktion gelten Buttons wie etwa der Zurück-Button. Gerade die sekundären Aktionen bergen eine gewisse Gefahr ins sich, dass sie den Nutzer verwirren. Um die Positionierung dieser beiden Buttonsvarianten zu testen, wurde ein Test mit Eye-Tracking durchgeführt.

Weiterlesen „Formulare: wie werden Buttons optimal positioniert“

Wie soll in Formularen das LEGEND-Element optimiert werden? – Web Access Centre Blog

Des Guten zu viel: in Too much accessibility – FIELDSET LEGENDS wird erklärt, warum Screenreader eine gut austarierte LEGEND in Formularen benötigen.

Auch welche Dinge sollte man achten und warum, wenn man in Formularen das LEGEND-Element befüllt. Weil Screenreader wie JAWS den Inhalt der LEGEND vor JEDEM LABEL-Element vorlesen, kann es, wie der Artikel gut an Beispielen erläutert, durchaus zu unsinnigen oder missverständlichen Inhalten kommen. Daher sollte der Inhalt der LEGEND vor allem knapp, relevant für jedes einzelne LABEL und im Textfluss immer noch verständlich sein.

Am besten, so der Vorschlag, sollte man sich schlicht den Inhalt der LEGEND am Schluss noch einmal laut vorlesen. Dann kann man rasch Fehler und Unstimmigkeiten erkennen. Bis dato ist mir nicht aufgefallen, dass JAWS das im Default-Fall nicht deaktiviert hat.

Semantisch korrekte Formulare und bessere Zugänglichkeit

Eine gute Zusammenfassung, wie man Formulare semantisch korrekt und barrierefrei erstellt, bietet der Vortrag: Accessible Forms.

Vor allem die Beispiele zu Checkboxen, Radiobuttons und die optimale Gestaltung von Fehlermeldungen sind interessant und werden anhand von Beispielen erläutert. Besonderes Augenmerk wird abschliessend noch auf die Usability von Formularen gelegt.

Formulare: Hervorheben der Zeilen sinnvoll?

Functioning Form hat mittels Eye-tracking-Methode untersucht, ob das Hervorheben von Zeilen in Formularen Vorteile für den Anwender bringt.

In „Row Highlights in Web Forms“ wird wieder klar, dass es für den Anwender besser und effizienter ist, das Label über das Formfeld zu setzen. Auch wenn – wie Paypal das wohl jetzt anbietet – beim Fokussieren auf ein Formelement dieses farblich hervorgehoben wird, macht es keinen wirklichen Unterschied, ob mit Hervorhebung oder ohne. Der Anwender präferiert eindeutig erstere Methode: Label über dem Formfeld.

Web ohne Grenzen: ein eher nutzerunfreundliches Formular :-)

Man kann es auch zu gut meinen, mit der Gestaltung von Formularen. 🙂

Auf der Webseite Web ohne Grenzen hat man die Möglichkeit, via Webformular einen Newsletter zu abonnieren. Und irgendwie schaffe ich es immer, Formulare nicht zu durchblicken, schon gar nicht eins, dass die LEGENDS des Formulars überproportional hervorhebt. So habe ich schlicht immer auf die LEGEND gedrückt, um das Formular abzuschicken. 😉
Weiterlesen „Web ohne Grenzen: ein eher nutzerunfreundliches Formular :-)“

Formulare: die beste Position von LABEL und Formfeld

Mit Hilfe von Eyetracking-Tests wurde analysiert, wie Nutzer am besten mit der Kombination von Label und Formfeld zurecht kommen.

In Label Placement in Forms werden einige interessante Ergebnisse präsentiert, wie man am besten und nutzerfreundlichsten die Kombination von LABEL und Formfeld einsetzt.

LABEL über dem Formfeld

Die beste Position von LABEL und Formfeld ist wohl übereinander, weil der Nutzer am schnellsten beides erfassen kann. Visuell muss ein hinreichender Abstand zum LABEL des nächsten Formfeldes gesetzt werden.
Weiterlesen „Formulare: die beste Position von LABEL und Formfeld“

Formulare: mit CSS und Webform 2.0 zugänglicher machen

CSS3 Testumgebung mit unterschiedlichen Browsern testen kann Spass machen. 🙂

Die CSS3 Testumgebung des w3c kann richtig Spass machen, auf das was in späteren Jahren kommen wird.

Einen ganz deutlichen Vorsprung in Sachen CSS und Formulare hat mittlerweile Opera, wie man in den Beispielen zu „Improve your forms using HTML5“ ersehen kann:
Weiterlesen „Formulare: mit CSS und Webform 2.0 zugänglicher machen“

Die Testbeispiele von Access Matters: wie Krimis

Die Testbeispiele von Access Matters lesen sich spannender als gedacht.

Für mich immer auch wie ein Krimi: die Testanordnungen von Access Matters. Sie entwerfen einfach Beispiele, wie Labels in Formularen, die auf unsichtbar mit CSS (display: none) gesetzt werden, und rufen dazu auf, dieses Beispiel mit verschiedenen Screenreadern und Textbrowsern zu testen. Die Testberichte (Kommentare) lesen sich neben dem hohen Informationsgehalt schlicht sehr spannend.
Weiterlesen „Die Testbeispiele von Access Matters: wie Krimis“