Do’s und Dont’s bei Online-Formularen
Usability Coffee, Zug, 10.07.2014
Formulare? – Och, wie langweilig
Nein!
Schlecht designte Formulare vergraulen Online-Kunden
Mangelndes Vertrauen in die Si...
Grundproblematik
Medienbruch:
Papierformulare = Webformulare
(z.B. eGovernment vs. eCommerce)
Schlechte Nutzerführung und ...
Wichtiges zu Beginn
Ziel = erfolgreich und einfach zum Abschluss kommen (niemand mag
Formulare ausfüllen)
Weg zum Ziel tra...
Design: Wohin mit dem Label?
?
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 5
Design: Label - oberhalb Eingabefeld
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2...
Design: Label – rechts aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 ...
Design: Label – links aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 |...
Design: Label – Best Practice
Label über dem Eingabefeld für
beschleunigtes Ausfüllen
oft genutzte Formulare
Label rechtsb...
Nr.1: Zu viel Text (der meist nicht gelesen wird!)
| Folie 10soultank AG | Usability Coffee | 10. Juli 2014
Quelle: http:/...
Nr. 2: Pflichtfelder (1/2)
| Folie 11soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Registrierungsformular (www.co...
Nr. 2: Pflichtfelder (2/2)
besser! Bei Software!
Webstandard
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 12
Nr. 3: Wo bin ich? (1/2)
| Folie 13soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Checkout-Prozess und Schrittanze...
Nr. 4: Eingeben, aber wie?
| Folie 14soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Geburtstagseingabe mit Hilfe (...
Nr. 5: Eingeben – aber wie?
| Folie 15soultank AG | Usability Coffee | 10. Juli 2014
Password
User
Must have at least 6 ch...
Nr. 6: Und weg sind die Daten! (1/2)
| Folie 16soultank AG | Usability Coffee | 10. Juli 2014
Abbildung 8: Positiv - Einga...
Nr. 6: Und weg sind die Daten! (2/2)
| Folie 17soultank AG | Usability Coffee | 10. Juli 2014
Abbildung 7: Wieder zurück v...
Nr. 7: Sprich die Sprache deiner Nutzer
| Folie 18soultank AG | Usability Coffee | 10. Juli 2014
Nr. 8: Zusammengehörigkeit
| Folie 19soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.zurrose.ch Registrierungsf...
Nr. 9: Wo ist der Fehler? (1/2)
| Folie 20soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.helsana.ch.
Nr. 9: Wo liegt der Fehler? (2/2)
| Folie 21soultank AG | Usability Coffee | 10. Juli 2014
Quelle: www.ricardo.ch
Nr. 10: Danke!
| Folie 22soultank AG | Usability Coffee | 10. Juli 2014Quelle: www.axa-winterthur.ch
Literatur
Formulare sind das Bindeglied zwischen Nutzer und
Anbieter – also wichtig!
Nutzungskontext beachten (z.B. Viel- ...
Nächste Termine in Zug
21. August 2014, 07.30-08.30 Uhr
«Scrum und User Centered Design – wie geht das?»
23. Oktober 2014,...
Herzlichen Dank für Ihre Aufmerksamkeit
Bei Fragen steht Ihnen Iris Müller iris.mueller@soultank.ch gerne zur Verfügung
Nächste SlideShare
Wird geladen in …5
×

Do's und Dont's bei Online-Formularen, Usability Coffee, Zug und St.Gallen

1.251 Aufrufe

Veröffentlicht am

Usability Coffee - ein Event von soultank AG. Mitarbeiter stellen bei Kaffee und Gipfeli ein Thema mit praktischen Inputs rund ums Thema Usability vor.
Iris Müller, soultank AG, spricht zum Thema Do's und Dont's bei Online Formularen.

Veröffentlicht in: Internet
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.251
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
90
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Do's und Dont's bei Online-Formularen, Usability Coffee, Zug und St.Gallen

  1. 1. Do’s und Dont’s bei Online-Formularen Usability Coffee, Zug, 10.07.2014
  2. 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. 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. 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. 5. Design: Wohin mit dem Label? ? soultank AG | Usability Coffee | 10. Juli 2014 | Folie 5
  6. 6. Design: Label - oberhalb Eingabefeld Quelle: Luke Wroblewski – all about forms soultank AG | Usability Coffee | 10. Juli 2014 | Folie 6
  7. 7. Design: Label – rechts aligniert Quelle: Luke Wroblewski – all about forms soultank AG | Usability Coffee | 10. Juli 2014 | Folie 7
  8. 8. Design: Label – links aligniert Quelle: Luke Wroblewski – all about forms soultank AG | Usability Coffee | 10. Juli 2014 | Folie 8
  9. 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. 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. 11. Nr. 2: Pflichtfelder (1/2) | Folie 11soultank AG | Usability Coffee | 10. Juli 2014 Quelle: Registrierungsformular (www.coopathome.ch)
  12. 12. Nr. 2: Pflichtfelder (2/2) besser! Bei Software! Webstandard soultank AG | Usability Coffee | 10. Juli 2014 | Folie 12
  13. 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. 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. 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. 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. 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. 18. Nr. 7: Sprich die Sprache deiner Nutzer | Folie 18soultank AG | Usability Coffee | 10. Juli 2014
  19. 19. Nr. 8: Zusammengehörigkeit | Folie 19soultank AG | Usability Coffee | 10. Juli 2014 Quelle: www.zurrose.ch Registrierungsformular zur Bestellung.
  20. 20. Nr. 9: Wo ist der Fehler? (1/2) | Folie 20soultank AG | Usability Coffee | 10. Juli 2014 Quelle: www.helsana.ch.
  21. 21. Nr. 9: Wo liegt der Fehler? (2/2) | Folie 21soultank AG | Usability Coffee | 10. Juli 2014 Quelle: www.ricardo.ch
  22. 22. Nr. 10: Danke! | Folie 22soultank AG | Usability Coffee | 10. Juli 2014Quelle: www.axa-winterthur.ch
  23. 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. 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. 25. Herzlichen Dank für Ihre Aufmerksamkeit Bei Fragen steht Ihnen Iris Müller iris.mueller@soultank.ch gerne zur Verfügung

×