medamind

Formular-Tuning

Gerade eben habe ich wieder einmal einen Artikel der Art “the 100 most important…” gefunden, diesmal zum . Da ich gerade erst das Buch von Herrn Wroblewski gelesen habe, eine interessante Fundstelle.

Und das passend zu einem ganz blöden Fehler, der mir gerade selbst passiert ist: ich habe Rechnungs- und Lieferadresse bei einer Online-Bestellung verwechselt und muss nun, was ich eigentlich vermeiden wollte, kiloschwere Pakete bei der Post abholen…

Die 25 Punkte

…kurz auf den Punkt gebracht, decken sich grundsätzlich mit vielem, das in “Web Form Design” erörtert wird:

1. Ditch the Captchas - Captchas umgehen
2. Remove Unnecessary Fields -auf unnötige Angaben/Formularfelder verzichten
3. Keep It Simple - klar!
4. Clear the Clear Button -Verzicht auf den Reset Button
5. Cancel the Cancel Button - Verzicht auf den Abbruch Button
6. Label Required Fields - Kennzeichnung erforderlicher Felder
7. Use Point of Action References - Hilfesystem zu einzelnen Feldern
8. Show Formatting Examples - Anzeige von Eingabemustern
9. Make it International Friendly - Berücksichtigung internationaler Gegebenheiten (PLZ u.ä.)
10. Allow Easy Forward and Backward Movement - einfache Navigation bei mehrseitigen Formularen
11. Logical Tab Sequence - Schlüssige Navigation auch mit Tabulator Taste
12. Server Side Validation - Serverseitige Validierung
13. Clear Error Messages - Einbau verständlicher Fehlermeldungen
14. Show What’s Needed When Its Needed - Zeige Eingabefelder erst dann, wenn sie ausgefüllt werden müssen
15. Logical List Order - Präsentation von Listenauswahlen in sinnvoller Reihenfolge
16. AJAX Validation - AJAX Validierung
17. Remember Me Feature - Erinnerungsfunktion für persönliche Daten, falls gewünscht
18. Set Focus - Kennzeichnung des aktuelle Fokus
19. Avoid Obnoxious Password Requirements - keine Vorgaben zur Beschaffenheit des Passworts
20. Progress Indicators - Verlaufsanzeige bei mehrseitigen Formularen
21. Minimize Scrolling & Pages - Vermeidung langer Seiten und der Notwendigkeit zum Scrollen
22. Strong Call to Action Buttons - klare und deutliche Benennung von Buttons
23. Use External Labels - Positionierung von Labels außerhalb des Eingabefelds
24. Prioritize Size and Location of Multiple Button Forms - Hervorhebung der wichtigen Buttons
25. Clear Confirmations - verständliche Bestätigungsseiten

Ein paar Anmerkungen

Man könnte diese Liste sicher noch ergänzen, vielleicht auch einiges zusammenfassend streichen. Wer es möchte, sollte sich die Links ansehen bzw das Buch bestellen, - im Detail beschreibt Wroblewski jeden dieser Punkte mit Positivnegativ-Beispielen und vielen Illustrationen.

Es gibt dabei übrigens eine Erläuterung, die sich auf den deutschen Markt nicht abbilden lässt: Im Online Shop ist das Geburtsdatum unter Umständen kein , da dies dem Zugang zur Schufa Auskunft dient - leider aufgrund mangelnder Zahlungsmoral eine Notwendigkeit vieler Shopbetreiber.

Es gibt auch eine Sache, die ich persönlich in Frage stelle: warum den “Cancel” Button entfernen? Ich muss als Käufer in einem Online Shop in der Lage sein, einen Kaufvorgang abzubrechen, beispielsweise um noch ein weiteres Produkt in den Warenkorb zu legen. Also: nicht entfernen, sondern durch “doch weitershoppen” ersetzen. Wär das was?

Was mir auch nicht gefällt, ist die optische Hervorhebung “wichtigerer Buttons”. Das wäre eine Diskussion wert, finde ich.

Punkt 14 bedarf vielleicht einer Erläuterung. Klassisches Beispiel wäre hier die Zahlungsmethode. Die Eingabefelder für Kreditkartennummer und Sicherheitscode sind dann und nur dann erforderlich, wenn sich der Kunde zur Kreditkartenzahlung entschließt. Für Nachnahmezahler ist die Anzeige dieser Eingabefelder nicht relevant.

Insgesamt alles diskussionswürdig.

Was heißt das nun in der Praxis?

Wenn man sich diese Liste so ansieht, so fallen jedem von uns sicherlich spontan eine Reihe von Formularen ein, über die man sich aus dem ein oder anderen Grund geärgert hat und die man unter Berücksichtigung dieser Punkte hätte verbessern können. Mir fallen übrigens auch ein Formulare und Benutzerführungen ein, die mich richtig positiv beeindruckt haben. Das sind oft die von Community Sites - bei denen ich Community Muffel mich dann doch letztendlich nicht anmelde. Die haben offenbar verstanden, wie es funktionieren muss. Vielleicht aber auch manchmal etwas zu “hip” - gerade wenn “bunte” AJAX Effekte mit ins Spiel kommen?

Wer einen Online Shop betreibt, kämpft hinsichtlich solcher “Best Practice Listen” vor allem mit der Gestaltung von zwei Formularen: der Registierung neuer Kunden und dem Checkout Prozess, - oftmals auch zusammengefasst zu einem großen, mehrseitigen Formulardialog. Und in dem Fall der Schlüssel zum Kaufabschluss. Keine Frage: eine Optimierung des Registrier- und letztendlichen Bestellvorgangs kann nur zur Kundenzufriedenheit beitragen und ist daher etwas, das grundsätzlich absolut zu befürworten ist.

