20 einfache Formulardesign-Guidelines visualisiert (UXcamp.ch 2014)
-
Upload
pat-maechler -
Category
Design
-
view
319 -
download
0
description
Transcript of 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
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
● 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
#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
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
#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
#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
Evaluation M. Seckler et al. 2014
IWF Web Solutions
Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf
Resultate M. Seckler et al. 2014
IWF Web Solutions
Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf