Bessere Formulare für Landingpages und Shops

Formulare sind eine der größten Hürden vor der Conversion – sowohl auf Landingpages als auch im Checkout von Online-Shops. Viele Besucher brechen doch noch ab.

Gute Formulare machen es Besuchern dagegen so einfach wie möglich, schnell und bequem ihre Daten einzugeben.

Julian Kleinknecht zeigt Best Practices, Anregungen und neuen Ideen zu:

• Wie sollten Formulare optimal gestaltet sein?
• Welche Motivationen haben Besucher, die ein Formular ausfüllen? Und wie kann man diese hervorheben?
• Welche Formularfelder braucht es nicht?
• Was gibt es bei der Validierung zu beachten?
• Verschiedene Wege, um die Verwendung von Formularen zu messen

Guten Tag und herzlich willkommen zu unserem heutigen Webinar zum Thema „Formulare Shops und Landingpages“. Um was soll es heute gehen? Ich möchte Formulare unter verschiedenen Aspekten beleuchten:

• erstes Thema Layout und Gestaltung, das heißt wie soll sie aussehen.
• Dann Konzept, wo es um so Sachen geben wie viele Felder sollte man anzeige, wie viele Schritte sollte man verwenden.
• Dann wie macht man Formulare benutzerfreundlich, wie macht man eine gute Usability.
• Dann das Thema Fehlermeldungen und Validierung – wie kann man es schaffen, dass weniger Fehlermeldungen angezeigt werden, dass Besucher Fehlermeldung vermeiden und
• ganz am Ende möchte noch ein bisschen was erzählen, wie man Formulare am besten misst, sodass man weniger Fehlermeldungen bekommt und mehr abgeschickte Formulare.

Kontext beachten

Anfangen möchte mit dem Punkt, den ich genannt habe „Kontext beachten“ und hier ist der wichtige Punkt, dass die Motivation ein Formular auszufüllen die kommt nicht von dem Formular selbst, das heißt schlechte Formulare sind auf jeden Fall ein Conversion-Killer, aber nur ein gutes Formular allein reicht vielleicht auch nicht. Das heißt, wir müssen ein Wertversprechen haben. Besucher müssen motiviert seien bei Ihnen zu kaufen, bei Ihnen ein Lead zu werden.

Bei Shops kann es sein, dass die Besucher ihre Produkte haben wollen, dass es ein gutes Angebot ist und bei Landingpages wollen Besucher am Formular gern die Informationen von Ihnen haben. Das heißt, Sie müssen klar kommunizieren: Warum soll ich denn hier das Formular abschicken? Das heißt, Formularoptimierung ist ein wichtiger Bestandteil von vielen, aber Sie müssen sich auch um andere Sachen kümmern wie Wertversprechen. Wo wir auch ein Webinar zu haben. Wenn Sie sich dafür interessieren, könnten Sie sich auch die Aufzeichnung auf unserer Website anschauen.

Layout und Gestaltung

Nach dieser kurzen Einleitung möchte ich einsteigen mit dem Thema „Wie sollen denn Formulare aussehen“, „Wie sollen die gestaltet sein?“ Und der erste Punkt ist: Sie sollten Formulare vom Rest der Seite abkapseln, das heißt es muss sichergestellt sein, dass das Formular nicht innerhalb der Landingpage untergehen. Da können Sie eine klare Abgrenzung machen, wie in diesem Beispiel mit einer farbigen Box, die ganz klar zeigt: links ist das Formular, rechts das Bild. Es ist ganz klar, wo mal loslegen sollte, wenn man hier motiviert ist, das Formular abzuschicken. Das kann man auch noch anders abgrenzen. Man kann zum Beispiel mehr Weißraum verwenden und muss nicht unbedingt eine farbige Box verwenden. Es muss nur klar sein, wo das Formular anfängt und wo der Rest der Website anfängt. Das muss klar geteilt sein. Wenn Sie ein langes Formular haben kann es auch sinnvoll sein dieses Formular erst in einem JavaScript-Layer zu öffnen nach einem Klick auf einen Botton oder komplett auf eine neue Seite auszulagern. Das heißt, Sie müssen nicht alle Formulare indirekt auf der Landingpage packen.

