Das Dokument behandelt die Benutzerfreundlichkeit von Online-Formularen und die damit verbundenen Herausforderungen im Design. Es betont die Bedeutung einer transparenten, fehlerverzeihenden Eingabe sowie eines konsistenten Stils, um das Nutzervertrauen zu stärken und die Conversion-Raten zu erhöhen. Wichtige Empfehlungen sind die Optimierung der Label-Platzierung und die Berücksichtigung des Nutzungskontexts der Zielgruppe.

1. Do’s und Dont’s bei Online-Formularen
Usability Coffee, Zug, 10.07.2014

2. Formulare? – Och, wie langweilig
Nein!
Schlecht designte Formulare vergraulen Online-Kunden
Mangelndes Vertrauen in die Site
Man geht zur Konkurrenz (ausser z.B. bei Online-Steuererklärung ☺)
Schlechte User Experience
Für Firmen: verpasste Chancen, den Kunden an sich zu binden
Mangelnde Nutzungstauglichkeit verschlechtert Image
des Anbieters/Unternehmens
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 2

3. Grundproblematik
Medienbruch:
Papierformulare = Webformulare
(z.B. eGovernment vs. eCommerce)
Schlechte Nutzerführung und Design:
Wenig transparente Prozessdarstellung
Anforderungen der Marketingabteilung Formulare
werden oft zu lang
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 3

4. Wichtiges zu Beginn
Ziel = erfolgreich und einfach zum Abschluss kommen (niemand mag
Formulare ausfüllen)
Weg zum Ziel transparent darstellen
Keine unnötige Dateneingabe verlangen!
Fehlertolerante Dateneingabe ermöglichen
Sinnvolle Default-Werte vorschlagen
Kontext beachten
bekannt vs. fremd
oft ausfüllen vs. selten ausfüllen
Konsistenter Stil (Design, Wording) durchziehen
DIN EN ISO 9241-143: Dialogführung mittels Bildschirmformulare
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 4

5. Design: Wohin mit dem Label?
?
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 5

6. Design: Label - oberhalb Eingabefeld
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 6

7. Design: Label – rechts aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 7

8. Design: Label – links aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 8

9. Design: Label – Best Practice
Label über dem Eingabefeld für
beschleunigtes Ausfüllen
oft genutzte Formulare
Label rechtsbündig ausgerichtet für
eher bekannte Formulare
Label linksbündig ausgerichtet für
unbekannte Formulare
schnellere Lesbarkeit
Wroblewski, L. (2008)Web Form Design; Filling in the Blanks. Rosenfeld
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 9

10. Nr.1: Zu viel Text (der meist nicht gelesen wird!)
| Folie 10soultank AG | Usability Coffee | 10. Juli 2014
Quelle: http://www.bibliothek-langenthal.ch)

11. Nr. 2: Pflichtfelder (1/2)
| Folie 11soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Registrierungsformular (www.coopathome.ch)

12. Nr. 2: Pflichtfelder (2/2)
besser! Bei Software!
Webstandard
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 12

13. Nr. 3: Wo bin ich? (1/2)
| Folie 13soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Checkout-Prozess und Schrittanzeige (www.ricardo.ch)
Quelle: Checkout-Prozess übersichtlich (www.zurrose.ch)

14. Nr. 4: Eingeben, aber wie?
| Folie 14soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Geburtstagseingabe mit Hilfe (www.manor.ch)
Quelle: fehlertolerantes Beispiel (www.blick.ch)

15. Nr. 5: Eingeben – aber wie?
| Folie 15soultank AG | Usability Coffee | 10. Juli 2014
Password
User
Must have at least 6 characters
• Beansprucht Kurzzeitgedächtnis
(Nutzer = Multitasker, speziell bei mobilen
Anwendungen)
• Text im Eingabefeld wird weniger beachtet
(Eye-Tracking-Studien)
• Accessibility (Screenreader können das meist nicht
lesen)
Password
User
Must have at least 6 characters

16. Nr. 6: Und weg sind die Daten! (1/2)
| Folie 16soultank AG | Usability Coffee | 10. Juli 2014
Abbildung 8: Positiv - Eingaben in Schritt 1, ”Personen” sind noch vorhanden. (www.zurichconnect.ch)

17. Nr. 6: Und weg sind die Daten! (2/2)
| Folie 17soultank AG | Usability Coffee | 10. Juli 2014
Abbildung 7: Wieder zurück von Schritt 2 “Fahrzeug” zu Schritt 1 “Personen” (www.zurichconnect.ch)

18. Nr. 7: Sprich die Sprache deiner Nutzer
| Folie 18soultank AG | Usability Coffee | 10. Juli 2014

19. Nr. 8: Zusammengehörigkeit
| Folie 19soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.zurrose.ch Registrierungsformular zur Bestellung.

20. Nr. 9: Wo ist der Fehler? (1/2)
| Folie 20soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.helsana.ch.

21. Nr. 9: Wo liegt der Fehler? (2/2)
| Folie 21soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.ricardo.ch

22. Nr. 10: Danke!
| Folie 22soultank AG | Usability Coffee | 10. Juli 2014Quelle: www.axa-winterthur.ch

23. Literatur
Formulare sind das Bindeglied zwischen Nutzer und
Anbieter – also wichtig!
Nutzungskontext beachten (z.B. Viel- vs. Seltennutzer)
Pflichtlektüre und Empfehlung: Wroblewski, L.(2011) Web
Form Design: Filling in the Blanks. Rosenfeld
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 23

24. Nächste Termine in Zug
21. August 2014, 07.30-08.30 Uhr
«Scrum und User Centered Design – wie geht das?»
23. Oktober 2014, 07.30-08.30 Uhr
«Dank Storytelling zum erfolgreichen Produkt. Warum Use
Cases im Projekte nicht ausreichen»
22. Januar 2015, 07.30 – 08.30 Uhr
«Texten fürs Web»
19. Februar 2015, 07.30 – 08.30 Uhr
«Mobile Prototyping»
Usability Coffee 2014/2015
| Folie 24soultank AG | Usability Coffee | 10. Juli 2014

25. Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen steht Ihnen Iris Müller iris.mueller@soultank.ch gerne zur Verfügung