❕ 🅾️ 😲 Modèles de conception de formulaire. Critique de livre 🍋 🔱 👉🏼

Introduction par l'auteur de la revue

Le livre révèle, parfois pas évident pour les concepteurs et les développeurs front-end, les thèmes de la conception sur le terrain, le concept de travailler avec les types de données et la convivialité. Le livre sera utile à la fois aux débutants et aux concepteurs avertis en matière d'interface, car le premier donnera une compréhension des bases, et le second donnera matière à réflexion sur les modèles de conception, parfois controversés. La revue sera présentée sous forme de courts résumés du livre et de brefs commentaires de la critique.

Partie un. À propos des champs

1. Une étiquette en haut vaut mieux qu'une étiquette à gauche.

Pourquoi: La thèse est devenue un classique du genre. De nombreux articles ont été écrits sur ce sujet, par exemple celui-ci et des centaines d'articles similaires. De plus, en plaçant l'étiquette sur le dessus, nous obtenons plus d'espace si l'étiquette est longue. Cela semble évident, mais de nombreux designers mettent obstinément des étiquettes à gauche.

2. Espaces réservés pour ne pas décrire les règles de remplissage

Pourquoi: les espaces réservés disparaissent lorsque vous cliquez sur + recadrer dans le champ.

3. Ne plus demander de mot de passe

Pourquoi: Enrage d'entrer deux fois.

4. Texte d'erreur à écrire entre l'étiquette et le champ

Pourquoi: il ne sera pas fermé par une saisie semi-automatique ou un clavier sur un téléphone mobile.

Opinion: Il semble que la thèse soit compréhensible, mais elle semble vraiment super inhabituelle. Pendant tout le temps de la conception d'interfaces (9+ ans), je ne l'ai rencontré qu'une seule fois et seulement dans les mises en page d'un concepteur. Mais peut-être vaut-il la peine de mettre ce modèle en service.

5. Il vaut mieux ne pas utiliser les sélections

Pourquoi: Masquer les options, ne pas zoomer sur certains appareils, un clic supplémentaire, quelqu'un essaie de leur écrire.

Avis: J'essaie de ne pas utiliser de sélections si les points sont inférieurs ou égaux au 3e. Si c'est le cas, il est plus facile de créer des tags ou un groupe de radio. C'est peut-être le fait que certaines personnes croient qu'il s'agit d'un champ de saisie, pas une sélection et essaient d'y écrire, a donné lieu à un hybride de saisie et de sélection sous la forme d'un menu déroulant, mais le premier élément est un champ de saisie (le plus souvent une recherche). C'est à la fois une solution et une béquille à la fois.

6. Lorsque vous n'avez pas besoin d'un calendrier pour indiquer les dates

Un calendrier n'est pas nécessaire pour:

Dates de naissance, car tout le monde se souvient de cette date par cœur et est plus facile à saisir à la main;
Dates d'expiration de la carte;
Les dates qui sont inscrites dans les documents et il vous suffit de les retaper sans hésitation.

7. Créez une «phrase secrète»

Pourquoi: Il y a une opinion que la phrase est plus facile à retenir.
Avis: ¯ \ _ (ツ) _ / ¯

8. Utilisez "- / +" au lieu des sélections

Règle: utilisez plus et moins si les nombres ne sont pas grands. Un bon exemple est le choix du nombre de passagers par vol. Le livre dit qu'il y a eu des tests sur ce sujet et que le plus / moins s'est montré mieux.

9. La taille du champ doit être sous le contenu

Pourquoi: Oui, car c'est logique! Et peu importe que de cette façon les champs ne soient pas uniformes. Mais en une demi-seconde, il est clair quel type de contenu il devrait y avoir.

10. Parlez là où est l'erreur

Pourquoi n'est-il généralement pas le cas: on pense que ce n'est pas une sécurité, après tout, en disant que le mot de passe n'est pas correct, nous suggérons que la connexion est correcte. Mais en fait, les pirates ne vérifieront pas tous les mots de passe qui existent dans le monde s'ils découvrent que la connexion, qui est le plus souvent une adresse e-mail. courrier et est ouvert des informations appropriées.

Deuxième partie. À propos des boutons

1. Alignez les boutons vers la gauche

Pourquoi: le regard va de gauche à droite. Une exception peut être une fenêtre modale dans laquelle il n'y a pas de champs de saisie. Par exemple, dans la conception matérielle de Google du bouton dans les modaux à droite.

2. Ne désactivez pas le bouton

Pourquoi: il ne sera pas possible d'y accéder en appuyant sur Tab, il ne sera pas lu par certains lecteurs d'écran et il est mal visible en raison de la matité.

