Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "
10 Tipps zum Entwerfen perfekter Formen ".
Formulare spielen die Rolle eines Portals zwischen Benutzer und System und bilden häufig die Grundlage der Seite. Autorisierung, Registrierung, Statusaktualisierung, Eingabe von Zahlungsdaten oder Lieferadresse werden durch Formulare gesteuert. Für Online-Shops spielen gut gestaltete Formulare eine wichtige Rolle. Nach meiner eigenen Erfahrung verdoppelt gutes Design den Online-Verkauf.
Da Formulare wichtige Funktionen für die Benutzeroberfläche ausführen, gibt es Regeln für deren Gestaltung.
1. Geben Sie zunächst Daten ein
Beginnen Sie mit dem einfachsten Element - einem Textfeld. Dies ist die häufigste Komponente vieler Formen. Wenn Sie es also richtig machen, sind Sie auf halbem Weg.
Es gibt 3 Hauptelemente für das Formular: ein Textfeld, einen Titel und eine Fehlermeldung. Unabhängig davon, welches Design Sie zum Erstellen auswählen, stellen Sie sicher, dass der Benutzer weiß, welche Informationen erforderlich sind, und wie Sie diese entfernen können, wenn ein Fehler auftritt.
Überschriften sollten oben sein.
Trends werden geboren und sterben. Jetzt ist es in Mode, den Platzhalter als Überschrift zu platzieren. Die Verwendung ist zwar nicht falsch, wirft jedoch einige UX-Probleme (Hinweis: "User Experience") auf. Tatsache ist, dass der Benutzer den Header nicht sieht, wenn das Feld ausgefüllt wird.
Schlagzeilen müssen immer gesehen werden. Daher werden sie oben platziert.
Warum oben und nicht links vom Dateneingabefeld?
Wenn sich die Überschrift links neben dem Textfeld befindet, werden die Elemente auf dem Telefonbildschirm relativ zueinander verschoben. Denken Sie zuerst darüber nach, wie alles auf dem Telefonbildschirm aussehen wird.
Helfen Sie dem Benutzer, indem Sie im Platzhalter ein Beispiel angeben.
Ein weiteres Argument für die Platzierung der Überschriften über dem Dateneingabefeld ist, dass der Benutzer die Informationen in einer vertikalen Linie liest, da dies laut Untersuchungen schneller ist als das Verschieben der Ansicht von der linken Spalte nach rechts.
2. Fehlermeldung und Warnung
Für ein Standardtextfeld werden Fehlermeldungen benötigt.
Hier sind 3 Tipps zum Entwerfen:
Der Fehler tritt sowohl aufgrund des Clients als auch des Servers auf.
Auf der Clientseite werden Probleme erkannt, wenn das erforderliche Feld nicht ausgefüllt oder die E-Mail-Adresse falsch eingegeben wurde:
- Der Server prüft, ob die angegebene E-Mail-Adresse vorhanden ist.
- Der Benutzer wird vor dem Absenden des Formulars über einen Clientfehler informiert. Fehler sind erforderlich, um das Senden falscher Informationen durch den Benutzer zu verhindern.
Suchen Sie nach Fehlermeldungen
Geben Sie an, in welchem Feld der Fehler auftritt. Aus Sicherheitsgründen geben einige Entwickler während der Autorisierung keinen Fehler in der E-Mail oder im Kennwort an. Dies ist absolut normal. Wenn der Benutzer den Newsletter abonniert oder seine Adresse während des Kaufs eingibt, geben Sie ihm an, welches Feld falsch ausgefüllt ist und warum.
Überprüfen Sie jedes Mal, wenn Sie ein Textfeld ausfüllen, wie der Fehler aussehen wird, bevor und nachdem Sie auf die Schaltfläche Senden klicken.
Verwenden Sie Warnungen
Informieren Sie den Benutzer, wenn für das Feld bestimmte Kriterien erforderlich sind, z. B. wenn das Kennwort eine bestimmte Anzahl von Zeichen enthalten muss, oder kombinieren Sie Zahlen und Buchstaben.
Geben Sie an, wie sicher das Kennwort ist, ob E-Mail auf der Website registriert ist oder ob die Anmeldung beschäftigt ist.
3. Verwenden Sie passende Formen
Optisch sieht das Formular präziser aus, wenn Kombinationen verwendet werden. Überlegen Sie, wie der Benutzer das Formular vom Telefon aus verwenden wird.
Wenn alle Felder Text sind, muss der Benutzer die Tastatur ständig öffnen.
Fordern Sie den Benutzer zur Änderung auf, von einem Textfeld zu Dropdown (Hinweis: „Dropdown-Listen“) oder zu Radiobutton und umgekehrt zu wechseln.
Überlegen Sie, wie der Benutzer das Telefon hält und wie Sie die Unannehmlichkeiten beseitigen können, die durch die Kombination derselben Felder für die Dateneingabe entstehen.
4. Optionsfelder, Dropdowns und Kontrollkästchen
Bei der Auswahl von Radiobutton, Dropdown und Kontrollkästchen kommt es manchmal zu Verwirrung.
Radiobutton eignet sich hervorragend, um eine kleine Anzahl möglicher Antworten bereitzustellen. Wählen Sie im Voraus eine mögliche Antwort oder überspringen Sie dieses Feld.
Radiobutton ist die beste Lösung, wenn Sie nur eine Option auswählen können.
Wenn mehr Elemente benötigt werden, ist ein Dropdown-Menü besser geeignet (in der Praxis - mehr als 5-6 Antworten). Sie können auch das Standardelement auswählen oder den Platzhalter "Element auswählen" festlegen.
Das Kontrollkästchen ist die beste Wahl, wenn Sie nur ein Feld ausfüllen müssen (z. B. Bedingungen und Konditionen) oder mehr als eine Antwort bereitgestellt wird. Wenn Sie auswählen möchten, welche Werbemailings an den Benutzer gesendet werden sollen, können Sie mit dem Kontrollkästchen mehr als eine Auswahl treffen.
Die Verwendung des Kontrollkästchens anstelle des Radiobuttons sollte Sie bei Ihren Entwurfsentscheidungen für die Benutzeroberfläche nicht einschränken.
Als Designer haben Sie genügend Freiheit bei der Auswahl, wie die Elemente der Benutzeroberfläche (Hinweis: „Benutzeroberfläche“) auf dem Bildschirm angezeigt werden sollen. Selbst wenn Sie das Kontrollkästchen so ändern möchten, dass es interessanter ist, sollte dies die Wahrnehmung des Benutzers nicht beeinträchtigen.
Anstatt Text vor kleine Kreise zu schreiben, können Sie Bilder oder Symbole zur Auswahl erstellen.
5. Schließen Sie nach Möglichkeit optionale Felder aus
Wenn das Ziel des Unternehmens darin besteht, ein Produkt zu verkaufen, besteht Ihr Ziel als Designer darin, so viele Unannehmlichkeiten wie möglich zwischen dem Benutzer und dem System zu beseitigen.
Durch das Entfernen unnötiger Felder kann der Benutzer weniger Aufwand betreiben.
Bei der Bewerbung ist es wichtig, die verschiedenen Zahlungs- und Versandarten zu kennen.
Wenn die Verkaufsabteilung die Vorlieben der Kunden wissen möchte, können Sie dies mit einer Bestätigungs-E-Mail tun.
Suchen Sie immer nach Möglichkeiten, ein Minimum an sichtbaren Feldern zu verwenden.
Wenn Sie Ihren Online-Shop optimieren möchten, minimieren Sie die Anzahl der Felder für die Lieferadresse und die Kaufabwicklung.
Wenn Sie eine Schnittstelle für die Buchung von Flugtickets erstellen, zeigen Sie dem Benutzer die kleinste Anzahl von Feldern an, die zum Anzeigen der verfügbaren Flüge erforderlich sind.
Dann können Sie weitere Bedingungen anbieten: die Anzahl der Taschen usw.
6. Verwenden Sie die automatische Vervollständigung für große Formulare
Je nach Straßenname kann das Ausfüllen der Adressleiste viel Zeit in Anspruch nehmen, insbesondere vom Telefon aus. Das richtige Schreiben der Adresse kann noch schwieriger sein.
Verwenden Sie GoogleMapsAPI, damit Straßennamen automatisch ausgefüllt werden. Dies bedeutet, dass der Benutzer nur einige Zeichen eingeben und die gewünschte Straße aus der vorgeschlagenen Liste auswählen muss. Sie können die Postleitzahl auch automatisch basierend auf dem Straßennamen eingeben, aber wir werden dies später besprechen.
7. Verwenden Sie bedingte Logik
Verwenden Sie die Logik, um einige Informationen für den Benutzer einzuführen, um ihm das Leben zu erleichtern.
- Wenn das Land des Benutzers bekannt ist, kann das Design zusätzliche Felder enthalten ("Bundesstaat", wenn Sie sich in den USA befinden, "Landkreis" in Irland usw.).
- Verwenden Sie die Postleitzahl, um den Namen einer Stadt, eines Bundeslandes oder einer Provinz einzugeben
- Wenn Sie das Land des Benutzers anhand der IP-Adresse berechnen, können Sie den Ländercode in das Eingabefeld des Telefons einfügen?
Wenn Sie einige Felder für den Benutzer ausfüllen möchten, geben Sie ihm immer die Möglichkeit, Informationen selbst einzugeben. Es besteht die Möglichkeit, dass Sie sich in etwas irren.
Sie verwenden beispielsweise GoogleMapsAPI, um eine Straße in Deutschland zu finden. Wenn Sie den Straßennamen kennen, können Sie die Vorwahl erhalten. Einige Straßen in Deutschland sind jedoch recht groß, sodass sie unterschiedliche Codes abdecken, sodass die Informationen bei Grenzstraßen möglicherweise falsch sind. Geben Sie dem Benutzer bei Bedarf immer die Möglichkeit, Daten einzugeben.
Die Verwendung der bedingten Logik für alle Länder der Welt erfordert zu viel Arbeit. Sie müssen sich daher der Bedeutung Ihrer Bemühungen bewusst sein. Durchsuchen Sie die Länder, aus denen Bestellungen am häufigsten stammen, und optimieren Sie sie zunächst. Wenn dies zu höheren Einkommen führt, machen Sie dasselbe mit dem Rest der Länder.
8. Platzhalter richtig verwenden
Wir haben zuvor besprochen, dass Platzhalter nicht immer verwendet werden, da sie bei der Eingabe von Informationen verschwinden. Wir haben jedoch keine anderen Verwendungsmöglichkeiten in Betracht gezogen, die dem Benutzer helfen könnten.
Der Platzhalter ist eine großartige Gelegenheit, dem Benutzer die Eingabe von Informationen zu zeigen. Ein gutes Beispiel ist die Eingabe eines Telefons. Muss der Benutzer einen Ländercode eingeben? Oder Stadtcode?
Wenn Sie eine Telefon- oder Kartennummer in einem bestimmten Format benötigen, informieren Sie den Benutzer darüber, indem Sie ein Beispiel für das Ausfüllen des Platzhalters angeben. Dies ist eine großartige Möglichkeit, Fehler zu beheben, indem Sie einfach angeben, welche Informationen benötigt werden: Ländercode usw.
9. Melden Sie die nächsten Schritte.
Wenn Sie nach dem Ausfüllen eines anderen Formulars zur Eingabe den Benutzer informieren.
Anstelle von "Weiter" oder "Bezahlen" können Sie "Scheckbestellung" oder "PayPal-Zahlung" schreiben.
Fügen Sie nach dem Klicken auf die Schaltfläche Nachrichten hinzu, die die nächsten Schritte angeben. Ist der Bestellvorgang abgeschlossen oder hat der Benutzer Zeit, alles zu überprüfen? Wird er bezahlen gehen?
Suchen Sie immer nach Möglichkeiten, dem Benutzer Komfort zu bieten, insbesondere wenn er mit seinem Bankkonto verbunden ist.
Ich ärgere mich jedes Mal, wenn ich bei Amazon kaufe, weil ich bis zum letzten Schritt nicht alle Informationen einschließlich der Versandkosten erhalte. Seien Sie ehrlich mit Ihrem Benutzer. Verdienen Sie Glaubwürdigkeit, indem Sie bei jedem Schritt des Füllens die erforderlichen Informationen bereitstellen und klar erklären, was Sie bei der zukünftigen Verwendung erwarten können.
10. Suchen Sie weiterhin nach Optimierungsmöglichkeiten
Wenn Sie ein neues Formular gestartet haben, analysieren Sie es weiter. Wenn Sie feststellen, dass viele Benutzer die Website verlassen, finden Sie den Grund heraus. Führen Sie eine Umfrage durch, um herauszufinden, warum Benutzer sich unwohl fühlen, und arbeiten Sie dann daran, diese Unannehmlichkeiten zu beheben. Für den Designer ist die Arbeit nie "vollständig abgeschlossen".
Fazit
Manchmal ist das Design von Formularen nicht so interessant, aber wenn sie gut gemacht werden, können sie die Wahrnehmung der Site oder Anwendung durch den Benutzer verändern. Entwerfen Sie die Formulare sorgfältig, um es dem Benutzer zu erleichtern. Geben Sie eindeutig weitere Anweisungen, geben Sie Hinweise mit Warnungen und Platzhaltern an und schlagen Sie eine automatische Vervollständigung vor, damit Benutzer nicht zu viel eingeben.