Nächster Punkt: Formulare müssen einfach aussehen. Das heißt sie müssen einfach auszufüllen sein. Es muss aber auch so erscheinen, dass es wirklich einfach ist. Das heißt, wenn hier ein Formular einfach auszufüllen ist, es sieht aber nicht so aus, dann denken Leute „Ah, das ist mir zu viel Arbeit, das mache ich lieber nicht.“ Das heißt, Sie müssen auch den ersten Eindruck in Betracht ziehen. Der muss so sein „Ach ja, das ist ja kein Problem. Das fülle ich mal schnell aus.“ Wie kann man sowas schaffen? Erstens, das Formular muss gut strukturiert sei, es muss in verschiedene Gruppen eingeteilt sein. Brauchen eine ausreichende große Schriftart, modernes Layout. Da zeige ich euch noch ein paar Beispiele. Ein gutes und schlechtes. Sie brauchen eine einheitliche Länge der Formularfelder, dass nicht so ein Flattern, dass Felder verschieden lang sind. Das sieht nicht gut aus, das sieht nach viel Arbeit aus. Sie brauchen ausreichend Abstand zwischen den einzelnen Formularfeldern und wenn Sie optionale Felder haben, dann blenden Sie die initial mal aus. So sieht es nicht nach noch mehr Arbeit aus. Was heißt in der Praxis. Wenn, wir uns mal dieses Beispiel anschauen. Denkt man ja da „Boh, ist das viel Aufwand“. Das sieht nach richtig viel Arbeit aus, dieses Formular auszufüllen, obwohl es vielleicht gar nicht so viel Aufwand ist. Woran liegt es? Es gibt da für die Formularfelder die fetten Rahmen. Es sieht voll nach vor 10 Jahren aus. Die Abschnitte sind viel zu klein, die Schriftart ist zu klein. Es sieht alles so aus wie so ein Formular, das man vielleicht vom Finanzamt bekommt. Also sehr schwierig auszufüllen und nach viel Arbeit aus. Wenn, man das jetzt vergleicht mit diesem Formular wo vielleicht ähnliche Informationen abgefragt werden. Es sieht nach viel weniger Aufwand aus. Da gibt es mehr Abstände, da gibt es eine größere Schriftart, da gibt es einheitliche Längen der Felder. Viel besser. Das überprüfen Sie mal wie einfach auszufüllen Ihre Formulare aussehen. Das Gleiche trifft auch auf den Checkout zu. Überrumpeln Sie Besucher im ersten Schritt des Checkouts nicht. Das heißt, diese Ansicht ist die Beste. Es gibt die Unterscheidung „Bin schon Kunden“ und “Bin noch kein Kunde“ Das heißt, es wird noch kein großes Formular eingeblendet vergleichen Sie diese Ansicht mal mit dieser hier. Hier kommt man auf die Seite und sieht sofort ein riesen Formular „Oh viel Arbeit“. Das heißt, viel eleganter ist es erstmal diese Ansicht zu haben und dann das Formular, das für die Gastbestellung, für Neukunden erst nach dem Klick auf „weiter“ einzublenden. So wie hier. Sieht nach viel weniger Arbeit aus.

Konzept

Dann möchte ich zum Thema „Konzept von Formularen“ gehen. Da geht es um Sachen wie das Formular aufgebaut ist und was da inhaltlich kommuniziert wird und da möchte ich eigentlich mit dem wichtigsten Punkte anfangen, und zwar müssen Sie Besucher motivieren das Formular abzusenden und da gibt es drei wichtige Punkte.

Vermeiden Sie unbedingt generische Formulare. Das heißt, wenn jemand auf den Button geklickt „jetzt Angebot erhalten“ und dann kommt man auf ein Formular, das ist normales Kontaktformular oder ganz generisches ist. Das passt nicht zusammen. Da fühlt man sich verarscht. Da weiß man nicht „Warum sollte ich denn jetzt ein Kontaktformular abschicken. Ich wollte doch ein Angebot erhalten.“ Zweitens kommunizieren Sie „Was habe ich davon, wenn ich das Formular abschicke.“ Bei Online-Shops ist das natürlich einfacher, da bekommt man das Produkt, ganz klar. Bei Landingpages ist es anders. Da weiß man vielleicht nicht warum man das genau abschicken sollte und drittens. Kommunizieren Sie, was als nächstes passiert. Werde ich angerufen, bekomme ich eine E-Mail, wie lange dauern diese ganzen Sachen. Das sind alles Bedenken, die Besucher haben, den Sie entgegenwirken müssen. Hier habe ich wieder ein schlechtes und ein gutes Beispiel mitgebracht. Hier so ein generisches Kontaktformular von dem ich gerade gesprochen habe. Da habe ich auf den Button „Angebot erhalten“ geklickt und dann komme ich auf so ein generisches Formular. Furchtbar. Das greift ja gar nicht meine vorige Intention auf, da überlegt ich mir doch „Bin ich hier richtig gelandet oder ist das einfach ein generisches Formular, wo ich gar kein Angebot erhalten kann?“ Viel besser ist es, so ein Formular wie folgendes einzusetzen. Da haben Sie eine gute Überschrift die heißt „Jetzt unverbindliches Angebot kostenlos anfordern“ und den untere Text der nochmal beschreibt wie das ganze funktioniert. Dass man es per E-Mail oder per Telefon bekommt, das Formular, dann den Call-to-Action der noch mal wiederholen, dass es kostenlos ist und unten drunter so ein Lead-Out-Text, unter dem Call-to-Action der beschreibt, wann man das Angebot bekommt. Das heißt ein spezifisches Formular, kein generisches Formular. Es wird noch mal motiviert, indem man sagt es ist kostenlos und unverbindlich und es wird das bedenken genommen wie lange es dauern bis man die die Antwort bekommt. In dem Lead-Out ganz unten. Das heißt, wenden Sie auf jeden Fall generische Formular wie diese hier.

