Springe zum Hauptinhalt

5 Regeln um ein perfektes Kontaktformular zu erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Sie tun alles, um eine Website zu erstellen, die Besucher zur Conversion anregt. Wenn Sie Analytics studieren, stellen Sie erfreut fest, dass die von Ihnen erstellte Benutzerreise immer wieder von den Besuchern unterstützt wird. Es gibt jedoch etwas, das verhindert, dass sie konvertiert werden.

Das Kontaktformular ist ein wesentlicher Bestandteil der Reise Ihrer Besucher. Selbst wenn Sie tatsächlich fast alles haben, was eine Website bieten kann, kann ein Kontaktformular die Erfahrung ruinieren, wenn es nicht richtig verwendet wird. "Defekte" Schaltflächen, verwirrende Felder, zu viele Schritte, eine unorganisierte Benutzeroberfläche ... selbst die Platzierung des Kontaktformulars kann die Benutzererfahrung beeinträchtigen.

Es gibt viele Dinge, die schief gehen können.

5-Regeln für den Aufbau des perfekten Kontaktformulars

Eine 2014 veröffentlichte Google Eye Tracking-Studie hat gezeigt, dass das Befolgen der grundlegendsten Verwendungsrichtlinien für das Formular-Design die Benutzererfahrung erheblich verbessern wird. Insbesondere wenn ein Kontaktformular alle Regeln erfüllt, können 78% der Benutzer sie ausfüllen und in einem Versuch einreichen. Wenn ein Kontaktformular gegen diese Regeln verstößt, können dies jedoch nur 42% in einem Versuch tun.

Neugierig auf diese Regeln? Lesen Sie also weiter.

Regel 1: Konzentrieren Sie sich auf die Ausrichtung

Wie Sie in anderen Regeln hier sehen werden, sind die Leute oft besorgt über die Länge der Kontaktformulare, was oft zu schlechten Designentscheidungen führt. Nehmen Sie zum Beispiel die Frage der Ausrichtung.

Vielleicht sehen Sie ein solches Formular auf der BrainTraffic-Website und denken: Hmmm… aber ist das nicht ein bisschen zu lang, um es auszufüllen?

füllen Sie form.png aus

Eine Möglichkeit, über die Lösung dieses "Problems" nachzudenken, besteht darin, die Beschriftungen nach links zu verschieben und die Antwortfelder nach rechts zu platzieren. UX-Experten werden Ihnen jedoch mitteilen, dass dies ein wichtiges Nein-Nein ist, da es die Fähigkeit zum Scannen des Formulars beeinträchtigt. Gleiches gilt, wenn Sie darüber nachgedacht haben, die Felder horizontal nebeneinander zu platzieren.

Wenn Ihre Kontaktformulare dem Ausrichtungsstandard entsprechen sollen, müssen Sie Folgendes tun:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Richten Sie alle Beschriftungen, Formularfelder und die primäre Handlungsaufforderungstaste nach links aus.
  • Richten Sie verwandte Felder niemals horizontal aus. Sie können das Formular logisch strukturieren, aber jede Frage oder jedes Feld sollte vertikal gestapelt werden.
  • Jedes Feld mit Multiple-Choice-Fragen (mit weniger als sechs Optionen) muss in einer vertikalen Liste von Punkten oder Kontrollkästchen angezeigt werden, nicht in einem Dropdown-Menü.

Regel 2: Schließen Sie alle relevanten Felder ein

Wenn es um das Entwerfen von Kontaktformularen geht, denken Sie vielleicht, je kürzer, desto besser, oder? Das ist nicht immer der Fall. Am wichtigsten ist, dass Sie den Benutzern alle erforderlichen und relevanten Felder zur Verfügung stellen.

Michael Aagaard, Senior Conversion Optimizer für Unbounce, hat dies getan eine Präsentation im Jahr 2015, die dieses Problem angesprochen. Er und sein Team wollten wissen, was passieren würde, wenn sie dieses Kontaktformular kürzen würden:

Beispiel für Kontaktformular court.png

Wie Sie sehen können, haben sie die ihrer Meinung nach unnötigen Felder entfernt, um das Ausfüllen des Formulars zu vereinfachen. Nach Abschluss des Tests stellten sie jedoch einen Rückgang der Conversions mit der kürzeren Form um 14% fest.

Regel # 3: Felder vereinfachen

Es spielt keine Rolle, ob Ihre Benutzer über ein Desktop- oder Mobilgerät mit Ihrem Kontaktformular interagieren oder ob sie unterstützende Technologie benötigen, um ihnen zu helfen. Das Formular sollte ausgestattet sein. um den Eingabevorgang zu vereinfachen.

Hier sind einige Techniken, die Sie kennen sollten:

