🤟🏼 🧑🏾‍🤝‍🧑🏾 ✍🏿 Form Designmuster. Buchrezension ✋🏿 👆🏼 🐝

Einführung durch den Review-Autor

Das Buch enthüllt, manchmal für Designer und Front-End-Entwickler nicht offensichtlich, die Themen des Felddesigns, das Konzept der Arbeit mit Datentypen und die Benutzerfreundlichkeit. Das Buch wird sowohl für Anfänger als auch für Interface-versierte Designer nützlich sein, da das erste ein Verständnis der Grundlagen vermittelt und das zweite Anlass zum Nachdenken über manchmal kontroverse Designmuster gibt. Die Rezension wird in Form von kurzen Abstracts aus dem Buch und kurzen Kommentaren des Rezensenten präsentiert.

Teil eins. Über die Felder

1. Ein Etikett oben ist besser als ein Etikett links.

Warum: Die These ist zu einem Klassiker des Genres geworden. Zu diesem Thema wurden viele Artikel geschrieben, zum Beispiel dieser und Hunderte ähnlicher. Wenn Sie das Etikett darauf platzieren, erhalten Sie mehr Platz, wenn das Etikett lang ist. Es scheint offensichtlich, aber viele Designer haben hartnäckig Etiketten auf der linken Seite angebracht.

2. Platzhalter, um die Füllregeln nicht zu beschreiben

Warum: Platzhalter verschwinden, wenn Sie auf + Feld im Feld klicken.

3. Fragen Sie nicht erneut nach einem Passwort

Warum: Wütend, zweimal einzutreten.

4. Fehlertext zum Schreiben zwischen dem Etikett und dem Feld

Warum: Es wird nicht durch eine automatische Vervollständigung oder Tastatur auf einem Mobiltelefon geschlossen.

Meinung: Es scheint, dass die These verständlich ist, aber sie sieht wirklich super ungewöhnlich aus. Während der gesamten Zeit des Entwerfens von Schnittstellen (9+ Jahre) habe ich dies nur einmal und nur in den Layouts eines Designers getroffen. Aber vielleicht lohnt es sich, dieses Muster in Betrieb zu nehmen.

5. Auswahl ist besser nicht zu verwenden

Warum: Optionen ausblenden, einige Geräte nicht vergrößern, ein zusätzlicher Klick, jemand versucht, ihnen zu schreiben.

Meinung: Ich versuche, keine Auswahl zu verwenden, wenn die Punkte kleiner oder gleich dem 3. sind. In diesem Fall ist es einfacher, Tags oder eine Funkgruppe zu erstellen. Vielleicht ist es die Tatsache, dass einige Leute glauben, dass dies ein Eingabefeld ist, nicht eine Auswahl und versuchen, dort zu schreiben, was zu einer Mischung aus Eingabe und Auswahl in Form eines Dropdown-Menüs geführt hat, aber das erste Element ist ein Eingabefeld (meistens eine Suche). Dies ist gleichzeitig eine Lösung und eine Krücke.

6. Wenn Sie keinen Kalender zur Angabe von Daten benötigen

Ein Kalender wird nicht benötigt für:

Geburtsdaten, weil sich jeder auswendig an dieses Datum erinnert und leichter von Hand einzugeben ist;
Ablaufdatum der Karte;
Die Daten, die in den Dokumenten geschrieben sind und die Sie nur ohne zu zögern erneut eingeben müssen.

7. Erstellen Sie eine „Passphrase“

Warum: Es gibt eine Meinung, dass der Satz leichter zu merken ist.
Meinung: ¯ \ _ (ツ) _ / ¯

8. Verwenden Sie "- / +" anstelle von "Auswählen"

Regel: Verwenden Sie Plus und Minus, wenn die Zahlen nicht groß sind. Ein gutes Beispiel ist die Wahl der Anzahl der Passagiere pro Flug. Das Buch sagt, dass es Tests zu diesem Thema gab und das Plus / Minus sich besser zeigte.

9. Die Größe des Feldes sollte unter dem Inhalt liegen

Warum: Ja, weil es logisch ist! Und es spielt keine Rolle, dass die Felder auf diese Weise nicht gerade sind. Aber in einer halben Sekunde ist klar, welche Art von Inhalten es geben sollte.

10. Sprechen Sie genau dort, wo der Fehler liegt

Warum ist es normalerweise nicht so? Es wird angenommen, dass dies keine Sicherheit ist. Schließlich weisen wir darauf hin, dass das Login nicht korrekt ist. Tatsächlich überprüfen Hacker jedoch nicht alle auf der Welt vorhandenen Passwörter, wenn sie feststellen, dass es sich bei der Anmeldung um eine E-Mail-Adresse handelt. Mail und ist offen für Informationen geeignet.

Zweiter Teil. Über Schaltflächen

1. Richten Sie die Schaltflächen links aus

Warum: Der Blick geht von links nach rechts. Eine Ausnahme kann ein modales Fenster sein, in dem keine Eingabefelder vorhanden sind. Zum Beispiel in Googles Materialdesign der Schaltfläche in den Modalen rechts.

2. Deaktivieren Sie die Schaltfläche nicht

