Quelle est la meilleure façon de mettre en évidence un champ obligatoire sur un formulaire Web avant la soumission?
Cela semble subjectif, et c'est; un de mes clients voudrait que je souligne les champs obligatoires sur les formulaires Web dans leur application avec un astérisque rouge, et je cherche une alternative car les astérisques rouges signifient généralement qu'il y a une erreur pour moi.
Comment informer un utilisateur des champs obligatoires? (Un par réponse, s'il vous plaît.)
PDATE: Ceci est pour indiquer quels champs sont requis avant que la validation/publication ne se produise.
Étant donné que 95% de tous les champs sont obligatoires sur techinsurance.com, j'ai décidé d'utiliser simplement le gras pour indiquer qu'un champ est requis et d'écrire le mot (facultatif) à côté des champs facultatifs pour réduire l'encombrement.
par exemple.
Prénom
Nom
Numéro de téléphone professionnel
Numéro de mobile (facultatif)
Et peut-être tout aussi importants sont les messages d'erreur eux-mêmes. Je les ai rendus aussi évidents que possible ...
champ obligatoire ...
avec erreur ...
Ces décisions ont été prises après des années d'avoir un site Web avec les astérisques rouges semi-traditionnels pour indiquer un champ requis. Ces astérisques fonctionnaient la plupart du temps. Le problème était quand il y avait une erreur de validation. Certaines de nos pages peuvent être assez longues et les erreurs de validation rouges ne ressortent pas suffisamment sur la page lorsqu'elle était déjà encombrée d'astérisques rouges. Je le sais parce que parfois les gens étaient suffisamment frustrés pour nous appeler à ce sujet. Mais toutes les indications montrent que la nouvelle conception (ci-dessus) a résolu le problème.
Je pense que la meilleure façon de procéder consiste à épeler le mot "requis" après le champ de saisie. Ce sentiment se reflète également dans la conception de formulaires Web par Luke Wroblewski: http://www.lukew.com/ff/entry.asp?725
Bien que l'exemple de lien parle de champs facultatifs au lieu de champs obligatoires, je pense que le principal reste le même - les utilisateurs préfèrent le faire rédiger pour eux plutôt que d'inclure des indicateurs visuels.
De plus, quelque chose à regarder peut indiquer les champs qui sont des options au lieu des champs qui sont obligatoires. Pour moi, quelle que soit l'exception est celle qui doit être notée. Par exemple, si vous avez 10 champs, et 8 d'entre eux sont obligatoires, au lieu d'écrire "Obligatoire" pour 8 champs, écrivez "Facultatif" pour les 2 exceptions. Mais si seulement 2 sont requis, écrivez "Requis" par ces 2, car ils sont l'exception.
Cette question peut être plus problématique que vous ne l'imaginez.
Par exemple, certaines affiches ont suggéré d'utiliser l'astérisque pour signifier "obligatoire", le problème avec cela est que certains sites Web utilisent l'inverse et mettent un astérisque à côté des champs qui sont facultatifs. Les utilisateurs ne savent pas explicitement si un astérisque est un champ "obligatoire" ou un champ facultatif en jetant un coup d'œil, et doivent enquêter davantage, interrompre leur flux, les frustrer au sujet du processus de formulaire et peuvent dans certains cas conduire à l'abandon du formulaire tous ensemble.
La réponse de RussellUresti réitérant que la recherche de Luke Wroblewski dans "Web Form Design" pour simplement écrire "requis" à côté des champs obligatoires a également été (dans mes 10 ans d'expérience) l'approche qui a donné le plus haut débit sur les formulaires et conduit à la moindre confusion.
Associé et autre chose à considérer, si un champ de formulaire est facultatif, pouvez-vous utiliser la logique vous-même pour obtenir la réponse sans demander à l'utilisateur?
Par exemple, si vous avez besoin de savoir si l'utilisateur est un homme ou une femme, vous pouvez déduire une réponse dans certains cas par le titre qu'il choisit pour son nom (mademoiselle, mme, etc. implique femme) et supprime la question de l'utilisateur.
Un autre point à considérer est pour des choses comme les champs d'adresse, si vous pouvez demander le code postal et faire une recherche de code postal, en affichant uniquement les champs d'adresse si l'utilisateur choisit d'entrer manuellement l'adresse ou si la recherche de code postal échoue, vous pouvez éviter beaucoup de données facultatives cela peut rendre le formulaire plus long qu'il ne l'est réellement et provoquer le départ de l'utilisateur.
D'après mon expérience, la plupart du temps, si un champ est facultatif, il y a de grandes raisons de supprimer complètement le champ. Évidemment, ce n'est pas pratique tout le temps, mais dans certains cas, cela peut être et aidera à réduire l'encombrement visuel, quelle que soit l'approche que vous décidez d'adopter.
Une autre solution consiste à diviser le formulaire en deux sections, en réunissant tous les champs obligatoires, puis en étiquetant la section entière "Obligatoire".
La meilleure façon que j'ai trouvée est de mettre un astérisque à l'intérieur et aligné à droite.
Ce n'est sûrement pas le bon endroit pour publier ceci, mais ne négligez pas une définition étendue de la "nécessité" - c'est-à-dire lorsque la nécessité d'un élément est conditionnelle à l'utilisation (sélection, remplissage, etc.) d'un autre élément.
Exemple, le champ A est facultatif. Cependant, si le champ A est effectivement rempli par l'utilisateur final, le champ B est obligatoire.
Comment annoter ou regrouper les champs des éléments pour indiquer cela? Devrions-nous?
PS. N'oubliez pas que la couleur seule est un canal peu fiable pour transmettre des informations. Certains d'entre nous ne peuvent pas facilement distinguer le rouge du vert, et le rouge peut transmettre des choses différentes à des gens de cultures différentes.
Les astérisques rouges sont souvent utilisés selon les besoins, donc votre client n'a vraiment pas tort. Si vous choisissez une autre couleur, comme l'orange ou quelque chose qui correspond à la conception du site, cela devrait convenir.
J'apprécie la philosophie simple des astérisques.
Sur une note tangentielle, voici un article que j'ai écrit il y a quelque temps avec un exemple de création de marqueurs d'erreur personnalisés pour les champs qui étaient obligatoires et non remplis. Il est plutôt spécifique à la technologie (Rails, Formtastic, jQuery), mais le concept est facilement adaptable.
http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers
Tout d'abord, comme je suppose que vous êtes l'expert UX, votre client ne devrait pas vous dire comment résoudre les problèmes UX, il devrait venir vers vous avec le problème à résoudre, pas la solution.
En y réfléchissant du point de vue d'un utilisateur, nous ne pouvons pas supposer que l'utilisateur sait ce que signifie un astérisque. En cas de doute, expliquez-le aussi clairement que possible en utilisant un langage écrit. J'ai vu l'astérisque de moins en moins utilisé sur le Web et il est généralement suivi d'une explication au bas d'une page lorsqu'il est utilisé. Une explication plus simple consiste à simplement utiliser "Obligatoire". Les lecteurs d'écran s'en chargeront également et rendront votre site plus accessible.
Avez-vous également pensé à appliquer les principes de divulgation progressive dans ce scénario? Les champs qui ne sont pas obligatoires devraient-ils même être affichés à l'écran - peuvent-ils être masqués ou affichés à l'utilisateur ultérieurement? De cette façon, il y a moins de surcharge d'informations et tous les champs nécessaires sont présentés, éliminant ainsi le besoin d'un "requis". Quelques informations supplémentaires sur la psychologie derrière cette explication: https://www.nngroup.com/articles/progressive-disclosure/
J'ai vu des standards d'utilisation qui dictent l'opposé - que tous les champs sont obligatoires, sauf s'ils sont marqués par le texte (optional). Si les champs obligatoires ne sont pas remplis après une tentative de sommation, ils doivent être marqués d'un texte expliquant ce qui ne va pas.
Comme la plupart des sujets d'utilisation, cela dépend vraiment - principalement du nombre de champs inclus dans votre formulaire et de la fréquence des champs obligatoires dans votre formulaire
Je préfère généralement un simple astérisque rouge adjacent à chaque champ obligatoire, puis une note de bas de page "* - champ obligatoire".
De plus, j'aime mettre en surbrillance la bordure du champ en rouge si le champ reste vide ou invalide après un événement onBlur(). Même mise en évidence si l'utilisateur essaie de soumettre le formulaire sans remplir tous les champs obligatoires. La mise en surbrillance de la bordure disparaît lors d'un événement javascript onFocus().