Zweiter wichtiger Punkt fragen Sie so wenige Informationen wie möglich ab. Das gilt für den Checkout wie auch für Landingpages. Bei Landingpages insbesondere im B2B-Bereich haben wir das häufiger, dass die Marketingleute sagen „Ja, aber der Vertrieb braucht diese Informationen. Der will unbedingt wissen, Unternehmensgröße, Budget, Anzahl der Mitarbeiter, diese ganzen Sachen, aber in den meisten Fällen braucht der Vertrieb diese Information tatsächlich gar nicht, weil das kann man auch im Internet nachschauen. Allerdings ist es so, der Vertrieb recherchiert sowieso noch mal, ob die Angaben überhaupt stimmen. Das heißt, weitere Informationen, die der Vertrieb unbedingt haben möchte, hinterfragen Sie mal, ob es wirklich notwendig ist oder, ob man das nicht einfach weglassen kann. Das führt nur zu Mehraufwand bei Besuchern. Vielleicht wollen sie diese Informationen auch gar nicht preisgeben. Vielleicht denken sie „Warum soll ich das preisgeben, da machen die mir mein Angebot teurer, wenn ich jetzt sage, dass ich ein großes Unternehmen bin.“ Weiterer Punkt bei dem Thema B2B-Leads ist es. Dass man häufig hört, dass Leute nur hochwertige Leads haben wollen. Das heißt, jedes Formular so erstellen, dass sie nur hochwertige Leads bekommen, weil sie keine Lust haben die Leads an zu telefonieren, die vielleicht nicht die höchste Qualität haben. Aber auch dem möchte ich unbedingt widersprechen. Ihr Ziel sollte es sein viele Leads zu bekommen und dann können Sie später aussortieren welche vielleicht nicht gut sind. Das heißt, man weiß einfach im Vorhinein nicht, dass bestimmte Formularfelder zu hochwertigen Leads führen. Natürlich kann man die Hürde ganz hoch legen, wenn man viele Formularfelder einpackt und sag „Das dauert ganz lange bis es abgeschickt wird“. Dann bekommen Sie weniger Leads, dadurch hochwertiger, aber dann bekommen Sie jedoch Leads die Sie vielleicht haben wollten nicht. Nur Leute die wirklich, wirklich motiviert sind Sie als Lead bekommen. Aber es ist ja selten, sodass der Vertrieb zu viele Leads hat, dass er sich nicht darum kümmern kann. Das heißt, lieber mehr Leads als nur hochwertige Leads verwenden und später identifizieren, woran man denn festmachen kann, wie man gute und weniger gute Leads bekommt. Meistens hängt es sowieso entweder am Traffic oder am Inhalt der Seite und gar nicht so sehr haben am Aufbau des Formulars.

