Champs obligatoires
Quelles sont les règles relatives à l'indication des champs obligatoires dans un flux contenant certaines pages qui contiennent tous les champs obligatoires et d'autres qui sont mixtes?
Est-il préférable de désigner les champs facultatifs dans ce cas?
Le but d'indicateurs comme celui-ci est d'informer l'utilisateur lorsque quelque chose est différent. Alors, laissez le formulaire vous dire comment vous devez l'aborder. En général, si la plupart de votre formulaire est requis, indiquez-le à l'avance, puis indiquez les champs Facultatif en conséquence. Inversement, si la plupart de votre formulaire est facultatif mais que quelques-uns sont obligatoires, marquez les champs requis.
Ce court article de Luke Wroblewski date de 2008, mais il est toujours applicable aujourd'hui:
Dans la liste de discussion de l'Interaction Design Association (IxDA), Erin Walsh a partagé quelques informations intéressantes sur le marquage des champs de formulaire obligatoires et facultatifs.
"Nous avons récemment fait des tests de prototypes sur plusieurs formulaires de recherche avec un mélange de champs obligatoires et facultatifs. Dans l'équipe, nous étions divisés sur la meilleure approche, nous avons donc essayé de distinguer des méthodes: l'une avec une option facultative, l'autre avec ces champs ayant un indicateur visuel différent. Bien que la taille de l'échantillon soit limitée, le "Facultatif" a gagné haut la main. Remarquablement, certains participants ont même commenté à quel point ils ont aimé qu'il soit dit "facultatif ici". Je sais que notre équipe de l'interface utilisateur n'était pas ravie, mais il était extrêmement avantageux de l'énoncer plutôt que d'utiliser une icône ou d'autres indicateurs visuels. "
Cette constatation correspond aux meilleures pratiques que je préconise dans la conception de formulaires Web:
"Inclure littéralement l'expression" facultatif "après une étiquette est beaucoup plus clair que n'importe quel symbole visuel que vous pourriez utiliser pour signifier la même chose. Quelqu'un peut toujours se demander" que signifie cet astérisque? " et je dois aller à la recherche d'une légende qui explique les choses. "
(( Souligné le mien)
Comme les technologies changent et évoluent, nous pouvons expérimenter tant de conceptions pour effectuer la même tâche plutôt que d'utiliser une étoile rouge devant le champ requis,
C'est une bonne pratique selon le point de vue ux de ne pas gâcher le champ optionnel et obligatoire, de les séparer et de laisser l'utilisateur remplir les informations nécessaires. Très probablement, nous allons utiliser html5 ces jours-ci afin que nous puissions essayer des trucs incroyables comme indiqué dans l'image pour faire de la place pour les autres champs et l'étiquette!
passez une bonne journée!
Lorsqu'il s'agit de situations comme celle-ci, la cohérence est la clé. L'indication générale qu'il y a plus d'informations concernant un champ (comme obligatoire ou facultatif) est l'astérisque (*) à côté du champ, puis au bas du formulaire (ou à un endroit facilement visible), expliquez ce que signifie le *.
Si vous allez utiliser le * pour indiquer un champ obligatoire, vous pourriez envisager d'avoir un surlignage rouge autour de l'entrée. Mais d'après votre situation, il semble que vous n'ayez que quelques endroits où les champs sont facultatifs. En fonction de la taille de votre liste et du nombre de celles-ci, vous pouvez vous en sortir en mettant simplement du texte plus petit directement sous l'étiquette, "(facultatif)", c'est-à-dire.
L'étiquette: Le champ de saisie
L'étiquette: Le champ de saisie
L'étiquette: Le champ de saisie
(optionnel)
L'étiquette: Le champ de saisie
Ou si dans ce cas particulier dans le flux il y a plus de champs optionnels que de champs obligatoires, peut-être avoir le * à côté de tous les champs optionnels au lieu du texte "(optionnel)".
Mais une chose est généralement universelle. Les * rouges sont pour les champs obligatoires. Les noirs * peuvent être utilisés pour les deux, et dans la plupart des cas (ce n'est en aucun cas une règle, juste une observation) les bleus * sont facultatifs. Mais assurez-vous de spécifier, quelque part où l'utilisateur peut facilement voir, ce que les * représentent.
Si votre liste ne comporte que quelques champs qui sont facultatifs, j'irais de l'avant et utiliserais le texte "(facultatif)". S'il y en a plusieurs, j'utiliserais le *. Si tous vos articles sont facultatifs, fournissez un bouton "Ignorer" quelque part qui vous amènera à la page suivante de votre flux.
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:
