Pas de bonne icône sans bonne métaphore

Rédigé par antistress le 27 mars 2008 -

Certaines icônes usuelles mériteraient grandement d'être revues.

Pour permettre à l'utilisateur de savoir à quelle action correspond telle icône composant telle interface graphique, il est indispensable de recourir à une métaphore valide.

Qualités d'une bonne métaphore pour une icône

L'utilisateur ne doit pas avoir à réfléchir pour comprendre quelle action commande une icône donnée. Autrement dit, l'image doit être évidente aux yeux de l'utilisateur.

Pour cela, il semble indispensable de recourir à une métaphore simple, construite sur des objets familiers. Il faut encore choisir une métaphore universelle (que cette métaphore soit perçue également par des utilisateurs de culture différentes). Il faut enfin que toutes ces qualités soient pérennes.

Le cas de la disquette symbolisant l'action « Enregistrer sous »

C'est sur ce dernier point que le bât blesse, s'agissant par exemple de notre bonne vieille icône censée représenter l'action « Enregistrer sous » :

Icône figurant une disquette

Compte tenu de l'obsolescence avérée de ce support de stockage, un nombre de plus en plus faible d'utilisateurs peut prétendre avoir déjà manipulé cet objet que l'on ne peut donc déjà plus, dans bien des cas, qualifier de familier.

Il est même paradoxal de constater que le souvenir de cet objet ne subsiste peut être aujourd'hui que grâce à cette icône présente dans la plupart des interfaces actuelles...

Finalement, si aujourd'hui vous savez à quelle action correspond cette icône, c'est uniquement à votre mémoire que vous le devez : un novice ne pourrait découvrir seul quelle action se cache derrière cette icône.

Pour une nouvelle icône symbolisant l'action « Enregistrer sous »

Le projet Tango propose de remplacer la disquette désuète par un disque dur :

Icône figurant un disque dur

C'est du grand n'importe quoi.

Non seulement cette icône sera elle aussi victime d'obsolescence rapide puisqu'elle est à nouveau basée sur un composant matériel informatique, mais en plus le projet Tango n'a rien trouvé de mieux que de remplacer un objet visible (la disquette que l'on emportait avec soi) par un objet invisible (le disque dur fixé à l'intérieur même du boîtier de votre PC). Pour ce qui est de trouver un objet familier en guise de métaphore, on pourra repasser !

Si l'on veut être un minimum sérieux, il faut rechercher ce qui est susceptible de faire sens chez l'utilisateur.

Regardons un instant les métaphores existantes : quelle est l'action symétrique de « Enregistrer dans un fichier » ? Il s'agit de « ouvrir un fichier ». Cette dernière action est le plus souvent symbolisée par un fichier sortant d'un dossier :

Icône figurant un fichier sortant d'un dossier

Il ne serait donc pas illogique de représenter l'action « Enregistrer sous » par une flèche pointant vers un dossier (sur le modèle de l'icône du disque dur ci-dessus).

Je vois un triple avantage à cette métaphore :

  • elle parait logique si l'on considère celle de l'action symétrique,
  • elle devrait être aussi bonne que celle de l'action symétrique,
  • elle ne devrait pas risquer une obsolescence rapide (à l'inverse des métaphores reposant sur la disquette ou le disque dur, qui sont tous deux des composants matériel informatique).

Proposition finale

Finalement, la révision de l'icône « Enregistrer sous » est l'occasion de réviser aussi l'icône « ouvrir un fichier ».

Dans ce dernier cas, il ne parait pas opportun, en effet, de faire référence à un document texte lorsque l'action ne concerne pas un tel document. Il est en effet possible d'ouvrir toutes sortes de fichiers. Il est donc souhaitable de choisir une image versatile permettant de symboliser de manière générale l'action « ouvrir un fichier », quel que soit ce fichier.

Les métaphores suivantes, proposées par Ian Adams, me semblent idéalement évidentes :

Icône figurant une flèche sortant d'un dossier
« Ouvrir un fichier »

Icône figurant une flèche entrant dans un dossier
« Enregistrer »


Lire :

Ceci est un article issu de l'ancienne version du site.

4 commentaires:

kalikiana 29 mars 2008 16:27
Je consente, c'est problématique d'utiliser une métaphore basé sur un médium de mémoire. Mais ta proposition a un grand désavantage aussi:
Il est difficile de différencier deux icônes similaires si on ne regarde pas à les directement. En ce regard je préfère la métaphore imparfait de Tango.
Ian Adams 1 avril 2008 19:58
Je suis d'accord que si les deux icônes se ressemblent trop il est plus difficile de faire la différence entre les deux. Les icônes que j'ai créé sont vite fait, rudimentaires pour former une idée. Pour aider a avoir plus de contraste entre les icônes, peut-être courber la flèche dans un certain sens pourrait être effectif. Ainsi la direction de la flèche (vers le haut où vers le bas) pourrait être plus clair que la silhouette.
antistress 1 avril 2008 23:25
Très honoré de ta visite, Ian :-)
J'avais adoré ta première proposition mais là c'est encore mieux !
Peut être pourrais tu faire un nouveau billet dessus avec une nouvelle illustration tenant compte de ta dernière proposition ?
Si j'ai bien compris on pourrait avoir un truc du genre ça ?
Ça me fait penser aux fonctions undo/redo de Kino : la couleur pourrait aussi aider à différencier... (voir cet article sur le rôle de la couleur dans la perception).
antistress 5 mai 2008 01:15
Voir Bug 531460 – Hard-drive metaphor for "save" icon is wrong
et aussi, dans le même genre : Bug 531454 – Rethinking the About icon (the star usually stands for Bookmarks).

Les commentaires sont fermés.