Tipps für die optimale Formular-Gestaltung + Verlosung

TarifCheck24 Versicherungpartnerprogramm
Werbung

Formulare begegnen uns ständig im Internet.

Und während erfahrene Internet-Nutzer mit fast jedem Formular klar kommen, scheitern viele Internet-Neulinge nicht selten an komplizierten und nutzerunfreundlichen Formularen.

Formulare sind sehr wichtig für Selbstä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.

Formulare überall

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 Web. Sobald man auf irgendeine Art persönlich etwas machen will, begegnet einem ein Formular.

Dabei gibt es natürlich sehr gut gemacht 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 User gemacht haben.

Schlechte FormulareSo ist z.B. das Formular von Omniture.com für den simplen Download eines eBooks einfach viel zu umfangreich.

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.

Ein weiteres seht schlechtes Beispiel für ein Formular findet sich auf optimeister.net. 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 soll 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 auch hier keine allgemein gültigen Aussagen gibt, die auf jeder Website genau so zutreffen.

Schlechte FormulareAber es gibt Analysen, wie z.B. von Jon Miller, die zeigen, das Formulare wirklich Geld kosten können.

In diesem Test hat Jon Traffic über AdWords auf einen 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. Und damit wurde jeder einzelne neue Kunde teurer.

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.
  • Schlechte FormulareViele 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 AJAX 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 Erfolg, 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.
  • 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.
  • Schlechte FormulareEbenso 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.
  • Gute Formular-GestaltungEs 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 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. Und das kann oft den Unterschied machen und deshalb sollte es hier verschiedene Optionen geben, die man testen kann.

Neben kostenlosen PHP- und Perl-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 Formular-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.

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. der Newsletter-Dienst Cleverreach.de, 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.

Doch 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.

Verlosung

Gute Formular-GestaltungAls Abschluss des Artikels möchte ich 10 Lizenzen für www.kontaktformular.org verlosen. Dies ist ein Formular-Services, bei dem man sich sein gewünschtes Formular zusammenklicken kann und dann einfach in die eigene Site einbindet.

Die Validierung der Felder macht das Formular dann selbständig und auch Captchas werden unterstützt. Mit diesem Service ist es möglich einfache und recht übersichtlich Formulare zu gestalten.

Der Service ist grundsätzlich kostenlos nutzbar. Wer allerdings den Copyright-Link unter dem Formular entfernen will, der muss 23,80 Euro inkl. MwSt. für eine Lizenz zahlen.

Unter allen Lesern dieses Artikels, die einen Kommentar hinterlassen, verlose ich 10 Lizenzen für kontaktformular.org. Das Gewinnspiel läuft bis zum Freitag, den 4.September 12:00 Uhr Mittag. Viel Glück.


Werbung
Werbung