Ich möchte hier ein weiteres Beispiel zeigen zum Thema „weniger Abfragen“. Hier ein Beispiel für die Registrierung eines B2B Online-Shops und da wird man ganz schön erschlagen von diesen ganzen Informationen die abgefragt werden. Dann ist die Frage „Kann man nicht die Dropdown-Funktionen, die doppelte E-Mail-Adresse, den Benutzernamen und das Passwort entweder ganz wegwerfen oder auf einen später den Schritt verschieben und vielleicht unten die AGBs noch an einer anderen Stelle platzieren?“ Es wirkt alles so voll und man könnte es auch so bauen das man die Felder die ich gerade genannt habe einfach ausblendet und erst in einem zweiten Schritt abfragt. Es sieht schon nach viel, viel weniger Arbeit aus und führt wahrscheinlich zu einer niedrigeren Conversion-Rate des Formulars. Weitere Felder, die man wahrscheinlich nicht braucht sind CAPTACHAs, das Festnetz und Handynummer, wieso braucht man beides, Unternehmensgröße, woher kennen Sie uns, Google-Link und Facebook, das Budget, diese ganze Sache. Wenn, Sie können werfen Sie die raus, fragen Sie sie nicht ab. Das kann man nachher recherchieren. Da muss man nicht von den Besuchern erfragen und wenn man die Felder nicht weglassen kann, dann fragen Sie sie lieber später ab. Wenn, Sie es nicht entfernen können. Sowas wie Passwort wählen, Benutzername wählen oder optimale Angaben kann man auch im zweiten Schritt abfragen. Das zeig ich euch mal unsere eigene Website. Wir machen es so, für unser Tool unser ANALYZE Tool gibt man erst eine zu optimierende Seite ein und im zweiten Schritt gibt man dann seine Kontaktdaten an. Auch hier profitieren wir von dem sogenannten „Fuß in die Tür Effekt“, dass Besucher, wenn sie erstmal was eingegeben haben, was nach wenig Aufwand aussieht, dann mit einer höheren Wahrscheinlichkeit bereits Informationen zu vervollständigen, als, wenn wir alles auf den ersten Blick anzeigen. Das kann man auch bei Online-Shops einsetzen. Was wir unbedingt immer empfehlen ist, dass man im ersten Schritt des Checkouts nicht fragt „Wollen Sie ein Benutzerkonto erstellen?“, sondern einfach nur fragt „Sind Sie schon Kunde oder sind Sie noch auch kein Kunde?“ und die Auswahl oder die Aktion „Konto erstellen“ auf einen später Schritt verlegt. Wie zum Beispiel hier: Setzt eine Checkbox „Ich möchte Konto erstellen“, muss das Passwort festlegen und fertig. Es sieht nach viel weniger Arbeit aus, zusätzlichen sich ein Passwort auszudenken, als sich im ersten Schritt zu entscheiden „Ja, ich möchte das Konto erstellen“. Hier kann man davon profitieren Information erst später abzufragen. Außerdem wichtig, kommunizieren Sie, warum Sie bestimmte Daten haben möchten. Es geht zum Beispiel Telefonnummern, Geburtstag. Denn, wenn man etwas begründet sind Seitenbesucher eher bereit, die Informationen herauszugeben. Dann verstehen sie, warum sie das unbedingt haben möchte. Zum Beispiel bei dem Geburtsdatum kann man sagen, man muss 18 Jahre sein um das bestellen zu können oder man bekommt einen Gutschein bei seinem Geburtstag und für die Telefonnummer kann man sagen „Wir brauchen die für Rückfragen“ zum Beispiel zur Finanzierung oder wenn die Versandadresse nicht funktioniert. Das muss Besuchern nur klar sein, dass die Leute nicht anrufen um was zu verkaufen, sondern dass die Telefonnummer brauchen um das Produkt zu verschicken, um die Informationen zu verschicken, falls es noch Rückfragen gibt. Das Gleiche gilt auch für Spezialangaben. Wie hier den höchsten Bildungsabschluss. Da muss auch klar sein, warum man es Informationen braucht. Sonst fragen die Leute „Warum sollte ich das abgeben? Darauf habe ich eigentlich keine Lust das anzugeben. Das sind meine persönlichen Daten“. Wenn Sie auch begründen, warum Sie das brauchen, ist die Wahrscheinlichkeit höher, dass Besucher hier weitermachen. Für Kontaktformulare ist außerdem wichtig, dass Sie das Anliegen oben platzieren. Das heißt, hier ihre Mitteilung, warum wird man kontaktiert, warum möchte ich den Anbieter kontaktieren zeigt man am besten ganz oben an. Sodass, Leute es wieder finden. Wenn man oben Anrede, Name, Vorname hinschreibt ist es nicht sofort klar, dass man hier richtig ist. So sieht man sofort „Ja ich habe ein schönes Anliegen“ Wenn ich den Betreff aufklappe, sehe ich mich wieder. Ist das richtige Formular, hier rechts, nicht ab. Es kommt man darauf und denkt „Was soll es denn? Warum muss jetzt meine daten eingeben? Ich will doch nur eine Frage beantwortet haben.“ Zweiter wichtiger Punkt: Gruppieren Sie Formularfelder auf eine sinnvolle Art und Weise, denn kleine Pakete sehen nach weniger Arbeit aus. Kann man in kleineren Schritten abarbeiten. Es ist viel einfacher kleine Schritte zu machen, als einen großen Task abzuarbeiten. Wenn man sich dieses Beispiel anschaut, für eine Kfz-Versicherung dann denkt man doch „Ja das ist ja sehr, sehr viel Arbeit das alles auszufüllen“ obwohl es vielleicht gar nicht so viel Arbeit ist muss man halt machen für eine Kfz-Versicherung, aber wenn man es vergleiche mit diesem Beispiel. Sieht ja noch viel weniger Arbeit aus. Viel einfacher auszufüllen. Das heißt, wenn man Sachen gruppiert sieht es nach weniger Arbeit aus und es macht auch weniger kognitive Arbeit, wenn man das also in einzelne Teile unterteilt. Diesen Teil abgehakt hat und man zum nächsten weiter gehen kann. Das ist auf jeden Fall in sinnvolle Teile einteilen. Wie hier „Wer möchte versichern“ und danach geht es zum Fahrzeug. Zwischen zwei sinnvolle Kategorien. Außerdem wichtig. Öffnen Sie links, nicht in einem neuen Fenster, sondern in einem Player, wie diesem hier zum Beispiel. Dann reißt man Besucher nicht aus dem Flow raus. Sonst klicken sie auf den Link drauf, kommen auf eine neue Seite, müsse sich dort erst orientieren und müssen wieder zurück zur anderen Seite finden. Das ist alles unnötiger kognitiver Aufwand. Stellen Sie stattdessen Links wie zu den AGB oder zu Versanddienstleister oder zu den Zahlungsanbietern, zu Widerrufrechtsinformationen. Stellen Sie die lieber in einem Layer dar statt Besucher auf eine neue Seite zu schicken.

Benutzerfreundliche Formulare

Worauf kommt es an, wenn man benutzerfreundliche Formulare haben möchte?

Erster Punkt: Verwenden Sie Radio-Buttons, wenn es so drei, vier Felder zur Auswahl gibt. Zum Beispiel ist auch bei der Anrede ist es viel einfach auszufüllen. Man muss nur einmal klicken, fertig. Einmal mit dem Finger darauf tippen, fertig. Und man sieht sofort die Auswahlmöglichkeiten. Das heißt, man sie sofort Herren, Frauen ist einfach. Wenn es aber Auswahlmöglichkeiten sind, die vielleicht nicht sofort klar sind, dann ist einfach sofort einen Überblick zu bekommen, wenn es ein Radio-Button ist anstatt es ein Dropdown ist. Hier beim Titel ist es eher schwierig. Da gibt es ungefähr zehn Auswahlmöglichkeiten bei dem Titel. Das wäre blöd das als Radio-Button darzustellen. Das wäre viel zu viele Radio-Button auf einmal. Machen Sie das lieber nicht. Das heißt, wenn es viele Informationen gibt dann Dropdown verwenden, wenn es weniger gibt verwenden Sie Radio-Button. Machen Sie außerdem die Labels klickbar. Das heißt, nicht nur diesen kleinen Kreis hier, sondern das ganze Feld außen rum. Dann muss man nicht immer genau auf den Kreis drücken. Das macht das ausfüllen viel, viel einfacher und benutzerfreundlicher. Und nochmal zu den Dropdown zurück insbesondere auf mobile sind Dropdown noch nerviger. Und zwar, weil es weniger Platz gibt und dann kann man sich zum Beispiel überlegen, ob man nicht so ein Plus-Minus-Stepper, hier links, verwendet, um Anzahl festzulegen oder so ein Schieberegler hier. Das ist viel einfacher so hin und her zu wischen als ein Dropdown aufzumachen. Dann entfällt das Feld auszuwählen.

