Zurück zur Übersicht

5 Tipps für benutzerfreundliche Eingabefelder

27.01.2014

FormularFormulare sind inzwischen fester Bestandteil von Websites. Leider werden hier auch viele Jahre nach "Web 2.0" noch zahlreiche Fehler gemacht, was ihre Benutzerfreundlichkeit anbelangt. Das ist fatal - sollen die Formulare doch dazu dienen, dass der Besucher eine Aktion ausführt (z. B. bestellt) oder Kontakt aufnimmt.

Ich behaupte, benutzerfreundliche Formulare können die Conversionrate signifikant erhöhen.

Ein Aspekt, der die Usability von Formularen betrifft, ist die Gestaltung von Formularfeldern. Hierzu möchte ich 5 Tipps geben, die Sie direkt auf Ihrer eigenen Website prüfen und gegebenenfalls in Angriff nehmen können.

Tipp 1: Klare Beschriftung

Damit meine ich nicht das Schriftbild, sondern die Formulierung. Manchmal ist nicht ganz klar, welche Eingabe das Formularfeld erwartet. Z. B. wenn da steht "Name" - ist das nur der Nachname? Oder der volle Name? Oder wenn da steht "Anschrift" - meint das dann die Straße mit Hausnummer? Oder die komplette Anschrift mit Postleitzahl und Ort?

Klassisch ist auch das Datumsfeld, das ein Datum nur in einem bestimmten Format zulässt (z. B. 01.04.2013), dieses feste Format als Info dann aber fehlt. Der Besucher kann hier lustig rätselraten, was das Formular von ihm möchte. Vor allem, wenn die Fehlermeldung dann so aussagekräftig ist wie "Bitte geben Sie das Datum im korrekten Format ein".

Zusätzliche Infos zur Beschriftung können in einem Tooltip mittels Info-Icon am Eingabefeld angebracht werden oder automatisch aufklappen, wenn der Besucher das Eingabefeld mit dem Cursor "betritt".

Tipp 2: Kennzeichnung des aktiven Felds

Wo befindet sich der Cursor eigentlich gerade? Für Besucher, die im Umgang mit Formularen nicht so vertraut sind, ist es eine enorme Erleichterung, wenn das jeweilige Feld z. B. farblich hervorgehoben wird.

Tipp 3: Intuitive Sprungreihenfolge

In manchen Formularen springt der Cursor bei Verwendung der Tab-Taste wild quer durch's Formular. Ungünstig, denn so muss ich beim Ausfüllen der Felder immer wieder die Maus in die Hand nehmen, um ins nächste Feld zu gelangen. Diese Gefahr besteht vor allem bei Formularen, deren Felder im Browser dynamisch nachgeladen werden (aber nicht nur).

Hüpfen Sie einfach einmal mit der Tab-Taste durch Ihr(e) Formular(e) und schauen Sie, ob die Sprungfolge der natürlichen Reihenfolge der Felder entspricht.

Tipp 4: Klare Kennzeichnung von Pflichtfeldern

Eigentlich total logisch. Und wird doch immer wieder falsch gemacht. Klassisch ist das *, das gern verwendet wird. Allerdings nicht auf allen Websites gleich, manche nutzen es zur Kennzeichnung der Pflichtfelder, während andere damit die optionalen Angaben markieren. Es sollte daher immer eine Info über dem Formular angezeigt werden "Mit * gekennzeichnete Felder sind Pflicht / optional". Auch wenn Sie Pflichtfelder anders (farblich, fett) markieren, geben Sie immer an, wofür die Markierung steht. Setzen Sie hier nicht zu viel Intuition des Nutzers voraus.

Tipp 5: Nicht zu klein

Viele Websites nutzen noch keine separaten Web-Layouts. Meist ist das kein großes Problem, denn die mobilen Geräte kommen auch mit den normalen Weblayouts ganz gut klar.

Schwierig wird es, wenn der Besucher ein Formular ausfüllen will. Hier muss vor allem auf die Größe der Eingabefelder geachtet werden. Aber hier lauern auch noch andere Gefahren, z. B. wenn das Textfeld des Smartphone einen Teil des Eingabefeldes überlagert. Testen Sie Ihre Formulare daher auf jeden Fall auch in einigen Mobilen Geräten.

Große Eingabefelder mit angemessener Schriftgröße sind aber auch im normalen Browser angenehmer auszufüllen, finde ich.

 

Kategorien: Aus Kundensicht | Schlagworte: Benutzerfreundlichkeit, Formulare, Kontaktformular, Usability

Lust auf mehr?

Grips-Letter abonnieren und nichts mehr verpassen.

Der Grips-Letter erscheint alle 1 - 2 Wochen. Du kannst dich jederzeit wieder abmelden. Deine Daten werden nicht weiter gegeben. Hier erfährst du mehr über den Grips-Letter. Hier findest du unsere Datenschutzerklärung.

Beitrag kommentieren

Wie alle anderen Websites verwendet auch unsere Cookies. Wenn du unsere Website verwendest, stimmst du dem zu.

Folgende Cookies zulassen:

Alle akzeptieren

Mehr Infos


Welche Cookies werden gesetzt?

Notwendig
PHPSESSID Behält die Einstellungen der Seite des Benutzers bei allen Seitenanfragen bei.
robin_marketing_popup Sorgt dafür, dass das Marketing-Popup nicht bei jedem Seitenwechsel erneut aufpoppt.
dwa_cookie_noticed Speichert die Einwilligungen zu den Cookies für ein Jahr. Dieser Cookie kann zurückgesetzt werden, wenn die Einwilligung entzogen werden soll.
Statistik
_pk_id Matomo - Cookie zum Speichern einiger Details über den Benutzer, z. B. der eindeutigen Besucher-ID (anonymisiert), notwendig zum Zählen wiederkehrender Besucher. - Speicherdauer 13 Monate
_pk_ses Matomo-Cookie zur Speicherung Sessionabhängiger Nutzerdaten - Speicherdauer 30 Minuten