Online-Formulare für UX und Lead-Generierung optimieren

In Websites eingebundene Formulare helfen dabei, Prozesse zu automatisieren und Verwaltungsaufwand zu reduzieren.

So weit, so klar. Aber: Sie funktionieren wie kleine Konversationen zwischen echten Menschen. Im besten Fall fühlt es sich zumindest genau so an. Eben nicht wie ein bürokratischer Akt, sondern wie eine kurze Unterhaltung.

Damit dieser best case erreicht wird, müssen die Schnittstellen, die Website-Formulare, so gestaltet sein, dass die richtigen Fragen zur richtigen Zeit, an der richtigen Stelle auftauchen. Anders als im gerade wieder gehypten Bauhaus folgt nämlich nicht die Form der Funktion - wir treten mit Menschen in Kontakt! Hier bewirkt gerade die Form die Funktion. Oder, wie man auch sagen könnte: Der Ton macht die Musik.

Soviel nur zur grauen Theorie. Hier also ein paar konkrete, praktische Hinweise.

Spalten

Unter Online Marketern gibt es eine ganze Debatte, die sich darum dreht, ob Formulare unbedingt auf einen Screen passen müssen, auch wenn das bedeuten würde, dass sich das Formular auf mehrere Spalten ausdehnt.

Nun, natürlich kommt es auf den Fall an  manchmal könnte es vorteilhaft sein, den ganzen zur Verfügung stehenden Raum auszunutzen. Generell kann man aber sagen, dass das eine ziemlich schlechte Praxis ist.

Warum? Der Lesefluss wird unterbrochen. User müssen in mehrspaltigen Formularen immer wieder von oben ansetzen, um alle Felder zu erfassen. Einfacher ist es, wenn das Formular zwar länger, dafür aber "in einem Rutsch" durchzulesen und auszufüllen ist. So verringert sich die Möglichkeit überlesener (Pflicht-)Felder und somit die Fehlerwahrscheinlichkeit.

So viele gute Hinweise ...

... aber wo genau fange ich an!?

Wir sagen es Ihnen ganz konkret - mit dem Universal Messenger und seinen Apps (u.a. Formular Manager, Veranstaltungsmanagement, Service Desk) zeigen wir Ihnen, wie aus einer Webseite ein mächtiges Instrument wird. Für echten digitalen Kundendialog und Lead Generierung.

Konkrete Antworten gibt's hier.

Logische Reihenfolge

Ok, dass man die Reihenfolge der abgefragten Informationen irgendwie "logisch" halten sollte, dürfte klar sein. "Logisch" heißt dabei nicht unbedingt, dass die Informationen aufeinander folgen müssen. Sondern, dass sie nicht grundlegend anders angeordnet sind, als das Publikum das für gewöhnlich gewohnt ist. Also: Nicht die Telefonnummer vor dem Namen oder das Alter als allererstes abfragen. Warum auch?

So viel wie nötig, so wenig wie möglich

Die DSGVO hat bereits dafür gesorgt, dass Marketer zur Datensparsamkeit angehalten sind. Aber auch das Erlebnis auf Seiten des Publikums, der Website-Besucher, ist ein angenehmeres, wenn möglichst wenig zu tun ist. Daher: Vermeiden Sie unnötige Abfragefelder. Halten Sie Formulare so einfach wie möglich. Kombinieren Sie Datumsfelder zu einem einzigen Eintrag. Fassen Sie, wenn möglich, Vor- und Nachnamen zusammen  so geht es den meisten Usern flüssiger von der Hand.

Komplexe Abfragen auf mehrere Seiten verteilen

Verzweigte und/oder umfangreiche Formulare führen zum Verlust der Übersicht  vor allem aber wirken sie sich negativ auf die Motivation des Users aus.

Daher: Unterteilen Sie ein komplexes Formular in mehrere Schritte, und legen Sie den Fokus jeweils auf den zur Zeit aktuellen Schritt, so dass der User immer im Bilde über den Fortschritt ist.

Inhaltsgruppen bündeln

Statt das Formular auf mehrere Seiten zu verteilen, kann es auch genügen, inhaltlich zusammengehörige Abfragen auch optisch gebündelt darzustellen. Setzen Sie Abschnitte ein, damit dem User die Unterscheidung zwischen  beispielsweise  persönlichen Informationen, Informationen zum Service und Kontaktinformationen deutlich wird.

Labels

Labels, die auf die Funktion des jeweiligen Textfelds deuten, sollten immer linksbündig ausgerichtet sein. Bei längeren Formularen kann es sinnvoll scheinen, die Labels links neben, statt über dem Feld zu platzieren, damit das Formular insgesamt noch kompakter wird.

Den Lesefluss fördert es aber nicht ein entspannteres Ausfüllen des Formulars wird erreicht, indem die Labels linksbündig über den Eingabefeldern stehen.

