Heute wollen wir uns mit einem wichtigen Element einer benutzerfreundlichen Website beschäftigen. Online-Formulare sind eine große Hilfe, wenn Sie mit den Besuchern Ihrer Homepage in Kontakt kommen wollen. Auch zur Erfassung von Anfragen und Bestellungen sind Formulare unabdingbar.
Weil Sie beim Online Formular Design viele Fehler machen können, haben wir die wichtigsten Tipps für Sie zusammengefasst. Sie selbst kennen bestimmt auch einige Formularbeispiele, die nicht besonders nutzerfreundlich waren [1]. Damit Ihnen nicht dasselbe passiert, haben wir Ihnen wertvolle Tipps für ein effizientes und funktionales Formular Design zusammengestellt.
Was zeichnet ein gutes Formular Design aus?
Ein gelungenes Formular Design ist in erster Linie zweckmäßig. Es erhebt alle notwendigen Daten und ist dabei übersichtlich strukturiert. Der Nutzer sollte auf den ersten Blick verstehen, welche Eingaben erforderlich sind. Durch die Bezeichnung der einzelnen Felder können Sie dafür sorgen, dass Nutzer diese schnell befüllen können.
Leider gibt es keine Allround-Lösung, die für alle Websites geeignet ist. Darum müssen Sie für Ihre Homepage ein individuelles Kontaktformular gestalten. Damit können Sie bei den Besuchern Ihrer Website aber auch viele Pluspunkte sammeln, wenn sie merken, dass Sie sich Gedanken gemacht und sich Mühe gegeben haben.
Um bei der Formulargestaltung erfolgreich zu sein, können Sie sich an unsere Ratschläge halten, die wir in jahrelanger Praxis im Internet gesammelt haben und die eine hohe Nutzerfreundlichkeit versprechen.
Unsere 6 Ratschläge zum Thema Formular Design
Wie schon erwähnt, ist die Formulargestaltung ein sehr individuelles Thema. Ist der Ton Ihrer Website sehr formell, weil Sie Fakten und Informationen liefern wollen, dann wird sich das auch in der Gestaltung von Kontaktformularen niederschlagen. Sind Sie sehr offen und locker in der Kundenansprache, dann können Sie auch ein freches Kontaktformular gestalten.
Unabhängig von der Ansprache und den Formulierungen, wollen wir Ihnen ergänzend sechs Tipps geben, die für jedes Formular Design wertvoll sind.
Eingabefelder an den Inhalt anpassen
Beispielsweise kann das Feld für die Postleitzahl kann sehr viel kleiner gehalten werden als ein Feld für den Ortsnamen. Dadurch wird die Formulargestaltung sofort sehr viel übersichtlicher und der Nutzer erkennt, welche Information er hier eintragen soll.
Fehlermeldungen erstellen
Wir kennen viele Formular Beispiele, die erst am Ende auf einen Fehler hinweisen. Wir raten Ihnen dazu, einen Fehler direkt bei dem relevanten Feld anzuzeigen. Am besten machen Sie Fehler auch farblich kenntlich. Rot hat sich als Farbe für fehlerhafte Eingaben durchgesetzt.
Wenn Sie den Nutzer sofort auf einen Fehler hinweisen, dann kann er diesen unmittelbar korrigieren und verliert keine Zeit.
Drop-Down Menüs begrenzt verwenden
Mit der Nutzung von Drop-Down Menüs sollten Sie sparsam sein. Eine Faustregel besagt, dass sie nur bei Fragen zum Einsatz kommen sollten, bei denen mehr fünf oder mehr Antwortmöglichkeiten vorgegeben werden.
Für die Auswahl in einem Drop-Down Menü müssen immer zwei Klicks gesetzt werden, was für den Nutzer einen Mehraufwand bedeutet. Überlegen Sie sich, ob Sie für die Frage auch mit einem Freitextfeld arbeiten oder alle Antwortmöglichkeiten untereinander auflisten können. Dann kann der Nutzer an der richtigen Stelle mit einem Klick einen Haken setzen.
Labels und Placeholder verwenden
Damit es zu keinen Missverständnissen kommt, müssen Sie eine prägnante Bezeichnung für alle Felder auswählen. Dabei sollten Sie auch gleich einen Hinweis geben, wenn eines der Felder befüllt werden muss. Das ist deutlich nutzerfreundlicher als wenn Sie erst am Ende eines Formulars darauf hinweisen, dass alle Felder, die mit einem * gekennzeichnet sind, Pflichtfelder sind.
Das Online-Formular strukturieren
Wenn Sie mehrere Felder haben, die thematisch zusammengehören, dann sollten Sie diese auch visuell in einem Block zusammenfassen. Für den Nutzer ist Ihr Formular dadurch sehr viel einfacher zu verstehen. Typische Formular Beispiele sind die Erfassung der Adressdaten, bevor es dann im nächsten Block um weitere Fragen geht.
Formularfelder untereinander anordnen
Für das menschliche Auge sind untereinander angeordnete Felder einfacher zu erfassen. Auch wenn Sie bei kurzen Fragen, wie der nach der Postleitzahl, noch ein weiteres Feld in einer Zeile unterbringen können, sollten Sie dies vermeiden.
Der Nutzer wird dadurch abgelenkt, weil man immer schon bewusst oder unbewusst nach rechts schaut, um die nächste Frage zu lesen. Im schlimmsten Fall sind die von Ihnen erhobenen Daten dadurch nicht brauchbar.
Tipps für ein barrierefreies Formular-Design
Ein wichtiges Thema im Kontext der Gestaltung des Kontaktformulars ist die Barrierefreiheit Ihrer Website. Wenn Sie ein neues Kontaktformular gestalten möchten, denken Sie auch an alle Menschen mit einer Beeinträchtigung.
Mit folgenden einfachen Schritten können Sie Barrieren für die Nutzung Ihrer Website abbauen:
- Wählen Sie eine angemessene Schriftgröße.
- Sorgen Sie für Kontraste, wie schwarze Schrift auf weißem Grund.
- Verwenden Sie eine einfache und verständliche Sprache.
Spamschutz während der Eingabe – Friendly Captcha
Es gibt noch einen weiteren Aspekt, den Sie beim Design ihrer Formulare berücksichtigen sollten. Um einen wirksamen Spamschutz zu schaffen, können Sie auf verschiedene Methoden zur Abwehr von Bots und Spamnachrichten zurückgreifen. Während sich diese in der Wirksamkeit kaum unterscheiden, gibt es einen erheblichen Unterschied in der Nutzerfreundlichkeit und in der Barrierefreiheit.
Aus Sicht des Anwenders sind alle Formularbeispiele, die mit einem Captcha Test arbeiten, eher unbequem. Das liegt daran, dass Nutzer eine einfache, aber lästige Aufgaben lösen müssen. Eine Rechenaufgabe oder die Markierung bestimmter Motive auf einer Auswahl von Bildern sind Beispiele hierfür. Zudem sind solche Standard-Captchas nicht barrierefrei.
Mit diesem Captcha-Test kann unterschieden werden, ob eine Anfrage menschlicher Natur ist oder von einem Computer gestellt wird. Ein wichtiges Unterscheidungskriterium bei der Abwehr von Spamnachrichten. Wenn Sie den Nutzer Ihres Kontaktformulars aber nicht mit einer Aufgabe behelligen wollen, so können Sie auf unsere vollautomatisierte und barrierefreie Alternative von Friendly Captcha zurückgreifen.
Sicher für Sie, bequem für Ihre Nutzer
Die gute Nachricht gleich vorweg. Unsere cloud-basierte Lösung ist DSGVO-konform und steht auch in Einklang mit den Vorgaben nach Schrems II. Sie sind also in Hinblick auf Datenschutz auf der sicheren Seite. Der Test, ob eine Kontaktaufnahme von einem Menschen oder einem Computer erfolgt, wird mittels eines kryptischen Rätsels durchgeführt. Dieses wird im Hintergrund gelöst, während die Eingaben im Kontaktformular erfolgen.
Der Nutzer bekommt davon überhaupt nichts mit. Neben einem ansprechenden und leicht verständlichen Formular Design können Sie mit der Verwendung von Friendly Captcha die Nutzerfreundlichkeit Ihrer Webseite erhöhen. Wenn Sie sich mit dem Thema Formular Design auseinandersetzen, lohnt es sich auch, zu überlegen, auf welche Weise Sie sich vor Spamnachrichten schützen möchten.
