Illustrer les mots : 5 idées reçues sur les pictogrammes

Oct 29, 2019
Julien Daniel

Les pictogrammes, ces petites icônes que l’on retrouve communément sur les interfaces, sont souvent sujets au débat : en raison de leur signification ou de leur design, ils peuvent véhiculer une expérience totalement différente de votre interface.

Passons en revue les questions les plus communes sur le sujet…

L’icône est indissociablement liée à l’histoire de l’interface utilisateur et à son évolution.

De l’apparition du premier burger menu en 1981 en passant par la création problématique de l’icône de recherche, l’histoire fourmille de milliers d’anecdotes qui amène à se questionner sur le sens premier du pictogramme. D’ailleurs, dit-on pictogramme, symbole ou icône ? Les trois mon cap’taine !

Ces petites illustrations ont envahi nos interfaces : simples, elles permettent de remplacer des descriptifs, elles économisent de la place ; de part leur design, elles peuvent même renforcer l’identité de marque.

Pour vous, UX-Republic révise les idées reçues sur les pictogrammes que tout bon designer peut avoir.

Idée #1 : un pictogramme peut être abstrait

C’est l’un des débats les plus récurrents sur la toile : faut-il être figuratif ? Une icône abstraite peut-elle désigner un concept concret ?

Dans les faits, un designer est libre de faire ce qu’il souhaite. Mais révisons la définition première du pictogramme : il est la représentation graphique d’un concept, d’un objet ou d’une action.

Son usage permet de rendre explicite le message véhiculé. Voilà pourquoi le pictogramme est par exemple indiqué pour l’usage du Code de la route : tour à tour, ses représentations permettent de signaler un danger, d’avertir le conducteur d’un risque, de l’obliger ou de lui indiquer un itinéraire ou encore de lui interdire un comportement.

L’origine d’une communication faite de pictogrammes remonte à la civilisation égyptienne ; les hiéroglyphes sont alors un mélange de phonogrammes et de déterminatifs qui, associés avec le pictogramme, permettent sa lecture.
Autre exemple, l’écriture chinoise est en grande partie constituée de pictogrammes.


Les hiéroglyphes est le premier alphabet à utiliser le pictogramme comme moyen de communication

 

Dans son essence, on perçoit bien l’intérêt du pictogramme : ce dernier doit véhiculer une signification. C’est là tout l’enjeu de votre design : dans un monde numérique, l’icône a une fonction de repère.

Définir une notion avec un pictogramme abstrait, c’est prendre le risque d’une incompréhension pour l’utilisateur final qui n’en percevrait pas le sens.

On réservera l’abstrait à une fonction plus illustrative, par exemple un logo.

Idée #2 : l’apparence des pictogrammes importe peu

Pour votre design, votre pictogramme doit respecter des critères qui varient d’une politique d’entreprise à une autre.

En design d’interface, les créatifs s’accordent souvent sur le fait qu’un pictogramme, pour être efficace, doit être en harmonie avec l’interface globale de votre expérience.

Toutefois, le design d’un pictogramme dépend en partie de son utilisation : en fonction de la résolution d’écran utilisé, de sa récurrence, et plus largement de la stratégie numérique utilisée, son apparence peut considérablement altérer la navigation.
Ainsi, une icône trop sophistiquée pourrait avoir un impact négatif sur l’expérience utilisateur…

Voilà pourquoi il est préférable de réduire l’icône à sa forme la plus minimale, cette fonction simpliste étant là pour garantir la lisibilité et la clarté à toutes tailles.

L’une des questions qui a pu vous effleurer l’esprit en tant que designer, a été de savoir s’il était préférable de dessiner vos icônes en filet ou en plein ?

Une étude donne une réponse plus complète sur le sujet : selon si votre pictogramme emprunte l’un ou l’autre design, la compréhension ne sera pas la même

Une icône en filet sera plus rapide à comprendre et à déchiffrer dès lors que votre icône est assez volumineuse et avec un niveau de détail simple.
Passé ce cas de figure, si le pictogramme en filet présente un espace interne étroit, la silhouette sera plus complexe à appréhender.
Au contraire, les icônes solides sont plus évidentes, car leur design adopte des angles plus nets. Mais son utilisation empêche de remarquer des éléments plus subtils.

Selon l’usage du pictogramme, il conviendra d’opter pour l’un ou l’autre style

 

Pour d’autres pictogrammes enfin, l’un ou l’autre style ne fait aucune différence en terme de reconnaissance.En créant des pictogrammes, il faut donc en amont réfléchir au nombre d’icône et leur impact pour harmoniser l’ensemble.

UserTesting a mené une série de tests pour confirmer cette théorie : à 88%, les utilisateurs étaient en mesure de prédire correctement l’action d’une icône avec texte. Ce chiffre tombe à 60% pour les icônes sans texte… et jusqu’à 34% pour des icônes spécifiques à l’application !

 

Idée #3 : un pictogramme peut remplacer un mot

En ergonomie, la navigation d’un site est grandement facilitée par les icônes ; ces derniers permettent en effet d’identifier l’action d’achat, la recherche, et même les réseaux sociaux.

Mais est-ce une raison pour supprimer complètement le texte des pictogrammes ?

