Schlechtes Formulardesign kostet Kunden und damit Umsatz. Obwohl dies wahrscheinlich niemand ernsthaft bezweifeln würde, sind das Web und vor allem Shops noch immer voll Eingabefeld-Monstern, die eigentlich nur für eine Sache so richtig taugen: unentschlossene Besucher doch noch von einem Kauf abzuhalten.
Wer schon einmal bei Usabilitytests mit Probanden dabei war, kennt sie sicher: die leisen Seufzer, wenn die Testperson auf ein langes Formular stößt. Das Gehirn signalisiert dem Unterbewusstsein in Bruchteilen von Sekunden, dass es jetzt mühsam wird. Gerade Shopbetreiber können von den teilweise hohen Absprungraten im Formularbereich auf dem Weg zur Kasse ein Lied singen. Dabei müsste das gar nicht so schlimm sein, wenn man sich beim Design der Formulare an die bekannten und akzeptierten Gestaltungsgesetze hielte und dabei auch das Prinzip des Minimalismus verfolgte. Bei einer nicht repräsentativen Untersuchung in den USA über die Auswirkungen der Länge eines
Formulars auf die Conversionsrate kam heraus, dass jedes zusätzliche Erfassungsfeld umgerechnet etwa € 1,50.- für jeden Neukunden mehr kostet. Man hatte Formulare in Stufen gezielt von nur wenigen zu immer mehr Feldern gesteigert und dabei festgestellt, dass bei langen Formularen weniger gekauft wurde. So weit ist das einleuchtend. Nun hat man aber zusätzlich als Basis die Kosten für die Neukundengewinnung mit einberechnet. Die folgende kleine Rechnung zeigt den gedanklichen Hintergrund dieser Betrachtungsweise: Gibt man beispielsweise € 10.000.- pro Monat im Online-Marketing aus und generiert damit 500 Kunden bzw. Verkäufe, kostet die Gewinnung eines Neukunden € 20.-. Wird nun das Formular verändert, indem man einige Felder hinzufügt, sinken die Verkäufe zum Beispiel auf 450. Um wieder auf 500 Verkäufe zu kommen, müsste man beim Online-Marketing also € 1.000.- mehr ausgeben (die fehlenden 50 x € 20.-). Ungerechnet auf alle Neukunden zahlt man nunmehr € 22.- pro Neukunden (€ 11.000.- / 500 Verkäufe = € 22.-). Das schlechtere Formular kostet also € 2.- mehr für jede Neukundengewinnung! Besonders teuer wird es, so die Studie, wenn man nach der Telefonnummer fragt. Diese schlägt bei der Neukundengewinnung gleich mit etwa € 3,50 zu Buche. Das ist wirtschaftlich betrachtet durchaus dramatisch! Hat man am Ende des Jahres 6.000 Neukunden gewonnen und ihnen die Telefonnummer abverlangt, hat dieser Datenhunger umgerechnet satte € 21.000.- gekostet. Oder umgekehrt: Ohne Telefonnummer hätte man bei der gleichen Anzahl an Verkäufen € 21.000.- beim Online-Marketing gespart! Die eigenen Formulare kritisch zu analysieren und bei Bedarf auch zu optimieren, lohnt also in den meisten Fällen. Das in Abbildung 1 gezeigte Formular entspricht bis auf das letzte Eingabefeld übrigens einem Formular aus einem Online-Shop und wurde optisch für diesen Beitrag nachgebaut.
Für zwei unnötige Formularfelder plus das Abfragen einer Telefonnummer muss man rein rechnerisch bei 6.000 Verkäufen sein Marketingbudget um schätzungsweise € 48.000.- aufstocken, um die gleiche Zahl an Verkäufen zu erreichen wie mit einem schlankeren Formular.
Zunächst sollten alle – und zwar wirklich alle – Formularfelder kritisch auf ihre Daseinsberechtigung überprüft werden. Jedes Feld, das nicht wirklich für die Abwicklung des nachfolgenden Prozesses gebraucht wird, sollte eliminiert werden. Die Kollegen aus dem traditionellen Marketing sammeln seit jeher möglichst viele Daten über den Kunden, hier im Web wehrt diese Sammelei kaufende Kunden ab. Braucht man die Telefonnummer wirklich? Wann wurde je schon mal ein Kunde angerufen? Findet die Kommunikation in der Regel nicht per Mail statt? Und braucht man für die Versendung eines Newsletters wirklich die postalische Adresse – auch wenn die Angabe freiwillig ist? Es gilt auch zu bedenken, dass im Bundesdatenschutzgesetz verlangt wird, nur die Daten zu erfassen und zu speichern, die unmittelbar für den vorliegenden Geschäftsvorfall benötigt werden (Datenminimierungsgebot). Die Peinlichkeit, nach einem Hackerangriff zugeben (und melden!) zu müssen, dass man E-Mail-Adressen verloren hat, ist schlimm genug. Da müssen nicht auch noch persönliche Adressdaten dabei sein, die man für andere Dinge wie Katalogversendungen legal sowieso nicht verwenden darf. Eine Funktion „Formular löschen“ oder „Eingaben löschen“ sollte man nicht anbieten. Es gibt einfach keinen vernünftigen Grund, warum man ein mühsam ausgefülltes Formular inhaltlich wieder leeren möchte.
Tippfehler bessert man gezielt aus – aber alles löschen? Solche Buttons sind echte Kundenabwehrinstrumente. Hat man ihn versehentlich gedrückt, weil man einfach rechts den Senden-Button gewohnt ist, sind alle Eingaben verschwunden. Sicherlich wird nicht jeder die Kreditkarte ein zweites Mal aus der Brieftasche fummeln, um alles noch einmal neu einzugeben. Besucher können dies wohl nur als Strafe empfinden und als Zeitverschwendung sowieso.
Viele Formulare erinnern an eine lieblos übernommene Eingabemaske einer Datenbank. Das Auge muss ständig zwischen den Feldbezeichnern und den Eingabefeldern hin- und herspringen. Eine wirklich flüssige Eingabe ist daher nicht möglich. Für den Besucher ist es komfortabler, wenn er den Feldbezeichner direkt in der Nähe des Eingabefeldes findet. Felder, die eine inhaltlich starke Verbindung haben, wie Vorname und Nachname, Straße und Hausnummer oder Postleitzahl und Ort, sollten zusammen dargestellt werden, sofern das der Platz zulässt. Auch hier kann das Auge leichter Strukturen erkennen, an die es gewöhnt ist. Wenn nicht zu viele Auswahlmöglichkeiten bei einem Feld benötigt werden, sollte man auch auf die sog. Pull-down-Felder verzichten. Das Anredefeld aus Abbildung 2 wurde in ein Feld mit Radio-Buttons umgewandelt, wie in Abbildung 4 zu sehen ist. Für den Benutzer hat das den Vorteil, dass alle Auswahloptionen gleich sichtbar sind. Bei Pull-down-Menüs besteht außerdem immer die Gefahr, dass sie sich bei Bewegungen des Scrollrädchens der Maus wieder inhaltlich verändern, wenn das Pull-down noch aktiv ausgewählt ist. Der Besucher will die Seite per Mausrad weiter nach unten rollen, verändert stattdessen unbemerkt seine getroffene Auswahl und wundert sich, warum er künftig in der Kommunikation mit „Sehr geehrte Frau …“ angesprochen wird. Das die üblichen Sternchen erklärende, negativ klingende Wort „Pflichtfeld“ verschwindet und wird durch einen tatsächlich erklärenden Text ersetzt. Kommen Kunden hauptsächlich aus Deutschland, belegt man die Länderauswahl am besten mit diesem Land vor. Wirklich lächerlich wirkt es, wenn kleinere Shops über hundert Länder in der Auswahlbox haben. Als ständiges Ärgernis kennt wohl jeder, dass oft eben nicht „Deutschland“, sondern „Germany“ ausgewählt werden muss, das alphabetisch woanders einsortiert ist. Diese vielen oft nur sehr kleinen Ärgernisse summieren sich im Hinterkopf des Besuchers.
Wer sich schon ernsthaft mit Gestaltung und Design beschäftigt hat, kennt die verschiedenen Gestaltungsgesetze bereits. Sie gelten kulturübergreifend und sind überall leicht nachzulesen. Für die Formulargestaltung besonders wichtig ist das Gesetz der Nähe. Es besagt, dass Elemente, die nahe beieinanderstehen, auch als zusammengehörig wahrgenommen werden. Es empfiehlt sich daher, Gruppierungen vorzunehmen und diese ggf. auch optisch leicht voneinander abzugrenzen. Die kann mit gestalterischen Linien, Umrandungen oder auch ganz einfach mit ein paar Pixeln mehr Abstand visualisiert werden. Wie in Abbildung 5 zu sehen ist, lässt sich dem Gesetz der Nähe gut mit optisch angedeuteten, hellgrauen Rahmen folgen, ohne gestalterisch aufdringlich zu wirken. Die Funktion des Absendens wird nun noch durch einen 3D-Button ersetzt, den die Besucher aus normalen Computerprogrammen kennen und den zu klicken durch den Einpresseffekt ein klein wenig mehr Spaß macht als bei flachen Grafikflächen.
Profis überlassen diese Abstände auch nicht dem Zufall. Sie erstellen sich eine Fibonacci-Folge und wählen als Abstandsmaße nur Zahlen, die aus dieser Reihe stammen. Dies wirkt auf unser Auge besonders harmonisch. Eine solche Folge ist leicht erstellt. Man beginnt praktischerweise mit den Zahlen 3 und 5. Die folgende Zahl ist die Summe dieser beiden Zahlen, also 8. Die nächste Zahl wird ebenfalls einfach aus den letzten beiden Zahlen gebildet, aus 5 und 8, also 13. Somit ergibt sich 3, 5, 8, 13, 21, 34, 55, 89, 144 usw. Im Pixelmaß wählt man also für einen bestimmten Abstand entweder 8 oder 13 Pixel, aber keine Werte dazwischen. Diese Abstandsvorgaben lassen sich übrigens überall auf einer Webseite einsetzen. Das Ergebnis ist eine optisch sehr harmonisch wirkende Aufteilung aller Elemente. Der Quotient zweier aufeinanderfolgender Fibonacci-Zahlen nähert sich übrigens dem bekannten Goldenen Schnitt an, der ja auch beim Fotografieren für gute Bildkompositionen verwendet wird.
Der letzte Schritt besteht darin, die eigenen Formulare und die darin hinterlegten Eingabelogiken ausgiebig und möglichst ohne Betriebsblindheit hart zu testen. Werden wirklich alle denkbaren Eingabefehler abgefangen? Versuchen Sie es vor allem bei Zahlenfeldern auch mit Buchstaben, Sonderzeichen und unerwarteten Zahlen. Eine ganze Reihe an Shops akzeptiert noch heute bei der Bestellmenge die Eingabe von Werten mit Dezimalkomma oder Minuswerten.
Bei Letzteren wird dann vom Berechnungsalgorithmus praktisch eine Gutschrift erteilt, weil die Einkaufssumme beispielsweise bei € -125.- liegt. Solche Fehleingaben können gerade bei Notebooktastaturen leicht passieren und daher sollten sie in jedem Fall abgefangen werden. Hätte man bei Quelle das Kontaktformular selbst einmal getestet, wäre sicherlich aufgefallen, dass es nicht besonders kundenfreundlich wirkt, wenn man dem mitteilungsbedürftigen Kunden nur 300 Buchstaben zur Verfügung stellt. Übersah man beim Schreiben den rückwärts mitlaufenden Zähler rechts unten, ging es mitten im Formular nicht weiter (siehe Abbildung 7).
Hat der Besucher bei seinen Eingaben einen Fehler gemacht, sollte man ihn eindeutig und zweifelsfrei darauf hinweisen. Eine Fehlerliste ober- oder unterhalb des Formulars mag einfacher zu programmieren sein – kundenfreundlich ist das aber nicht. Hinweise auf Eingabefehler gehören idealerweise genau an das Feld platziert, wo der Fehler passiert ist. Und natürlich sollte sich die Meldung farblich, am besten in Rot, so abheben, dass man sie nicht übersehen kann.
Der Text der Meldung sollte möglichst nicht als harte Fehlermeldung formuliert werden, sondern besser Hilfestellung geben, was der Benutzer nun tun bzw. ändern muss. „Falsche Eingabe“ oder „Bitte überprüfen Sie Ihre Eingabe“ sind wenig hilfreich.
Große Probleme tauchen immer wieder auf, wenn ein Passwort zu wählen ist. Regelmäßig erscheinen auf Webseiten dann Meldungen, dass das Passwort zu kurz gewählt wurde. Wie lang soll es denn bitte sein? Den Benutzer erst ein Passwort wählen zu lassen und ihm dann eine Fehlermeldung um die Ohren zu hauen, dass auf jeden Fall auch Zahlen oder gar Sonderzeichen (was ist das überhaupt?) enthalten sein müssen, ist wohl einer der größten Späße, über den nur Programmier lachen können. Gibt es Restriktionen, sollte man sie direkt an das Eingabefeld schreiben: „Das Passwort kann zwischen 6 und 20 Zeichen lang sein.“
Man sollte immer im Kopf behalten, dass nicht jeder Besucher ein PC- oder Internet-Freak ist. Erklärungen sollten daher immer auch für Otto Normalverbraucher verständlich sein. Fachbegriffe wie „Login“, „Username“ oder „User-ID“ verwirren eher und klingen auch unpersönlich.
Denken Sie immer daran: Bei jedem „Visit“, den Ihr Trackingtool für Ihre Website bzw. Ihren Shop ausweist, sitzt bzw. saß ein Mensch irgendwo vor seinem Bildschirm und hat vielleicht versucht, bei Ihnen einzukaufen. Irgendwie haben wir alle uns daran gewöhnt, nur noch anonyme Aufschläge auf Serverfestplatten zu sehen und zu zählen. Ein Viertel der „Visitors“ hat den Warenkorb nach der Eingabe einiger Daten abgebrochen. Am besten rechnet man die Abbruchzahlen um und macht sie menschlich: „Im letzten Jahr haben 8.650 Menschen ihren Einkauf bei uns abgebrochen!“ Dann fragt man „Warum?“ und macht sich auf die Suche.
In realen Läden werden Kunden in der Regel sehr gastfreundlich und zuvorkommend behandelt. Man tut alles, um einen Besucher zu einem Kunden, nein, zu einem zufriedenen Kunden zu machen, und unterstützt ihn, wo es geht. Warum nicht auch im Web?