Bei Mobile Webseiten ist außerdem wichtig, dass Sie für jedes Feld das passt, die passende mobile Tastatur verwenden. Das heißt, wenn Sie die Zahl eingeben, wie ein Telefon, normale Kreditkarte, Postleitzahlen, dann zeigen Sie von Anfang an die Zahlen-Tastatur an. Dann müssen Besucher nicht erst unten links hinklicken, auf die Zahlen wechseln und dann lostippen. Sondern zeigte Sie direkt die Zahlen an. Das macht alles viel, viel einfacher, das direkt auszufüllen und das Gleiche gilt auch für E-Mail-Adressen da gibt es auch eine spezielle virtuelle Tastatur, wo das @ Zeichen direkt angezeigt wird und dass man nicht erst zu den Sonderzeichen gehen muss @ drücken und dann zurückgehen muss dann @gmail.com eingeben muss. Das heißt, machen Sie es Besuchern noch einfacher, indem Sie die passenden Tastaturen anzeigen. Das ganze geht über das sogenannte „Typ-Attribute“. Wie man das hier sieht. Typ gleich Number oder Typ gleich E-Mail. Ist das relativ einfach in HTML umzusetzen. Wenn, Sie Lead Generierung machen, da ist es außerdem sinnvoll häufig strukturierte Daten abzufragen als einfach nur ein freies Textfeld. Das ist hier ein Beispiel für ein Fertighaus und man könnte ja auch einfach ein Freitextfeld reinschreiben und sagen welche Informationen braucht wir noch von ihnen, um ihnen ein Angebot für ihr Fertighaus zu machen. Dann müssten wir doch erst hergehen und uns überlegen „Was ist mir denn wichtig? Wann soll es losgehen? Wie hoch ist mein Budget? Habe ich schon ein Grundstück?“ Diese ganzen Informationen vermeiden Sie das lieber. Bieten Sie stattdessen Besuchern eine Führung an. Führen Sie die durch die wichtige Information, indem Sie Freitextfelder ein großes Freitextfeld durch einzelne Dropdown zu ersetzen oder durch einzelne kleinere Freitextfelder. Führen Sie Besucher, wenn Sie bestimmte Informationen brauchen, um Besuchern Angebote zu machen. Das ist einfacher ausfüllen, weniger kognitiver Aufwand und führt einfach zu mehr abgeschickten Formularen. Das heißt nicht, dass Freitextfelder manchmal nicht sinnvoll sind, denn manchmal gibt es auch Besucher, die wollen unbedingt noch irgendwas Mitteilen, auch wenn man das gar nicht braucht für das Angebot, dann können Sie noch ein Freitextfeld anbieten, aber am besten als optionales Feld. Das heißt, wenn Sie die Information eigentlich nicht wirklich brauchen, dann kennzeichnen Sie es als optional, machen einen Link hin, darauf klicken und dann öffnet sich erst das Feld. Oder wenn Sie Freitextfelder nicht vermeiden können, weil es zum Beispiel technisch nicht anders geht oder weil Besucher viele verschiedene Informationen eingeben, dann erläutern Sie wenigstens, was man daran schreiben kann. Das heißt, hier kann man reinschreiben „Was soll entrümpelt werden? Dreizimmerwohnung mit Keller“. Das heißt, so gibt man Besuchern einen Leitfaden an die Hand, was sie genau reinschreiben müssen und sie müssen sich jetzt nicht überlegen „Mh, was schreibe ich jetzt genau rein?” Welche Informationen braucht der Betreiber wirklich von mir umgehen Angebot zu machen?“

