Contenu
- 1. Ne marquez pas les champs obligatoires
- 2. N'utilisez pas de filateurs
- 3. Avoir un seul type de bouton ou mieux encore un seul bouton par formulaire
- 4. Champs de blocs
- 5. Pensez à la raison pour laquelle vous demandez quelque chose et à ce que vous ressentez pour l'utilisateur
- 6. Les dates sont des petits gars qui se tortillent
- 7. Les formulaires comme métier de développeur
- 8. N'utilisez pas de colonnes dans les formulaires
- 9. N'utilisez pas deux champs quand on le fera
- 10. Soyez gentil
Formulaires, il n’ya rien de plus détesté par les designers que les formes. Ils ne font pas nécessairement ressortir la créativité, n'est-ce pas? Il est peut-être temps de revoir les formulaires et de comprendre qu’un formulaire, dans sa forme la plus élémentaire, est une conversation entre l’utilisateur et le logiciel.
Oubliez le pointer-cliquer, les formulaires représentent l'interaction la plus riche à laquelle nous serons confrontés en tant que concepteurs numériques. La prochaine fois qu’un formulaire se présente à vous, ne pensez pas qu’il s’agit simplement d’appliquer de jolis effets CSS ou d’ajouter une belle touche jQuery. La conception de formulaires est beaucoup plus approfondie.
J'ai testé des centaines de formulaires et conçu des formulaires complexes pour les compagnies d'assurance, les interactions de réservation de vacances et bien d'autres. Il y a de fortes chances que vous ayez utilisé l'un de mes formulaires au cours des derniers mois.
Voici les leçons que j'aurais souhaité avoir apprises avant de commencer à concevoir des formulaires.
1. Ne marquez pas les champs obligatoires
Vous connaissez le petit astérisque qui désigne un champ obligatoire? J'ai vu cela échouer à plusieurs reprises lors des tests utilisateurs. En tant que concept, les champs obligatoires n'ont pas beaucoup de sens, ils n'ont pas d'équivalent hors ligne. Ils sont parfaits pour les développeurs car ils offrent une belle approche de finition en noir et blanc. Le champ astérisque et obligatoire échoue car il s'agit d'un comportement appris. Le comportement typique que j'ai vu dans les tests utilisateurs est celui de l'utilisateur qui remplit le formulaire en haut et le termine lorsqu'il y a quelque chose pour l'arrêter ou qu'il appuie sur un bouton.
La solution est simple, marquez les champs facultatifs, marquez l'endroit où notre gentil utilisateur doit s'arrêter et réfléchir s'il a besoin de remplir ce champ.
2. N'utilisez pas de filateurs
HTML5 est génial, n'est-ce pas? Il offre de nombreux nouveaux outils brillants passionnants avec lesquels jouer. Nous devons réfléchir à la pertinence de nos nouveaux jouets. Le champ numérique comprend désormais de petites flèches vers le haut et vers le bas pour permettre à l'utilisateur de parcourir les nombres.
Ici, nous avons deux problèmes. Premièrement, l'affichage par défaut des flèches dans le navigateur les rend vraiment petites. Il est très difficile de cliquer et les gros doigts parmi nous vont se débattre sur un iPhone. Cela s'appelle la loi de Fitt, plus un élément est petit, plus il est difficile de cliquer dessus.
Mais je vous entends crier, vous pouvez simplement taper le numéro directement dans le champ numérique. Oui, vous pouvez, mais regardons l'affichage du navigateur, les flèches haut / bas ressemblent à notre fidèle ami, la boîte de sélection. Un utilisateur présenté avec une double flèche pour la première fois va supposer, comme il ressemble à une zone de sélection, qu'il ne peut pas y taper.
Mon conseil est de rester clair jusqu'à ce qu'ils deviennent plus courants ou que les développeurs de navigateurs trient la conception par défaut.
3. Avoir un seul type de bouton ou mieux encore un seul bouton par formulaire
Il existe un principe de psychologie peu connu appelé la loi de Hick. La loi de Hick stipule que plus d’options nous sont offertes, plus il est difficile de faire un choix. Pas sorcier, je sais, mais une règle à garder à l'esprit.
Vous pouvez aider votre gentil utilisateur en l'aidant à faire un choix. En faisant de tous les boutons principaux une couleur et en n'en ayant qu'un par page, le choix est plus facile. Quel est le bouton sur lequel je devrais appuyer? Oh, c’est facile, c’est la grande couleur.
4. Champs de blocs
J'ai étudié les neurosciences dans une vie antérieure et donc étudié la psychologie de la mémoire - en particulier la mémoire à court terme ou de travail. Maintenant avant de le dire; non, la capacité de mémoire à court terme n'est pas de 7 +/- 2, 4 +/- 1 ou chez les humains parlent de trois à cinq morceaux. En tant qu'humains, nous sommes excellents pour évaluer les stimuli visuels, la contrainte est que nous sommes meilleurs lorsque le nombre est plus petit. Le découpage d'un formulaire en petits groupes facilite l'évaluation, car ce que l'utilisateur doit saisir dans le formulaire provient souvent de sa mémoire.
Assurez-vous que vos groupes de champs ont une longueur d'environ quatre.
5. Pensez à la raison pour laquelle vous demandez quelque chose et à ce que vous ressentez pour l'utilisateur
C'est probablement le conseil le plus simple que je donne, mais il est souvent le moins utilisé.
Prenons ce qui suit:
Remettez en question chaque question que vous posez. Est-ce nécessaire? Qu'est-ce que ça fait d'être demandé cela?
Le plus souvent, il y a un besoin commercial de poser une question et nous, en tant que concepteurs, pouvons discuter de la nécessité jusqu'à ce que nous soyons bleus. La question doit être posée. En comprenant le besoin commercial de ces données, nous pouvons souvent faire des compromis.
Nous pouvons vous aider en expliquant à notre gentil utilisateur pourquoi nous devons poser cette question. Rassurez-vous sur l'utilisation et le partage de ces données et soyez généralement gentil.
Reprenons notre exemple:
C'est toujours une question difficile, mais j'espère que nous avons adouci la pilule.
6. Les dates sont des petits gars qui se tortillent
La saisie des dates peut être un véritable défi et il y a quelques écueils que vous pouvez éviter. Le plus gros problème est celui des erreurs.
L'approche la plus simple consiste à lancer un calendrier. Il convient de noter que les semaines commencent un lundi au Royaume-Uni et un dimanche aux États-Unis. Si votre utilisateur ne se concentre pas, il peut très bien sélectionner un dimanche alors qu'il veut dire un lundi.
Il convient également de mentionner les formats de date internationaux. Les États-Unis placent le mois d’abord, au Japon, l’année est la première. Ainsi, une date comme le 4/5/12 pourrait être interprétée de trois manières.
C’est pourquoi il est préférable d’utiliser des cases de sélection.
7. Les formulaires comme métier de développeur
Les formulaires sont aussi bien destinés aux développeurs qu'aux concepteurs. Comprendre les erreurs possibles lors de la saisie de données et de la conception de votre code back-end pour y faire face est un défi.
En voici une simple. Saisie d'une valeur de devise. Les erreurs possibles que l'utilisateur pourrait commettre sont énormes. Forcer les formats de données que les utilisateurs doivent respecter est frustrant pour votre utilisateur et, avouons-le, un peu paresseux de la part des développeurs.
Quel meilleur défi pour un développeur que de créer un formulaire à l'épreuve des balles.
8. N'utilisez pas de colonnes dans les formulaires
Le gros problème de l'utilisation des colonnes dans les formulaires est le flux. Nous commençons un formulaire en haut et nous terminons en bas. En introduisant des colonnes, le flux de la forme peut être interrompu.
Ne supposez pas que les utilisateurs naviguent dans les formulaires et que le focus est donc un moyen de naviguer dans les formulaires dans les colonnes. C’est rare que j’ai vu cela lors des tests utilisateurs. La plupart du temps, nous voyons entrer les détails, cliquer sur le champ suivant avec la souris / trackpad / doigt puis entrer les détails et ainsi de suite.
9. N'utilisez pas deux champs quand on le fera
La plupart des gens ne sont pas des dactylographes tactiles. Lors des tests utilisateur, nous voyons les gens regarder le clavier pendant qu'ils tapent.
Lors de la saisie d'un numéro de téléphone, le fractionnement du champ du formulaire, par exemple pour ajouter un indicatif régional et un numéro, pose de réels problèmes. Les utilisateurs ne voient pas ou ne se souviennent pas qu'il y a deux champs, alors entrez le nombre complet dans le premier champ, pire si le champ est limité à un certain nombre de caractères.
Utilisez un seul champ pour le numéro de téléphone, il en va de même pour le numéro de maison / rue - utilisez une seule zone de saisie de texte.
10. Soyez gentil
Vous seriez surpris du nombre de messages d’erreur assez grossiers qui existent.
Voici un exemple de celui que j'ai rencontré récemment.
Le fait même qu’ils suggèrent que vous saisissiez volontiers une date dans le futur et ensuite une réponse plutôt facétieuse, eh bien, ce n’est pas très gentil.
Remettez-vous à la place de l'utilisateur, comment vous sentiriez-vous en voyant cette erreur? Agacé? Peut-être même pire. Être gentil est facile.
J'ai produit un berceau / aide-mémoire téléchargeable pour vous aider à concevoir de meilleurs formulaires. Il comprend de nombreuses autres meilleures pratiques pour concevoir de meilleurs formulaires.