Kommentare

  1. meint

    Endlich mal ein durchleuchtender Artikel. Habe letztens auch ellenlanges Formular ausgefüllt und am Ende ist es an der kryptischen Captchasoße gescheitert weil grau auf irgendwie gar nicht ging.

  2. meint

    Ich nutze immer weniger Kontaktformulare auf Webseiten. Man braucht sie zwar immer noch, aber seltener wie früher…

  3. meint

    Es fehlt noch der Punkt bei der Beschränkung auf möglichst wenige Formularfelder, dass die User die nicht nur erst mühsam zusammentragen müssen, sondern auch einfach eine Abneigung haben möglichst viele Daten im Internet Preis zu geben. Und viele werden dann sicherlich auch grade dann einfach Daten eingeben die nichts mit der Realität zu tun haben.

    Die Verlsoung find ich klasse und nehme gerne dran teil :)

  4. meint

    Danke für dieses Artikel. Ich bin auch schon seit einiger Zeit am überlegen ob ich meine paar Formular überarbeiten soll.

  5. Spielbuch meint

    Ein sehr ausführlicher und interessanter Artikel!
    Vielleicht könnte man noch die Punkte mit aufführen, dass einmal eingegebe Informationen, bei folgenden Formularen übernommen werden. Und dass ein längeres Formular apgespeichert und später weiter ausgefüllt werden kann.

    Eine weitere, sehr ärgerliche Sache ist, wenn die Daten dann beim Neuladen (wenn bsp. ein Feld nicht richtig ausgefüllt wurde) weg sind und man dann alles von Neuem ausfüllen darf.

    Als positive Beispiele würde ich das Anmelde-Formular von Yahoo https://eu.edit.yahoo.com/registration nennen. Hier “kommunizieren” die Felder sehr stark mit dem Nutzer und geben ihm 1. Informationen zu dem Feld und 2. eine Rückmeldung, ob alles richtig war.

    Auch gut ist das Anmelde-Formular von Yello Strom https://www.yellostrom.de/privatkunden/yello-strom/kunde-werden/index.html . Hier werden die eingegebenen Daten in der Session gespeichert und müssen nicht erneut eingegeben werden. Außerdem sind die Fehlermeldungen sehr detaillert und individuell.
    Auf der Folgeseite werden dann zu eingen Feldern Erklärungen angeboten (über Informationsbuttons).

    Die Idee mit der Verlosung passt sehr gut dazu :smile:

  6. meint

    Wozu braucht man eine solche Lizenz? Daten sollten generell nicht über externe Dienste übertragen werden, sondern schön bei einem selbst bleiben. Ich halte nichts von diesen externen Dienstleistern/Methoden.

    Ich brauche demnach auch nicht in die Verlosung mit eingeschlossen werden.

  7. meint

    Hallo. Vielen Dank für den interessaten Artikel. Bei der Neugestaltung meiner HP bin ich gerade selbst dabei ein Kontaktformular zu integrieren. Ein Kontaktformular einfach zusammen zu klicken würde mich natürlich freuen.

  8. meint

    Na das klingt doch recht viel versprechend. Danke für diese Verlosung.

    Ich muss allerdings meinen Vorrednern zustimmen. Auch ich nutze recht selten die Kontaktofrmulare aber biete trotzdem auf den meisten meiner Seite ein Kontaktformular an.

    In diesem Sinne…
    Marcel

  9. meint

    @ Spielbuch
    Danke für die Hinweise. Diese sind sehr wichtig, auch wenn das vielleicht etwas zu sehr ins Detail geht für meinen Blog. Schließlich habe ich kein Design- oder Programmier-Blog. Aber trotzdem danke für den Hinweis.

  10. meint

    Das verstehe ich. Mal sehen wie weit ich mit solchen Artikeln gehen werde.

    Eigentlich geht es in diesem Blog und Business-Thema. Das Thema Formulare bin ich deshalb aus Business-Sicht angegangen (Conversion Rate und Co.).

    Evtl. werde ich auf die Formulargestaltung dann in meiner nächsten großen Artikelserie eingehen. :grin:

  11. meint

    Also ich habe erst gestern nach einem Kontakt-Formular für einen Blogspot Blog gesucht. Es gibt da natürlich ganz viele verschiedene, aber da ich eines brauchte, welches nur auf Java bzw HTML beruhte, war die Auswahl doch recht klein.

    Ich bin dann bei http://www.foxyform.de/ fündig geworden. Ich kann die Seite nur empfehlen. Es ist komplett kostenlos und geht super schnell.

  12. meint

    Also muss schon sagen: Klasse Artikel. Nächstes mal könttest du dann bitte auf die Gestaltung eingehen und wie man AJAX in sein Formular integriert :)

    Paul

  13. meint

    Mich nerven auch unnötig lange Formulare…

    Ich hab gestern abend angefangen ein Kontaktformular-Plugin zu schreiben :)

    Man sollte besonders bei Formular-Plugins auf die Sicherheit achten. Auf der hier verlinkten WP Plugin Seite gibt es viele Plugins, die nicht wirklich sicher sind.

    Ich hab mir vorhin mal das Plugin “Fast and Secure Contact Form” genauer angeschaut und nach kurzer Zeit eine Sicherheitslücke gefunden, womit sich vorhandene Scripte auf dem Server ausführen lassen, wenn die Einstellung Permalinks aktiviert ist.

  14. meint

    Bis jetzt nutze ich ein WordPress-Plugin für mein Formular. Jedoch wäre das denke ich einmal sehr viel interessanter und professioneller. Werde mir das mal überlegen:smile:

  15. meint

    … ich habe sehr gute Erfahrungen mit dem Kontaktformular von kontaktformular.org gemacht.
    Vielen Dank für den ausführlichen und informativen Artikel.
    Die grösste Hürde für einen Anfänger bleibt meistens das Einbinden des Kontaktformulares.

    Gruss Wolfgang

  16. meint

    Ich habe bisher in meinen Blogs nur WordPress-Plugin-Formulare (WPContact) benutzt und fahre damit eigentlich recht gut. Bis auf das Ändern der Sprache sind diese Formulare gut. Ich habe mir eigentlich nie solche Gedanken gemacht wie in dem Artikel beschrieben. Dort gibt es wirklich sehr gute Anhaltspunkte das Ganze nochmal zu überdenken. Der Artikel ist sehr hilfreich.

  17. Nauglamir meint

    Formulare spalten mich.
    Auf der einen Seite gibt es keine bessere Möglichkeit um Informationen so gelenkt zu erhalten das man damit auch was anfangen kann. Auf der anderen Seite jedoch ist jedes Formular das auszufüllen ist eine Hemmschwelle und Hürde die genommen werden muss.

    Jedem WordPress Anwender empfehle ich wärmstens das Plugin cformsII. Ich nutze es selbst in einigen Blogs und bin von dem umfangreichen und bin von der einfachen Einbindung mit raschen Ergebnissen begeistert. http://www.deliciousdays.com/cforms-plugin/ Schaut es Euch mal an.

    Ich selber nutze Formulare z.B. nur dann wenn es notwendig ist. Als Anmeldeformular für eine Zimmerreservierung etwa. Wichtig ist dabei allerdings die richtige Aufarbeitung. Rasch und unkompliziert mit den wichtigesten Eckdaten sollte das Formular verständlich und flott zu versenden sein.

  18. meint

    Schön, dass ich dich zu diesem Beitrag inspirieren konnte, auch wenn der Link da oben so aussieht, als wenn wir solche Formularungetüme einsetzen würden. ;-) Generell ist es wichtig zu testen. Ein Formular darf auch nicht zu kurz sein – was genau optimal ist, hängt von der Zielgruppe ab. Ich habe schon seiten gesehen, wo ein Formular mit 15 Feldern, besser konvertierte, als eines mit 5.

    Leider schreibst du nicht viel über die eigentliche Formulargestaltung – vielleicht finde ich dazu nochmal etwas Zeit. Positionierung der Labels, Größe der Formularfelder und vor allem der Submit-Button sind gute Ansatzpunkte für eine Optimierung.

    Für WordPress-Nutzer kann ich Gravityforms SEHR empfehlen – auch wenn es nicht kostenlos ist.

  19. meint

    Hi Jörg Dennis,
    stimmt, das könnte man so verstehen. Aber wer auf eure Seite geht, sieht ja, dass es ein Beispiel auf eurer Seite ist und kein Beispiel von eurer Seite. :smile:

    Wie schon mehrmals gesagt, bin ich nicht sicher, ob die detaillierte Gestaltung hier in den Blog passt. Das ist doch auf Webdesign Blogs besser aufgehoben. Ich werde sicher nochmal einen Beitrag zur Landing Page Optimierung schreiben und da auch auf die Optimierung von Formularen eingehen. Evtl. gibt es dann auch Links zu “Webdesign”-Artikel bzgl. Formular-Gestaltung.

  20. meint

    Unter diesen Gesichtspunkten hatte ich das noch gar nicht gesehen. Ein Artikel der mir sehr geholfen hat. Na und gewinnen möchte ich natürlich auch gerne.

  21. meint

    Wunderbar ausführlicher Artikel. Mich würden mal Vergleichswerte von Absprungraten auf der Formular(Bestell)seite sehr interessieren. Mich verwundert es, wenn ich mir die Trichtervisualisierungs-Analyse in GA betrachte, wie viele User auf der Bestellseite für ein gratis Fachbuch kurz vor der Conversation doch noch abspringen. Die Absprungrate beträgt 65%. Wertfrei hier aufgeführt, da mir natürlich klar ist, das so kurz vor der Conversationen immer noch viele, viele Faktoren neben der optimalen Formularusability mit einfließen. Also, wer setzt hier seine Absprungraten mit auf. Formularbesitzer/gestalter mit unter 30% Absprungrate dürfen gerne Ihre Seite benennen. ;-)

  22. meint

    Hier ist sicher die beste Vorgehensweise es selbst zu testen. Jede Seite ist anders. Was bei einem selber am besten funktioniert, kann man nur selber herausfinden. Also 2 Formular-Seiten erstellen und eine Sache verändern. Und dann schauen, was am besten funktioniert.
    Und dann die besser funktionierende Formularseite wieder etwas abändern und wieder testen usw.

  23. meint

    Hallo zusammen, ich finde diese Captcha-Boxen manchmal echt sehr schwer zu entziffern. Da sollt man sich mal was neues einfallen lassen. Sicherlich sidn die Captcha-Boxen gut gegen Spam. Doch wenn ich sie nicht lesen kann :evil:

  24. meint

    Das waren eine Menge nützlicher Tipps zu den Formularen, besonders das man sie den Kunden so spät wie möglich vorsetzen soll trift wohl den Nagel auf den Kopf. So wird der User nicht gleich mit Arbeit abgeschreckt. ich glaube viele Kunden hassen es immer ihre Daten eingeben zu müssen.

Trackbacks/ Pingbacks

  1. Höhere Conversion Rate mit der optimalen Formular-Gestaltung…

    In diesem Artikel werden viele Tipps für die optimale Formular-Gestaltung gegeben und gute und schl…

Werbung