Validation de champ obligatoire
Comment la validation obligatoire des champs doit-elle être gérée visuellement?
Remarque: supposez que l'astérisque est rouge
*Name:[_______________]
ou
Name:*[_______________]
ou
Name: [_______________]*
ou
Name: [____red bg____ ]ou
Name(<- font color red): [_______________]ou
Tu me dis une meilleure façon!
Il n'y a jamais de bonne ou de mauvaise réponse avec ce type de questions et cela dépend en grande partie du personnage de vos utilisateurs (ingénieurs vs utilisateurs expérimentés vs tante alice qui n'a jamais utilisé d'ordinateur) et du contexte.
Une règle générale consiste à utiliser
label [input ] [validation ]
Utiliser la zone de validation pour un astérisque rouge pour indiquer un champ obligatoire ou un message d'erreur après avoir validé le formulaire (ou les deux).
Le site Web Simply Accessible a une bonne écriture concise sur les champs de formulaire requis ici: http://simplyaccessible.com/article/required-form-fields
Cela dépend beaucoup de divers facteurs.
- En règle générale: il devrait y avoir une indication de texte (astérisque) et une indication visuelle , comme avoir juste un coup d'œil d'une seconde au formulaire, vous devez être en mesure de comprendre quels champs sont requis. Par exemple, vous pouvez ajouter un astérisque sur le côté de l'étiquette (mieux s'il est formaté légèrement différemment de l'étiquette elle-même) et ajouter une bordure plus intense aux champs obligatoires.
- En tant que deuxième règle générale, essayez très fort de voir si vous pouvez simplifier un formulaire: très souvent, il existe des moyens de minimiser les formulaires et d'éviter tous les champs facultatifs . Par exemple, les formulaires d'inscription minimalistes pourraient demander uniquement l'e-mail et laisser tout le reste aux suivis et aux widgets comme "Votre profil est complet à 90%".
- Soyez cohérent dans tout le site Web, c'est vraiment important, car cela n'oblige pas l'utilisateur à apprendre à chaque fois.
- Notez que si l'astérisque est aligné ensemble sur la même colonne, c'est légèrement mieux (mais légèrement, il est généralement évité de rendre le formulaire plus agréable, les formulaires Nice fonctionnent mieux que les pires).
- Si la plupart des éléments du formulaire sont obligatoires, il est probablement préférable de marquer ceux facultatifs .
Gotchas:
- Ne vous fiez pas uniquement aux couleurs (gênant si vous ne savez pas bien lire les couleurs).
- Ne vous fiez pas uniquement à l'astérisque (vous forcez l'utilisateur à réfléchir à ce qui est obligatoire ou non).
- Ne brisez pas le formulaire: bien qu'il semble hors de portée de cette question, un formulaire poli et aligné verticalement avec des étiquettes claires aide souvent beaucoup à comprendre les champs obligatoires: puisqu'un seul balayage vertical est plus facile, il est également plus facile de détecter les champs obligatoires.
Je pensais que vous pourriez être intéressé par les dernières recherches de Baymards: http://baymard.com/blog/required-optional-form-fields
Le résumé est que:
- Lors de l'analyse comparative des 100 principaux processus de paiement aux États-Unis, seuls 9% des sites ont explicitement marqué les deux types de champs
- En désignant explicitement les champs facultatifs et obligatoires, l'utilisateur n'est pas obligé de déduire quoi que ce soit et peut rester concentré uniquement sur le champ qu'il remplit et peut ainsi progresser de manière transparente dans tout le formulaire champ par champ sans aucun va-et-vient balayage des champs précédents.
- L'erreur la plus courante - commise par 63% des 100 principales caisses électroniques - est de ne désigner qu'un seul des types
- Lors des tests de paiement mobile, 75% des sujets testés ont rencontré de graves problèmes d'utilisation des formulaires sur des sites qui n'ont pas clairement marqué les champs obligatoires et facultatifs.
Et leur recommandation:
Garder l'astérisque pourrait être utile plutôt que simplement un indicateur basé sur la couleur (+1 pour l'accessibilité). Ajoutez également un attribut de titre sur l'astérisque, par exemple <span title = "Champ obligatoire"> * </span>
C'est probablement nécessaire de toute façon pour le styler de manière appropriée
Je ne pense pas que la position de l'astérisque soit critique - soyez juste cohérent!
Je pense que j'ai fait tout cela à un moment ou à un autre. Ce dans quoi je suis tombé plus récemment est quelque chose qui demande plus de travail mais je pense que c'est mieux pour l'utilisateur. Fondamentalement, vous donnez une petite boîte popover rouge avec une flèche tronquée pointant vers le champ en question, en leur disant que c'est un champ obligatoire. L'afficher au-dessus du champ dans une couleur vive, je pense, fait bien passer le point sans altérer le flux du reste du document avec du contenu inséré ou du texte en gras.
Cela devient plus compliqué si vous avez plusieurs erreurs à quel point l'affichage de plusieurs fenêtres contextuelles est très encombrant, vous décidez donc d'afficher uniquement la première erreur ou d'afficher une seule erreur à la fois et une fois l'un des conflits résolus, afficher l'erreur suivante .