Dann möchte ich ein paar kleinere Features hervorheben wie Sie es Besuchern noch einfacher machen können Formularfelder auszufüllen, und zwar erstens: Erlauben Sie das Auto-Fill aktiviert ist. Manchmal sieht man, dass es wie aus angeblichen Datenschutzgründen nicht aktiviert ist. Das ist vollkommen der Mist. Erlauben Sie, dass Besucher, wenn sie den ersten Buchstaben eintippen mit den Informationen, die im Browser gespeichert sind, das restliche Formular auch ausfüllen können. Das heißt, Sie müssen sich versichern, dass es nicht deaktiviert ist. Das kann man nicht deaktivieren, für Capture-Felder dort ist es sinnvoll, bei den meisten Formularen sollte man es nicht deaktivieren und außerdem müssen Sie jedes Feld besonders kennzeichnen. Das heißt, der Vorname muss dann „Given Name“ heißt und der Nachname muss „Family Name“ heißen, dass jedes Formularfeld muss einen bestimmten Namen tragen und vollständige Liste findet man auch bei Google. Sie müssen halt sicherstellen, dass jedes Feld richtig gekennzeichnet ist damit das Auto-Fill auch gut funktioniert. Wenn Sie es noch einfacher machen wollen, dann nehmen Sie Besuchen die Arbeit ab, indem man die Postleitzahl eingibt und gleich die Stadt ermittelt oder wenn vorher schon die Postleitzahl schon eingegeben wurde, dann greifen Sie die wieder auf und zeigen dies direkt wieder an. Außerdem kann es sinnvoll seien, die aktive Zeile zu markieren, dass Besucher sofort sehen, wo sie gerade sind, wo sie gerade schreiben und stellen Sie sicher, dass die Tabulator-Taste richtig gesetzt wird. Das heißt, wenn man auf dem Computer auf Tabulator drückt dann kommt man jeweils zu einem Feld weiter unten. Es ist sehr nervig, wenn man dann vom ersten Schritt zum fünften Schritt kommt und mit der Maus wieder korrigieren muss nur, weil die Reihenfolge nicht richtig eingestellt ist.

Dann abschließen möchte was zum Thema Texte erzählen. Insbesondere Erläuterungstexte, die Besucher helfen Felder auszufüllen. Die sollte man immer dann und auch nur dann anzeigen, wenn Leute auch Hilfe brauchen. Das heißt, das Feld Anrede und Vorname muss man nicht erläutern, dass weiß jeder was es ist, aber wenn es nicht sofort klar ist, wie man das Feld ausfüllen kann, dann bieten Sie Hilfe an. Was ist dabei wichtig? Es muss sofort zu verstehen sein. Besucher wollen sich keine langen Texte durchlesen. Ganz kurz formulieren also, das man es sofort versteht und sich überlegen sollte sofort sichtbar sein oder erst nach dem Klick aus und Info-I oder einem Fragezeichen. Und da ich habe ich mal zwei Beispiele mitgebracht. Für den zweiten Fall „Informationen direkt anzeigen“ Da geht es um ein Kleinanzeigenportal und da wird sofort rechts angezeigt welche Informationen man angeben muss damit die Anzeige gefunden wird. Wie Alter, Hersteller, Material, Gebrauchsspuren. Das führt Besucher wieder wie sie einen guten Text schreiben können und das ist für die meisten Besucher hilfreich. Dagegen hier ein Thema „Zahnstatus“ ist die Frage „Sind Sie aktuell in Behandlung?“ Das wissen wahrscheinlich die meisten, ob sie aktuell in Behandlung sind. Das heißt, da kann man die Erläuterung dazu er nach einem Klick auf den Button anzeigen. Sonst wird die ganze Seite ja voll, wenn man das standardmäßig anzeigt. Wenn, Sie jetzt die Klicks darauf messen. Können Sie auch schauen, ob es viele Leute anklicken und es viele Leute anklicken, dann ist es wahrscheinlich für viele Leute relevant und dann können Sie es auch standardmäßig anzeigen. Bei dem Fall würde ich es erst nach dem Klick anzeigen. Außerdem Hilfreich. Kommunizieren Sie implizit, was Sie von Besuchern erwarten. Das heißt, die Postleitzahl ist ein kürzeres Feld, weil da kommen nur vier oder fünf Zeichen rein und der Ort ist ein längeres Feld, da kommen viele Informationen rein. So können Sie sogar noch mehr die kognitive Arbeit abnehmen, weil Sie implizit kommunizierte, was da reingehört.

Validierung und Fehlermeldung

Damit möchte ich weitergehen zum Thema „Validierung und Fehlermeldung“. Da gibt es viel mehr Potenzial und der wichtigste Punkt ist: Validieren Sie defensiv. Das heißt, Sie wollen es unbedingt vermeiden, dass Besucher eine Angabe machen, die stimmt, aber mit der man das Formular nicht absenden kann oder dass es so hohe Anforderung gibt, dass man es ein, zweimal probiert und wenn man keine Lust hat, weil die Anforderungen so hoch sind, an zum Beispiel Telefonnummer müssen mit Bindestrichen, so ein Misst, das man keine Lust hat, dass man das Formular nicht abschickt. Das heißt, lieber unvollständige Daten haben, als keine Daten haben oder Daten haben, die vielleicht einem komischen Format, das man nochmal anfassen muss. Lieber unvollständige Daten haben als gar keine. Zum Beispiel für Name, Straße und Stadt würde ich eigentlich gar keine Anforderung anlegen, außer dass es nicht leer sein darf, aber jetzt nicht sagen, dass die Straße mehr als zwei Zeichen haben muss, denn es gibt Straßen die haben nur zwei Zeichen. In Mannheim gibt es zum Beispiel die Quadrate, da haben manche Adressen nur zwei Zeichen, wenn die Anforderungen sind, man muss drei Zeichen haben, denn dann kann man seine richtige Adresse einfach nicht eingeben und man kann da nicht bestellen. Sehr nervig. Was Sie machen sollten, ist spielen Sie alles mal im Nachhinein durch. Alle Sonderfälle, die es gibt für alle jeder Formularfelder und schauen Sie sich an, was Besucher tatsächlich eingeben. Wie lang sind Informationen, die eingegeben worden. Schauen Sie, ob manche Felder keine Pflichtfelder sein müssen, denn je weniger Pflichtfelder, desto geringer die Wahrscheinlichkeit, dass man Formulare mit echten Daten nicht abschicken kann, weil die Validierung fehlschlägt und was ich schon gesagt habe. Erzwingen Sie keine besonderen Formate zum Beispiel bei Name, Straße, Stadt. Und müssen schauen, was andere Felder sind, wo man dann auch Formate offen lassen sollte.

