Tipps für die optimale Formular-Gestaltung + Plugin-Empfehlung

Tipps für die optimale Formular-GestaltungFormulare begegnen uns ständig im Internet. Und während erfahrene Internet-Nutzer mit fast jedem Formular klar kommen, scheitern viele Neulinge nicht selten an komplizierten und nutzerunfreundlichen Formularen.

Formulare sind sehr wichtig für Selbstständige im Netz. Damit können Newsletter-Abos, Online-Bestellungen, Kundenkontakte etc. entstehen oder eben nicht.

Heute möchte ich mir deshalb mal anschauen was gute Formulare ausmacht, wie kreativ man werden sollte/darf und welche Möglichkeiten es gibt Formulare in die eigene Website bzw. den eigenen Blog einzubauen.

Formular-Gestaltung

Formulare sind überall. Vor fast jeder Interaktion im Web steht ein Formular und oft steht es auch im Weg.

Wer online etwas einkaufen will, der muss erstmal ein Formular ausfüllen. Wer mit anderen online kommunizieren will, der muss ebenfalls vorher ein Formular ausfüllen. Und so ist es auch mit sehr vielen anderen Dingen im Netz. Sobald man auf irgendeine Art persönlich etwas machen will, begegnet einem ein Formular.

Dabei gibt es natürlich sehr gut gemachte Formulare, die einladend sind und die sich leicht und schnell ausfüllen lassen.

Leider gibt es aber auch viele negative Beispiele, die zeigen, wie wenig Gedanken sich die Programmierer über die Kommunikation mit dem Nutzer gemacht haben. So habe ich z.B. schon Formulare für den simplen Download eines eBooks gesehen, die einfach viel zu umfangreich waren und mehr als ein dutzend Felder beinhalteten.

Wer so viele Fragen stellt, der riskiert nicht nur eine relativ hohe Absprungrate von Usern, die das Formular nicht komplett ausfüllen und abschicken, sondern sorgt auch dafür, dass viele User einfach irgendwas angeben, um wie in diesen Fall, an das eBook zu kommen. Leider sieht man solche Formular-Monster immer wieder im Web und ich frage mich ernsthaft, ob sich dort überhaupt jemand das antut.

Gut sind dagegen viele Download-Beispiele für eBooks, Whitepapers und Co.. Dort wird ausschließlich die eMail-Adresse abgefragt und vielleicht noch optional der Name. Das ist in so einem Fall auch die einzige Angabe, die benötigt wird und das sehen fast alle User auch ein.

Was kosten Formulare?

Was sich auf den ersten Blick etwas komisch anhört, ist tatsächlich eine konkrete und messbare Sache. Denn Formulare kosten Geld.

Wie ich gerade schon geschrieben habe, geht es bei vielen Aktionen im Web nicht ohne Formulare. Wie will man eine Online-Bestellung abwickeln, ohne ein Formular für Adress- und Zahlungsdaten? Wie soll man sich in einem sozialen Netzwerk engagieren, wenn nicht vorher ein paar Daten per Formular abgefragt werden?

Die Kosten von Formularen liegen in einer höheren oder eben niedrigeren Conversion Rate. Wem das lieber ist, der kann auch vom Gegenteil, der Absprungrate sprechen. Diese sollte natürlich möglichst niedrig liegen.

Es gibt nicht viele Analysen darüber, was schlecht gestaltete Formulare wirklich kosten. Das liegt sicher auch daran, dass es hier keine allgemein gültigen Aussagen gibt, die auf jeder Website genau so zutreffen.

Aber es gibt Analysen, wie z.B. diese schon etwas ältere von Jon Miller, die zeigen, das Formulare wirklich Geld kosten können.

In diesem Test hat Jon Traffic über Google Ads auf einen Online-Shop gelenkt. Dabei hat er nur das Bestell-Formular mehrmals geändert und die Auswirkungen der Änderungen auf die Conversion Rate gemessen.

Das Ergebnis war recht eindeutig. Sobald das Formular länger wurde und mehr Daten abgefragt wurden, sankt die Conversion Rate. Damit wurde jeder einzelne neue Kunde teurer, da mehr Google Ads Klick für eine Conversion nötig waren.

Auch wenn es in diesem Beispiel nur relativ kleine Beträge sind, so summiert sich das insgesamt schon auf. Hat man in einem Online-Shop pro Monat 1.000 neue User, die Waren im Wert von durchschnittlich 100,- Euro in den Warenkorb gelegt haben und nun vor dem Bestellformular stehen, dann macht es schon einen Unterschied, ob davon 20% oder 30% die Bestellung endgültig abschließen. Ein optimiertes Formular sorgt in diesem Beispiel dafür, dass man 10.000,- Euro mehr Umsatz macht.

Die Gestaltung von Formularen sollte man also auf keinen Fall nur dem kreativen Webdesigner oder dem von Datensammelwut befallenen Controller überlassen.

Tipps zur Formulargestaltung

