Le langage de votre site internet

Article réalisé par le site : Evolys.net à l'adresse: http://evolys.net/conseils/le-langage-de-votre-site-internet/


Lorsqu'on parle de charte graphique d'un site Internet, on englobe en réalité un grand nombre de notions différentes. On parle à la fois du respect de la charte existante, de design et de colorimétrie pour l'ambiance visuelle, d'ergonomie pour simplifier la navigation, de mise en avant des éléments souhaités.

Il est essentiel d'être cohérent dans cette charte graphique. Implicitement, vous allez créer un langage pour votre site web qui va le rendre identifiable et simplifier (ou non) son utilisation par l'internaute en indiquant visuellement à vos visiteurs les zones utiles.

Voici quelques points identifiés qui font partie du langage de votre site web et qui sont faciles à suivre.

Les couleurs

Avant toute chose, il est primordial de respecter les règles de colorimétrie. Suivre ces règles vous permet tout simplement de proposer des couleurs harmonieuses.

Vous devez bien sûr proposer un design avec des couleurs cohérentes, mais également prévoir des couleurs associées, plus visibles, qui seront utilisées à des fins bien spécifiques. Par exemple, un bouton "promotion" doit être plus visible que le bouton "contact", même si ceux-ci sont présents sur le même menu.

Les images

Les images utilisées doivent aussi être cohérentes. Ça signifie que l'ensemble de vos visuels doivent repondre aux même critères et si possible, à des dispositions similaires. L'objectif est de pouvoir identifier un visuel avec une offre en le distinguant d'un visuel informatif.

Être identifiable et percutant vous permettra d'être plus efficace, spécialement auprès des internautes qui ont visité votre site plusieurs fois.
La disposition des éléments

Il n'y a pas que les images et les couleurs qui constituent le langage de votre site Internet. La structure même de votre site Internet et la disposition de l'ensemble des éléments permettent de structurer la navigation.

Dans un site e-Commerce, beaucoup d'éléments sont dynamiques et le contenu des pages peut varier d'un type de produit à l'autre, mais respecter une disposition commune et une structure commune rend la navigation plus intuitive : une fois que l'internaute a visité une page, il sait ou trouver l'information.

La hiérarchie

La structuration des éléments passe par une hiérarchisation claire des éléments. Les titres des produits doivent être plus visibles que les titres des différentes sections, eux mêmes plus visibles que les textes et ainsi de suite.

Cette hiérarchie doit être la même sur l'ensemble de votre site web. Pour l'ensemble de ces éléments, la hiérarchie est définie par la taille, la couleur, la police, …

Hiérarchiser doit également vous permettre d'homogénéiser l'ensemble des textes de votre site puisqu'ils répondent tous aux mêmes regles. Il devient donc improbable que les textes informatifs soient dans différentes tailles, polices ou couleurs.

Les liens

Rendez vos liens identifiables. Assurez-vous qu'il soit évident que ces bouts de texte soient cliquables et différentiables l'ensemble du site.

Assurez-vous que ces liens soient également cohérents quelle que soit leur position dans la hiérarchie de votre site. Par exemple, s'ils sont soulignés dans le texte, le fait de souligner tous les liens permet de les identifier en un coup d'oeil.

Les boutons

Les boutons "call to action" sont, comme leur nom l'indique, des boutons qui appellent une action de la part de l'internaute; par exemple le bouton "ajouter au panier" sur une fiche produit ou encore le bouton "je m'inscris" pour votre newsletter. Ce sont les boutons qui génèrent une action utile et donc, ce sont ceux que vous souhaitez mettre en avant.

Pour les rendre identifiables, vous pouvez également les hierarchiser. Par exemple, les boutons concernant l'ajout au panier, la validation du panier et des étapes jusqu'au paiement font partie d'une même famille d'action. Assurez-vous qu'ils soient a la fois cohérents entre eux et qu'ils ressortent par rapport au contenu informatif.