Les icônes Web, mode d’emploi

Alors que la communication par l’image prend de plus en plus de place en ligne (Pinterest et Instagram en sont de bons exemples), des recherches récentes continuent d’indiquer qu’il faut être très prudent dans l’utilisation des icônes. Autrement, on risque de nuire à la compréhension de ses utilisateurs même si elles existent dans le but d’améliorer l’ergonomie et l’expérience Web de l’usager.

Les récents tests du N/N Group, firme réputée en ergonomie que j’aime bien citer à l’occasion, vont dans le même sens que plusieurs travaux réalisés dans les années 90. Deux articles, publiés récemment par Jakob Nielsen et son équipe, relatent d’ailleurs ceci à propos des icônes:

1. Peu d’icônes sont reconnues universellement

Une enveloppe, une maison, une loupe sont des icônes auxquelles tous les internautes peuvent facilement associer une fonction. Toutefois, certaines d’entre elles, notamment le coeur, l’étoile, le «hamburger» ou encore la flèche du style Google Maps sont utilisés de différentes façons d’un site à l’autre. Ne surestimez donc pas la capacité des utilisateurs à comprendre leur signification particulière.

2. Un libellé de texte devrait accompagner chaque icône 

En raison de ce qui est mentionné au point précédent, un libellé devrait accompagner les icônes qui peuvent semer le doute. «Un mot vaut parfois mille images». Prenez par exemple le site de Météomédia. Seriez-vous capable d’identifier ce que veulent dire la roue dentelée et la mire si un libellé ne leur était pas associé?

3. La taille relative d’une icône est importante pour sa détection

Les icônes ne doivent pas être noyées dans le contenu. Ceci dit, une icône, intégrée à une application, risque d’être plus facile à détecter que sur une page Web type car elle est normalement entourée d’un contenu minimal.

4. Testez vos icônes

Quand vous faites vos choix d’icônes, il y a de bonnes chances que l’analogie ne soit pas assez logique pour l’utilisateur si celui-ci (ou vous-même) prend plus de quelques secondes avant de faire le lien approprié (ou non). Un test au préalable devra conséquemment être effectué avec votre clientèle avant la sélection finale.

Un petit test, en terminant. Dans cette liste, à combien d’icônes pourriez-vous associer une fonction claire?