Labels sollten so kurz und prägnant wie möglich sein. Um bei uneindeutigen Eingabefeldern jegliche Eventualitäten zu vermeiden, kann man einen Tooltip setzen, also ein kleines "Kontextmenü", das als Sprechblase aufploppt, wenn der User mit dem Mauszeiger über das Label fährt. Dies sollte allerdings ebenfalls nur in Ausnahmefällen passieren. Das Formular ist doch selbsterklärend  oder?

Vorgegebene Werte

Fast alle Menschen, die Formulare nutzen, wählen Werte (das klingt nun arg technisch, ist's aber nicht!) nach einem gegebenen Vorbild aus  beispielsweise die Reihenfolge von Vor- und Nachnamen oder ein Datumsformat. 

Zeigen Sie daher Vorgaben in den Formularfeldern an, anstatt diese frei zu lassen  denn steht dem User frei, welche Daten er wie einträgt, kann das zu zwei Problemen führen: Erstens wird der User eventuell verunsichert, zweitens hilft es der internen Weiterverarbeitung der Daten ja ganz und gar nicht weiter, wenn diese im Format "Kraut und Rüben" ankommen. Je stärker die Daten standardisiert sind, desto effizienter kann mit ihnen umgegangen werden.

Platzhalter

In sehr kleinen Formularen (beispielsweise Passwortabfragen, Rückrufformulare) kann es sinnvoll sein, die Labels als Platzhalter im Textfeld selbst zu platzieren. In Fällen, in denen User (durch Gewohnheit) ohnehin intuitiv wissen, was an der Stelle zu tun ist, wirkt das Platzhalter-Label lediglich als Erinnerung oder Gedankenstütze: Hier musst du deinen Benutzernamen eintragen.

Funktioniert so gut wie immer.

In längeren oder umfangreicheren Formularen ist das Gegenteil der Fall und eine schlechte User Experience vorprogrammiert. Das Problem ist, dass User, wenn Sie eine größere Menge verschiedener Daten eintragen müssen, aus dem Konzept kommen, sobald der Platzhaltertext (durch Draufklicken) verschwindet, wie es so in seiner Natur liegt. Wo war ich nochmal? Was war denn das Feld davor nochmal? Ah, richtig, meine Adresse ... Der User klickt in den Raum neben dem Feld, um den Platzhalter erneut anzeigen zu lassen, und kann dann erst mit der Eingabe fortfahren.

Eine sehr gute Lösung sind Platzhalter, die eine konkrete Beispiel-Eingabe demonstrieren, in Verbindung mit floating Labels, die links über dem Textfeld oder links daneben stehen:

Buttons

Setzen Sie Buttons ein, um User zu einer Handlung zu bewegen. Beispielsweise das Absenden des ausgefüllten Formulars, das Zurückblättern zu einer vorigen Formularseite etc. Buttons zu gestalten sollte nicht in Raketenwissenschaft ausarten  aber vernachlässigen sollte man das Thema nun auch nicht. Denn eigentlich ist es simpel:

  • Die primäre Aktion sollte deutlich von allen anderen möglichen Aktionen abgegrenzt sein  beispielsweise farblich.
  • Die Buttons sollten so angeordnet sein, dass ihre Funktion intuitiv erfassbar ist  beispielsweise Blättertasten an den jeweiligen Seiten ausgerichtet.
  • Die Button-Aufschrift sollte spezifisch sein und dem User glasklar vermitteln, was er erreicht, wenn er den Button klickt. Dabei muss die Aufschrift zugleich aber extrem kompakt bleiben  sie wird, wie alle Formular-Labels, eher gescannt als gelesen.

Die primäre Aktion (hier: zur nächsten Seite gelangen) ist farblich hervorgehoben (a). Aus unserer kulturellen Gewohnheit erschließt sich die "logische" Position der Schaltfläche zum Weiterblättern, nämlich rechts (b). Die Button Caption ist kurz und bündig und macht dem User völlig klar, was zu erwarten ist (c).

Automation

Versuchen Sie unbedingt die Zahl der auszufüllenden Felder möglichst gering zu halten. Wo es relevant sein könnte, dass ein Feld mehrfach auftaucht, nutzen Sie Kopier- bzw. Duplizierfunktionen, mit denen Sie frühere Eingaben, die vom User bereits getätigt wurden, automatisiert übernehmen.

Dies kann bei komplexen Formularen der Fall sein, wie Sie beispielsweise im Kontext von Versicherungen oder bei Reisebuchungen oder ähnlichen Assistenz-Systemen vorkommen.

Feedback

Geben Sie dem User direktes Feedback für seine Eingaben lassen Sie dafür ein bisschen Raum unter den Feldern. Hier zeigen Sie dem User, beispielsweise durch ein Icon (grüner Haken oder rotes X) den Erfolg der Eingabe bzw. den Fehler an. Bestätigungen (grüne Haken) führen den User zielstrebig durch das Formular: Er bekommt jedes Mal gleich Feedback und somit das Gefühl, auf dem richtigen Weg zu sein. Dies erhöht auch  kleiner psychologischer Trick  die Motivation, das Formular bis zum Ende auszufüllen. Im Falle eines Fehlers wiederum sollte die Meldung beinhalten, worin genau der Fehler besteht, damit der User die Eingabe korrigieren kann. Das direkte Feedback erlaubt dem User, sich schneller, fokussierter und konzentrierter durch das Formular zu bewegen, als wenn etwaige Fehlermeldungen erst ganz zum Schluss erscheinen.

Auf dieses Ziel zahlen ebenfalls Suchvorschläge in Textfeldern mit freier Eingabemöglichkeit ein. Sie könnten für diese Option die Koppelung des jeweiligen Formularfelds mit einer integrierten Suchmaschine in Betracht ziehen.

Bei langen Auswahllisten ist überdies eine Autocomplete-Funktion hilfreich. Prinzip und Ziel bleiben die selben: Die Führung des Users durch das Formular und somit die bestmögliche User Experience

Wenig zielführend sind Notizen wie "falsche Eingabe". Hilfreich wäre aber beispielsweise der Hinweis "Bitte geben Sie hier Ihren Namen ein", wenn ein User eine Telefonnummer in das Namensfeld eingegeben hat.

Bei längeren Formularen sollten Sie eine Undo-Funktion einplanen, die das gesamte Formular leert.

Barrierefreiheit

Auch in Sachen Barrierefreiheit lohnt sich ein genauerer Blick auf Website-Formulare. Damit Nutzer insbesondere mit motorischen oder visuellen Behinderungen bzw. Sehschwächen oder kognitiv eingeschränkte Menschen Ihre Formulare problemfrei nutzen können, müssen einige Kleinigkeiten Beachtung finden:

  • Pflichtfelder müssen textlich gekennzeichnet sein (idealerweise im Label)
  • Eingabefelder mit vorgegebenem Wertebereich müssen ebenfalls einen Hinweis erhalten (ebenfalls idealerweise im Label)
  • Spätestens mit dem Drücken auf den Absenden-Button müssen fehlerhaft eingetragene Felder gekennzeichnet werden. Für ein hohes Barrierefreiheits-Level (Konformität AA) müssen Korrektur-Vorschläge erscheinen, soweit möglich.
  • Sofern Eingaben justiziable, finanzielle oder prüfungsrelevante Folgen haben können, muss Nutzern die Möglichkeit gegeben werden
    • das Absenden des Formulars rückgängig zu machen oder zumindest
    • vor dem Absenden die Eingaben erneut zu überprüfen.
  • Tastaturbedienbarkeit muss gegeben sein, d.h. Formulare müssen vollständig nur per Tastatur gut bedienbar sein.

Jetzt Praxisbezug holen

Profitieren Sie durch die Case Study zum Thema Barrierefreiheit von unseren Erfahrungen in einem erfolgreich umgesetzten Projekt:

  • Empfehlungen zur gelungenen Umsetzung
  • Expertenstimmen
  • Hinweise auf eventuelle Stolperfallen

Barrierefreiheit erfolgreich umsetzen

Formular wird geladen ...

Und außerdem?

Wenn Ihre Formulare auf eigenen Landing Pages oder in IFrames oder Popup-Fenstern angezeigt werden, könnten Sie dafür sorgen, dass das erste Feld automatisch angewählt und aktiv ist. So wird dem Nutzer die Mausbewegung abgenommen und es kann direkt mit der Eingabe in das Formular begonnen werden.

Hilfreich ist es in dem Kontext außerdem, wenn die Tabulator-Taste im Formular funktioniert, damit also zwischen den Feldern gesprungen werden kann.

Für die Nutzung auf Mobilgeräten wiederum sollte für die Eingabefelder das jeweils passende Keypad voreingestellt sein (also Numpad bzw. Tastatur), damit der User diesen Schritt nicht selbst machen muss.

Fazit

Wie in den meisten Fällen, in denen es um Online Marketing, Customer Journey, Touchpoints im Web geht, ist auch hier die User Experience zentral  und der Weg zu einer guten User Experience eigentlich gar nicht so schwer: Gehen Sie ihm einfach ein Stück auf seinem Weg entgegen.

Wir hoffen, hier ein paar Hinweise und Anreize gegeben zu haben.

Viel Erfolg mit den Formularen auf Ihrer Webseite.

Bei Fragen: Zögern Sie nicht, uns hier zu kontaktieren.

Jetzt die Pinuts-Experten kontaktieren!

Ihr direkter Draht zu den Blog-Autoren und Experten von Pinuts und piKnowledge. Notieren Sie konkrete Fragen oder Ihren Rückruf-Wunsch gleich hier:
Formular wird geladen ...

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Bieten Sie Ihren Kunden die perfekte Customer Experience

  • E-Mail-Marketing
  • Customer Interaction
  • Website-Personalisierung

Mehr Infos zur Software

×Schließen

Leadgenerierung im B2B

Unser neuestes Whitepaper: Mit Leadmanagement zum Erfolg – so erzielen Sie täglich neue Abschlüsse.

Zum kostenlosen Download