Aber es gibt viele andere Formulare, auch wenn dieser technische Aspekt für den Laien nicht sofort erkennbar ist. Im Onlineshop ist auch das “ab in den Warenkorb” ein Formular. Ebenso ist die Suche ein Formular. Es geht also weit über das “schicken Sie uns eine Nachricht” hinaus. Im einfachsten Fall also ein Textfeld und ein Button oder eine Checkbox und ein Button. Im komplexen Fall eben die Bezahlung im Shop.

Die liebe Technik

Wir haben die Technologie um weiter zur Benutzerfreundlichkeit (und vielleicht auch Begeisterung?) beizutragen. “AJAX”: Definitiv nicht nur der Hype für mehr Interaktion, “fancy” Effekte, sondern eben auch für eine qualitative Verbesserung von Internetangeboten.

Leider muss man sich hier aber auch die technischen Grundlagen näher ansehen, nämlich die Basissysteme, die ja eben jene Funktionalität on Board bereits mitbringen, - mehr oder weniger optimiert hinsichtlich der hier genannten, wünschenswerten Anforderungen an besseres Dialogdesign. Ich meine damit ein mitgeliefertes Kontaktformular, eine Shopregistrierung oder eben den Warenkorb bis hin zur Bezahlung.

Ohne tiefere Eingriffe ins System gilt hier im Zweifel erstmal der Grundsatz “mitgefangen, mitgehangen” oder “nimm, was du kriegst”. Dies gilt insbesondere für den Online Shop. CMS Systeme bieten meist Erweiterungen zum individuellen Formulardesign.

Zum Glück haben beispielsweise viele Shopsystem Anbieter hier schon dazu gelernt: Internationalisierung und ähnliche Aspekte sind kein Thema mehr (oder sollte ich vorsichtig doch lieber “kaum mehr” schreiben?). Auch die Auswahl benötigter Felder sowie deren Label kann inzwischen oft individuell gestaltet werden, ohne dabei in den Untiefen des Codes oder einer Sprachdatei wühlen zu müssen.

Problematischer wird es aber gerade bei Fragen nach der Validierung, der Unterstützung von AJAX sowie der Forderung nach bestimmten Navigationsmechanismen und der (Nicht-)anzeige benötigter Informationen. Dies ist zum einen individuell, zum anderen aber auch eine Frage der darunterliegenden Technik- in die bereits integrierte Formulare ja gerne sehr tief und gelegentlich auch alles andere als schön eingebunden sind. Hier heißt es dann doch oft spätestens: selbst die Ärmel hockrempeln, Funktionalität mit einbinden oder/und sogar Systemänderungen in Kauf nehmen.

Es ist ein Qualitätsmerkmal einer Software, beispielsweise eines Open Source CMS oder eines Shopsystems, dem Ganzen Werkzeuge mitzugeben, um Anpassungen dieser Art schnell umsetzbar zu machen. Es ist aber vielleicht auch ein Qualitätsmerkmal des Anbieters, den Kunden auf solche Aspekte und die Möglichkeiten der technischen Umsetzung aufmerksam zu machen.

Was kann man dem Websitebetreiber mitgeben?

Eine Frage interessiert mich brennend:

Sehen die vielen Shopbetreiber das genauso? Sind sie bereit, für Formularoptimierung Geld auszugeben? Wie also kann man überhaupt den Kunden als zukünftigen Shopbetreiber oder Websitebetreiber animieren, sich darüber Gedanken zu machen? Wo steht das Formular auf der Prioritätenliste neben Faktoren wie Optik und Suchmaschinenoptimierung? Sprechen wir da die selbe Sprache?

Vielleicht: Versetzen Sie sich in die Lage des Kunden!…? Haben Sie selbst schon mal einen Bestellvorgang entnervt abgebrochen und sind zur Konkurrenz abgewandert, auch wenn die doch einen Tick teuerer war?
Was bedient sich leicht und bequem? Was macht so richtig zufrieden? Welche Innovation begeistert?
Dies übrigens nicht nur reduziert auf Registrierung und Checkout. Auch das “ab in den Warenkorb” sollte ein Einkaufserlebnis sein.

Es bleibt trotz allem die Frage offen, ob nun ein gelungenes Formular der Schlüssel zum Erfolg ist.

In meinem oben beschriebenen Fall und dem Ärgernis meines 20 kg Pakets kann ich übrigens den Fehler nicht recht reproduzieren. Ich weiß nur, dass das Laden einzelner Formularschritte sehr lange dauerte und letztendlich die Bestätigung schon fast “stehenblieb” - so dass ich nur über die eingehende Email sicher gehen konnte, dass die Bestellung erfolgreich angekommen war. Der Shop übrigens einer der Marktführer. Und mein erster Impuls war: da bestell ich nichts mehr…

Ankündigung…

Ich werde das Thema Formulare nun mal weiter unter die Lupe nehmen, mir Teile dieser 25 Punkte Liste oder auch anderes herausgreifen und mich separat dem ein oder anderen Thema wie auch den technischen Fragen im Hintergrund widmen. Und natürlich zur Frage: wie viel Arbeit steckt da eigentlich dahinter? Dabei beschäftigt mich vor allem die Frage nach “bedingten Formularfeldern”. Mehr dazu demnächst also hier.

Bildnachweis: diesen Schlüsselbund gibts bei .