Pat Mächler / p.m aechler@iwf.ch 
20 einfache Guidelines für Formulardesign 
- visualisiert 
24. Mai 2014 
Version 1.1 Kor...
Wieso? 
● Wieso Guidelines? 
● Wieso visualisiert? 
IWF Web Solutions 
Bildquelle: 'PT Money' ptmoney.com
Zentrale Quellen der Präsentation 
J.A. Bargas-Avila, O. Brenzikofer, S.P. Roth, A.N. Tuch, S. Orsini and K. Opwis (2010)....
Paper J.A. Bargas-Avila et. al 2010 
● Zusammenfassung aus UX-Formulardesign-Forschung 
○ 20 einfache Regeln aus verschied...
#1: Felder sollten in einem Format 
sein welche aus anderen Situationen 
bekannt ist & die Reihenfolge intuitiv 
IWF Web S...
#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 Fel...
#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? 
Label Placement in Austrian Forms, with Some Lessons for 
English Forms http://goo.gl...
Labelplatzierung: Formsthatwork 
schlägt weitere Differenzierung vor 
Bildquelle: C. Jarret, http://goo.gl/tRDTn3 
IWF Web...
#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...
(#8) ...verwende sie auch wenn 
Nutzern nicht im voraus klar ist, 
welche Art von Antwort erwartet wird. 
IWF Web Solution...
#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...
#12: Verwende Dropdowns für Datums-eingaben 
um Formatierungsfehler zu 
vermeiden. Verwende sonst Textboxen 
+ Formatierun...
Anmerkung zu #12: 
HTML5 (und viele Frameworks) offerieren zeitgemässere 
Datumsfelder statt Drop-Downs http://goo.gl/H4wy...
#13: Falls Antworten ein bestimmtes 
Format benötigen, kommuniziere die 
Regeln im voraus, ohne Beispiele 
IWF Web Solutio...
#14: Fehlermeldungen sollten den 
Nutzer in freundlicher, vertrauter 
Sprache auf das Versehen hinweisen. 
Die Meldung sol...
#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 hinwe...
#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 passie...
#20: Verwende keine Reset-Buttons, 
da sie aus Versehen geklickt werden 
können. Falls dennoch vorhanden, 
sollten sie sic...
Relevant? 
Beispiel 
Benutzerregistrierung 
Süddeutsche Zeitung 
● 1.48 Mio Leser 
● Alexa Rank #935 
● Alexa Rank #37 @DE...
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
Besten Dank für die Aufmerksamkeit! 
Pat Mächler / p.m aechler@iwf.ch
Nächste SlideShare
Wird geladen in …5
×

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

1.451 Aufrufe

Veröffentlicht am

20 einfache Guidelines für Formulardesign - visualisiert

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.451
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 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. 2. Wieso? ● Wieso Guidelines? ● Wieso visualisiert? IWF Web Solutions Bildquelle: 'PT Money' ptmoney.com
  3. 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. 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. 5. #1: Felder sollten in einem Format sein welche aus anderen Situationen bekannt ist & die Reihenfolge intuitiv IWF Web Solutions
  6. 6. #2: Wenn die Antwort nicht mehrdeutig ist, erlaube Antworten jeglicher Form IWF Web Solutions
  7. 7. #3: Halte Formulare so kurz und einfach wie möglich; frage nicht nach unnötigen Daten IWF Web Solutions
  8. 8. #4: Falls möglich und sinnvoll, trenne zwingende von optionalen Feldern; benutze Farben und Sternchen für zwingende Felder IWF Web Solutions
  9. 9. #5: Um möglichst schnelles Ausfüllen zu erlauben, platziere Labels über den Eingabe-Feldern IWF Web Solutions
  10. 10. Exkurs: Labelplatzierung in Österreichischen Formularen IWF Web Solutions
  11. 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. 12. Labelplatzierung: Formsthatwork schlägt weitere Differenzierung vor Bildquelle: C. Jarret, http://goo.gl/tRDTn3 IWF Web Solutions
  13. 13. #6: Verwende nicht mehr als eine Spalte. Stell nur eine Frage pro Zeile IWF Web Solutions
  14. 14. #7: Felder sollten so gross sein wie die erwartete Antwort IWF Web Solutions
  15. 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. 16. (#8) ...verwende sie auch wenn Nutzern nicht im voraus klar ist, welche Art von Antwort erwartet wird. IWF Web Solutions
  17. 17. #9: Verwende Checkboxen statt Listenboxen zur Selektion von mehreren Einträgen IWF Web Solutions
  18. 18. #10: Verwende Radiobuttons bei bis zu vier Optionen. Bei mehr als vier Optionen verwende Drop-Downs IWF Web Solutions
  19. 19. #11: Ordne Optionen in intuitiver Reihenfolge an. Falls keine sinnvolle Alternative besteht, ordne alphabetisch IWF Web Solutions
  20. 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. 21. Anmerkung zu #12: HTML5 (und viele Frameworks) offerieren zeitgemässere Datumsfelder statt Drop-Downs http://goo.gl/H4wyN IWF Web Solutions
  22. 22. #13: Falls Antworten ein bestimmtes Format benötigen, kommuniziere die Regeln im voraus, ohne Beispiele IWF Web Solutions
  23. 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. 24. #15: Lösche niemals Felder, nachdem ein Fehler aufgetreten ist. IWF Web Solutions
  25. 25. #16: Zeige Fehlermeldungen gleichzeitig, integriert im Formular IWF Web Solutions
  26. 26. #17: Fehlermeldungen müssen sofort sichtbar sein mittels Farben, Icons und Text, sowie auf die genaue Problemzone hinweisen IWF Web Solutions
  27. 27. #17 Update 2014 (M. Seckler et al.): Zeige Fehlermeldungen rechts des Eingabefelds in rot IWF Web Solutions
  28. 28. #18: Deaktiviere den Submitbutton sofort nach dem Absenden um mehrfach-Einsendung zu verhindern IWF Web Solutions
  29. 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. 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. 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. 32. Evaluation M. Seckler et al. 2014 IWF Web Solutions Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf
  33. 33. Resultate M. Seckler et al. 2014 IWF Web Solutions Bildquelle: http://seckler.me/docs/CHI14_MirjamSeckler.pdf
  34. 34. Besten Dank für die Aufmerksamkeit! Pat Mächler / p.m aechler@iwf.ch

×