Do's und Dont's bei Online-Formularen, Usability Coffee, Zug und St.Gallen
description
Transcript of Do's und Dont's bei Online-Formularen, Usability Coffee, Zug und St.Gallen
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 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
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
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
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 2014 | Folie 6
Design: Label – rechts aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 7
Design: Label – links aligniert
Quelle: Luke Wroblewski – all about forms
soultank AG | Usability Coffee | 10. Juli 2014 | Folie 8
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
Nr.1: Zu viel Text (der meist nicht gelesen wird!)
| Folie 10soultank AG | Usability Coffee | 10. Juli 2014Quelle: http://www.bibliothek-langenthal.ch)
Nr. 2: Pflichtfelder (1/2)
| Folie 11soultank AG | Usability Coffee | 10. Juli 2014
Quelle: Registrierungsformular (www.coopathome.ch)
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 Schrittanzeige (www.ricardo.ch)
Quelle: Checkout-Prozess übersichtlich (www.zurrose.ch)
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)
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
Nr. 6: Und weg sind die Daten! (1/2)
| Folie 16soultank AG | Usability Coffee | 10. Juli 2014Abbildung 8: Positiv - Eingaben in Schritt 1, ”Personen” sind noch vorhanden. (www.zurichconnect.ch)
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)
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 Registrierungsformular zur Bestellung.
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 2014Quelle: 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- 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
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 UseCases 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
Herzlichen Dank für Ihre AufmerksamkeitBei Fragen steht Ihnen Iris Müller [email protected] gerne zur Verfügung