Édition Nº41 du 23 avril 2013 Retour au sommaire

Des icônes et des interfaces

D’où viennent les icônes de nos sites et autres interfaces d’applications ? Comment en concevoir et les utiliser ? Sébastien Desbenoit nous livre ici un long article qui vous permettra de comprendre les tenants et aboutissants de ces éléments d’interfaces de plus en plus utilisés.

Arrêts prévus :

Ciel, des icônes dans mon interface !

  • « Ça ne va rien rendre en version allemande : les mots sont beaucoup trop long ! Râââh ! Ce menu qui doit s’adapter à onze langues va finir par me rendre fou. Hey, mais dis-moi, j’ai une idée : tu ne pourrais pas me trouver des icônes pour mettre à la place ? J’en ai vu un joli pack dans le Smashing Magazine : comme ça, hop, plus de problème. Bon, tu te rappelles que je pars en déplacement ? Je reviens dans une semaine et je veux que tu me fasses une proposition d’ici là. Des icônes, oui, c’est ça la solution.
  • Mais, attends… [long soupir] »

La demande que l’on vient de nous faire nous met dans une situation assez inconfortable. De mon point de vue, choisir rapidement des icônes “évidentes” pour notre interface ressemble furieusement à sauter sans réfléchir dans un torrent depuis un pont situé trente mètres au-dessus de l’eau.

Les icônes sont de toutes nos interfaces. On les retrouve aussi bien sur nos écrans de téléphones que dans nos logiciels préférés, nos sites Web, les halls d’aéroports, sans oublier les tableaux de bord de nos voitures.

Utiliser une icône est souvent devenu systématique : sans se poser de question, on remplit nos interfaces de ces petits éléments visuels. Cependant, les icônes ne sont pas des éléments neutres pour nos visiteurs : bien souvent, les symboles que portent ces visuels ont une voire plusieurs significations. Remplacer l’intégralité des libellés d’un menu par des icônes, c’est un peu comme prendre le risque de faire du saut à l’élastique sans élastique… C’est possible dans certains contextes, mais cela demande beaucoup de préparation.

Différencier les icônes de leurs pictogrammes

Pour bien comprendre les risques de notre aventure, essayons de comprendre ce que sont réellement ces symboles.

Une icône, c’est un pictogramme auquel on a appliqué un style et que l’on utilise dans un certain contexte.

Un pictogramme, c’est l’expression visuelle la plus simple possible d’un concept.
C’est une forme, ou un ensemble de formes, qui ne présente aucun élément autre que ceux nécessaires à la compréhension immédiate de l’idée qu’il porte. Et cela par le plus grand nombre de personnes possible : dans un idéal utopique, par tous les habitants de notre bonne vieille Terre ! Ainsi, si l’on veut représenter le concept « éclairage artificiel », en réduisant au plus simple, nous obtiendrions une ampoule qui « rayonne ». Cette ampoule, pour être reconnaissable par le plus grand nombre, aura besoin a minima de sa bulle, de son pas de vis et d’un filament. Les rayonnements pourront être représentés par de simples traits. Un peu de dessin et le tour semble joué : nous avons notre pictogramme. Bien sûr, cet exemple est volontairement très simple et rien ne prouve que nous ayons réussi à trouver LE pictogramme. Mais nous y reviendrons plus tard.

Les icônes, ce sont donc des pictogrammes stylisés.
La pureté du minimalisme conceptuel est une chose, le style en est une autre. Une icône peut s’adapter à son environnement visuel, à son cadre d’utilisation : mon site promeut le développement durable et je ne veux plus une ampoule à filament mais une ampoule à économie d’énergie ? Pas de problème : il suffit d’ajouter à notre pictogramme des informations de style, en veillant toutefois à ce que notre concept reste parfaitement reconnaissable.

Mais il manque encore un dernier élément à notre icône : son contexte. Aussi parfaite que soit la représentation de notre concept, elle n’est pas à l’abri des polysémies. L’ampoule allumée porte le concept de l’éclairage artificiel (non solaire) mais également celui d’une idée qui vient de frapper un cerveau : Eureka !. Pour trouver « le bon concept »™ qui sera reconnu par nos utilisateurs, il va donc aussi falloir jouer avec le contexte. Placé sur un interrupteur, notre concept signifiera « activer l’éclairage artificiel » 1. Représenté dans une bulle de pensée, au-dessus d’une tête ou sur un site d’innovation, il traduira plutôt une idée qui fleurit.

