7 Geheimnisse für die Gestaltung großer Formen
Fast jedes Website-Design enthält eine Art von Formular. Von der einfachen E-Mail-Adressensammlung bis zur Anmeldung für einen Newsletter oder eine Benachrichtigung zu vollständigen Zahlungsformularen ist es unerlässlich, dass Sie ein Formular entwerfen, das einfach zu verwenden und zu verstehen ist.
Die Standards des Formularentwurfs entwickeln sich auch. Während früher viele Formulare mehrere Spalten enthielten und nach vielen Informationen verlangten, empfehlen die meisten Best Practices, Formulare so einfach wie möglich zu halten. Und es gibt eine Menge zu dem Design. Ein gutes Formular kann gescannt werden, erfordert nicht viel Tipparbeit und enthält eine intelligente Beschriftung und Formatierung, damit Benutzer Formulare beim ersten Mal richtig ausfüllen können.
Hier sind ein paar Geheimnisse, um sicherzustellen, dass Sie ein Formular entwerfen, das Benutzer tatsächlich ausfüllen.
1. Machen Sie es einfach zu scannen und zu lesen
Sie wissen, dass Benutzer Websites scannen, um Informationen zu sammeln und zu bestimmen, welche Aktionen sie ausführen werden oder ob der Inhalt und das Design sie interessieren oder nicht. Das Gleiche gilt für Formulare. Der Benutzer sollte in der Lage sein, auf einen Blick zu erkennen, welche Informationen benötigt werden, und eine klare Erklärung darüber zu geben, wofür das Formular steht und wie es übermittelt wird.
Ein hoch scanbares Formular enthält Folgendes:
- Kontrast: Text muss kurz und einfach zu lesen sein. Vermeiden Sie viel Farbe und bleiben Sie bei dunklen Text-Hintergrund-Kombinationen.
- Gruppierung und Leerzeichen: Gruppieren Sie Informationen, die auf längeren Formularen ähnlich sind. Sammeln Sie bei der Erfassung von Zahlungsinformationen beispielsweise Kundeninformationen, Zahlungsinformationen und Versandinformationen. Drei kürzere Blöcke sind leichter zu verdauen als ein langer. Verwenden Sie einen intelligenten Abstand, um die Beschriftungen mit dem Feld zu verbinden, das sie erklären, und nicht zwischen Text und Feldelementen.
- Klarer Abschluss / Aufruf zum Handeln : Den Knopf groß und leicht zu sehen machen. Die Mikrokopie in der Schaltfläche sollte den Benutzern sagen, was passieren wird, z. B. "Senden", "Jetzt bezahlen" oder "Weiter zum nächsten Schritt". Denken Sie daran, die Feedbackschleife zu schließen und die Benutzer darüber zu informieren, wenn ein Formular ordnungsgemäß übermittelt wird.
2. Betrachten Sie Floating Labels
Es gab viele Diskussionen darüber, ob Hinweistexte in Formularfeldern verwendet werden sollen oder nicht. Das Hauptproblem besteht darin, dass dieser Text nicht allzu oft mit einem Klick verschwindet und die Benutzer ihn aktiv löschen müssen, um mit der Eingabe zu beginnen. Das ist peinlich.
Weiter, der Nielsen Norman Group gefunden Diese leeren Felder können das Auge aufziehen und den Benutzern helfen, Informationen klarer einzugeben.
Wenn Sie das Gefühl haben, Hinweise zu verwenden, sollten Sie eine interaktive Lösung in Betracht ziehen - Floating-Labels. Fügen Sie Ihre Beschriftungsinformationen in Formularfelder ein, sodass sie wie Platzhaltertext aussehen, lassen Sie den Text jedoch animieren und verschieben Sie ihn nach links oben, sobald ein Benutzer den Mauszeiger über das Feld bewegt oder darauf klickt. Das Etikett oder der Hinweis verschwinden nie und es steht dem Benutzer, der das Formular auszufüllen versucht, nicht im Wege. (Außerdem ist die kleine Animation eine lustige Überraschung für die Benutzer.)
3. Verwenden Sie Feldmasken
Feldmasken können einige der gleichen Hinweise und Formhinweise liefern, ohne jedoch die Benutzerfreundlichkeit zu beeinträchtigen. Eine Feldmaske wird nur angezeigt, wenn ein Benutzer ein Feld aktiviert und einen zusätzlichen Scan-Hinweis darauf angibt, welche Informationen benötigt werden. Die Maske kann den Benutzer weiter unterstützen, indem Informationen automatisch formatiert werden, um Fehler zu vermeiden, die das Formular bei der Übermittlung aus dem Weg schleudern.
Ein gutes Beispiel für eine Feldmaske in Aktion ist mit Telefonnummern. Berücksichtigen Sie die verschiedenen Formatoptionen:
- (000) 000-0000
- 000-000-0000
- 0000000000
Woher weiß ein Benutzer, welcher funktioniert? Das Formularfeld spezifiziert und passt das Format an, wie ein Benutzer schreibt, so dass er oder sie nicht darüber nachdenken muss und nur Zahlen eingeben muss. (Dies erspart Ihnen auch den Aufwand, zwischen Tastaturen auf einem mobilen Gerät wechseln zu müssen.)
4. Machen Sie Formulare Keyboard-Friendly
Sie haben keine Möglichkeit zu wissen, auf welche Art von Gerät ein Benutzer Ihr Formular finden wird, aber es sollte genauso einfach zu füllen sein. Berücksichtigen Sie alle verschiedenen Arten von Tastaturen, die Informationen an das Formular senden und Felder anpassen können, um die entsprechende Option zu erkennen und zu verwenden.
Auf Desktops sollten Benutzer in der Lage sein, ein Formular einzugeben und jedes Feld ohne Mausklick auszufüllen. Gehen Sie nach Abschluss automatisch von einem Feld zum nächsten oder verwenden Sie Tabs oder Enter, um sich zu bewegen. W3.org hat eine solide Reihe von Tastaturempfehlungen damit du folgst.
Passen Sie auf mobilen Geräten den Tastaturtyp an die erforderlichen Daten an. Wenn die Eingabe für Buchstaben erfolgt, rufen Sie die Alphatastatur auf. Für Zahlen, rufen Sie die numerische Option auf. Von Google: "App-Nutzer schätzen Apps, die eine geeignete Tastatur für die Texteingabe bereitstellen. Stellen Sie sicher, dass dies konsistent in der App implementiert wird und nicht nur für bestimmte Aufgaben, sondern für andere. "
5. Entscheiden Sie sich für das vertikale Format
Vertikale Formulare sind einfacher für Benutzer als mehrere Spaltenformate. Die Best Practice-Regel besteht darin, sicherzustellen, dass alle Felder auf dem Bildschirm angezeigt werden können, ohne in einem von oben nach unten laufenden Bild zu scrollen.
Die einzige Ausnahme ist für sehr kurze Formulare, bei denen ein Benutzer nur eine E-Mail-Adresse oder einen Namen und eine E-Mail-Adresse eingeben muss. Zwei Side-by-Side-Spalten gefolgt von einem Call-to-Action-Button können in dieser Situation gut funktionieren, solange das E-Mail-Feld lang genug ist, damit Benutzer alle Buchstaben ihrer Adresse sehen können.
Denken Sie daran, Elemente logisch auch vertikal anzuordnen. Wenn Sie Vornamen, Nachnamen, E-Mail-Adresse und Haarfarbe sammeln, ordnen Sie diese auf diese Weise an.
6. Eingrenzen der Eingabe
Verwenden Sie so viele Vorfülllösungen wie möglich mit Formularen. Nichts ist schöner, als eine Adresse hinzuzufügen, und nach den ersten Klicks schaltet sich die Google API ein und schlägt Adressoptionen vor.
Das macht drei Dinge:
- Es erleichtert Benutzern, besonders auf Mobilgeräten.
- Es hilft, die Anzahl der benötigten Felder zu begrenzen.
- Es kann helfen, einige Benutzerfehler, wie z. B. Tippfehler, zu beseitigen.
Berücksichtigen Sie dasselbe mit E-Mail-Adressen, sodass Benutzer beliebte E-Mail-Domänen nach dem @ -Zeichen erhalten. Wenn ein Benutzer [E-Mail-geschützt] eingibt .... Das Feld schlägt automatisch vor [E-Mail geschützt] .
7. Halten Sie es kurz und süß
Sie werden versucht sein, Benutzer für viele Informationen in Formularen zu fragen. Widerstehe dem Drang!
Fragen Sie nur nach wichtigen Informationen in Formularen. Es ist wahrscheinlicher, dass Benutzer Formulare ausfüllen, die weniger Engagement erfordern. Wenn Sie später weitere Informationen benötigen, können Sie diese per E-Mail von Ihrer Liste senden, um weitere Informationen zu erhalten. (Als Nutzer, der sich bereits angemeldet hat, wird sich der Nutzer zu diesem Zeitpunkt eher für Sie interessieren.)
Vermeiden Sie optionale Felder. Fragen Sie nicht nach redundanten Informationen. Verwenden Sie nicht mehrere Felder, in denen Sie eine verwenden könnten (z. B. Telefonnummern).
Fazit
Geben Sie den Benutzern etwas für das Ausfüllen eines Formulars. Mach es lustig oder interessant. Danke dem Benutzer.
Durch das Erstellen eines Formulars, das leicht zu lesen und einfach zu verwenden ist, erhöhen Sie Ihre Chancen, Daten zu sammeln und einen Website-Besucher zu einem wiederkehrenden Nutzer zu machen.