Inhalt
- 1. Markieren Sie keine Pflichtfelder
- 2. Verwenden Sie keine Spinner
- 3. Haben Sie nur einen Schaltflächentyp oder besser noch nur eine Schaltfläche pro Formular
- 4. Blockfelder
- 5. Überlegen Sie, warum Sie etwas fragen und wie es sich für den Benutzer anfühlt
- 6. Termine sind kleine Kerle
- 7. Formulare als Entwicklerhandwerk
- 8. Verwenden Sie keine Spalten in Formularen
- 9. Verwenden Sie nicht zwei Felder, wenn eines ausreicht
- 10. Sei nett
Formulare gibt es nichts, was viele Designer mehr hassen als Formulare. Sie bringen nicht unbedingt die Kreativität zum Vorschein, oder? Vielleicht ist es an der Zeit, dass wir uns die Formulare noch einmal ansehen und verstehen, dass ein Formular im Grunde genommen ein Gespräch zwischen dem Benutzer und der Software ist.
Vergessen Sie das Zeigen und Klicken, Formulare stellen die reichhaltigste Interaktion dar, mit der wir als digitale Designer konfrontiert werden. Wenn Sie das nächste Mal ein Formular erhalten, denken Sie nicht, dass es nur darum geht, einige nette CSS-Effekte anzuwenden oder einen schönen jQuery-Schnörkel hinzuzufügen. Das Entwerfen von Formularen hat viel mehr Tiefe.
Ich habe Hunderte von Formularen vom Benutzer getestet und einige komplexe Formulare für Versicherungsunternehmen, Urlaubsbuchungsinteraktionen und vieles mehr entworfen. Möglicherweise haben Sie in den letzten Monaten eines meiner Formulare verwendet.
Hier sind die Lektionen, die ich gerne gelernt hätte, bevor ich mit dem Entwerfen von Formularen begonnen habe.
1. Markieren Sie keine Pflichtfelder
Sie kennen das kleine Sternchen, das ein Pflichtfeld kennzeichnet? Ich habe gesehen, dass dies beim Testen von Benutzern oft fehlschlägt. Pflichtfelder sind als Konzept nicht sehr sinnvoll, sie haben kein Offline-Äquivalent. Sie eignen sich hervorragend für Entwickler, da sie einen schönen Schwarz-Weiß-Ansatz für die Fertigstellung bieten. Das Sternchen und das Pflichtfeld schlagen fehl, da es sich um ein erlerntes Verhalten handelt. Ein typisches Verhalten, das ich bei Benutzertests gesehen habe, ist, dass der Benutzer das Formular oben ausfüllt und entweder beendet, wenn etwas sie stoppen kann oder wenn er auf eine Schaltfläche drückt.
Die Lösung ist einfach: Markieren Sie optionale Felder, markieren Sie die Stelle, an der unser netter Benutzer anhalten und überlegen muss, ob er dieses Feld ausfüllen muss.
2. Verwenden Sie keine Spinner
HTML5 ist brillant, nicht wahr? Es bietet eine Menge aufregender neuer glänzender Werkzeuge zum Spielen. Wir müssen über die Angemessenheit unserer neuen Spielzeuge nachdenken. Das Zahlenfeld enthält jetzt kleine Aufwärts- und Abwärtspfeile, mit denen der Benutzer durch Zahlen blättern kann.
Hier gibt es zwei Probleme. Erstens macht die Standard-Browseranzeige der Pfeile sie wirklich klein. Sehr fummelig zu klicken und die fetten Finger unter uns werden auf einem iPhone kämpfen. Es heißt Fitt'sches Gesetz. Je kleiner etwas ist, desto schwieriger ist es, darauf zu klicken.
Aber ich höre dich schreien, du kannst die Nummer einfach direkt in das Nummernfeld eingeben. Ja, das können Sie, aber schauen wir uns die Browser-Anzeige an. Die Aufwärts- / Abwärts-Spinner-Pfeile ähneln unserem vertrauenswürdigen Freund im Auswahlfeld. Ein Benutzer, dem zum ersten Mal ein Spinner präsentiert wird, geht davon aus, dass er nicht in dieses Feld eingeben kann, da es einem Auswahlfeld ähnelt.
Mein Rat ist, klar zu steuern, bis sie allgemeiner werden oder die Browserentwickler das Standarddesign sortieren.
3. Haben Sie nur einen Schaltflächentyp oder besser noch nur eine Schaltfläche pro Formular
Es gibt ein wenig bekanntes psychologisches Prinzip namens Hick'sches Gesetz. Laut Hick'schem Gesetz ist es umso schwieriger, eine Wahl zu treffen, je mehr Optionen uns angeboten werden. Ich kenne keine Raketenwissenschaft, aber eine Regel, die es wert ist, beachtet zu werden.
Sie können Ihrem netten Benutzer helfen, indem Sie ihm helfen, eine Wahl zu treffen. Indem Sie alle primären Schaltflächen in einer Farbe festlegen und nur eine davon pro Seite haben, wird die Auswahl einfacher. Welchen Knopf sollte ich drücken? Oh, es ist einfach, es ist die große Farbe.
4. Blockfelder
Ich habe in einem früheren Leben Neurowissenschaften studiert und so die Psychologie des Gedächtnisses studiert - insbesondere das Kurzzeit- oder Arbeitsgedächtnis. Nun, bevor du es sagst; Nein, die Kurzzeitgedächtniskapazität beträgt nicht 7 +/- 2, 4 +/- 1 oder beim Menschen drei bis fünf Brocken. Wir Menschen sind großartig darin, visuelle Reize zu bewerten. Die Einschränkung ist, dass wir besser sind, wenn die Anzahl kleiner ist. Das Aufteilen eines Formulars in kleinere Gruppen erleichtert die Auswertung, da das, was der Benutzer in das Formular eingeben muss, häufig aus seinem Speicher stammt.
Stellen Sie sicher, dass Ihre Feldgruppen ungefähr vier sind.
5. Überlegen Sie, warum Sie etwas fragen und wie es sich für den Benutzer anfühlt
Dies ist wahrscheinlich der direkteste Ratschlag, den ich gebe, der jedoch häufig am wenigsten genutzt wird.
Nehmen wir Folgendes:
Stellen Sie jede Frage, die Sie stellen. Ist es nötig? Wie fühlt es sich an, danach gefragt zu werden?
Meistens besteht ein geschäftliches Bedürfnis, eine Frage zu stellen, und wir als Designer können über die Notwendigkeit streiten, bis wir blau im Gesicht sind. Die Frage muss gestellt werden. Wenn wir die geschäftlichen Anforderungen für diese Daten verstehen, können wir häufig Kompromisse eingehen.
Wir können helfen, indem wir unserem netten Benutzer sagen, warum wir diese Frage stellen müssen. Beruhigen Sie sich über die Verwendung und Weitergabe dieser Daten und seien Sie im Allgemeinen nett.
Nehmen wir noch einmal unser Beispiel:
Es ist immer noch eine schwierige Frage, aber hoffentlich haben wir die Pille gesüßt.
6. Termine sind kleine Kerle
Die Eingabe von Daten kann eine echte Herausforderung sein und es gibt einige Fallstricke, die Sie vermeiden können. Das größte Problem ist der Umgang mit Fehlern.
Am einfachsten ist es, einen Kalender zu starten. Es ist erwähnenswert, dass die Wochen an einem Montag in Großbritannien und einem Sonntag in den USA beginnen. Wenn sich Ihr Benutzer nicht konzentriert, wählt er möglicherweise einen Sonntag aus, wenn er einen Montag bedeutet.
Erwähnenswert sind auch internationale Datumsformate. Die USA stehen an erster Stelle, in Japan an erster Stelle. Ein Datum wie der 05.04.12 kann also auf drei Arten interpretiert werden.
Deshalb ist es am besten, Auswahlfelder zu verwenden.
7. Formulare als Entwicklerhandwerk
Formulare sind sowohl für Entwickler als auch für Designer ein Handwerk. Es ist eine Herausforderung zu verstehen, welche möglichen Fehler bei der Dateneingabe und beim Entwerfen Ihres Back-End-Codes auftreten können.
Hier ist eine einfache. Eingabe eines Währungswerts. Die möglichen Fehler, die der Benutzer machen könnte, sind riesig. Das Erzwingen von Datenformaten, die Benutzer erfüllen müssen, ist für Ihren Benutzer frustrierend und, seien wir ehrlich, ein wenig faul für die Entwickler.
Welche bessere Herausforderung für einen Entwickler gibt es, als ein kugelsicheres Formular zu erstellen.
8. Verwenden Sie keine Spalten in Formularen
Das große Problem bei der Verwendung von Spalten in Formularen ist der Fluss. Wir beginnen ein Formular oben und enden unten. Beim Einführen von Spalten kann der Fluss des Formulars unterbrochen werden.
Nehmen Sie nicht an, dass Benutzer durch Formulare navigieren. Daher ist der Fokus eine Möglichkeit, durch Formulare in Spalten zu navigieren. Es ist selten, dass ich das bei Benutzertests gesehen habe. Die meiste Zeit sehen wir Details eingeben, klicken Sie mit der Maus / dem Trackpad / dem Finger auf das nächste Feld und geben Sie dann Details ein und so weiter.
9. Verwenden Sie nicht zwei Felder, wenn eines ausreicht
Die meisten Menschen sind keine Berührungsschreiber. In Benutzertests sehen wir Leute, die während der Eingabe auf die Tastatur schauen.
Wenn Sie eine Telefonnummer eingeben, die das Formularfeld aufteilt, z. B. um Vorwahl und Nummer hinzuzufügen, treten echte Probleme auf. Benutzer sehen oder erinnern sich nicht daran, dass es zwei Felder gibt. Geben Sie daher die vollständige Nummer in das erste Feld ein. Schlimmer noch, wenn das Feld auf eine bestimmte Anzahl von Zeichen beschränkt ist.
Verwenden Sie nur ein Feld für die Telefonnummer. Gleiches gilt für die Hausnummer / Straße. Verwenden Sie nur ein Texteingabefeld.
10. Sei nett
Sie werden überrascht sein, wie viele ziemlich unhöfliche Fehlermeldungen es gibt.
Hier ist ein Beispiel von einem, auf das ich kürzlich gestoßen bin.
Die Tatsache, dass sie vorschlagen, dass Sie bereitwillig ein Datum in der Zukunft eingeben und dann eine ziemlich scherzhafte Antwort, nun, es ist nicht sehr schön.
Stellen Sie sich wieder an die Stelle des Benutzers. Wie würden Sie diesen Fehler sehen? Genervt? Vielleicht noch schlimmer. Nett zu sein ist einfach.
Ich habe ein herunterladbares Kinderbett / Spickzettel erstellt, damit Sie bessere Formulare entwerfen können. Es enthält viele weitere Best-Practice-Methoden zum Entwerfen besserer Formulare.