Toutes les interfaces ne sont pas données acquises pour les utilisateurs : devant le manque de clarté, une part importante de votre public pourrait ne pas sortir de sa zone de confort, d’où l’intérêt d’expliciter votre pictogramme en l’accompagnant de texte.

UserTesting a mené une série de tests pour confirmer cette théorie : à 88%, les utilisateurs étaient en mesure de prédire correctement l’action d’une icône avec texte. Ce chiffre tombe à 60% pour les icônes sans texte… et jusqu’à 34% pour des icônes spécifiques à l’application !

Êtes-vous capable de définir ce que produit chaque icône de l’interface Gmail ?

On voit bien qu’il est donc préférable de conserver le label de texte, plutôt que de laisser l’icône uniquement, ce afin d’améliorer l’intuitivité.

 

Idée #4 : le pictogramme est universel

Oui… et non !
Vos utilisateurs sont tous différents, et tous percevront à leur façon le pictogramme.

Saviez-vous par exemple que l’icône de recherche, que l’on représente généralement par une loupe, n’était pas compris de certains utilisateurs indiens ? Ces derniers voient en l’icône… une raquette de ping pong.

L’histoire du menu mobile est sans équivoque celle qui donne matière à réflexion sur le sujet.
À l’ère des smartphones, de nombreux sites ont pris le parti de représenter leur menu de navigation sous la forme d’un pictogramme reprenant 3 rectangles arrondis empilés pour former le très décrié burger menu.
Si cette utilisation induit in facto que les utilisateurs aient compris le sens du pictogramme, tous les sites n’ont en revanche pas choisi cette illustration. Vous-même avez certainement déjà pu apercevoir des différences de design pour représenter l’accès au menu.

Le pictogramme du burger menu : sans libellé, sa signification peut être confusante pour votre cible

Pour un public peu habitué avec l’usage de terminaux numériques, ces différences posent clairement un problème de compréhension de l’interface.

Au-delà de cet aspect, ce sont les différences culturelles qui vont impacter votre design : saviez-vous que selon les pays, le pictogramme devait respecter un sens de lecture ?
Dans les pays arabophones par exemple, votre pictogrammes pourrait, d’après un sens de lecture droite-à-gauche, être inversé.

Le pictogramme est par voie de conséquence une autre définition de la complexité, son caractère universel n’existant qu’à de très rares occasions.
Aussi est-il recommandé de minimiser les risques de confusion, en optant pour des concepts de pictogramme bien connu : certains sont en effet communs sur de nombreux sites (le panier pour l’achat, l’e-mail pour la prise de contact…).
Changer d’apparence un concept, c’est handicaper l’utilisateur qui possède alors moins de repères.

 

Idée #5 : un pictogramme n’est pas nécessairement interactif

UX-Republic a réalisé une étude sur les call-to-action des sites marchands.
Ces boutons d’action, qui donnent une interaction importante à votre utilisateur, présentent des similitudes de design.

39% des CTA étudiés présentent un pictogramme, d’où un questionnement substantiel : pourquoi accorder autant d’intérêt aux pictogrammes à ce niveau ? Tout simplement parce que les utilisateurs réagissent davantage à ces icônes. Ils les associent à une interaction, d’où l’intérêt de lui laisser les moyens d’interagir avec.

Une forme, une couleur, un pictogramme : de multiples possibilités qui augmenteront le taux de clic sur votre CTA

Sur un écran tactile par exemple, les contrôles de l’interface doivent être suffisamment voyant pour capturer les actions des doigts de l’utilisateur sans le frustrer avec des erreurs.
Google comme Apple recommandent d’ailleurs d’utiliser une taille cible exemplaire, de 40px minimum (20pt @2x), avec un écart de 10px entre deux éléments.

Faites l’observation de votre interface via un outil d’eye tracking ou de shadowing : il est fort à parier qu’une zone avec une icône soit massivement cliquée, plus qu’un simple URL.

En guise de conclusion…

En définitive, les icônes sont un sujet simple à évoquer mais moins évident à appréhender.

Si vous souhaitez tester la compréhension de vos icônes, pourquoi ne pas envisager un test utilisateur simple à mettre en place ?

 

  • La règle des 5 secondes

Vous souhaitez vérifier que vos utilisateurs comprennent bien votre pictogramme ? Avec cette méthode, vous allez voir concrètement la façon dont est perçu votre expérience.

Montrez pendant 5 secondes à la personne une icône, puis cachez-la. Demandez-lui ensuite la signification du pictogramme qui a été montré : si ce dernier n’en n’a pas saisi le sens, il est peu probable que ce pictogramme soit efficace.

 

  • La compréhension de votre interface

Cette démarche étudie l’utilisabilité de votre interface par votre cible.

Pendant un entretien utilisateur, présentez une interface et questionnez la personne en lui demandant de commenter à voix haute l’action à laquelle elle s’attend avant de cliquer sur le pictogramme.
Un entretien où l’utilisateur propose des actions différentes de l’expérience attendue vous amènera à vous questionner sur la compréhension des icônes que sur votre flow.

 

Vous recherchez un designer pour la conception de votre prochaine expérience ? Avez-vous pensé à un expert d’UX-Republic ?

Julien Daniel, UX-Designer @UX-Republic

 

 

UX-REPUBLIC Centre de Formations Digitales est un centre de formation agréé. Nos formations en UX-Design, Agile et Javascript sont issues des retours d'expérience et des savoir-faire de nos consultants.