L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Les champs de texte de conception matérielle sont mal conçus
Je conçois des formulaires depuis plus de 20 ans maintenant, et j'en ai testé beaucoup pour de grandes organisations comme Boots Just Eat et Gov.uk . Un sujet qui revient souvent avec les formulaires est: où mettre l'étiquette. Au début, nous parlions d'étiquettes alignées à gauche et d'étiquettes alignées en haut.
Ces jours-ci, l'accent est davantage mis sur les espaces réservés qui remplacent les étiquettes et les étiquettes flottantes . Ces derniers commencent à l'intérieur de l'entrée. Lorsque l’utilisateur commence à taper, l’étiquette «flotte» vers le haut pour laisser de la place pour la réponse:
Certains pensent que les libellés flottants sont les meilleurs car Google Material Design les utilise – vous savez, parce que "c'est Google". Mais dans ce cas, Google se trompe.
Au lieu de cela, je recommande d'utiliser des champs de texte conventionnels qui ont:
- L'étiquette en dehors de l'entrée (pour dire à l'utilisateur quoi taper),
- Une bordure distincte tout le chemin autour (pour indiquer clairement où va la réponse).
Dans cet article, je vais vous expliquer pourquoi je recommande toujours les champs de texte conventionnels et pourquoi Google a tort d'utiliser des étiquettes flottantes pour la conception de matériaux.
Les étiquettes flottantes sont meilleures qu'une alternative courante mais elles sont toujours problématiques
Les étiquettes flottantes ont été conçues pour résoudre certains problèmes avec une alternative couramment utilisée: étiquettes d'espace réservé . C'est là que l'étiquette est placée à l'intérieur de l'entrée, mais disparaît lorsque l'utilisateur commence à taper:
Ayant vu de nombreuses personnes interagir avec les formulaires via mon travail de première main Je sais que les étiquettes d'espace réservé sont problématiques .
C'est parce que, par exemple, elles:
Les étiquettes flottantes ne résolvent pas 2 de ces problèmes: un contraste médiocre et le risque de l'étiquette étant confondue avec une réponse réelle. Et tandis qu'ils tentent de résoudre le problème de la disparition de l'étiquette, ce faisant, les étiquettes flottantes posent également de nombreux autres problèmes .
Par exemple, la taille de l'étiquette doit être minuscule pour pour s'adapter à l'intérieur de la boîte, ce qui peut rendre la lecture difficile. Et les étiquettes longues ne peuvent pas être utilisées car elles seront rognées par l'entrée :
Les champs de texte conventionnels sont meilleurs que les étiquettes d'espace réservé et les étiquettes flottantes
Les champs de texte conventionnels n'ont pas les problèmes ci-dessus car il est clair où va la réponse et ils sont lisibles , étiquette facilement disponible. Les étiquettes peuvent être de n'importe quelle longueur et le texte d'indication, si nécessaire, est également facile à utiliser.
J'ai vu des centaines de personnes interagir avec des formulaires et j'ai vu beaucoup d'entre elles lutter. Mais pas une seule fois, cela n'a été dû à l'utilisation d'un champ de texte conventionnel. Ils prennent un peu plus d'espace vertical. Mais économiser de l'espace au détriment de la clarté, de la facilité d'utilisation et de l'accessibilité est un mauvais compromis à faire.
Le test de Google n'a pas inclus les champs de texte conventionnels
Article de Google, L'évolution des champs de texte de Material Design montre que seulement 2 variantes ont été testées, toutes deux utilisant des étiquettes flottantes.
Surtout, le test n'incluait pas de champs de texte conventionnels, ce qui signifie qu'ils n'ont pas réellement comparé la facilité d'utilisation de leur conception d'étiquette flottante avec les champs de texte conventionnels.
Et après avoir lu Google réponses aux commentaires sur leur article, il semble que la convivialité n'était pas leur priorité absolue.
Google a priorisé par inadvertance l'esthétique par rapport à l'utilisabilité
J'ai cherché pourquoi Material Design utilise des étiquettes flottantes et j'ai découvert les commentaires de Michael Gilbert, un concepteur qui a travaillé sur
Les commentaires indiquent qu'ils ont essayé d'équilibrer l'esthétique et la convivialité.
Cela semble impliquer que l'accent était davantage mis sur la forme que sur la fonction […] ou même le désir de simplement différencier les composants Material des boîtes de saisie éprouvées (ennuyeuses). […] Des recherches ont-elles été menées sur les entrées originales qui ont confirmé qu'elles atteignaient un objectif qui n'était pas atteint par les entrées de la boîte? Y a-t-il quelque chose qui s'est avéré utile avec un simple soulignement?
Les décisions de conception derrière le champ de texte d'origine sont antérieures à mon temps dans l'équipe, mais je pense que l'objectif était probablement similaire [to this research]: Équilibrez convivialité et style. Je crois qu'à l'époque on penchait vers le minimalisme mettant l'accent sur la couleur et l'animation pour mettre en valeur la convivialité.
[…] c'est l'un de ces moments où je me demande pourquoi toutes ces recherches étaient nécessaires car j'ai longtemps pensé que l'ancien design était défectueux pour toutes les raisons que vous avez mentionnées.
[…] le but de la recherche ici n'était pas de déterminer simplement qu'une version était meilleure qu'une autre […]. Cette étude s'est plutôt concentrée sur l'identification des caractéristiques de la conception qui ont conduit aux expériences les plus belles et les plus utilisables .
Même si Google visait l'équilibre, à la fin, ils ont sacrifié par inadvertance la convivialité pour le «minimalisme» et «une belle expérience».
Mais esthétique et convivialité ne sont pas en concurrence . Quelque chose peut paraître beau sans causer de problèmes aux utilisateurs. En fait, ces qualités vont de pair.
Conclusion
Les étiquettes flottantes sont certainement moins problématiques que les étiquettes d'espace réservé. Mais les champs de texte conventionnels sont meilleurs que les étiquettes flottantes car ils ressemblent à des champs de formulaire et l'étiquette est facile à lire et disponible à tout moment.
L'esthétique est importante, mais mettre l'étiquette à l'intérieur de la boîte ne la rend pas belle. Ce qu'il fait, cependant, c'est le rendre manifestement plus difficile à utiliser.
Remerciements
Merci à Caroline Jarrett et Amy Hupe pour m'avoir aidé à écrire ceci. Et merci à Maximilian Franzke Olivier Van Biervliet Dan Vidrasan Fabien Marry pour leurs commentaires sur une version antérieure de cet article.
(vf, yk, il)
Source link