Besseres Kontaktformular-Design beginnt mit der Benutzerfreundlichkeit. Das Ziel eines Formulars ist offensichtlich: Sie benötigen Informationen vom Benutzer. Das Formular muss intuitiv genug sein, damit die Benutzer genau wissen, was zu tun ist, und beim Ausführen dieser Aktion nicht abgelenkt werden.
Die besten Kontaktformulare sind leicht einzusehen und enthalten äußerst nützliche Elemente, mit denen Benutzer sich beschäftigen können, ohne darüber nachzudenken. (Das hört sich etwas einfacher an, als es manchmal der Fall ist.) Zum Glück haben wir eine Auswahl an Tipps, mit denen Sie bessere Kontaktformulare entwerfen können.
1. Machen Sie es eine Spalte
Vertikale Formulare funktionieren gut, da die Benutzer an das Scrollen gewöhnt sind. Es macht es leicht, den Anfang und das Ende der Form zu sehen. Was ist einfacher Ein Formular vertikal durchblättern oder Elemente über den Bildschirm ausfüllen und dann nach unten ziehen? Das Erstellen eines Formulars mit einer einzigen vertikalen Spalte ist für viele Benutzer die einfachste Lösung, da sie sich nur eine Aktion überlegen müssen - den Bildschirm durch das Formular zu bewegen.
Das kann für Felder ähnlich sein, die ähnlich sind, wie z. B. eine kurze Antwort für einen Namen, eine E-Mail-Adresse und eine Telefonnummer. Es kann auch gut für Elemente wie einen Checkout-Bildschirm verwendet werden.
Diese Form funktioniert auch besser mit responsiven Formaten, sodass die Form auf verschiedenen Geräten dieselbe Form hat und eine konsistentere Benutzererfahrung ermöglicht. Dies kann besonders bei E-Commerce- oder Checkout-Formularen wichtig sein, da Sie nicht möchten, dass die Erfahrung variiert und Fragen zur Gültigkeit und Glaubwürdigkeit des Formulars gestellt werden.
2. Gruppieren Sie den Inhalt logisch
Kleine visuell gruppierte Blöcke von Fragen oder Formularfeldern können ein Formular verständlicher machen. Bewahren Sie ähnliche Elemente (z. B. Adressinformationen oder Zahlungsfelder) auf und gruppieren Sie Elemente mit ihren Bezeichnungen und anderen Anweisungstexten. Benutzer sollten niemals die Frage stellen, auf welches Feld sich ein Etikett oder eine Anweisung bezieht.
Logische Gruppierungen von Inhalten erzeugen einen Fluss für das Formular, in dem Benutzer vorhersehen können, welche Informationen als Nächstes angezeigt werden. Dies macht das Erlebnis einfach und angenehm.
3. Platzieren Sie Etiketten über dem Inhalt
Die meisten Tools zum Erstellen von Formularen bieten Ihnen viele Möglichkeiten, wo Sie Beschriftungen oder Tooltips platzieren möchten. Widerstehen Sie der Versuchung, übermäßig kreativ zu werden, und platzieren Sie Beschriftungen über dem Feld, in dem die Informationen angezeigt werden. Dies ist die häufigste und verwendbarste Platzierung für Etiketten.
Außerdem lässt sich diese Platzierung problemlos in andere Geräte konvertieren. Denken Sie beispielsweise über das Formular auf einem Telefon und nicht über einen Desktop nach. Wenn das Formular vor der Beschriftung steht, können Sie planen, welche Informationen in das Feld eingefügt werden sollen, bevor Sie zu dem Bildlauf blättern. Diese Informationen bleiben erhalten, bis das Formularfeld vollständig ist. Wenn sich die Beschriftung unterhalb des Felds befindet, bleiben Sie möglicherweise in einem Muster, indem Sie nach unten und dann nach oben scrollen, um Anweisungen zu sehen und das Formular auszufüllen.
Dies mag jetzt als große Sache erscheinen, kann jedoch für die Benutzer frustrierend sein. Bei längeren Formularen kann es zu Fehlern im gesamten Formular kommen. Dies ist ein Hauptproblem bei der Benutzerfreundlichkeit bei der Gestaltung Ihres Kontaktformulars.
4. Bitten Sie nicht um zu viele Informationen
Je weniger engagierte und loyale Benutzer sind, desto weniger Felder akzeptieren sie, um eine Aktion abzuschließen. Kürzere Formulare werden eher vollständig ausgefüllt als lange Formulare, die nach unnötigen Informationen fragen. (Müssen Sie wirklich angeben, welche Art von Kreditkarte Sie auf einer Zahlungsseite haben? Die Antwort ist nein, die Nummer gibt den Kartentyp an. Machen Sie also keine unnötigen Informationen.)
Je weniger engagierte und loyale Benutzer sind, desto weniger Felder akzeptieren sie, um eine Aktion abzuschließen. Für neue Benutzer ist es in Ordnung, nach einer E-Mail-Adresse zu fragen. Warten Sie auf eine Bestätigungs-E-Mail (wenn sie etwas mehr investiert haben) oder folgen Sie der Anleitung, um die gesammelten Informationen zu erweitern, indem Sie einen Namen, eine Postleitzahl oder einen Geburtstag angeben.
Kurze einfache Formen haben höhere Einrückraten als lange, erschöpfende Kontaktformen. Design entsprechend.
5. Machen Sie den Button als offensichtlich
Stellen Sie sicher, dass die Mikrokopie innerhalb der Schaltfläche genau anzeigt, was passiert Ist der Endvorgang offensichtlich, wenn der Benutzer jedes Feld im Formular ausgefüllt hat? Zu oft ist das Erstellen einer einfach zu erkennenden Schaltfläche der vergessene Schritt beim Formulardesign. Die Schaltfläche sollte deutlich sichtbar sein. Verwenden Sie eine Farbe, die für die letzte Schaltfläche spezifisch ist, und stellen Sie sicher, dass die Mikrokopie innerhalb der Schaltfläche genau anzeigt, was passiert (Senden, vollständige Zahlung usw.).
Bonus-Tipp: Wenn Sie ein Captcha oder eine andere Art von menschlicher Herausforderung verwenden, setzen Sie es zwischen das letzte Feld des Formulars und die Schaltfläche "Senden". (Es gibt nichts ärgerlicheres, als auf "Senden" zu klicken, nur um das Captcha zu zwingen, die Aktion zu wiederholen. Schlimmer noch, Sie müssen von vorne beginnen.)
Oh, und noch ein Tipp, der selbstverständlich ist? Lassen Sie die Benutzer wissen, wann ein Formular erfolgreich ausgefüllt wurde! Ein einfaches Dankeschön? Dialog ist oft genug.
6. Verwenden Sie geeignete Feldtypen
Ein guter Formulardesigner weiß, dass ein Feldtyp nicht zu allen Informationen passt. Passen Sie den Feldtyp an die erfassten Daten an, um Benutzern das korrekte Ausfüllen von Formularen zu erleichtern. Sie würden kein Dropdown-Menü für eine Telefonnummer verwenden, oder?
Obwohl dies einer dieser Tipps ist, die völlig offensichtlich erscheinen, geschieht dies zu oft falsch.
Denken Sie in einem Kontaktformular über dieses Feld nach. Am besten erreichen Sie mich per E-Mail oder Telefon. Durch die Auswahl einer Schaltfläche wird klar, dass der Benutzer eine auswählen muss. Die Verwendung einer Dropdown-Liste ist zu komplex für eine Auswahl oder Auswahl. Und Sie brauchen dies definitiv nicht als kurzes Antwortfeld.
Die Verwendung des richtigen Feldtyps vereinfacht nicht nur die Formulare, sondern auch die Datenerfassung und -analyse.
7. Überprüfen Sie die Daten wo möglich
Liebst du es nicht einfach, wenn ein Formular dich über Fehler informiert, während du gehst und nicht am Ende? Lieben Sie es nicht einfach, wenn ein Formular Sie über Fehler informiert wenn du gehst anstatt am Ende? Sie können den Fehler nicht nur sehen und korrigieren, sondern auch Zeit und Kopfschmerzen sparen.
Die Validierung auf Kontaktformularen ist ein Muss. Von der Bestätigung, dass eine E-Mail-Adresse dem richtigen Format entspricht, oder der Überprüfung der Anzahl von Ziffern für eine Postleitzahl oder Telefonnummer, können diese kleinen Dinge einen großen Unterschied machen.
Und wenn Sie es nicht tun, sind Sie in der Minderheit. Eine Studie des Baymard Institute zeigt, dass 60 Prozent der Formulare Inline-Validierung verwenden. Es handelt sich also nicht nur um ein Usability-Tool, sondern es entwickelt sich rasch zu einem allgemein akzeptierten Benutzermuster (und Erwartung).
Fazit
Die zwei beliebtesten Arten von Formularen in Website-Design-Projekten sind wahrscheinlich E-Mail-Anmeldungen und Kontaktformulare. Stellen Sie zunächst sicher, dass diese Formulare ordnungsgemäß eingerichtet sind, und optimieren Sie das Design, um sie benutzerfreundlicher zu machen. (Wenn Sie deutlich mehr Engagement bemerken, funktioniert es wahrscheinlich.)
Dieselben Konzepte können auf Formulare im gesamten Design sowie auf Umfragen, Checkout-Seiten und andere Datenerhebungen angewendet werden. Diese Konzepte lassen sich auf alle Arten von Website-Elementen anwenden, bei denen der Benutzer Informationen eingeben muss, um einen Prozess abzuschließen.