bei Kontaktformularen zu beachten

Kontaktformulare sind ein wichtiger Bestandteil einer Website und ein großer Teil der aktiven Kunden-Website-Interaktion. Oft entscheidet sich anhand des Formulars, ob dem Kunden eine Webseite gefällt oder nicht. Es gibt unterschiedliche Arten wie man ein Formular auf der Website anordnen kann.

Am häufigsten wird es am Ende einer Seite („Footer-Form“ siehe Abb. 1), im Boxformat ganz oben („Lightbox-Stil“ siehe Abb. 2) oder als ganz eigene Seite mit den Kontakt Informationen angezeigt (siehe Abb. 3).

footer
Abbildung 1: Footer-Form

 

 

Jede dieser Arten hat andere Vor- und Nachteile. Die „Footer-Form“ sollte man nur verwenden wenn man einen Blog hat und es nach dem Lesen der Blogbeiträge zu Fragen, die durch das Kontaktformular beantwortet werden sollen, kommen kann.

lightbox
Abbildung 2: Ligtbox-Stil

Den „Lightbox-Stil“ hingegen sollte man benutzen wenn die Seite sehr lang ist oder wenn es wichtig für den Benutzer ist, Kontakt mit dem Webseiten-Besitzer aufzunehmen. Hierbei muss aber beachtet werden, dass das gesamte Formular auf den ersten Blick zu sehen sein muss, ohne zu scrollen.

Die letzte häufig gewählte Art das Kontakt-Formular auf der Seite anzuordnen, ist, es einfach als eigene Seite unter Kontakt zu gestalten. Diese Weise ist sehr übersichtlich und der Benutzer wird nicht abgelenkt, somit ist die Ausfüllquote höher.

 

Da die meisten Menschen keine Lust haben diese Formulare auszufüllen, ist es wichtig die User Experience so angenehm wie möglich zu gestalten. Ziel eines benutzerfreundlichen Formulars ist es, dem Nutzer so wenig Gründe wie möglich zu liefern das Ausfüllen abzubrechen.

 

Äußere Form des Kontaktformulars:

Kontaktseite
Abbildung 3: Kontaktformular auf eigener Seite

Um das Gestalten des Formulars einfacher zu machen, kann man sich an einige Regeln halten, um das Design ansprechender zu gestalten.

Zuerst muss man darauf achten, dass das Kontaktfeld klar als solches erkennbar ist und nicht übersehen wird. Das kann man entweder durch eine eindeutige Überschrift oder durch ein deutliches Layout (z.B. Lightbox-Stil) bewirken.

Generell sollte man sich auf die wichtigsten Felder beschränken, um dem Nutzer nicht das Gefühl zu geben, das Ausfüllen des Formulars wird eine Ewigkeit dauern. Je weniger Felder ein Formular hat desto einfacher ist es, das Formular übersichtlich zu gestalten.

Durch das Angeben von zusätzlichen Informationen (Telefonnr., Adresse, E-Mail etc.) wirkt die Seite auf Nutzer seriöser und sie haben die Möglichkeit, den Webseiten-Besitzer auch anderweitig zu kontaktieren.

Pflichtfelder sollten im Idealfall markiert werden, dies kann dem Kunden Zeit sparen und helfen sich auf die wichtigsten Felder zu fokussieren. Häufig wird das * Symbol verwendet um Pflichtfelder anzuzeigen.

Wenn das zu erstellende Formular viele Pflichtfelder besitzt, sollte man das Formular auf mehrere Seiten aufteilen. Die Unterteilung sollte in verschiedene Themenblöcke eingeteilt werden (z.B. Adresse, persönliche Daten, etc.).

Um den Nutzer auf dem aktuellen Stand zu halten, ist eine Fortschrittsanzeige im mehrseitigen Formular zu empfehlen. So weiß er immer wie viel Zeit dieses Formular noch beanspruchen wird. Außerdem brauchen mehrseitige Formulare eine automatische Zwischenspeicherung, damit die bereits eigetragenen Daten durch das Klicken des „Weiter“ und „Zurück“ Buttons nicht verloren gehen können.