Dazu habe ich ein nerviges Beispiel, eine persönliche Erfahrung, und zwar wollte ich gestern erst in meinem Aktiendepot in Amerika. Dass ich da habe, meine europäische Telefonnummer hinterlegen und anscheinend gibt es in Amerika, da hat die Telefonnummer drei Bestandteile, das Land, die Stadt und die eigentliche Nummer und genau dieses Format wollten die jetzt auch für meine europäische Telefonnummer aufdrängen aber ich konnte es nicht abschicken. Das heißt, es hier rot angeblich ist, dass das Land Plus 3 4 funktioniert nicht. Die internationale Vorwahl geht angeblich nicht, aber das ist meine Telefonnummer. Ich kann sie nicht anders darstellen. Das ist genau meine Telefonnummer und ich konnte das Formular nicht abschicken. Das heißt, genau diese Fälle muss man vermeiden, dass echte Daten eingegeben wurden und diese nicht akzeptiert wurden. Extrem nervig. Jetzt musste ich den Support anrufen um eine Telefonnummer anzupassen. Wäre das Formular für Leadgenerierung das würden die meisten Leute denken „Ja gut dann eben nicht.“ Dann machen sie eben nichts. Ich habe eine höhere Motivation das zu machen, aber natürlich nicht immer, sodass man den Support kontaktiert. Die meisten Leute haben eine niedrige Motivation und machen einfach nichts.

Zweiter wichtiger Punkt bei der Validierung. Verwenden Sie die sogenannte Inline-Validierung. Das heißt, zeigen sie Fehlermeldung direkt an, wenn Besucher das Feld verlassen haben. Hier habe ich bei E-Mail eingegeben „test.de“, da kommt sofort der Hinweis, dass es keine gültige E-Mail-Adresse. Behebe das mal bitte. Dann ist man sofort gerade noch dabei das einzugeben und würd nicht erst darauf hingewiesen, das abgeschickt hat. Das ist auch nervig. Es ist viele einfache Fehler direkt anzuzeigen, wenn man gerade noch bei der Sache ist. Was Sie noch vermeiden sollten, ist es diesen Warnhinweis direkt anzugeben, wenn ich noch beim Schreiben bin. Das heißt, wenn ich noch Tippe und da kommt sofort die Fehlermeldung dann ist das auch ein Problem. Ich bin ja noch gar nicht fertig einzugeben. Das heißt, zeigen Sie die Fehlermeldung erst dann an, wenn man den Fokus des Feldes verlässt und zum Beispiel weiter geht auf die Telefonnummer ein bisschen weit unten. Wenn Sie bestimmte Anforderungen an Felder haben, dann kommunizieren Sie diese auch von Anfang an. Das heißt, sagen Sie nicht „Wählen Sie bitte ein Passwort aus“ abschicken kommt die Fehlermeldung auf der nächsten Seite „Hey anfordern nicht erfüllt“. Kommunizieren Sie stattdessen wie man direkt beim Eingeben welche Anforderungen an Passwörter vorhanden sind und noch besser validieren Sie die so live hier, wie man das hier sieht, mit dem x und in den grünen Häkchen. Dann macht es das besonders einfach sich ein Passwort auszudenken oder einzugeben. Selbst wenn Sie keine Inline-Validierung haben, dann sollten Sie wenigstens ganz prominent darauf hinweisen was falsch gelaufen ist. Das heißt, wenn man ein Formular abschickt, sollte oben auch fett dastehen, was denn schiefgelaufen ist. Insbesondere, wenn mehrere Felder nicht funktioniert haben, muss man nicht die ganze Seite durchsuchen „Wo gibt es das Problem?“, sondern man sieht oben übersichtlich hier Geburtstag, E-Mail. Das Passwort sind die drei Felder, die ich korrigieren muss. Wir sollten prominent darauf hinweisen. Ganz klar zeigen, wo was falsch ist. Das kann man hier in übergreifend über dem Formular machen und zusätzlich am besten auch noch im Formular selbst. Einen fetten roten Rand um das Feld in Rot darstellen. Nur Hauptsache prominent anzeigen welche Felder problematisch sind, weil in einer Checkbox muss man nicht erläutern wie man korrigiert, das ist klar, da klickt man auf die Checkbox fertig. Bei anderen Feldern ist es schwieriger. Hier zum Beispiel muss man seine Versichertennummer eingeben und dann gibt es den wertvollen Hinweis wie man das genau beheben kann. Das heißt, die Nummer ist 10-stellig und fängt mit dem Buchstaben an, da weiß man sofort, auch wenn man die Karten der Hand habt, was die richtige Nummer ist. Das heißt, nicht einfach nur sagen „Falsche Nummern“, sondern sagen Sie wie man den Fehler einfach beheben kann. Noch eleganter wäre es, wenn man gleich ein Bild der Karte anzeigt, wo dann ein roter Kreis drum ist, wo genau die Versichertennummer zu finden ist, aber so auch so ist es schon hilfreicher als nur zu sagen „Informationen stimmen nicht“. Andere sinnvolle Hinweise sind zum Beispiel, dass man sagen muss, die Postleitzahlen muss aus 5 Ziffern bestehen, wenn man aus Versehen nur 4 eingegeben hat oder muss sagen das Passwort muss Zahlen enthalten oder man kann sagen die gewählte E-Mail-Adresse ist vollständig registriert, also logge dich lieber ein. Hilfreiche Informationen wie man weitermachen kann. Nicht nur sagen das ist etwas falsch, sondern auch so kannst du das Problem beheben.

