20 einfache Formulardesign-Guidelines visualisiert (UXcamp.ch 2014)

Pat Mächler / [email protected]

20 einfache Guidelines für Formulardesign- visualisiert

24. Mai 2014

Version 1.1 Korrektur bei #20 am 22. Oktober 2014

mailto:[email protected]

Wieso?

IWF Web Solutions

● Wieso Guidelines?● Wieso visualisiert?

Bildquelle: 'PT Money' ptmoney.com

#

#

J.A. Bargas-Avila, O. Brenzikofer, S.P. Roth, A.N. Tuch, S. Orsini and K. Opwis (2010).

Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form DesignInTech User Interfaces, Rita Matrai (Ed.),

http://goo.gl/rHkc2

Mirjam Seckler, Silvia Heinz, Javier A. Bargas-Avila, Klaus Opwis, and Alexandre N. Tuch. 2014.

Designing usable web forms: empirical evaluation of web form improvement guidelines.In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '14).

http://goo.gl/fDbgSa

http://formsthatwork.com

Zentrale Quellen der Präsentation

IWF Web Solutions

http://goo.gl/rHkc2

http://goo.gl/rHkc2





#

#

● Zusammenfassung aus UX-Formulardesign-Forschung○ 20 einfache Regeln aus verschiedenen Papern und

Monographen○ grösstenteils empirisch evaluiert

Paper J.A. Bargas-Avila et. al 2010

IWF Web Solutions

#

#

#1: Felder sollten in einem Format sein welche aus anderen Situationen bekannt ist & die Reihenfolge intuitiv

IWF Web Solutions

#

#

#2: Wenn die Antwort nicht mehrdeutig ist, erlaube Antworten jeglicher Form

IWF Web Solutions

#

#

#3: Halte Formulare so kurz und einfach wie möglich; frage nicht nach unnötigen Daten

IWF Web Solutions

#

#

#4: Falls möglich und sinnvoll, trenne zwingende von optionalen Feldern; benutze Farben und Sternchen für zwingende Felder

IWF Web Solutions

#

#

#5: Um möglichst schnelles Ausfüllen zu erlauben, platziere Labels über den Eingabe-Feldern

IWF Web Solutions

#

#

Exkurs: Labelplatzierung in Österreichischen Formularen

IWF Web Solutions

#

#

Frage zu #5: zwingend oben am Feld?

IWF Web Solutions

Label Placement in Austrian Forms, with Some Lessons for English Forms http://goo.gl/pQTvGr

Labels On Forms For Uxlx 2010 http://goo.gl/YSoeSi

Ergebnis einer Evaluation in Österreich (Labels oft unten):Nicht so eindeutig ob oben, unten oder links am besten => Hauptsache nahe am Feld

● weit weg von anderen Feldern (Gruppierung)● rechtsbündig, wenn links am Feld platziert

#

#

Labelplatzierung: Formsthatwork schlägt weitere Differenzierung vor

IWF Web Solutions

Bildquelle: C. Jarret, http://goo.gl/tRDTn3

#

#

http://goo.gl/tRDTn3

#6: Verwende nicht mehr als eine Spalte. Stell nur eine Frage pro Zeile

IWF Web Solutions

#

#

#7: Felder sollten so gross sein wie die erwartete Antwort

IWF Web Solutions

#

#

#8: Verwende Checkboxen, Radio- buttons oder Drop-Downs um die Anzahl Antworten zu begrenzen und für solche die zu Typos tendieren…

IWF Web Solutions

#

#

(#8) ...verwende sie auch wenn Nutzern nicht im voraus klar ist, welche Art von Antwort erwartet wird.

IWF Web Solutions

#

#

#9: Verwende Checkboxen statt Listenboxen zur Selektion von mehreren Einträgen

IWF Web Solutions

#

#

#10: Verwende Radiobuttons bei bis zu vier Optionen. Bei mehr als vier Optionen verwende Drop-Downs

IWF Web Solutions

#

#

#11: Ordne Optionen in intuitiver Reihenfolge an. Falls keine sinnvolle Alternative besteht, ordne alphabetisch

IWF Web Solutions

#

#

#12: Verwende Dropdowns für Datums-eingaben um Formatierungsfehler zuvermeiden. Verwende sonst Textboxen + Formatierungshilfen für schnellesausfüllen

IWF Web Solutions

#

#

Anmerkung zu #12:

IWF Web Solutions

HTML5 (und viele Frameworks) offerieren zeitgemässere Datumsfelder statt Drop-Downs http://goo.gl/H4wyN

#

#

#13: Falls Antworten ein bestimmtes Format benötigen, kommuniziere die Regeln im voraus, ohne Beispiele

IWF Web Solutions

#

#

#14: Fehlermeldungen sollten den Nutzer in freundlicher, vertrauter Sprache auf das Versehen hinweisen. Die Meldung sollte ggf. für den Fehler entschuldigen, sowie beschreiben was der Fehler ist & wie er behoben werden kann.

IWF Web Solutions

#

#

#15: Lösche niemals Felder, nachdem ein Fehler aufgetreten ist.

IWF Web Solutions

#

#

#16: Zeige Fehlermeldungen gleichzeitig, integriert im Formular

IWF Web Solutions

#

#

#17: Fehlermeldungen müssen sofort sichtbar sein mittels Farben, Icons und Text, sowie auf die genaue Problemzone hinweisen

IWF Web Solutions

#

#

#17 Update 2014 (M. Seckler et al.):Zeige Fehlermeldungen rechts des Eingabefelds in rot

IWF Web Solutions

#

#

#18: Deaktiviere den Submitbutton sofort nach dem Absenden um mehrfach-Einsendung zu verhindern

IWF Web Solutions

#

#

#19: Zeige eine Bestätigungsseite nach Absenden des Formulars, dass sich bedankt und beschreibt was als nächstes passiert. Versende zudem ein entsprechendes Mail.

IWF Web Solutions

#

#

#20: Verwende keine Reset-Buttons, da sie aus Versehen geklickt werden können. Falls dennoch vorhanden, sollten sie sich graphisch vom Submit-Button unterscheiden und linksbündig zum Abbrechen, rechts vom Submit sein.

IWF Web Solutions

#

#

Relevant?

IWF Web Solutions

BeispielBenutzerregistrierung Süddeutsche Zeitung● 1.48 Mio Leser● Alexa Rank #935● Alexa Rank #37 @DE● ca. 4.22 Mio Aufrufe

täglich

Design eher suboptimal http:

//goo.gl/0GnoC2

#

#

http://goo.gl/0GnoC2



Evaluation M. Seckler et al. 2014

IWF Web Solutions

Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf

#

#

http://seckler.me/docs/CHI14_MirjamSeckler.pdf

Resultate M. Seckler et al. 2014

IWF Web Solutions

Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf

#

#

http://seckler.me/docs/CHI14_MirjamSeckler.pdf

Pat Mächler / [email protected]

Besten Dank für die Aufmerksamkeit!

mailto:[email protected]