Im folgenden einige Tipps, wie man Formulare verbessern kann und damit die Absprungrate veringern bzw. die Conversion Rate erhöhen kann. Diese Tipps sind in keiner besonderen Reihenfolge aufgelistet.

  • Ein Formular sollte man möglichst spät den Usern vor die Nase setzen. Es gibt Shops, da muss man sich als allererstes registrieren, bevor man überhaupt weiß, ob man das gesuchte auch in diesem Shop findet. Besser macht es da z.B. Amazon, wo man erst alles in den Warenkorb legt und erst ganz zum Schluss das Anmeldeformular ausfüllen muss. Grundregel: Je mehr Zeit und Arbeit der User schon investiert hat, umso eher ist er dann bereit, auch noch ein Formular auszufüllen, statt abzubrechen und die ganze Arbeit und Zeit war umsonst.
  • Viele Formulare geben kein richtiges Feedback. So müssen Fehler natürlich nicht einfach nur allgemein genannt werden (Sie haben bei der Eingabe der Daten einen Fehler gemacht) sondern konkret benannt und markiert werden. Hier ist z.B. eine sinnvoller Einsatz von JavaScript möglich, indem schon bei der Eingabe Prüfungen erfolgen. Twitter prüft so z.B. schon beim Eintippen des Usernamens, ob dieser noch frei ist. Aber auch bei einem Erfol, sollte man entsprechendes Feedback geben.
  • Man sollte möglichst wenige Daten abfragen. Wie das Beispiel weiter oben zeigt, kostet jedes zusätzliche Feld bares Geld. Man sollte also alle Felder streichen, die nicht wirklich unbedingt benötigt werden. Nur weil man die ein oder andere Info gern hätte, sollte man sie nicht zwingend abfragen. Das kann man später immer noch machen. Auch Infos, die User erst mühevoll zusammen suchen müssen (bestimmte Vertragsnummern, Details aus Verträgen etc.) sollte man nur abfragen, wenn es nicht anders geht. Zudem muss man aus Datenschutz-Sicht die Datenabfrage minimieren.
  • Man sollte viel auf Usability achten und Formulare nicht nur von Programmierern und erfahrenen Internet-Nutzer testen lassen. Ein sehr gutes Beispiel sind die sogenannten Captcha-Boxen. Diese werden inzwischen sehr häufig eingesetzt, um das automatisierte Ausfüllen von Formularen zu verhindern und sicher zu gehen, dass da wirklich ein Mensch vor dem PC sitzt. Leider sind Captchas für viele Programmierer etwas normales und deshalb fehlt häufig eine Erläuterung, was das eigentlich ist. Internet-Neulinge stehen dann oft vor einem Rätsel.
  • Ebenso ist es empfehlenswert sich an gewisse Internet-Standards zu halten. Kreativität ist im Webdesign sicher nicht schlecht, aber gerade bei solchen Elementen wie Formularen ist es oft die bessere Wahl, gelerntes nicht über den Haufen zu werfen. So sieht ein mit CSS gestyltes Formular sicherlich optisch sehr reizvoll aus, für einen Teil der Nutzer weicht es aber massiv vom Bekannten ab und stellt damit eine Hürde dar.
  • Erläuterungen sind allgemein sehr wichtig. Welche Zeichen sollen und dürfen z.B. in ein Passwort-Feld? Warum frage ich z.B. die Telefonnummer ab? Welchen Zweck erfüllt eine bestimmte Auswahl? Man sollte so ein Formular wie ein Gespräch zwischen Verkäufer und Käufer im Laden sehen. Der Verkäufer erläutert auch bestimmte Dinge und antwortet auf Fragen. Das sollte ein gutes Formular auch tun.
  • Es hilft sehr die Conversion Rate zu steigern, wenn man neben dem Formular nochmal die Vorteile auflistet, die mit dem Ausfüllen des Formulars verbunden sind. Oft kommen Usern beim Ausfüllen nochmal Zweifel und da hilft so eine vertrauensbildende Maßnahme.
  • Wie schon eben erwähnt, muss ein Formular eine persönliche Kommunikation ersetzen, wie sie meistens im Offline-Bereich stattdessen stattfinden würde. Deshalb ist es meist sehr hilfreich, eine persönliche Note und Ansprache im Formular zu finden. Also keine “Datenbank- oder Programmierer-Sprache”, sondern menschliche Ansprache.
  • Testen, testen, testen. Kein Formular funktioniert genau so wie ein anderes. Deshalb sollte man sich zwar die Ergebnisse von Studien und Analysen zur Gestaltung von Formularen als Ausgangsbasis anschauen, aber dann gilt es am eigenen Beispiel zu testen. Welche Änderungen bringt es, wenn ich ein Feld z.B. wegnehme?

Formulare für die eigene Website/den eigenen Blog

Formulare für den eigenen Blog bzw. die eigene Website einzusetzen ist manchmal sehr einfach, manchmal auch nicht. Entweder das verwendete CMS bietet eine sehr einfache Möglichkeit, Formulare einzubauen oder es gibt solche Möglichkeiten nicht und man muss auf externe Lösungen oder Plugins zurück greifen.