Warum: Es ist nicht möglich, durch Drücken der Tabulatortaste darauf zuzugreifen, es wird von einigen Bildschirmlesern nicht gelesen und ist aufgrund von Mattheit schlecht sichtbar.

Meinung: Bis vor kurzem habe ich es vorgezogen, eine Schaltfläche zu entwerfen, um den Benutzern klar zu machen, dass sie etwas im Formular unterfüllt haben. Und irgendwie zweifelte er nicht einmal daran, dass dies nicht offensichtlich sein könnte. Tests an Benutzern haben gezeigt, dass Benutzer eine graue Farbe sehen, aber nicht jeder versteht, dass dies bedeutet, dass etwas nicht stimmt. Es ist, als hätten Sie zum ersten Mal eine Ampel gesehen und könnten ihre Farben unterscheiden, wussten aber einfach nicht, was jede Farbe bedeutet. Sie hätten egal was jetzt brennt.

3. Schreiben Sie auf die Schaltflächen ein Verb

Warum: Es ist klarer, was passieren wird.

4. Setzen Sie den Link „Ich erinnere mich nicht an das Passwort“ nicht vor die Schaltfläche

Warum: Für diejenigen, die die Felder über die Registerkarte durchgehen, kann dies als Übergang zu einem Link anstelle einer Schaltfläche dienen. Wie üblich wird die Eingabetaste gedrückt und ein unnötiges Skript zur Kennwortwiederherstellung ausgeführt.

5. Schämen Sie sich bei einer langen Form nicht, einen Knopf darauf zu legen

Meinung: Eine Art Unsinn. Es ist besser, die Schaltfläche von unten so zu fixieren, dass sie beim Scrollen immer sichtbar ist. Aber zum Beispiel setzt Yandex.Mail einen Knopf oben.

Bild

Teil drei. Browser und Automatisierung

Führen Sie keine automatischen Übergänge von einem Feld in ein anderes durch, wenn Sie die erforderliche Anzahl von Zeichen eingeben. Es kann Benutzer verwirren
HTML5-fähige Browser verfügen über integrierte Formularprüfer und jeder Browser verfügt über eine eigene Logik. Es ist sinnvoll, die Standardüberprüfung zu deaktivieren
Es ist notwendig, die automatische Fehlerkorrektur zu deaktivieren und den ersten Buchstaben automatisch zu erhöhen. Andernfalls scheint es den Benutzern, dass dies ein Fehler war und die Daten nicht akzeptiert würden
Laut Statistik wird die automatische Vervollständigung in Chrome 9 Milliarden Mal im Monat verwendet. Dies spart dem Benutzer durchschnittlich 12 Sekunden, was 1.250.000 Tage pro Monat ergibt. Lustige Tatsache
Filtern Sie nicht, ohne auf die Schaltfläche "Filter" zu klicken. Eine Schaltfläche wird beispielsweise benötigt, wenn nicht nur Funk- und Kontrollkästchen vorhanden sind, sondern auch Eingabefelder (Kosten, einige Intervalle usw.). Sie selbst schreiben jedoch weiterhin über Tests, bei denen Benutzer der Ansicht waren, dass der Filter nicht funktioniert, ohne zu bemerken, dass Sie auf die Schaltfläche "Filter" klicken müssen. ¯ \ _ (ツ) _ / ¯

Teil vier. Über alles

Irgendwann wechselte das Buch von Formularen zur Beschreibung der Verwendbarkeit von Symbolen und anderen Dingen, die für das Thema nicht relevant sind. Sie schreiben in dem Buch, dass es ziemlich seltsam ist, hier Texte über Symbole zu sehen, aber Symbole sind ebenso wie Formulare Teil der Benutzeroberfläche und können daher beschrieben werden. Trotzdem fand ich unter den kleinen nützlichen Informationen ziemlich interessante Dinge. Über sie unten.

1. Es ist keine Schande, die Felder Login und Passwort auf verschiedenen Seiten zu verteilen

Auf der GOV.UK-Website haben sie sich in Form einer Autorisierung auf einer Seite angemeldet und auf einer anderen Seite das Passwort (jetzt nicht mehr), und die Benutzer haben nichts Seltsames bemerkt.

Meinung: Jetzt bemerke ich diesen Ansatz zunehmend. Von Google zu verschiedenen Diensten wie Abstract.

Bild

2. Das Anzeigen von Schritten ist optional

Es macht keinen Sinn, Fortschrittsbalken mit Schritten anzuzeigen. Sie nehmen viel Platz ein. Die britische Regierung hat die Messlatte entfernt und die Umstellung hat sich nicht geändert.

Bild

3. Das Thema mit dem Speichern von 7 ± 2 Elementen ist nicht mehr relevant

Warum: Weil sich niemand an irgendetwas auf den Seiten erinnert. Sie können einfach nach oben scrollen, wenn Sie etwas vergessen haben.

4. Fügen Sie die Adressfelder in die Reihenfolge ein, die in einer bestimmten Region akzeptiert wurde

Dies ist nicht aus dem Buch, sondern aus meinem Aufsatz. Die International Postal Association hat Regeln geschrieben. In Russland wurde beispielsweise das folgende Verfahren angewendet:

Ivanov Ivan
st. Lesnaya, Haus 5, apt. elf
Moskau
Russland
PLZ

Form Designmuster. Buchrezension