Aufstellung
Stellen Sie für Desktop-Benutzer und Benutzer mit Eingabehilfen sicher, dass in Ihrem Kontaktformular die Reihenfolge der logischen Registerkarten aktiviert ist.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Eingabemasken
Anstatt Benutzer zu zwingen, zu erraten, wie bestimmte Felder formatiert werden sollen, können Sie sie mit Eingabemasken hinzufügen, die sie automatisch formatieren.

Formatierungsfelder html.png

Google Autovervollständigung
Anstatt jedes Feld so zu codieren, dass es ist gebildet Aktivieren Sie das automatische Ausfüllen automatisch gemäß den zu beachtenden Standards mithilfe des Plug-Ins zum automatischen Ausfüllen von Google-Adressen. Dies erspart Ihnen nicht nur Rechtschreibfehler und falsch ausgefüllte Adressen, sondern erspart Ihren Besuchern auch die Eingabe der meisten dieser Informationen.

Regel # 4: Alle beenden

Obwohl mir klar ist, dass diese Regel gegen die Grundlagen des Minimalismus verstößt, sollten Sie diese Regel genau beachten, um zu vermeiden, dass Ihre Besucher unnötig frustriert werden.

Lassen Sie mich erklären: Sie haben ein Kontaktformular, das ziemlich einfach aussieht. Ihre Benutzer füllen es basierend auf den Empfehlungen der Labels aus und klicken auf die Schaltfläche "Senden". Dann bekommen sie diese schreckliche rote Nachricht: „Du hast es nicht richtig gemacht! Gehen Sie zurück, korrigieren Sie das Formular und senden Sie es zurück! "" 

Sie sind wahrscheinlich als Benutzer darauf gestoßen und wissen, wie frustrierend es sein kann, insbesondere wenn einige der von Ihnen eingegebenen Informationen gelöscht werden, wenn der Fehler ausgelöst wird. Lassen Sie die Benutzer nicht zu diesem Punkt kommen, anstatt zu raten, was wie repariert werden muss. Schreibe alles auf dem Weg:

  • Konzentrieren Sie sich auf das Feld (insbesondere auf Mobilgeräte), damit die Benutzer genau wissen, wo sie ein Formular ausfüllen.
  • Notieren Sie sich alle Formatierungsanforderungen, wenn Sie keine Eingabemasken zum automatischen Formatieren von Feldern verwenden.
  • Geben Sie explizit an, wann ein Feld "Optional" ist (verwenden Sie das Wort, nicht das rote Sternchen).
  • Geben Sie den Benutzern die Möglichkeit, das Kennwortfeld beim Eingeben ein- oder auszublenden.
  • Zeigen Sie eine Fehlermeldung an, sobald der Benutzer ein Feld bearbeitet. Warten Sie nicht bis zum Ende, um es zu tun.

form wordpress.png Fehler

Regel # 5: Ratschläge nicht verbergen

Der Board-Text in einem Kontaktformular sieht folgendermaßen aus:

Feld mit Tipps.png

Sehen Sie, wie Target die Beschriftungen im Feld platziert? In einigen Kontaktformularen verschwinden diese Beschriftungen / Anzeigen einfach, wenn ein Benutzer auf ein Feld klickt. Das Ziel behandelt dies etwas anders und verschiebt die Beschriftung an den oberen Rand des Feldfelds (siehe "E-Mail-Adresse").

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Unabhängig davon, wie damit umgegangen wird, mögen die Usability-Experten die Gruppe Nielsen Norman, Ich werde Ihnen sagen, dass dies eine schlechte Designpraxis ist, weil:

  • Dies ist problematisch für Multitasking-, abgelenkte oder zu schnelllebige Benutzer im nächsten Feld. Wenn der Hinweis verschwindet, müssen Benutzer das Feld verlassen, um wieder zu entdecken, was sie benötigen.
  • Tipps, die verschwinden, verhindern auch, dass Benutzer zu einem Formular zurückkehren, um ihre Arbeit zu überprüfen oder einen Fehler zu korrigieren, ohne die Antwort vollständig zu löschen, um zu sehen, was unten steht.
  • Der hellere graue Text für Platzhaltertipps ist nicht ideal zum einfachen Lesen.
  • Felder mit Hinweistext können mit Feldern verwechselt werden, die bereits Daten ausgefüllt haben, sodass Benutzer diese ignorieren, das Formular senden und eine Fehlermeldung erhalten können.
  • Einige Bildschirmlese-Tools können keinen Hinweistext lesen.

Laut NNG finden Benutzer leere Felder attraktiver als solche, die Hinweistext enthalten. Selbst wenn Ihre Formulare diese Beschriftungen oder Deskriptoren länger über dem Feld zu platzieren scheinen, wird die Benutzerfreundlichkeit verbessert.

Das war's für diese Tipps. Ich hoffe, sie helfen Ihnen beim Erstellen besserer Kontaktformulare.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
16 Aktien
Aktie8
tweet1
Registrieren7