Aber auch im Detail kann das Problem liegen. Manche Content Management Systeme sind eben allein von Programmierern erstellt worden und das sieht man z.B. bestimmten Formularfeldern an. So gibt es oft nicht wirklich Alternativen bei der Eingabe eines Datums. Das kann oft den Unterschied machen und deshalb sollte es hier verschiedene Optionen geben, die man testen kann.

Neben kostenlosen PHP-Skripts, die man sich aus dem Web laden kann, die aber nicht unbedingt einfach zu nutzen sind, gibt es z.B. für WordPress-Blogs eine Vielzahl an Plugins. Welches man davon verwendet, ist auch wieder eine Frage des Testens. Jedes hat Vor- und Nachteile und man sollte sich die Demo-Beispiele anschauen, die Einstellungsmöglichkeiten prüfen und ein paar Plugins auch einfach mal selber testen.

Ich nutze für einige meiner WordPress-Blogs das Plugin Contact Form 7, weil es zum einen viele Möglichkeiten bietet, aber mit dem Plugin WP GDPR Compliance auch datenschutzgerecht gemacht werden kann, in dem man der Speichern der Daten erst zustimmen muss, bevor das Formular abgesendet werden kann.

Für eine Umfrage unter den Lesern meines Brettspiel-Blogs habe ich damit z.B. ein Formular angelegt. Die Leser konnte darin ihre 10 Lieblingsspiele eingeben und zusätzlich auch noch 2 Fragen beantworten. Das hat sehr gut funktioniert.

Tipps für die optimale Formular-Gestaltung + Plugin-Empfehlung

Das ist natürlich ein recht langes Formular, aber es ging ja auch um die Top 10 Brettspiele des Nutzers. Sonstiges Fragen, die nichts damit zu tun haben, habe ich weggelassen.

Teilweise gibt es Formular-Skripte auch schon bei Hosting-Paketen dazu. Aber auch da schwankt die Qualität deutlich und oft sind diese Lösungen nicht die besten.

Bestimmte Services, wie z.B. Newsletter-Anbieter, bietet die Erzeugung von Formularen an. Damit kann man z.B. einfach und schnell ein Formular zur Anmeldung bei einem Newsletter erzeugen. Das ist oft sehr nützlich und anders auch nur umständlich lösbar.

Zu guter Letzt gibt es auch noch Online-Services für Formulare. Dort kann man sich relativ flexibel ein Formular zusammenbasteln und dann den erzeugten HTML-Code einfach in die eigenen Website oder den eigenen Blog reinkopieren. Auch diese Variante hat Vor- und Nachteile. Für Einsteiger ist es aber oft eine ganz gute Option, da man sich technisch um nichts kümmern muss. Hier sollte man aber aus Datenschutzgründen nur auf Services innerhalb der EU zurückgreifen.

Fazit zur Formular-Gestaltung

Abschließend möchte ich hier nochmal erwähnen, dass das Problem bei Formularen meist nicht die Technik ist, sondern die Gestaltung. Da kann der Formular-Generator oder das Plugins noch so gut gemacht sein, wenn man die oben genannten Tipps zur Gestaltung eines Formulars ignoriert, wird die Absprungrate hoch bzw. die Conversion Rate niedrig sein.

Wie geht ihr an die Gestaltung eurer Formulare heran, welche Tipps könnt ihr geben und welche Tools, Plugins bzw. Services nutzt ihr dafür?

Peer Wandiger

1 Gedanke zu „Tipps für die optimale Formular-Gestaltung + Plugin-Empfehlung“

  1. Guten Morgen Peer,

    technisch betrachtet sehe ich noch als einen wichtigen Punkt placeholder und autocomplete an. Gerade was die Formatierung von Eingabefeldern anbelangt aber auch die Erleichterung durch vorausgefüllten Formularen (bspw. bei mobilen Internetseiten) würde ich noch als wichtige Empfehlung nennen.

    Wie von dir schon beschrieben sind Erläuterungen von Notwendigkeit, Inhalt und Nutzen bei Formularen sehr praktisch. Gerade die Gestaltung von optionalen und obligatorischen Feldern erscheint mir hier noch als Punkt der ebenfalls Beachtung finden sollte. Gerade optionale Daten könnten auch, wie von dir erwähnt, zu einen späteren Zeitpunkt erfasst werden. Ebenfalls interessant, und bei vielen größeren Seiten schon umgesetzt, ist die Frage, ob ich bspw. bei der Registrierung neben einer Anmeldung auch die Möglichkeit nutzen kann einen ID-Provider (Google, FB, Twitter, Microsoft, Amazon, …) verwenden kann und dadurch meiner Zielgruppe noch eine weitere Erleichterung bieten kann.

    Gerade bei Onlineschulungen oder Onlineshops ist diese Option in meinen Augen eine Erleichterung sollte aber, auch aus Datenschutzgründen, immer um die mögliche manuelle Registrierung erweitert werden.

    Viele Grüße
    Andreas

    Antworten

Schreibe einen Kommentar