Pictogrammes, icônes, symboles, l’importance de ces signalétiques web

– Un pictogramme est un dessin schématisé de manière à être reconnu aussi facilement qu’une lettre de l’alphabet.

– Une icône est un petit  pictogramme représentant une action, un objet, un logiciel, un type de fichier, etc.

– Un symbole est un être ou une chose qui représente un concept, qui en est l’image, l’attribut, l’emblème. (source: Wikipédia)

Un bon pictogramme web doit être à la fois, une icône et un symbole. Il doit être facilement reconnaissable, rapide à lire, petit, représentatif et un emblème.

 

pictogrammes
 

Pourquoi utiliser un pictogramme alors qu’il existe déjà un logo?

Le logo n’a pas la même fonction. Il peut être typographique ou avoir, en plus, une partie graphique. Il est le visage de la marque, le nom.  On s’en sert pour designer une identité.

Le pictogramme lui n’est pas un nom, il est une signification, et sa nature même insinue qu’il “donne accès à”.

Lorsque vous voyez un pictogramme, vous savez que vous pouvez cliquer dessus et que ceci vous mènera à une nouvelle page, un formulaire, un site ou vous donnera accès à un fichier, un logiciel ou bien d’autres. Il peut également servir de point de repère sur une page. Ceci fait partie de la culture web. le rôle de ce pictogramme est que vous sachiez en un seul coup d’oeil vers quoi il vous mène. Pas de texte, pas d’explication, une simple image au petit format.

Un logo peut également être un accès. Les sites qui présentent leurs partenaires, affichent les logos de ces derniers. Ils y attribuent souvent un lien qui mène au site du partenaire. Le but premier est de nommer, c’est pourquoi on utilise le logo. Le second but est de mettre en valeur le partenaire, d’où le lien vers son site, et de générer du trafic. Pour de plus amples explications sur la génération de trafic, référez vous à l’article

Les bonnes pratiques du référencement by Shokola” partie 3.

 

Quand utiliser un pictogramme?

Sur un site web, un pictogramme sert à mettre en exergue les accès particuliers/importants de votre site. Cela peut être des liens vers vos réseaux sociaux, l’accès à votre site dans une autre langue, l’accès à un formulaire de contact, la représentation d’un produit ou d’un article..etc

Le visuel de vos pictogrammes doit être différent du code visuel de votre menu. Vos rubriques servent à se déplacer dans le site tel un chemin d’accès. Le pictogramme permet de se repérer dans une page et de hiérarchiser l’information au même titre qu’un gros titre. Ceux ne sont pas les mêmes fonctions et il est important de les distinguer.

 

article shokola, les pictogrammes

 

Pourquoi personnaliser des pictogrammes existants?

Les pictogrammes étant différents des logos il est donc possible de les modifier à votre guise. Vous pouvez ainsi adapter les pictogrammes à la charte de votre site. Cela vous permettra d’avoir une plus grande cohérence visuelle sur vos pages. Vous éviterez ainsi de vous retrouver avec un carré rouge en pleins milieu alors que votre site est tout en bleu et blanc.

Cela permettra aux internautes de mieux repérer les pictogrammes. Si ils sont tous représentés de la même façon, par exemple avec pour forme de base un rond bleu, vos internautes seront alertés dés qu’ils verront un rond bleu. Inconsciemment ils les chercheront. Si un de vos pictogramme est un carré rouge, ils risquent de passer à côté.

Cela permettra de mettre tous les pictogrammes sur un même pieds d’égalité. Si vous ne personnalisez pas vos pictogrammes, seul les plus populaires seront remarqués, tandis que les autres passeront inaperçus. En revanche si vous créez tous vos pictogrammes avec la même forme de base, exemple un rond bleu, l’internaute reconnaîtra les plus populaires et le code graphique lui fera porter une plus grande importance à tous les autres ronds bleus.

Cela vous permettra de mettre en place un code graphique efficace que vous pourrez décliner. Vos boutons important pourront ainsi avoir la même apparence que vos pictogrammes et auront plus d’impact.

 

pictogrammes avec et sans personnalisation

 

Quels sont leurs avantages?

Le pictogramme sert à faciliter et simplifier l’interface utilisateur en utilisant le graphisme.

L’un de ses plus grands avantages est son format. Sur un site, un pictogramme n’excède rarement 180×180 pixels en grande taille. Il doit également rester lisible en petite taille 40×40 pixels. Les pictogrammes ont des formats dont la largeur est égale à la hauteur. Ils sont des blocs égaux, ce qui facilite grandement la conception d’un site et de son visuel. Il est bien plus difficile de mettre en forme des logos ou du texte dont les formes varient.

Un pictogramme n’est qu’une simple image, il n’y a donc pas de décryptage et de lecture, c’est une reconnaissance immédiate. La rapidité de lecture qu’offrent les pictogrammes permet à vos visiteurs de trouver rapidement l’information souhaitée sans se lasser de chercher vainement ce qu’ils veulent. Cela peut vous permettre de perdre moins d’internautes et de les inciter à accéder aux pages de votre site.

La modernité plaît. Montrez que vous savez utiliser les derniers outils du web. Le pictogramme est à la mode et l’internaute veut en voir. Le fait de rentrer dans la tendance permet d’être plus lisible car c’est ce que vos visiteurs s’attendent à voir. Ils faut les mettre à l’aise dans un contexte qu’ils connaissent. Un pictogramme élégant et bien pensé, peut faire la différence.

 

INFO PLUS!

Le FLAT DESIGN, tendance du moment!

 

pictogrammes flatdesign

 

Le Flat design est un mouvement graphique et ergonomique du web qui se distingue par des interfaces minimalistes aux couleurs vives utilisées en aplat et des formes géométriques, douces et fluides.

C’est une tendance très populaire qui prend ses sources de l’art moderne (1920) et de l’art des années 60. Il se veut intemporel, coloré et géométrique. Il est actuellement très utilisé pour la réalisation de pictogramme. Ses mots d’ordres sont:

  • l’esthétisme
  • le minimmalisme
  • le rationalisme
  • le fonctionnalisme

Le Flat design doit être beau, épuré, évident, lisible et compréhensible. Il n’est pas étonnant que ce mouvement soit aussi compatible avec la pictographie web car il a toutes les qualités pour créer un visuel élégant et rapide à lire.

(source: Webplanet, Pinterest)

 

site flatdesign

Cet article vous a plu ?

Restez informé de nos dernières news

En nous communicant votre adresse mail vous acceptez de recevoir régulièrement notre newsletter. Votre adresse ne sera pas utilisée pour d’autres types de communication et ne sera pas transmise à des tiers - Politique de confidentialité

Partager sur

À lire également