Résumons scientifiquement : Icône = pictogramme + contexte + style.

Icône = pictogramme + contexte + style
Icône = pictogramme + contexte + style

Comprendre la composition d’une icône ne nous explique pas comment nous en sommes arrivés là. Pourtant, la réponse semble évidente. C’est simplement parce que les icônes, c’est trop bien.

« Les icônes : c’est trop bien ! »

Les icônes peuvent accélérer la compréhension.

Selon Norman 2, dans un grand nombre de cas, une image est plus facilement interprétable qu’un mot. Ainsi, l’image de la maison, cette forme qui porte le concept des pages d’accueil de nos sites (homepage en anglais), va être comprise et interprétée plus rapidement que la lecture, l’association et le décryptage de chacune des formes composant les lettres du mot “maison”. Très naïvement, on pourrait dire que la maison est une forme, et qu’une forme est plus rapide à identifier que six formes. Ce n’est toutefois pas aussi simple : pour que ces formes soient reconnues, il faut qu’elles soient déjà stockées dans notre cerveau et reliées « au bon concept »™. Celui-ci dépend en très grande partie du pictogramme qui va être utilisé dans une icône ; et si certains symboles sont considérés comme des standards et peuvent être utilisés pour créer des icônes les yeux fermés, d’autres vont demander un véritable effort de concentration pour les utilisateurs.

Une maison pour la page d’accueil
Une maison pour la page d’accueil

Des ancres pour la mémoire

Cet effort de concentration peut avoir des effets bénéfiques. Dans le cas d’une interface où les utilisateurs reviennent fréquemment, l’utilisation d’icônes en tant qu’ancres pour notre mémoire peut être tout à fait indiquée. En effet, une fois le lien icône / concept réalisé dans notre cerveau après un certain effort, l’utilisation de notre icône va pouvoir se faire de façon instinctive 3. L’utilisateur n’aura même pas besoin de faire l’effort de réfléchir au concept que porte cette forme.

Le lien entre un concept et sa représentation devient parfois tellement évident pour nous que l’on ne comprend plus vraiment pourquoi d’autres personnes n’arrivent pas à faire le rapprochement. « Ma chère, mais c’est évident ! Cette silhouette indique la porte des toilettes ! »

Femmes, Hommes… Robots ? Mais qu’est-ce que cela signifie ? Porte des toilettes dans les bureaux de Google à Bruxelles. cc by Paul Keller http://www.flickr.com/photos/18259771@N00/5217304095
Femmes, Hommes… Robots ? Mais qu’est-ce que cela signifie ? Porte des toilettes dans les bureaux de Google à Bruxelles. cc by Paul Keller

De la même façon, il arrive que le lien entre un concept et son pictogramme devienne parfois tellement naturel qu’il va nous être difficile de comprendre pourquoi d’autres personnes ne font pas le rapprochement entre les deux éléments : « Mais voyons, c’est évident que le timbre-poste, c’est pour envoyer un e-mail, non ? ».

Faciliter la navigation

En accélérant la compréhension et en favorisant la mémorisation des concepts portés, les icônes facilitent déjà la navigation. Ce ne sont pourtant pas les caractéristiques les plus frappantes à ce sujet. Prenez l’interface d’une boutique en ligne et regardez un peu.

Le panier est bien visible sur la page d’accueil d’Amazon.com
Le panier est bien visible sur la page d’accueil d’Amazon.com

Maintenant, si l’on vous demande où se situe le panier, vous le situerez extrêmement rapidement : c’est magique !
En fait, non : c’est tout sauf magique. C’est de l’information stockée de façon inconsciente au moment du parcours de notre regard sur l’écran. Nous n’avons conscience que d’un élément sur dix des informations qui transitent dans notre cerveau 4. Celui-ci va pouvoir, comme par magie, nous ressortir les informations qu’il a enregistré à notre insu au bon moment. Avec des icônes déjà connues et identifiées, il va ainsi pouvoir nous ressortir différentes zones de la page au moment où nous en avons besoin. Ta-daa !

