Infobulle axée sur le champ vs icône d'informations cliquables
Je crée un site Web public et j'ai besoin d'afficher des informations utiles pour guider l'utilisateur lors du remplissage des formulaires. Les formulaires peuvent contenir des entrées de texte, des listes déroulantes, des curseurs ... Le site sera compatible mobile.
J'ai pensé à 2 façons d'afficher l'infobulle:
L'info-bulle s'affiche lorsque l'utilisateur se concentre sur le champ
Avantages: n'encombre pas l'interface utilisateur
Inconvénients: Les utilisateurs peuvent le manquer s'ils ne cliquent pas dans le champ, et quittent simplement la page.
Les informations sont toujours affichées lorsque le champ est focalisé, l'utilisateur peut ne pas en avoir besoin.L'info-bulle s'affiche lorsque l'utilisateur clique sur un "?" icône
Avantages: Informations affichées uniquement en cas de besoin.
L'utilisateur trouvera facilement de l'aide
Inconvénients: Interface utilisateur encombrante
Habituellement, "?" les icônes ne sont pas cliquables
Quelle serait la meilleure pratique ici?
Cela dépend de la fréquence à laquelle vous attendez de l'aide.
Une icône
?Cliquable est un bon moyen de procéder si la réponse est généralement claire et sans explication, mais une aide peut parfois être nécessaire. Il est facilement accessible, mais ne gêne pas la majorité des utilisateurs qui n'en ont pas besoin.J'ai vu de nombreux sites utiliser ce paradigme, et il est généralement assez clair. La clé est d'utiliser un style pour montrer que le
?Est cliquable. Il ressemble souvent à un petit bouton rond.S'il y a une explication qui sera toujours nécessaire pour remplir le formulaire, vous devriez la faire apparaître lorsque le champ est en surbrillance, ou même être toujours visible sur la page.
Un exemple de ce que j'ai vu est les mots de passe qui doivent répondre à certaines exigences de force (doivent contenir des caractères spéciaux, être d'au moins 12 caractères, etc.). On ne peut pas s'attendre à ce que les utilisateurs connaissent vos règles personnalisées, elles doivent donc être affichées. Soit les règles sont affichées statiquement sur la page, soit Javascript est utilisé pour valider dynamiquement le mot de passe et indiquer ce qui manque.
Choisissez ce qui semble le plus approprié à votre situation.
Pourquoi voulez-vous masquer les informations (sur focus/sur clic). S'il n'y a pas de restriction d'espace, j'irais avec l'étiquetage et les exemples d'incontexte.
- Traitez vos utilisateurs comme des personnes intelligentes.
- Ne parlez pas comme si vous commandiez: "Adresse e-mail" au lieu de "Entrez votre adresse e-mail"
- Donnez des exemples de données attendues
- Notifier le formatage ou tout autre cas spécial
L'avantage de cette conception est que, même si l'utilisateur ne connaît pas les informations nécessaires, l'exemple fournit des détails supplémentaires sur ce qui est attendu. Rappelez-vous comment les formulaires de carte de crédit indiquent où trouver le numéro de sécurité/CVV.
Rendre l'information toujours visible est une bonne chose car l'utilisateur sait qu'elle existe. Si vous utilisez des info-bulles de focus, l'utilisateur n'est pas sûr que tous les champs auront des info-bulles à leur arrivée. Peut sembler intimidant de voir un formulaire de longueur de page avec seulement le premier champ ayant un exemple/explication.
En utilisant ? vous fera économiser de l'espace, mais, force l'utilisateur à cliquer sur l'icône chaque fois qu'il a besoin d'aide. Peut devenir décourageant si cela arrive trop souvent ('Je suis stupide : ') Mieux vaut avoir l'aide toujours visible et facile d'accès.
--- (télécharger la source bmml - Wireframes créés avec Balsamiq Mockups