Comment aligner les icônes de conseil
Disons que nous avons un formulaire avec quelques champs, où chaque ligne contient une étiquette, un champ et une icône "indice". Disons que c'est environ 10 champs.
Le problème est que les champs sont générés automatiquement, en fonction de l'entrée de l'utilisateur dans les étapes précédentes. Certains d'entre eux peuvent être longs et certains peuvent être courts. Ils peuvent être de différents types - par exemple champs de texte, sélecteurs de date, cases à cocher. Dans tous les cas, chaque champ reçoit une icône de conseil.
Quelle serait la meilleure façon d'aligner les icônes? Dans une ligne verticale à une certaine distance du champ le plus long ou adjacent à chaque champ? Ou existe-t-il un autre moyen? Les déplacer vers la gauche du champ ou l'étiquette semble être une idée pire que l'une de ces deux options.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
J'irais pour l'option deux car avec l'option un, je dois faire glisser mes yeux complètement vers la droite pour voir l'icône d'aide, comparer son alignement avec le champ de texte (et si le champ de texte est court, alors c'est un peu de l'effort) et ensuite conclure que l'icône d'aide est liée à ce champ de texte.
Cependant avec l'option 2, il est facile pour moi de faire le saut en ce qui concerne l'icône d'aide relative à un champ de texte depuis son flux continu pendant que je numérise de gauche à droite.
Ci-dessous est un exemple de la façon dont les conseils de validation qui s'alignent avec la zone de texte aident à une meilleure lisibilité
Cependant, si vous optez pour l'option 1 pour une raison quelconque, fournissez une sorte de couleur de tête afin que la transition soit plus simple pour établir la connexion (voir l'exemple ci-dessous)
Cependant, dans l'exemple ci-dessus, je n'aime pas le fait qu'un message de validation soit donné pour deux champs de nom
Sources d'images: Meilleures pratiques pour les astuces et la validation dans les formulaires Web
Une autre option à considérer (c'est ce que nous utilisons) est d'aligner les icônes d'indication juste à côté de l'étiquette du champ. Cela a l'avantage de lier plus clairement les données demandées avec des détails supplémentaires sur cet élément.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Dans tous les cas, chaque champ reçoit une icône de conseil.
Je vous conseille de n'utiliser que des astuces là où elles sont absolument nécessaires - sinon, elles peuvent devenir de mauvaises UX. Demandez-vous si l'indice est vraiment nécessaire pour aider l'utilisateur à remplir le formulaire. Par exemple, un mauvais indice serait "entrez votre numéro de téléphone sous la forme XXX-XXX-XXXX." car un utilisateur ne devrait pas avoir à se soucier du formatage des données; nous devrions le faire à l'arrière. De plus, si chaque utilisateur a besoin de connaître les informations contenues dans le conseil, alors ce ne devrait pas être un conseil . Au lieu de cela, ces informations devraient simplement être présentées en ligne.
De plus, dans certains cas, vous souhaiterez peut-être être plus explicite avec vos conseils au lieu d'utiliser simplement une icône standard + une fenêtre contextuelle. Un tel cas est lorsque vous demandez une donnée inhabituelle. Dans ce cas, vous feriez mieux d'avoir un petit lien tel que "Pourquoi en avez-vous besoin?" (par exemple dans le cas des numéros de téléphone) OR = "Comment trouver cela?" (par exemple dans le cas des clés d'activation). La réponse résultante peut toujours se charger dans une fenêtre contextuelle, mais vous avez donné à votre utilisateur beaucoup plus de contexte que vous ne l'auriez jamais pu avec une icône d'indication générique.