Opinion: Jusqu'à récemment, je préférais concevoir un bouton pour faire comprendre aux utilisateurs qu'ils sous-remplissaient quelque chose dans le formulaire. Et en quelque sorte, il ne doutait même pas que cela ne soit pas évident. Les tests sur les utilisateurs ont montré que les utilisateurs voient une couleur grise, mais tout le monde ne comprend pas que cela signifie que quelque chose ne va pas. C'est comme si vous aviez vu pour la première fois un feu de circulation et que vous pouviez distinguer ses couleurs, mais que vous ne saviez tout simplement pas ce que chaque couleur signifie. Vous auriez peu importe ce qui brûle maintenant.

3. Écrivez sur les boutons un verbe

Pourquoi: il est plus clair ce qui va se passer.

4. Ne mettez pas le lien "Je ne me souviens pas du mot de passe" devant le bouton

Pourquoi: Pour ceux qui parcourent les champs via l'onglet, cela peut fonctionner comme aller à un lien au lieu d'un bouton et par habitude, il appuiera sur Entrée, exécutant un script de récupération de mot de passe inutile.

5. Avec une forme longue, n'ayez pas honte de mettre un bouton sur le dessus

Opinion: Une sorte de non-sens. Il est préférable de fixer le bouton par le bas afin qu'il soit toujours visible lors du défilement. Mais, par exemple, Yandex.Mail met un bouton sur le dessus.

Partie trois. Navigateurs et automatisation

N'effectuez pas de transitions automatiques d'un champ à un autre lorsque vous saisissez le nombre de caractères requis. Cela peut dérouter les utilisateurs
Les navigateurs compatibles HTML5 ont des validateurs de formulaire intégrés et chaque navigateur a sa propre logique. Il est logique de désactiver la validation par défaut
Il est nécessaire de désactiver la correction automatique des erreurs et d'augmenter automatiquement la première lettre. Sinon, il semble aux utilisateurs que c'était une erreur et les données ne seraient pas acceptées
Selon les statistiques, l'auto-complétion dans Chrome est utilisée 9 milliards de fois par mois. En moyenne, cela permet à l'utilisateur d'économiser 12 secondes, ce qui donne 1 250 000 jours par mois. Fait amusant
Ne filtrez pas sans cliquer sur le bouton "Filtrer". Un bouton est nécessaire, par exemple, s'il n'y a pas seulement des radios et des cases à cocher, mais aussi des champs de saisie (coût, certains intervalles, etc.). Mais ils continuent eux-mêmes à écrire sur les tests, où les utilisateurs pensaient que le filtre ne fonctionne pas sans se rendre compte que vous devez cliquer sur le bouton "Filtre". ¯ \ _ (ツ) _ / ¯

Quatrième partie. De tout

À un moment donné, le livre est passé des formulaires à la description de l'utilisabilité des icônes et d'autres choses qui ne sont pas pertinentes pour le sujet. Ils écrivent dans le livre qu'il est plutôt étrange de voir des textes sur les icônes ici, mais les icônes font également partie de l'interface, comme les formulaires, et peuvent donc être décrites. Mais j'ai néanmoins trouvé des choses assez intéressantes parmi les petites informations utiles. À leur sujet ci-dessous.

1. La diffusion des champs Login et Mot de passe sur différentes pages n'est pas une honte

Sur le site Web de GOV.UK, sous forme d'autorisation, ils ont fait une connexion sur une page, et le mot de passe sur une autre (ce n'est plus le cas) et les utilisateurs n'ont rien remarqué d'étrange.

Opinion: Maintenant, je remarque de plus en plus cette approche. De Google à divers services comme Abstract.

2. L'affichage des étapes est facultatif

Il est inutile d'afficher des barres de progression avec des étapes. Ils prennent beaucoup de place. Le gouvernement britannique a supprimé la barre et la conversion n'a pas changé.

3. Le sujet avec la mémorisation de 7 ± 2 éléments n'est plus pertinent

Pourquoi: Parce que personne ne se souvient de rien sur les sites. Vous pouvez simplement faire défiler vers le haut si vous oubliez quelque chose.

4. Mettez les champs d'adresse dans l'ordre accepté dans une région particulière

Ce n'est pas du livre, mais de mon essai. L' Association postale internationale a des règles écrites. Par exemple, en Russie, la procédure suivante a été adoptée:

Ivanov Ivan
st. Lesnaya, maison 5, app. Onze
Moscou
Russie
NPA

Modèles de conception de formulaire. Critique de livre