web-dev-qa-db-fra.com

Info-bulles pour les icônes / boutons

Il est donc souvent mentionné que les icônes et les boutons ne sont pas toujours 100% intuitifs dans leur signification, et qu'ils devraient idéalement être accompagnés d'une étiquette.

Qu'en est-il d'une info-bulle, comme en HTML lorsque vous avez le <dfn /> tag? Essentiellement, il souligne un mot, et si vous le survolez pendant une seconde, il affichera une petite fenêtre contextuelle d'étiquette avec l'explication. Déplacer la souris supprime l'infobulle.

Est-ce une bonne idée, en termes de convivialité, comme alternative à une étiquette (pour les environnements immobiliers contraints, comme Android)? ou un long délai avant d'afficher les informations? Qu'en est-il d'une option pour désactiver les étiquettes?

Edit: Juste pour être clair, c'est pour un environnement non HTML; mais je demande en général sur les info-bulles, et comment les rendre utilisables.

3
ashes999

Personnellement, je pense que les info-bulles devraient toujours être utilisées là où vous avez la possibilité de survoler. La seule question est de savoir quel temps attendre avant l'affichage, et je pense que cela devrait être directement proportionnel à la fréquence du contrôle en question, et il faut également tenir compte du public cible. Par exemple, sur un site public, vous devez utiliser le plus petit dénominateur - quelqu'un qui n'a jamais vu d'ordinateur auparavant et qui est tombé sur votre site.

La règle numéro un à retenir à ce sujet est que, lorsque les gens sont frustrés, contrairement au geek moyen qui commence à chercher des solutions ailleurs, la personne moyenne --- étroite sa concentration, donc plus proche de l'icône que vous peut mettre les informations, plus vos utilisateurs seront heureux.

Pour une superficie réduite (comme un écran de téléphone), l'utilisation de texte plus petit peut être utile - mais pour les malvoyants, cela pourrait être pire.

Assurez-vous simplement de toujours garder à l'esprit votre public.

4
Wayne Werner

Si l'icône est simplement décorative et qu'aucune action ni aucun lien n'est associé à l'icône, il doit s'agir d'un <img alt=""> élément avec un attribut ALT vide.

Si l'icône est une action ou un lien, vous ne devez pas utiliser le <img> élément mais utilisez plutôt une ancre <a> élément et définissez l'image d'icône comme image d'arrière-plan, puis utilisez un attribut TITLE pour une représentation textuelle du lien/de l'icône.

L'attribut TITLE apparaîtra sous la forme d'une info-bulle lors du survol de la souris et sera également utilisé par les lecteurs d'écran.

0
Erics

Est-ce une bonne idée, en termes de convivialité, comme alternative à une étiquette (pour les environnements immobiliers contraints, comme Android)? ou un long délai avant d'afficher les informations? Qu'en est-il d'une option pour désactiver les étiquettes?

Non, ce n'est pas une bonne idée. Puisque vous avez particulièrement mentionné Android, il n'y a pas de survol sur un écran tactile.

0
Wousser