Tracking

Dann möchte ich abschließend auch ein bisschen zum Thema Tracking erzählen. Als erstes: Was sollte man messen, um Formulare besser zu machen. Da möchte ich mich nämlich auch auf zwei Themen konzentrieren.

Das erste Thema ist: Messen Sie ihre Trichter. Das heißt, messen Sie, an welcher Stelle im Checkout die Besucher abbrechen. Ganz normales Thema kennt ja auch jeder. Brechen Besucher im ersten, zweiten, dritten Schritt abkann mal schauen, wo muss man sich noch genauer hinschauen und da die Seiten optimieren. Das heißt, dieser normale Trichter kennt jeder. Haben die meisten Leute auch schon, es gibt aber auch für längere Formulare sogenannte im Inline-Trichter. Wo man schaut, wo brechen Leute innerhalb des Formulars ab und hier haben wir ein Beispiel von einem Kunden von uns, ein Kleinanzeigenportal. Wenn man neu Artikel dort einstellen gibt, es natürlich viele Felder die man ausfüllen muss. Name der Anzeige, Texte der Anzeige, Kategorie der Anzeige, dann Bilder, Preise, Kontaktinformationen, diese ganzen Sachen und hier kann man einen Trichter erstellen, an welcher Stelle innerhalb des Formulars Besucher abbrechen. Da kann man schauen, wenn zum Beispiel viele Leute keine Kategorie auswählen, das nicht geschafft haben, muss man vielleicht die Auswahl der Kategorien noch bisschen einfacher machen. Muss man das noch optimieren. Das heißt, diese Inline-Trichter können Ihnen helfen, bestimmte Schritte innerhalb des Formulars zu identifizieren. Dieser Ansatz ist vor allem dann sinnvoll, wenn man ein langes Formular hat. Nicht nur 5, 4 Felder hat. Wenn man 4 Felder hat, lohnt sich das nicht. Wenn man nur zehn Felder hat, sollte man überlegen, ob man so einen Trichter mal aufsetzt in Google Analytics. In Google Analytics kann man auch messen welche Felder zu Fehlermeldungen führen. Das heißt, in diesem Beispiel hier, haben wir gemessen, dass die Felder „Passwort“, „Postleitzahl“ und „Passwort noch mal eingeben“ zu den meisten Fehlermeldungen geführt haben. Das heißt, hier haben sich Besucher vertan, das war der Grund warum die Fehlermeldung angeschlagen ist und dann kann man schauen was ist denn mit dem Formular falsch, warum wurde das Passwort super wenig angegeben, weil vielleicht die Anforderungen nicht richtig und das Passwort hat den Anforderungen nicht entsprochen, dann kann er genauer nachschauen was da fehlgeschlagen ist. In einer noch besseren Variante würde man nicht nur speichern welches Feld falsch ausgefüllt wurde sondern auch welche Fehlermeldung passend angezeigt wurde. Zum Beispiel hier „registerPasswort“ würde man anzeigen „Passwort war leer“ oder „Passwort hat den Anforderungen nicht einfach nicht entsprochen“. Mit diesen Informationen wüsste man sofort, was der Grund war, warum das Passwort zur fehlgeschlagen Validierung geführt hat und zusätzlich zu dieser qualitativen Analyse kann man das ganze auch noch qualitativ anschauen, in dem man sich seine Formulare in so Tools zur Session-Wiedergabe wie „Hotjar“ anschaut und dafür kann man immer, wenn die Validierung fehlschlägt an Hotjar einen Tag senden, wo man Informationen, die die Fehlermeldung anzeigt, haben und dann kann man sich nur die Aufzeichnung anschauen, wo die Validierung angeschlagen hat. Das heißt man muss sich nicht alle 10.000 Aufzeichnung anschauen, sondern nur die, wo die Validierung Probleme gemacht hat und dann kann man im Detail herausfinden „Warum hat denn die Validierung nicht funktioniert. Im Idealfall würden die Leute von meinem Aktien-Depot dann sehen, dass ich richtige Daten eingeben habe, viermal die gleiche Telefonnummer verwendet habe und es trotzdem nicht funktioniert hat und dann merken die, dass die Anforderungen an das Formular falsch sind. Die müssen wir offener gestalten. So wäre sinnvolle Optimierung dieses Formulars möglich.