Zu guter Letzt ist zu empfehlen den „Call-to-Action“-Button (in diesem Fall der “Weiter“ oder „Senden“-Button) immer im Sichtfeld zu platzieren. So kann der Nutzer die Länge des Formulars besser einschätzen.

 

Fehlermeldungen:

password strength meter
Abbildung 4: Password-Strength-Meter"

Fehlermeldungen sind ein sehr wichtiger Bestandteil eines Formulars, da sie dem Kunden Rückmeldung über seine Einträge geben.

Sie erscheinen in der Nähe eines der falsch ausgefüllten Pflichtfelder (z. B. „Nutzername ist schon vergeben“, „Passwort ist zu kurz“ etc.). Die Formulierung sollte immer höflich, freundlich und spezifisch sein, damit der Nutzer weiß, wie er seine Eingaben verbessern kann (z. B. „dein Passwort muss mindestens eine Zahl und ein Sonderzeichen enthalten“ statt „dein Passwort ist zu schwach“).

Zusätzlich gibt es den Nutzern eine Hilfestellung, wenn computergenerierte Alternativ-Vorschläge angezeigt werden (z. B. „dieser Nutzername ist leider bereits vergeben, versuchen Sie es mit xyz“ statt „dieser Nutzername ist leider bereits vergeben, versuchen Sie es noch einmal“).

Um die Fehlermeldungen möglichst ansprechend zu gestalten werden häufig Sprechblasen verwendet um die Meldungen wiederzugeben (siehe Abb.4). Ebenfalls ist es wichtig, die Fehlermeldung visuell hervorzuheben. Dies wird häufig durch eine rote/fette Schrift oder entsprechende Icons (Kreuze und Ausrufezeichen für Farbenblinde) neben dem falsch ausgefüllten Feld dargestellt.

Fehlermeldung Sprechblase
Abbildung 5: Fehlermeldung in Form einer Sprechblase direkt deben dem betroffenen Feld

 

Auch positive Rückmeldungen haben einen Einfluss auf den Nutzer, Icons wie grüne Haken neben gültigen Feldern können dem Kunden Rückmeldung über seine Eingaben geben. Die Mitteilung sollte in der Nähe des Feldes sein, auf das es sich bezieht.

 

Es gibt drei unterschiedliche Arten von Überprüfungen:

Erstens, die Inline-Validierung: direkt nach dem Verlassen des Feldes kommt die Fehlermeldung, dadurch kann ein Neuladen der Seite verhindert werden, welches alle eingegeben Nutzerinformationen löscht.

Die Inline-Validierung ist zusätzlich ein gutes Feedback für den Nutzer. Durch Hilfen wie den „Password Strength Meter“ können Nutzer eigenständig ihre Daten bearbeiten und verbessern. Inline-Validierung ist ein wichtiges Hilfsmittel, um die Fehlerrate zu senken, das Formular schneller ausfüllen zu können und die Kundenzufriedenheit steigern. Es ist wichtig die Meldungen immer angezeigt zu lassen, damit sich der Nutzer bevor er das Formular abschickt noch einmal vergewissern kann, dass er nichts vergessen hat.

Sinnvoll ist es die Inline-Validierung bei Feldern wie „Nutzername“ und „Passwort“ zu verwenden. Aber bei Feldern wie „Name“ und „Vorname“ kann es möglicher Weise zu Problemen kommen. Falls ein Nutzer einen ungewöhnlichen Namen oder fremde Schriftzeichen in seinem Namen hat, könnte dieser als nicht zulässig gemeldet werden.

 

Zweitens, die clientseitige Validierung: überprüft die Daten, die vom Kunden eingetragen wurden, bevor sie an den Server geschickt werden.