Homogénéiser l’interface

Une autre raison pour laquelle « les icônes, c’est trop bien » est que les icônes peuvent être stylisées. En effet, si le pictogramme n’a pas d’information stylistique, les icônes, elles, peuvent porter des informations qui vont amener une véritable cohérence à notre interface. Ainsi, il est aussi bien possible de baser le style d’icônes sur celui du logo de notre site, ou sur celui du style global de l’interface. En somme, un petit plaisir pour les graphistes, mais surtout des éléments qui peuvent se transformer en véritable valeur ajoutée, notamment en terme d’identification et de cohérence graphique.

Des icônes autour d’un seul et même style pour le CMS SPIP
Des icônes autour d’un seul et même style pour le CMS SPIP

Et nous voilà, euphoriques, prenant déjà notre élan en hurlant « C’est partiii, mettons plein d’icônes partout ! ».
Et puis, la réalité dure et froide vient nous frapper en pleine face : nous venons de prendre connaissance de la page d’accueil du site de département français de l’Eure.

Conseil Général de l’Eure. No Comment.
Conseil Général de l’Eure. No Comment.

« Les icônes, c’est le mal. »

Pulsations cardiaques à 200 par minute. Sueurs et tremblements. Nous revoilà sur notre pont, et bizarrement, l’envie de sauter nous est passée. Le précipice que l’on regardait à l’instant comme une gigantesque injection d’adrénaline et de fun ressemble désormais à un tombeau. Ce tombeau qui pourrait être notre tombeau. Avant de sauter, il va falloir nous préparer, connaître les risques, apprendre à les éviter, à les anticiper.
Nous avons toujours le choix de faire demi-tour et de dire non aux icônes. D’ailleurs, c’est une solution tout à fait viable et que l’on peut retenir dans certains cas : pour un blog, un site institutionnel, parfois même une application Web professionnelle, qui demanderont un autre type de travail.

Un très bon exemple de site sans icône très réussi est celui d’Information Architects.

Capture d’écran de la page d’accueil du site d’Information Architects
Capture d’écran de la page d’accueil du site d’Information Architects

Ce site nous rappelle par la même occasion que les icônes ne sont pas là pour faire joli[5 -> Un peu quand même, mais ce n’est pas l’objectif !] : elles doivent répondre à un besoin précis. Si nous voulons utiliser des icônes sur notre site pour la seule raison que c’est joli, alors autant sauter maintenant et tant pis pour les conséquences.
L’un des premiers pièges à déjouer est donc de bien faire la différence entre l’icône et l’illustration.

Une icône n’est pas une illustration

En effet, ce n’est pas le visuel qui fait l’icône : c’est son usage. Et cet aspect est d’autant plus périlleux que l’on peut très bien imaginer utiliser le même visuel en tant qu’icône et en tant qu’illustration. Ainsi sur The Noun Project, la forme d’un train est utilisée en page d’accueil en tant qu’illustration. En revanche, son utilisation dans un moteur de recherche de transports en commun, pour exprimer qu’une portion de notre trajet se fera en train, donnera à ce symbole le rôle d’icône.

La page d’accueil de TheNounProject
La page d’accueil de TheNounProject

Une icône a de grands pouvoirs et donne à celui qui l’utilise de grandes responsabilités : il ne faut donc pas baser nos choix d’icônes sur leur esthétique, mais sur leur symbolique. C’est pourquoi le style n’intervient qu’au dernier moment dans notre processus de choix d’icônes.
Il nous faut nous concentrer sur une autre composante de ces visuels : le pictogramme.

Les pièges du sens

Pour réussir notre saut, l’élément le plus important est la compréhension, par nos utilisateurs, des concepts que l’on souhaite diffuser via nos icônes. Comme nous l’avons vu précédemment, le cœur conceptuel de nos icônes est leur pictogramme.

