Étiquettes : accessibilité, expérience utilisateur, formats éditoriaux, principes formels

Sur le Web, les contenus visuels ont dépassé le statut de décorum qu’ils revêtaient au début. Ils exercent parfois un impact énorme sur les taux de clic.

Les contenus iconographiques concourent à la compréhension des contenus textuels quand ils ne les concurrencent pas. Ce sont des éléments constitutifs du design et de l’identité du site. Parfois, ils revêtent même le statut de véritables outils d’information et de communication (cartographie, par exemple), voire, bien sûr un moyen d’expression personnelle, communautaire, …

[pullquote]Les tests sont formels: les contenus iconographiques procurent un autre niveau de lecture à l’écran.[/pullquote]

Le web, créé au départ pour véhiculer du texte, a tellement intégré l’image fixe et animée qu’aujourd’hui, on n’imagine pas une page produit, une landing page, un article de blog, un emailing sans effet graphique ou l’un ou l’autre visuel pour attirer le regard ou appuyer le propos.

L’image a retrouvé l’importante qu’elle a dans les autres médias que nous consommons au quotidien – la télévision, la presse écrite et la publicité. Du reste, les tests sont formels: les contenus iconographiques procurent un autre niveau de lecture à l’écran, et influencent beaucoup le trajet de l’oeil, la lecture et, au final, le clic.

Mais qui veut tirer parti d’une bonne iconographie doit passer par une stratégie qui assure une bonne gestion des images et photos en ligne.

Bonnes pratiques pour de bonnes images

Passons en revue quelques-unes des exigences auxquelles doivent répondre les visuels dont vous agrémentez vos pages Web.

Tout matériel graphique doit être lisible

Privilégiez donc la qualité et la pertinence – Ce n’est pas parce que l’iconographie a la faveur des internautes qu’il faut leur flanquer n’importe quoi. Une image mal cadrée, insignifiante ou tout simplement banale peut avoir un effet contraire à celui escompté.

Limitez le nombre et la taille des visuels

Trop de visuels risquent de saturer le sens. Utilisez l’image, fixe ou animée, de manière modérée, pour soutenir votre propos ou véhiculer un message. Ne tapissez pas tout l’écran d’un grand visuel, surtout si vous prévoyez du texte en-dessous.

Des études montrent que l’internaute a tendance à ne pas utiliser la barre de défilement lorsque le haut de l’écran est occupé par une image. Votre contenu éditorial en dessous du pli de la page risque donc de ne pas être consulté.

Laissez l’internaute contrôler l’accès aux contenus

Proposez toujours vos visuels en petit format d’abord et laissez l’utilisateur cliquer sur la miniature s’il veut voir la photo en plein écran. De cette manière, vous réduisez non seulement la taille, mais aussi le poids des images pour moins ralentir le chargement des pages.

Si vous souhaitez proposer un album de photos ou une série de vidéos, laissez toujours le choix à l’internaute de consulter ou non toute la panoplie.

Pour les vidéos, ne lancez pas les clips par défaut à l’ouverture de la page-écran. Proposez une image statique, dotée des icônes typiques d’un lecteur vidéo. De cette manière, vous laisser l’utilisateur contrôler le contenu, et, à sa guise, faire une pause, stopper ou reprendre la lecture, voire ignorer l’animation ou la vidéo.

Décrivez vos contenus animés

Expliquez aux lecteurs ce qu’ils sont sur le point de visionner, avant qu’ils le visionnent. Comment? En introduisant vos animations, vidéos et graphiques par quelques mots d’explication.

Utilisez des incitants visuels réalistes

Choisissez des visuels qui évoquent des objets concrets lorsque ceux-ci doivent soutenir un incitant à l’action. Un bouton, un lien soutenu par une image réaliste aura plus de potentiel qu’un incitant sans référent pour l’utilisateur.

Légendez vos images

Les légendes permettent de répéter un élément du propos, mais en outre, elles attirent le regard – dans son comportement de balayage, l’internaute a parfois tendance à oblitérer les visuels et à s’accrocher aux textes, surtout s’ils sont dotés d’effets typographiques.

Prévoyez des textes alternatifs

Pour chaque visuel que vous publiez, vous devez penser à l’accessibilité de ce contenu non textuel. Proposez un texte alternatif qui décrive le propos ou l’illustration. Cela vaut pour les images mais aussi pour les animations, les cartes de géolocalisation, les fichiers audio, etc.

D’autres conseils ou impératifs pour une bonne gestion des images ou photos en ligne? A vous la parole.

---