Sie funktioniert aber nur wenn der Nutzer JavaScript aktiviert hat. Wenn ein eingetragenes Pflichtfeld leer ist oder ungültige Zeichen beinhaltet so wird eine Fehlermeldung erscheinen. Diese Validierung kann benutzt werden um die Fehler der serverseitigen Validierung zu verringern. Da die clientseitige Validierung auch umgangen/manipuliert werden kann, gibt es noch die serverseitige Validierung.

 

Drittens, die serverseitige Validierung: die serverseitige Validierung wird verwendet, da die clientseitige Validierung meist nicht vollkommen perfekt ist.

Mit der serverseitigen Validierung werden alle schädlichen Daten gefiltert. Und falls die clientseitige Validierung umgangen wurde, kann die serverseitige Validierung, die serverseitige Verarbeitung vor möglichen Schäden schützen.

 

Spam-Bots:

 

Ein Spambot ist ein größtenteils selbstständiges Computerprogramm, welches unerwünschte elektronische Nachrichten versendet. Diese können bei Kontaktformularen ebenfalls zu Problemen führen, da sie Daten in die Felder eintragen und Spam Nachrichten verschicken. Es gibt aber unterschiedliche Möglichkeiten diese Spambots zu eliminieren:

 

„Captcha-Dienste“: wodurch der Nutzer vor dem Senden der Nachricht entweder einen Sicherheitscode (siehe Abb. 6) abtippen oder eine Sicherheitsfrage (sieh Abb. 7) beantworten muss. Diese Aufgaben sollten für Menschen einfach zu lösen sein. Wenn das Feld leer bleibt oder falsch ist, kann die Nachricht nicht abgesendet werden. Der Spambot kann den Code und die Frage nicht lesen und kann dadurch keine Nachricht verschicken.

Sicherheitscode Abbildung 6: Captcha-Dienst (Sicherheitscode) sicherheitsfrage Abbildung 7: Captcha-Dienst (Sicherheitsfrage)

Zeitsperre: da Spambots ein Formular innerhalb von Millisekunden ausfüllen und verschicken, kann durch die Zeitsperre eingestellt werden, dass ein Formular mindestens x Sekunden bearbeitet werden muss, bevor es abgesendet werden kann. Die Nachrichten die in weniger als x Sekunden abgesendet wurden, sind höchstwahrscheinlich von Spambots und werden automatisch geblockt.

 

Keine Links erlauben: Spambots versuchen oft durch unsichere Links Viren zu übertragen, deshalb kann eingestellt werden, dass in dem Nachrichtenfeld keine oder nicht mehr als x Links befinden dürfen.

 

„Honeypot“: unter Honeypot versteht man ein verstecktes Input-Feld, als Beschreibung sollte man „Hier frei lassen“ oder ähnliches verwenden um Personen, die auf die Seite mit einem Screenreader zugreifen, nicht geblockt werden. Spambots füllen in der Regel alle Felder automatisch aus, deshalb erscheint eine Fehlermeldung, sobald das Feld ausgefüllt wird.

 

Klick-Check: da ein Spambot, ein Programm ist und kein Mensch, klickt es nicht manuell (per Maustaste) auf senden. Bei dem Klick-Check wird vom Browser überprüft ob der „Senden“-Button automatisch angeklickt wurde oder mit der Maustaste überfahren und angeklickt wird. Das Überfahren des Buttons wird als menschliche Aktion gewertet, somit ist das Senden der Nachricht gültig.

 

Blacklist: hier können alle Wörter, Zahlen und Zeichen eingegeben werden, die nicht verwendet werden dürfen, sobald eines der ausgewählten Wörter, Zahlen oder Zeichen verwendet wird, wird die Nachricht geblockt.

 

 

Wenn Sie mehr zum Thema UX Design lesen wollen, dann schauen sie sich gerne auch die anderen Blogartikel unserer Web Design Agentur an: "Was ist UX Design?" , "Was macht gutes Design aus?" und "Wie geht ein UX Designer vor?"

 

Mehr Informationen zum Thema Design finden Sie auf unserer Design-Seite, in unserer Agenturpräsentation oder kontaktieren Sie uns direkt.