20 einfache Guidelines für Formulardesign - visualisiert

1. Pat Mächler / p.m aechler@iwf.ch
20 einfache Guidelines für Formulardesign
- visualisiert
24. Mai 2014
Version 1.1 Korrektur bei #20 am 22. Oktober 2014

2. Wieso?
● Wieso Guidelines?
● Wieso visualisiert?
IWF Web Solutions
Bildquelle: 'PT Money' ptmoney.com

3. Zentrale Quellen der Präsentation
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 Design
InTech 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
IWF Web Solutions

4. Paper J.A. Bargas-Avila et. al 2010
● Zusammenfassung aus UX-Formulardesign-Forschung
○ 20 einfache Regeln aus verschiedenen Papern und
Monographen
○ grösstenteils empirisch evaluiert
IWF Web Solutions

5. #1: Felder sollten in einem Format
sein welche aus anderen Situationen
bekannt ist & die Reihenfolge intuitiv
IWF Web Solutions

6. #2: Wenn die Antwort nicht
mehrdeutig ist, erlaube Antworten
jeglicher Form
IWF Web Solutions

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

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

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

10. Exkurs: Labelplatzierung in
Österreichischen Formularen
IWF Web Solutions

11. Frage zu #5: zwingend oben am Feld?
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
IWF Web Solutions

12. Labelplatzierung: Formsthatwork
schlägt weitere Differenzierung vor
Bildquelle: C. Jarret, http://goo.gl/tRDTn3
IWF Web Solutions

13. #6: Verwende nicht mehr als eine
Spalte. Stell nur eine Frage pro Zeile
IWF Web Solutions

14. #7: Felder sollten so gross sein wie
die erwartete Antwort
IWF Web Solutions

15. #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

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

17. #9: Verwende Checkboxen statt
Listenboxen zur Selektion von
mehreren Einträgen
IWF Web Solutions

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

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

20. #12: Verwende Dropdowns für Datums-eingaben
um Formatierungsfehler zu
vermeiden. Verwende sonst Textboxen
+ Formatierungshilfen für schnelles
ausfüllen
IWF Web Solutions

21. Anmerkung zu #12:
HTML5 (und viele Frameworks) offerieren zeitgemässere
Datumsfelder statt Drop-Downs http://goo.gl/H4wyN
IWF Web Solutions

22. #13: Falls Antworten ein bestimmtes
Format benötigen, kommuniziere die
Regeln im voraus, ohne Beispiele
IWF Web Solutions

23. #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

24. #15: Lösche niemals Felder,
nachdem ein Fehler aufgetreten ist.
IWF Web Solutions

25. #16: Zeige Fehlermeldungen
gleichzeitig, integriert im Formular
IWF Web Solutions

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

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

28. #18: Deaktiviere den Submitbutton
sofort nach dem Absenden um
mehrfach-Einsendung zu verhindern
IWF Web Solutions

29. #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

30. #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

31. Relevant?
Beispiel
Benutzerregistrierung
Süddeutsche Zeitung
● 1.48 Mio Leser
● Alexa Rank #935
● Alexa Rank #37 @DE
● ca. 4.22 Mio Aufrufe
täglich
Design eher suboptimal
IWF Web Solutions
http:
//goo.gl/0GnoC2

32. Evaluation M. Seckler et al. 2014
IWF Web Solutions
Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf

33. Resultate M. Seckler et al. 2014
IWF Web Solutions
Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf

34. Besten Dank für die Aufmerksamkeit!
Pat Mächler / p.m aechler@iwf.ch