Avant tout, il va falloir connaître la cible de notre interface afin de pouvoir bien définir les différents éléments liés à leur culture, leur société, leurs capacités, éléments sur lesquels nous allons pouvoir nous appuyer. En effet, si nos pictogrammes contiennent des symboles ou des éléments figuratifs non connus des utilisateurs, il ne faudra pas espérer que ceux-ci puissent déduire d’eux-mêmes le sens porté par ces formes. Il faudrait alors les expliquer, ce qui ne les rendrait utiles qu’une fois passée la phase de mémorisation du pictogramme. Nous devons absolument penser aux références / référentiels de nos utilisateurs.

Utiliser un renne pour symboliser la faune dans un site dont la cible habite la zone intertropicale, est-ce vraiment une bonne idée ?
Utiliser un renne pour symboliser la faune dans un site dont la cible habite la zone intertropicale, est-ce vraiment une bonne idée ?

Mettre les icônes dans le bon sens

Outre les problématiques de cible, il nous faut également éviter de sauter la tête la première dans les concepts portés par nos pictogrammes. En effet, nous n’avons pas l’assurance de la réciprocité du concept ou, exprimé de façon plus simple, ce n’est pas parce qu’un pictogramme répond à un concept que nos utilisateurs penseront à ce concept en le voyant.
Par exemple, tout comme Nokia, il peut nous sembler légitime d’utiliser une icône de boussole en tant que raccourci pour l’application “plans”. C’est effectivement une application qui va nous permettre de nous orienter, mais ce n’est pas une application “boussole” à proprement parler, comme en embarquent par exemple certains concurrents sur leurs appareils.

Le pictogramme de plan utilisé par Nokia.
Le pictogramme de plan utilisé par Nokia.

Et il n’existe pas de solution miracle ou de science infuse qui vont pouvoir nous aider à choisir nos pictogrammes. Cependant, nous placer de façon naïve devant une liste de pictogrammes est une bonne idée pour sélectionner des candidats pour composer nos icônes : ce procédé permet de suivre le même chemin de réflexion que celui par lequel passeront nos utilisateurs : pictogramme puis concept, alors que si l’on recherchait directement et cérébralement « Le bon concept »™, celui-ci pourrait nous mener à de fausses pistes. Enfin, pour finaliser notre choix, l’utilisation de personnes non impliquées dans ce choix sera indispensable.

Oui, les tests sont indispensables

Non, nous n’allons pas jeter d’autres personnes dans le vide à notre place pour vérifier si l’élastique est bien là.
Il est juste question de valider nos choix en leur soumettant nos différentes propositions de pictogrammes en contexte. Nous l’avons précisé dans notre définition des icônes : le sens de celles-ci dépend de leurs pictogrammes et de leur contexte. En ajoutant cette variable du contexte à notre phase de test, nous allons valider si chacun de nos choix porte « Le bon concept »™.

La procédure de test à réaliser n’est pas compliquée :

  • Présenter un brouillon (ou même une maquette) d’interface permettant aux testeurs de bien identifier le contexte : Suis-je sur le site d’une pâtisserie ? Sur une application professionnelle pour tracer un plan ? Sur un forum altermondialiste ?
  • Créer la même interface avec différents pictogrammes (au maximum cinq) sans libellés ;
  • Montrer la maquette pendant 10 secondes en précisant en amont que nous allons leur demander de reconnaître des pictogrammes ;
  • Demander à quoi correspondent les pictogrammes vus, et collecter cette première série de réponses spontanées ;
  • Demander une nouvelle fois, avec cette fois-ci la maquette sous les yeux.

Cette procédure va nous permettre d’identifier plusieurs choses :

  • Est-ce que mon pictogramme est déjà stocké dans la mémoire immédiate des personnes testées ? 5.
  • Est-ce que les utilisateurs “reconnaissent” le concept ?

Le panel de testeurs dépend de notre cible et de notre projet. Mais, a minima, tester ses pictogrammes sur ses collègues est déjà une bonne chose qui nous permettra de tirer des enseignements.

Comment savoir si ses choix sont les bons ?

Mais comment valider nos choix ? Nous avons dit précédemment que l’unanimité ne se ferait jamais et que, quel que soit notre choix, nous trouverions toujours des personnes ayant des références différentes des nôtres.

