Embed Size (px)
DESCRIPTION
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.
Citation preview
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
