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 iris.mueller@soultank.ch gerne zur Verfügung