Pour nous aider, inspirons-nous de ce qui existe déjà. Les pictogrammes utilisés dans les bâtiments publics, pour des éléments de sécurité, pour les transports, etc. sont soumis à des normes.
Ainsi, l’ISO a défini dans sa norme 7001 un certain nombre de pictogrammes. Ces éléments, pour être inclus dans la norme, doivent présenter un ratio minimum obligatoire à des tests utilisateurs internationaux. Ces tests confirment que 65 % des sondés comprennent le concept des pictogrammes et que moins de 10 % comprennent le sens inverse. Lorsque l’on souhaite choisir ou concevoir un pictograme, la norme ISO nous fournit une belle base de recherche. Celle-ci peut être enrichie par d’autres symboles présents sur The Noun Project et tout particulièrement la base d’icônes de l’ONU, celle de webplatform ou encore celle des parcs nationaux américains présents sur ce site.

Avec une cible moins large que l’ISO, l’organisme de normalisation américain peut se permettre d’être plus exigeant et fixe ce ratio à 80 % de compréhension et 10 % de compréhension inverse. Dans notre projet, ces limites seront à fixer en fonction de notre cible et de leur culture commune.

Et si nous avions eu des étiquettes…

Notre cerveau est en surchauffe, tous ces éléments à prendre en compte et si peu de temps… Tout aurait été beaucoup plus simple si nous avions eu droit à des étiquettes.
Ces libellés sont nos parachutes. Si une icône n’est pas comprise immédiatement, on peut l’aider à transmettre « Le bon concept »™ à nos utilisateurs d’une façon plus sûre : en l’écrivant. Et s’il faut veiller à ce qu’elles ne ralentissent pas la navigation des visiteurs les utilisant, les icônes permettent de guider les utilisateurs indécis vers les bons contenus. Pour favoriser ce phénomène, il est nécessaire de prendre en compte le sens de lecture de nos utilisateurs. Si notre site est dédié à des personnes lisant de droite à gauche, alors l’étiquette devra être placée à gauche, et inversement pour les personnes adoptant un sens de lecture de gauche à droite. Pour un site adapté aux deux sens de lecture, un placement en dessous des symboles serait (?) alors judicieux.

Si les étiquettes ne sont pas présentes, un parachute de secours pourra toujours être ajouté : les alternatives et titres. Si les alternatives pourront guider les malvoyants directement vers « Le bon concept »™, les titres pourront indiquer cet élément grâce à l’infobulle affichée par défaut de nos navigateurs. Oh joie, un parachute de secours existe. Cela dit, il n’est pas forcément facile à utiliser pour nos visiteurs mais c’est toujours mieux que rien. Pensons donc à mettre des titres sur nos liens et des alternatives à nos images si nos étiquettes ne sont pas présentes 6.

Préparons notre saut.

Nous commençons à y voir plus clair. Dans notre cerveau, la panique est partie se cacher dans un coin pendant que nos neurones tournent à plein régime ; nous savons d’où nous allons partir, où nous voulons atterrir et dans quelle direction sauter. Maintenant que le cadre global est posé, il nous reste encore à prendre en compte quelques derniers éléments : allons-nous sauter les bras écartés, ou plutôt les bras le long du corps ? Quel style allons-nous nous donner ? Comment prendre en compte le sens du vent ?

Mais que fait ce hispter dans mon péplum ?

Si certaines icônes se distribuent en pack, c’est évidemment pour qu’on puisse les consommer plus facilement : idéal pour avoir une cohérence graphique.
Il est en effet nécessaire que, dans notre interface, tous ces éléments visuels possèdent un même style : qu’ils soient cohérents. Principalement pour deux raisons :

  • La première est liée à la compréhension. Prenons un site sur le thème de l’empire romain. Avec des icônes de grande taille, il devrait être possible d’utiliser une carte de l’empire pour présenter le territoire, une villa pour les constructions et un soldat en costume pour les armées. Utiliser le style vestimentaire d’un hipster pour les tenues au mileu de cette ambiance nous semble complètement inadéquat. La cohérence graphique induit une cohérence plus globale et permet d’identifier ces visuels en tant qu’icônes et non en tant qu’illustrations. C’est pourquoi l’utilisation d’un même style est important, notamment pour assurer à nos visiteurs que ce visuel est bien porteur d’informations pour leur navigation et qu’il ne s’agit pas d’une illustration.
  • La seconde raison est esthétique et liée à la direction artistique que va prendre le site : à moins de vouloir créer un site complètement Monty Pythonesque, quel est l’intérêt de mettre un hispter dans un péplum ? Sérieusement ?

