Où faut-il placer les instructions ou les conseils?
Je parcourais Forrst et j'ai réalisé une capture d'écran d'un formulaire conçu avec Twitter Bootstrap qui avait l'étiquette à gauche, le champ de saisie à droite et les instructions nécessaires sous le champ lui-même, comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
J'ai presque commenté que c'était la mauvaise façon mais j'ai décidé de vérifier Twitter lui-même. Il semble qu'une telle mise en page fasse partie de leur guide de style:
et voici comment cela apparaît sur Twitter en direct:
La même approche est utilisée dans Wufoo:
et dans JotForm:
Mais Google Forms place le texte d'aide sous l'étiquette et avant le champ de saisie:
Placer le texte d'aide après le champ semble violer certains des principes clés de la cognition (instructions avant la tâche) et de l'UX (minimiser les mouvements oculaires de va-et-vient). J'ai regardé autour de moi, mais les seules études que j'ai trouvées concernent les étiquettes (en haut, à droite ou à gauche du champ) et il semble qu'il n'y ait rien des conseils et/ou des instructions en plus de la suggestion de les rendre en ligne et de se concentrer sur le terrain.
Alors, quelle est la "bonne" façon de placer des conseils/instructions/directions/etc en relation avec le champ et l'étiquette? Les choix actuels incluent: sous l'étiquette, au-dessus du champ, après le champ et à côté du champ en tant que légendes en ligne.
Parce que ces instructions sont censées être lues après que l'utilisateur a essayé et échoué d'interpréter un champ, elles ne sont pas lues avant tout par chaque utilisateur.
Dans le cas des exemples Twitter, ces textes n'expliquent souvent pas réellement comment remplir le champ, mais plutôt comment prendre une décision. Autrement dit, ils sont censés être lus uniquement si un utilisateur rencontre des difficultés avec un point de décision. Les utilisateurs qui connaissent le domaine ou qui ont des réponses `` à insérer '' (ce qui est courant lors du remplissage des fonctionnalités d'identification) n'ont pas besoin de voir le texte, il peut donc se trouver dans un emplacement subsidiaire.
Il y a aussi d'autres facteurs en jeu. Les instructions avant les champs de formulaire rendraient plus difficile l'association de paires, car avoir le champ de formulaire (généralement plus grand) établit d'abord une hiérarchie visuelle (comme le mentionne Ben Brocka dans le commentaire ci-dessus). Cela signifie également que les champs et les étiquettes peuvent être très proches les uns des autres, ce qui facilite l'analyse (en particulier lorsqu'un utilisateur cherche un champ pour le modifier après la soumission d'origine).
Pour un site Web accessible et décent, les instructions doivent toujours se trouver avant le champ. Ils ne sont pas seulement là pour les utilisateurs typiques, mais sont également des indices importants pour l'accessibilité.
Par exemple: Les lecteurs d'écran frappent la description/l'indice avant de lire les détails du champ du formulaire afin que l'utilisateur sache ce qui est nécessaire pour compléter le champ avec succès. Si l'indice arrive après le champ, il y a de fortes chances qu'ils l'aient déjà rempli avant d'entendre le texte de l'indice.
Si le conseil est également utilisé comme texte de validation/échec, il est difficile de les afficher après le champ pour la même raison. L'utilisateur doit connaître la raison de l'échec avant d'entendre sa valeur entrée réelle afin qu'il puisse entendre comment son entrée a interrompu la validation. Sinon, ils devraient supposer que chaque champ a échoué, puis attendre d'entendre s'il a échoué. Entendre la validation les prépare d'abord ' ok, ce champ qui est sur le point d'être lu contient une erreur'
(En fait, pour une meilleure accessibilité, vous devez répertorier tous les échecs de validation tout en haut du formulaire afin que l'utilisateur sache immédiatement quels champs ont échoué et combien il y en a eu)
N'oubliez pas non plus les utilisateurs du clavier. Si quelqu'un utilise un clavier et parcourt les champs sans utiliser la souris et que le formulaire comporte de nombreux champs `` sous le pli '', le fait de tabuler dans les champs plus bas ne fera que visualiser ce champ et non le texte de l'indice si ce texte tombe en dessous du champ.
Développeur JotForm ici.
Ces conseils sont principalement utilisés pour aider les utilisateurs avec le type d'entrée ou quelques exemples d'une entrée correcte. Il sera déroutant et encombré pour les utilisateurs de voir les textes d'aide juste sous la question. Nous voulons généralement qu'ils se concentrent, uniquement sur la question. Quand ils viennent pour répondre à la question posée, ils peuvent lire un simple indice sur l'entrée attendue ou ils peuvent ignorer complètement l'indice, d'où la petite police et la couleur gris clair.
Vous ne voulez pas montrer trop d'informations et effrayer les soumissionnaires potentiels de votre enquête.
Je place toujours des conseils/erreurs/exigences minimales d'entrée directement en dessous et les code de couleur avec la bordure en surbrillance de l'entrée, par exemple rouge -> erreur
Je ne vois pas le raisonnement de Google pour les placer au-dessus, bien que ne grande motivation pour leurs décisions est basée sur la recherche des utilisateurs
En plus, voici un avis de Six Révisions
Si la tâche est assez simple (pour la majorité des utilisateurs), les instructions ne devraient pas les gêner.
Par exemple. utilisez des info-bulles ou affichez un texte légèrement plus petit et plus gris sous les zones de saisie (peut-être uniquement du champ actuel et des champs avec des entrées non valides).
Si la tâche est complexe (pour la majorité des utilisateurs), les instructions devraient être beaucoup plus visibles.
Par exemple. Encadrez les messages d'aide et placez-les sur le côté du formulaire (par exemple à gauche du formulaire s'il s'agit de LTR) et ayez des flèches pointant vers les entrées.
Un peu comme ça
Mais avec des couleurs qui ressortent beaucoup moins (par exemple gris clair), sauf peut-être pour le champ actif (peut-être gris plus foncé) et les erreurs (rouge).
Si tout ce que vous voulez faire est de marquer le champ requis, alors utiliser un arrière-plan différent (par exemple jaune au lieu de blanc ou jaune foncé au lieu de noir) + le texte ci-dessous pourrait être une bonne solution.
L'utilisation d'étoiles avec des explications ailleurs peut obliger les utilisateurs à commencer à chercher les explications.
L'utilisation de liens pour aider oblige l'utilisateur à ouvrir des onglets/fenêtres d'aide au lieu d'obtenir un aperçu en place. - Sauf s'il s'agit d'une fenêtre contextuelle de superposition avec un clic à l'extérieur pour fermer avec un différenciateur clair pour les liens réguliers (par exemple, double soulignement).