Benutzerfreundliches Webformular

30.10.2023

Ein Webformular befindet sich auf den meisten Websites – sei es für das Erteilen eines Auftrags, dem Anfragen eines Angebotes oder einfach bei Fragen rund um das Produkt, bzw. die Dienstleistung. Doch nicht immer sind diese benutzerfreundlich aufgebaut, so dass diese auch gerne ausgefüllt werden. Das kann dazu führen, dass dir viele wertvolle Kontakte verloren gehen. Aus diesem Grund haben wir dir Faktoren zusammengefasst, die dafür sorgen, dass deine Website-Besucher gerne auf dein Formular reagieren und es entsprechend ausfüllen.

1. Klare Definition des Zwecks

Der Nutzer wünscht sich im Netz eine Transparenz, um Seiten und Anbietern zu vertrauen. Daher sollte klar definiert sein, welchen Zweck du mit deinem Webformular erreichen möchtest. Dazu ist es hilfreich diesen klar darüber festzuhalten, wie beispielsweise: „Schreib uns eine Nachricht“, „Gerne beantworten wir dir deine Fragen“, etc.

2. Betitelung der Felder

Selbiges gilt für die Betitelung der einzelnen Felder. Hier sollte der Nutzer klar wissen, was er in das Webformular einzutragen hat. Dies kann mithilfe eines Titels über dem Feld erfolgen oder über Platzhalter-Texte innerhalb des Feldes. Platzhalter-Texte werden oftmals als optisch schöner und angenehmer empfunden, können jedoch den Nachteil bieten, dass manche Geräte diese nicht immer anzeigen. Hier musst du selbst abwägen, was dir besonders wichtig bei deinen Formularen ist.

3. Kein Scrollen im Webformular

Nutzer im Web sind bekannterweise faul. Daher möchte sie, wenn sie sich schon die Mühe machen ein Webformular, nicht auch noch innerhalb des Formulars scrollen müssen. Achte daher darauf, dass alle Inhalte deines Kontaktformulars auf einer Seite sichtbar sind.

4. Umrandung Eingabefeld

Je nach Darstellung kann es schwer fallen die Eingabefelder zu erkennen. Daher kann es helfen, diese explizit zu umrahmen. So erkennt der Nutzer genau wo er klicken muss, um die geforderten Inhalte in das Webformular einzutragen.

5. Hinweistexte mit Anforderungen

Hat ein Feld die Anforderung, dass Daten in einem gewissen Format eingetragen werden müssen oder bestimmte Eigenschaften beinhaltet sein sollen, so ist es für den Nutzer hilfreich, wenn dies unter dem Feld im Webformular vermerkt ist. Dadurch kann er von vornerein Fehlermeldungen und möglichen Mehraufwand vermeiden.

6. Kontraste

Auch hier geht es wieder um die gute Sichtbarkeit des Formulars. Je stärker die Kontraste der Umrandungen und Texte im Webformular gegenüber dem Hintergrund sind, desto besser kann der Nutzer diese lesen, unabhängig von seinem Gerät und dessen Farbeinstellungen.

7. Icons

Nutzer lesen Texte im Netz meist nicht sonderlich ausführlich, sondern überfliegen diese nur. Dabei kann es schon einmal passieren, dass wichtige Informationen im Webformular nicht korrekt oder vollständig wahrgenommen werden. Dem kann mithilfe von Icons entgegengewirkt werden. So muss der Nutzer die Texte nicht vollständig erfassen, um zu wissen worum es geht.

8. Hover-State

Hover-State beschreibt die Programmierung, dass sich ein Feld verändert, wenn der Nutzer mit der Maus darüberfährt oder es anklickt. Dies sollte auch bei den Feldern im Webformular der Fall sein, so dass der Nutzer weiß, in welchem Feld er sich gerade aktiv befindet. Üblich ist hier eine Veränderung der Randfarbe oder ein blinkender Cursor.

9. Kommunikation bei fehlerhaften Daten

Sollte eine Eingabe seitens des Nutzers nicht korrekt sein, so ist es wichtig, dass ihm genau angezeigt wird, wo der Fehler liegt und wie er sich zu beheben lässt. So kann er genau sehen, warum das Webformular nicht absendet und dies korrigieren.

Du brauchst Hilfe bei der Einrichtung benutzerfreundlicher Kontaktformulare oder hast hierzu Fragen? Dann hinterlasse uns doch gerne eine Nachricht und wir helfen dir dabei!