Intégrons nos icônes

Maintenant que nous avons « Le bon concept »™ et le style adéquat, il ne nous reste plus qu’à intégrer ces icônes dans notre interface et deux possibilités s’offrent à nous :

  • Doit-on utiliser un format vectoriel pour nos icônes avec une police d’icônes comme nous permet d’en créer fontello ou le format standard SVG ?
  • Ou doit-on privilégier des icônes dans un format image pixellisé comme le PNG ?

Il n’y a pas de solution miracle et tout cela va dépendre de notre format final, car si la solution vectorisée est idéale pour les tailles supérieures à 100px et, dans le cas des polices d’icônes, pour des fichiers très simples en terme de formes (une couleur, peu de dégradés…), les solutions pixellisées restent encore à leur avantage pour les petites tailles d’icônes de par la perte d’informations au moment de la diminution de la taille. Comment choisir ?

La lisibilité d’une icone dépend de sa taille. Celle de droite est trop petite pour être comprise !
La lisibilité d’une icone dépend de sa taille. Celle de droite est trop petite pour être comprise !

Résumons

Si nous souhaitons utiliser des icônes comportant plus d’une couleur :

  • Nous ne pouvons pas utiliser les polices d’icônes (une seule couleur) ;
  • Nous pouvons utiliser le SVG avec les limitations liées à ce format (compatibilité avec Internet Explorer 9+, Firefox 4+, Chrome 4+, Safari 4+ et Opera 9.5+ et tous les navigateurs mobiles sauf webOS Browser et Amazon Silk) ;
  • Nous pouvons utiliser un format d’image comme le PNG en veillant aux poids des fichiers et aux différentes résolutions d’images.

Si nous souhaitons utiliser des icônes comportant une seule couleur :

  • Nous pouvons toujours utiliser les solutions SVG ou images avec les mêmes recommandations ;
  • Nous pouvons utiliser les polices d’icônes. C’est peut-être la meilleure solution si mon site n’a pas pour cible des utilisateurs de Windows XP et d’Internet Explorer dans ses versions inférieures à 7. Dans cette configuration, les petites icônes ne seront pas affichées de façon suffisamment propre pour qu’elle puisse apporter un véritable intérêt à la navigation.

Prêts pour le grand saut ?

  • « concept ? check,
  • contexte ? check,
  • tests ? check,
  • style ? check,
  • alternative et titre ? check,
  • intégration ? check. »

L’appréhension est toujours là. L’adrénaline monte. Sauter ? Ne pas sauter ? Au final, c’est nous qui sautons. C’est notre choix. Utiliser les icônes seules, cela n’a pas changé depuis le début de notre article, c’est prendre un risque considérable. Il est toujours temps de dire non : ce n’est pas parce que nous avons réalisé cette solution uniquement basée sur des icônes qu’elle est forcément la bonne ; il est de notre responsabilité de savoir parfois nous y opposer, mais de façon constructive.

D’ailleurs, nous avons sans doute passé plus de temps sur ces icônes et sur leurs pictogrammes que si nous avions réfléchi à une nouvelle organisation de notre menu. L’utilisation d’icônes n’est pas la voie de la facilité même si les normes pictographiques peuvent nos accompagner dans le choix du « bon concept »™. Il est, à ce propos, intéressant de remarquer qu’il n’existe pas (encore ?) de norme pour les icônes utilisées dans le Web, comme la “géolocalisation”, par exemple. On retrouve ainsi une icône “géolocalisation” différente en fonction de notre application de plan : iOS plan, Nokia Maps, Google Maps…

Les différents pictogrammes de Géolocalisation
Les différents pictogrammes de Géolocalisation

