Le language des icônes.
Qui n’a jamais voulu placer une icône ou deux, ici ou là, pour se simplifier le design d’une interface ?
Les icônes ont la belle vie. Elles ont une image positive et « bénéfique pour l’utilisateur ». Grand bien leur face. Malheureusement, ça n’est pas aussi simple qu’on le dit.
Tout comme les mots, les icônes ont une valeur sémantique à laquelle il faut prêter attention. Faute de quoi, des incompréhensions peuvent s’insérer dans l’utilisation de l’interface.
Oui, les icônes ont un sens.
Une idée est émise au travers d’un support (un mot, un geste, une icône, …), et ce support doit permettre au destinataire d’assimiler l’idée initiale. C’est ce qui permet à l’un et à l’autre de se comprendre et d’échanger.
Seulement, voilà ! L’idée émise par le concepteur de l’icône ou de l’interface peut ne pas être comprise par l’utilisateur. Or, dans une interface, ce sont les intérêts de ce dernier qui prévalent.
Voyons plutôt …
Vous connaissez sûrement ce dicton « Une image vaut mille mots ». Au stricto sensu, il est tout à fait juste. Il faut effectivement de nombreux mots pour décrire une image, notamment une image complexe. Or, d’après les dernières études, l’assimilation d’une image semble plus rapide et plus efficace (selon les cas), que les mots.
Cependant, dans son utilisation courante, il perd tout son intérêt. Et la raison est particulièrement simple : il existe tout autant de point de vus différents que de mots pour décrire une image.
Leur compréhension peut, par conséquent, être totalement inconhérente selon sa description.
Prenons le cas d’une icône banale, courante, utilisée dans de très nombreuses interfaces.
Si on s’intérêsse à ce cas particulier, cette icône peut représenter plusieurs notions totalement différentes. Et il n’existe pas pour autant des valeurs fausses et une signification unique juste.
D’autre part, la présicion du sens donné à une icône est importante. Ici, elle est seule. Dans une interface complexe dans laquelle la plupart de ces sens sont utilisés, l’incohérence peut rapidement apparaître au yeux des utilisateurs et ainsi rendre la compréhension difficile.
Vouloir décliner une icônes pour en préciser son sens n’est pas non plus une méthode idéale, puisque chacune de ces déclinaisons peut avoir plusieurs valeurs. Elles ne sont pas plus utilisables que ne l’était la première.
Comme nous venons de le voir, l’interprétation des icônes est dépendante de facteurs.
Ces facteurs, nous allons en énoncer quelques uns, dont : le contexte propre à l’icône (l’icône elle-même), le contexte environnemental à l’icône (ce qui se trouve autour de l’icône), et le contexte culturel (propre à chaque utilisateur).
Il faut cependant garder en tête que chacun de ces facteurs n’a pas le même poids qu’un autre, et que ce poids peut varier selon l’utilisateur, le moment de la journée, et les tâches réalisées récemment.
Lorsque l’on évoque le contexte de l’icône, il faut ici envisager l’icône elle-même, et non son environnement.
Prenons cette première image. En l’absence de détails, il est difficile de déterminer de quoi il s’agit. Au mieux, il peut s’agir d’un objet (si l’objet en question ne parait pas totalement abstrait).
Sur la seconde image, on comprends un usage, et déjà, il est possible de déterminer l’objet représenté. Maintenant, quel est l’objectif indiqué par cette icône ?
Cette troisième image nous permet déjà de savoir que l’escalator nous permet de monter. Nos références culturelles (nous y reviendrons), nous permette de déterminer qu’un escalator nous permettra, directement ou indirectement, de sortir du métro.
Mais cette alternative possible nous laisse perplexe (question d’effort que cela prendra). Fournir une indication claire et précise permet finalement de déterminer de façon binaire si cette intéraction est celle souhaitée.
Maintenant que nous avons vu l’importance de détails dans une icône, passons à une échelle microscopique : son environnement.
Dans ce cadre là, de nombreux éléments sont à prendre en compte, et notamment eux à proximité.
Mais il faut également prendre en compte l’utilisateur, qui selon ses objectifs, tentera d’interpréter une icône de telle ou telle façon.
Bien entendu, des éléments comme les intéractions récentes ou à plus long terme de l’utilisateur vont marquer de manière importante l’interprétation et le jugement qu’un utilisateur aura d’une icône.
La référence culturelle de l’utilisateur peut également être un point à aborder concernant l’interprétation des icônes. À l’heure actuelle, la plupart des pays ont des signalisations communes ou proches.
Pour autant, cette distinction est importante. Si en Europe et en amérique du nord, la représentation d’un animal traversant la route a des points communs, elles n’ont rien à voir avec celle de l’Australie.
Problème ? On pert tous les avantages de l’iconographie. D’ailleurs, ces avantagers, quels sont-ils ?
Si nous apprécions à ce point l’iconographie, c’est que l’effort cognitif nécessaire à son identification est bien moins important que celui nécessaire à la compréhension d’un texte.
En effet, lire un texte est un exercice plus difficile puisqu’il s’agit de sauter de point en point pour identifier les lettres, et ainsi comprendre les mots. À son opposé l’iconographie est bien plus performante puisque la forme est directement associé sémantiquement (là où le texte nécessite un pré-traitement avant d’atteindre cette étape).
Bien, maintenant que nous avons rencontré les avantages et les problématiques icônes, comment les construire pour les rendre réellement efficace (quand le texte n’est pas indispensable) ?
C’est ce que nous allons voir de suite.
Nous l’avons vu, qu’il s’agisse de texte ou d’icônes, la relation sémantique est extrêmement importante. Nous pouvons donc exploiter cette relation en anticipant la vision des utilisateurs.
De la même manière qu’un enfant gribouille tout au long de son enfance, l’information issue d’un utilisateur est toujours initiée par une vision d’un objet et/ou d’une situation.
Nous pouvons donc exploiter ce même mécanisme pour faire ressortir la vision majoritaire de nos utilisateurs.
Puisque nous avons réussi à prendre une direction dans la conception de nos icônes, plus nous recevons de feedbacks, plus nous sommes à même de se rapprocher de la réalité.
Et nos prototypes vont être d’une autre précieuse. Cette fois-ci, au lieu de faire parler l’utilisateur pour construire, nous allons lui demander sa vision de nos prototypes.
L’objectif dans tout ça ? S’assurer de la bonne compréhension de nos icônes.
Nous l’avons vu, la situation influence la compréhension d’un objet. Et nos icônes n’y échappent pas.
Savoir que nos icônes sont généralement bien comprises est une chose. S’assurer que dans la situation où nous les utiliseront elles seront tout autant utiles est indispensable.
A savoir : Si vous deviez sauter l’une de ces deux itérations, ce serait la première.
Invité comme orateur au premier Dribbble Meetup toulousain par l’association de designers Frenchship, j’ai un opté pour la présentation d’un sujet dans l’air du temps : le design d’icônes dans les interfaces.
Le monde du graphisme faisant souvent appel à des représentations icônographiques, ce sujet s’adressait tout autant aux néophites qu’aux professionnels expérimentés. L’objectif était de faire comprendre la variabilité du sens sémantique des icônes et d’apporter une méthode de conception d’icônes plus adaptée au milieu du design d’interfaces.
(J’espère avoir sensibilité suffisament de professionnels 😉).