Du tust alles, was du kannst Erstelle eine Website das führt Besucher zur Konversion. Wenn Sie die Analysen studieren, stellen Sie mit Begeisterung fest, dass die von Ihnen erstellte Benutzerreise immer wieder von ihren Besuchern unterstützt wird. Es gibt jedoch etwas, das sie daran hindert, konvertiert zu werden.

Le Kontaktformular ist ein wesentlicher Bestandteil der Reise Ihrer Besucher. Auch wenn Sie eigentlich fast alles haben, was eine Website bieten kann, a Kontaktformular könnte das Erlebnis ruinieren, wenn es nicht richtig verwendet wird. „Defekte“ Schaltflächen, verwirrende Felder, zu viele Schritte, eine unorganisierte Benutzeroberfläche … sogar die Platzierung der Kontaktformular könnte das Benutzererlebnis 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 zeigte, dass die Befolgung der grundlegendsten Nutzungsrichtlinien für das Design Formen wird die Benutzererfahrung erheblich verbessern. Insbesondere wenn ein Kontaktformular alle Regeln erfüllt, können 78 % der Benutzer es in einem einzigen Versuch ausfüllen und absenden. Wenn ein Kontaktformular gegen diese Regeln verstößt, gelingt dies jedoch nur 42 % auf einmal.

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 von Formen des Kontakts, was oft zu schlechten Designentscheidungen führt. Nehmen Sie zum Beispiel das Thema 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 du dein willst Formen Damit Ihre Kontakte den Ausrichtungsstandard erfüllen, müssen Sie Folgendes tun:

  • 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.

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").

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.