De la même façon, des questions se posent autour de la navicon. Cette icône utilisée pour montrer les menus dans les applications depuis quelques mois dans les pages Youtube et Chrome. En fonction de son utilisation, cette superposition de trois lignes peut représenter un texte, une liste, la navicon voire même un hamburger. Si elle semble parfaitement comprise par les utilisateurs réguliers de ces interfaces, aucun élément ne prouve qu’elle est adaptée et comprise dans son contexte. Sommes-nous en train de créer, comme pour le pictogramme des toilettes, un symbole réservé à des initiés ? Je n’ai pas la réponse et celle-ci ne pourrait venir que d’une série de tests similaires à ceux réalisés dans le cadre de la normalisation ISO 7001.

La (trop) célebre navicon
La (trop) célebre navicon

Il semble nécessaire de pouvoir s’appuyer sur des pictogrammes fiables et cohérents pour nos interfaces. Devons-nous aller vers une “normalisation” des pictogrammes pour le Web ? Oui. Cela permettrait une véritable cohérence. Une véritable base de pictogrammes rencontrés régulièrement qui pourraient ainsi être stockés facilement par la mémoire de nos utilisateurs rendant ainsi leur visite plus facile. Et cela sans pour autant signer un acte d’uniformisation des interfaces : des graphistes de talent sauront toujours donner un style à ces pictogrammes pour en faire de superbes icônes !

Qu’attendons-nous alors pour améliorer ainsi l’expérience utilisateur globale du Web 7 ? Qu’attendons-nous pour nous simplifier notre travail de designer ?

Et d’ailleurs, revenons au réel, si notre choix est celui-là, qu’attendons-nous pour sauter : livrer notre proposition ?

  • « À trois : à la une, à la deux, à la … »
  1. c’est à dire « Tu vas m’allumer cette lampe, oui ? »
  2. Cognitive artifacts. DA Norman – 1991
  3. The design, understanding and usage of pictograms, Tijus, Barcenilla, Cambon de Lavalette and Meunier – 2007
  4. Le pouvoir de l’inconscient – CNRS – 2006
  5. Auquel cas, on peut se lever, faire le tour de la pièce et crier “Bingo !”
  6. Ah bon, c’est également une des bases de l’accessibilité et du référencement ?
  7. C’est la conclusion, les gros mots sont lâchés
Des icônes et des interfaces

Note de cet article : 4 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Après des études de mathématiques et des débuts dans la communication dans une galerie d'art moderne et contemporain, Sébastien Desbenoit est designer chez ThinkInnovation. Passionné par la vulgarisation et la visualisation, il tente sur son blog « Internet et Moi » de rendre compréhensible Internet et ses phénomènes à l'aide d'infographies. Il contribue également au site WebPlatform.org (icônes & contenus) et fait partie de l'équipe qui organise la conférence Sud Web.

Découvrir les autres articles de cet auteur

4 réactions à cet article (RSS)

Cabaroc

#1

Concernant le navicon, il n’est pas compréhensible mais, paradoxalement, il fait l’objet d’un certain consensus et de peu de variation. Et c’est plutôt une bonne chose pour ce genre de signe qui devrait entrer dans le cerveau des gens à force de le voir de partout.

Sébastien Desbenoit

Sébastien Desbenoit

#2

Encore une fois, je n’ai pas la réponse. C’est formidable que l’on trouve un pictogramme pour cette signification parce que je pense qu’il y a un besoin. La question est : est-ce le bon ? Je pense que seul des tests pourront le dire.

Mickael

#3

Bonjour,
Pouvez vous me dire combien d’icones un être humain peut il mémoriser? Ne sature t’il pas à un moment? car comme dit l’article on trouve des icones partout maintenant.

Sébastien Desbenoit

Sébastien Desbenoit

#4

Bonjour Mickael,
Je n’ai pas trouvé de vraie littérature sur le sujet mais voici quelques éléments de réponse.

Chaque pictogramme est un symbole tout comme l’est une lettre ou un idéogramme chinois (sinogramme). La lecture du chinois courant demande la connaissance de 3 000 à 5 000 symboles et on estime (il y a de nombreux débats) qu’il existe plus de 40 000 symboles différents dans cette langue. Tout est donc une question d’apprentissage mais notre cerveau à largement la capacité de rétention d’informations pour un très grand nombre de pictogrammes !

Réagir à cet article

XHTML : Vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>