Un icône n'est pas une solution ergonomique miracle

Cet article a été écrit il y a plus d'un an : son contenu peut être dépassé.

Et quelques autres préjugés sur les icônes qui ont la vie dure.

Ah, les icônes. Vaste sujet ô combien casse-gueule et négligé.

Trop souvent, l’icône est vu comme une solution ergonomique miracle : on l’inclut, ça rend l’interface « sexy » et, en prime, ça permet de prendre moins de place quand on doit mettre plusieurs boutons à la chaîne.

Sauf que de mauvais choix sur les icônes peuvent énormément influencer l’utilisabilité d’une interface. Et malheureusement, certains mythes ont la vie dure !

Un icône est plus compréhensible qu’un texte

L’une des premières erreurs faites sur les icônes, c’est de croire que ça dispense d’écrire du texte. Non, un icône n’est pas plus compréhensible que du texte !

Pour s’en convaincre, essayons de deviner à quoi correspondent les icônes suivantes :

Facile, non ? Je pense que tout le monde aura reconnu une poubelle qui veut dire que l’on supprime un élément (dans la plupart des cas). Simple, l’icône est compréhensible.

Plus difficile, non ? La forme octogonale rappelle un panneau STOP donc ça serait un avertissement. Le point d’exclamation va dans ce sens. Oui, mais un avertissement pour quoi ?

On constate ici qu’il faut une information supplémentaire pour comprendre : le contexte. C’est déjà moins évident que le premier.

Voici donc un extrait de l’interface de Gmail, qui utilise cet icône :

Est-ce plus facile à comprendre ? Je ne suis pas certain.

Pour ceux qui n’auraient pas trouvé, c’est la fonctionnalité « Signaler comme spam ». Maintenant que je vous le dis, ça semble logique : l’avertissement, le panneau STOP, évidemment !

Mais combien de temps avez-vous passé à essayer de deviner sa signification ? Même si on ne compte que 5 secondes, rien que sur cette barre, il y a 6 boutons. S’il passe le même temps sur chaque icône, l’utilisateur a perdu 30 secondes à essayer de comprendre cette barre (en supposant qu’il ait tout compris).

Vous pensez vraiment que la barre d’icônes seuls est plus compréhensible que ce qui suit ?

Les utilisateurs sont habitués aux icônes

Autre idée qui a la vie dure : parce que les utilisateurs manipulent des interfaces avec des icônes, ils sont habitués à voir et à comprendre les icônes donc on peut les réutiliser tels quels.

C’est vrai et faux. Oui, les utilisateurs sont habitués à voir des icônes dans les interfaces. Mais non, ils ne les comprennent pas et ne les reconnaissent pas forcément. Mettre des icônes que l’on a déjà vu ailleurs n’est pas un gage de reconnaissance.

Pour qu’un utilisateur soit habitué à voir un icône, il faut :

• qu’il ait déjà rencontré cet icône. Si on peut parier que 99% des personnes auront rencontré un icône de poubelle (chiffre donné au doigt mouillé), ce pourcentage tombe lorsque l’on présente un icône d’archivage de données ;
• qu’il ait mémorisé cet icône. Parce qu’il ne suffit pas de le voir une seule fois pour instantanément s’en rappeler : si l’on veut mettre en place une habitude, il faut que l’utilisateur le voit souvent et régulièrement ;
• qu’il connaisse sa signification. Et on rejoint le point précédent sur la difficulté de comprendre la signification d’un icône.

Trois conditions simples mais qu’il faut déjà atteindre.  À ceci, on peut ajouter les points suivants (liste non exhaustive) :

• l’utilisateur est capable de reconnaître un icône, même s’il y a des variations de couleurs et de forme ;
• l’icône est toujours utilisé pour la même action.

Facile ? Pas si sûr.

Reprenons un nouvel exemple :

Ceci est un icône de loupe et on le reconnaît assez aisément parce qu’on a l’habitude de le voir. Mais que signifie-t-il ? Est-ce une zone de recherche ? Ou désigne-t-il le zoom ? Là encore, le contexte est primordial pour bien comprendre la signification de l’icône : ce n’est pas aussi trivial que l’on pourrait le penser !

Une fonctionnalité n’est désignée que par un seul type d’icône

Vous rajoutez une fonctionnalité de partage à votre application. Vous cherchez un joli icône pour ajouter au bouton (auquel vous adossez un texte pour que l’utilisateur comprenne). Il suffit juste de trouver l’icône qui va bien avec la fonctionnalité, comme ça vous pourrez profiter des connaissances acquises par l’utilisateur grâce aux autres applications qui utilisent le même icône.

Et là, c’est le drame ! Manque de bol, votre fonctionnalité n’est pas définie par le même icône selon la plateforme. Sous Android, l’icône pour le partage ressemble à ça :

Sous iOs, c’est plus comme ça :

Rien à voir.

Quel icône choisir ? Là, c’est à vous de trancher en fonction de vos utilisateurs et capacités techniques : si vous pouvez différencier les plateformes, autant utiliser celui propre à chacune. Sinon, il faudra choisir un icône au détriment de l’autre.

Toujours est-il que le choix de l’icône, même en reprenant des éléments connus, peut s’avérer très compliqué.

Il y a beaucoup de choses à dire sur les icônes mais je pense que les trois points présentés ici vous auront prouvé au moins une chose : un icône n’est pas une solution ergonomique miracle et il faut beaucoup de temps pour choisir ce qui convient le mieux !

Quelques lectures supplémentaires :

• Compréhension par les utilisateurs des icônes de CMS
• Do icons need labels? (en)