Lorsque vous avez investi dans votre site internet il y a quelques années de cela, il était beau, fonctionnel, propre… Vous avez eu plaisir à travailler dessus. Aujourd’hui, il en est tout autre. Les principes de design web ont évolués. De ce fait, votre site vieilli mal, les pages mettent du temps à charger, votre marque n’est plus alignée avec les valeurs et le design de votre site.

Vous êtes un professionnel assumé, mais votre site internet vous fait passer pour un amateur. Vous avez presque honte de l’associer à votre marque.

Ce scénario vous est peut-être familier ? En fait, il est commun a beaucoup de monde. Que ce soit sur le site de nos clients ou sur mes propres sites, je ressens également la même chose.

Et plus le temps passe, plus les refontes de site deviennent nécessaire.

Quelle est la solution ?

Effectuer chaque année une refonte complète du site Web est une réponse évidente. Il ne s’agit pas seulement de quelques ajustements stratégiques, mais d’une réinvention visant à faire entrer votre vieux site Web dans le monde actuel.

Votre nouveau site comportera des photos d’arrière-plan pleine page en haute résolution, de jolies scènes animées, des graphiques vectoriels élégants, des carrousels jQuery, etc. Le résultat final sera un design époustouflant dont la création dépassera votre budget. Mais n’hésitez pas, cela en vaut la peine, car :

• Les gens préfèrent le plaisir des yeux, c’est pourquoi les sites dotés d’images attrayantes les incitent à naviguer.
• Les graphiques et les images sur le Web attirent l’attention et les nouveaux visiteurs n’appuieront pas sur le bouton « retour ».
• Un site accrocheur impressionne les prospects et les rend plus susceptibles de se convertir à l’achat.
• Les images tape-à-l’œil montrent que vous êtes moderne et branché, le genre d’entreprise en laquelle les gens ont confiance, ce qui se traduit par une augmentation des ventes.
• Pour résumer, pour chaque élément accrocheur de votre site, vos ventes augmenteront d’un certain pourcentage.

TOUT CECI EST FAUX !

Les graphiques et les images Web peuvent en fait entraîner une diminution du nombre de lecteurs. Il est vrai que les images attirent l’attention des gens. Les images accrocheuses ne signifient pas nécessairement que les gens liront le corps du texte, et encore moins qu’ils paieront pour acheter ce que vous proposez.

Il faut prendre en compte 3 points importants au sein de vos pages et articles :

• La performance de la page : sa vitesse de chargement et son SEO.
• Le message de la page : quel est l’objectif de votre page ? Attirer des visiteurs, des prospects qualifiés ou des clients ?
• L’accessibilité de la page : les éléments de navigation, les menus et la présence d’un fil d’Ariane pour aider le visiteur à s’y retrouver au sein de votre site.

Si vous chargez vos pages avec trop d’images, d’animations, d’arrières-plans et des scripts… Vous risquez de nuire aux 3 points ci-dessus. Au contraire, il vaut mieux rester dans la simplicité.

Votre site web vieillira mieux et seules quelques retouches seront à effectuer chaque année pour correspondre à l’évolution des bonnes pratiques Google et du World Wide Web Consortium (W3C).

Plus vous resterez dans la simplicité dans vos pages web, mieux ce sera. Mais attention, simple ne signifie pas dire facile !

4 principes pour s’assurer que votre design augmente votre lectorat

Voici les meilleures pratiques de design web à suivre pour augmenter votre nombre de lecteurs. La seule façon de savoir avec certitude comment elles fonctionneront pour vous est de les tester sur votre design web.

1. Le placement est important

La lecture suit un ordre naturel très précis. Cet ordre change selon la nature de ce que recherche votre lecteur :

• Si le lecteur recherche une information dont il a besoin, son œil va naturellement attiré par les infographies, les graphiques et les titres.
  Il vaudra mieux privilégier cet ordre : Titre + métadonnées + introduction + image principale + corps de l’article.
• Si le lecteur cherche à s’évader, à s’inspirer ou à créer (blog voyage, blog artistique, site pour hôtels, services, artisanat), son œil sera naturellement attiré par les belles images et les belles photographies.
  Il vaudra mieux dans ce cas privilégier cet ordre : Image principale + titre + métadonnées + introduction + corps de l’article.

Aperçu de 3 types d’article au format mobile. Ci-dessous, l’exemple détaillé.

Exemple de placement d’articles :

• Le blog de L’Oiseau Rose : c’est le premier blog voyage lorsque l’on tape « blog voyage » sur Google. En plus d’être bien référencé sur ce mot-clé, le site respecte la mise en page qui est alignée avec les valeurs d’un blog voyage : l’évasion, l’inspiration devant les paysages, etc. L’image est mise en avant sur toutes les pages et articles. Un blog voyage « vend » du beau et de l’évasion avant tout. C’est la photo qui vend la suite de l’article. Vient ensuite le titre, les métadonnées puis l’article.
• Le site d’actualité Le Monde. Ici, j’aurais pu prendre n’importe quel site d’actualité francophone ou anglophone. Les codes sont les mêmes… depuis l’apparition de la photographie dans la presse écrite en 1860. C’est le titre qui vend l’article ici. Il est mis en premier suivi d’une introduction faisant office de résumé. Enfin vient les métadonnées, l’image d’illustration, puis le corps de l’article.
• BTK Digital : Je me suis inspiré des sites d’actualités modernes. La mise en page est inspiré des sites d’actualités, car nos visiteurs viennent avant tout pour trouver une information et une éventuelle solution à leurs problèmes. Néanmoins, je mets tout de même l’accent sur les couleurs et l’image principale, car BTK Digital est une agence créative, c’est notre ADN.

Si vous respectez les placements de vos pages et vos articles, votre rétention de lecteurs sera plus élevées. Les lecteurs resteront plus longtemps sur votre site, navigueront sur vos liens internes, ce qui diminuera votre taux de rebond. Ce taux est un indicatif impactant fortement votre position dans les recherches Google.

2. Les légendes sont lues quatre fois plus que le corps du texte

Bon, OK, sur ce coup, sur BTK Digital, nous ne sommes pas de très bons élèves pour le moment. Mais croyez-moi, ça vaut le coup de tester : mettez des légendes sous vos images.

Une image placée au milieu de votre contenu attire l’attention du lecteur sur l’image plutôt que sur le texte. Elle peut même détourner l’attention du lecteur du texte. Il est donc essentiel de placer une légende sous chaque image. La légende doit mettre l’accent sur l’essentiel et, si possible, ramener le lecteur dans le texte.

Selon Neil Patel (le père du Marketing par blog), les légendes sous les images Web sont lues en moyenne 300 % de plus que le corps du texte lui-même. Ne pas les utiliser ou ne pas les utiliser de la bonne manière signifie que vous manquez l’occasion d’engager un grand nombre de visiteurs potentiels.

Dans les pages de ventes de vos produits ou services, les légendes doivent inclure à la fois le nom de votre marque et la promesse de votre marque. Cela vous donne une nouvelle opportunité d’attirer l’attention et l’intérêt de vos lecteurs et de les renvoyer vers le texte – ou de les diriger directement vers un appel à l’action.

3. Respectez la marge de gauche

C’est la base de la rédaction web, respecter une marge commune à gauche pour vos blocs de textes.

Lorsque les gens lisent, ils comptent sur la marge gauche pour qu’elle soit toujours là comme un point d’ancrage – elle leur fournit un endroit où poser leur regard. En l’absence d’une marge gauche cohérente, il n’est pas facile de suivre le texte. L’inverse est vrai pour les langues où le texte se lit de droite à gauche.

C’est pourquoi, dans le monde occidental, le corps du texte ne doit jamais (sauf exceptions) être cadré à droite ou au centre. Si la marge gauche est interrompue, le parcours de l’œil est interrompu, de même que le fil de la pensée.

Par conséquent, ne dispersez pas d’images alignées à gauche dans votre corps de texte. Cette pratique casse le flux de lecture du visiteur et l’oblige à se réajuster.

Cependant, certaines exceptions peuvent subsister comme pour les titres où les éléments sur lequel vous souhaitez porter une attention particulière. Dans ce cas uniquement, vous pouvez vous permettre de centrer le texte (quel affront !).

VOUS VOYEZ ? NE JAMAIS BRISER VOTRE MARGE GAUCHE !

4. La pertinence de vos images

À l’ère où, grâce à l’IA, vous pouvez comparer vos articles avec la concurrence pour adopter un certain nombre de mots, de chapitres, d’images et de vidéos, il est facile de se faire berner. Ce type d’outils nous fournis des données pour correspondre à un idéal d’article, à une moyenne des tops résultats pour votre mot-clé. Et à cause de cela, nous sommes souvent tentés d’ajouter des illustrations pour répondre à l’attente d’un algorithme.

Sauf qu’il y a l’algorithme et la réalité. Peut-être que votre concurrent à 10 images au sein de son article. S’il est numéro 1 sur Google, c’est tout simplement parce que ces 10 images sont pertinentes. Si pour la même thématique et le même mot-clé, vous écrivez un article pertinent qui n’a besoin que de 3 images, ne soyez pas tenté d’en rajouter 7 sauf s’il est pertinent de le faire.

Finalement, tout est question de style d’article. Certains préfèrent écrire des articles avec des articles illustrés (comme WikiHow), tandis que d’autres vont plutôt préférer le texte avec une image d’illustration et une vidéo. Chez WikiHow, les illustrations sont toujours pertinentes. C’est même leur marque de fabrique.

Ce qu’il faut garder en tête ici, c’est la pertinence. Vous ne devez pas faire fuir votre lecteur. Vous l’accueillez sur votre site, donnez-lui toutes les raisons de rester !

Conseil : Si vous ne trouvez pas un paragraphe ou une bonne légende à associer à votre image, c’est probablement parce que l’image n’a pas sa place sur la page.

Les meilleures images Web peuvent être classées en deux catégories :

• Les images qui ont un attrait pour l’histoire.
• Les images qui démontrent quelque chose.

Il est préférable de placer une image avec un attrait pour l’histoire au-dessus de votre titre H2 ou H3 afin de susciter un fort sentiment de curiosité chez vos lecteurs. Ils voudront savoir ce qui se passe et seront encouragés à lire la suite de l’article pour le découvrir.

Les images faisant appel à une histoire ne sont pas très faciles à trouver. Il est plus difficile de se tromper avec une image de présentation (image principale), car c’est justement ce qu’elle fait : présenter ce qui est écrit dans le texte.

Cependant, votre image principale doit transmettre votre thème central ou votre proposition de valeur avec plus de force que le texte seul ne peut le faire. Les photos « avant et après », les photos de produits et les graphiques ou tableaux montrant des comparaisons sont tout à fait appropriés.

Conseil : Si l’image doit être réduite, rendez-la cliquable pour permettre aux lecteurs d’afficher une version plus grande dans une Lightbox.

Les Images Web à éviter

Certains types d’images doivent être évités comme la peste. La raison en est que leur dominance visuelle distraira les lecteurs sans pour autant les intéresser. Ces graphiques et images Web donneront probablement l’impression d’absence de réflexion quant au contenu de la page, d’incompétence ou d’incapacité à fournir quoi que ce soit de réellement qualitatif.

Parmi ces images, on peut citer :

• Les photos d’archives évidentes. Leur manque d’imagination et leur fadeur générique déteindront sur votre marque. Même si une photo d’archive est attrayante, cela ne signifie pas qu’elle sera efficace.
• Images de mauvaise qualité. Il est préférable de ne rien utiliser plutôt que de montrer une image de faible résolution ou mal redimensionnée, surcompressée, pixelisée ou d’une autre qualité médiocre.
• Les photos de foule. Les meilleures photos ont un seul sujet principal – les photos de foule sont ennuyeuses, car il n’y a personne sur qui se concentrer.
• Des images de visage en gros plan. Les lecteurs auront tendance à les éviter, car elles semblent quelque peu grotesques et suscitent le malaise.
• Les graphiques et les images Web relatifs à des sujets historiques seront généralement perçus comme ennuyeux (à moins que vous ne vous adressiez à un public de passionnés d’histoire).

Et enfin le pire… La capture d’écran avec l’appareil photo… Nous sommes des professionnels, à ne pas reproduire chez soi.

Faites en sorte que chaque image vaille la peine pour le lecteur

Enfin, pendant que vous réfléchissez aux graphismes sophistiqués que votre concepteur Web souhaite utiliser pour embellir votre page, réfléchissez également à ceci :

LA LENTEUR DU CHARGEMENT DES PAGES FAIT PERDRE DES VISITEURS

Selon Stackpath, une augmentation du temps de chargement de 0,4 seconde à 0,9 seconde réduit le trafic de 20 %. Il va sans dire que les images Web augmentent le temps de chargement des pages. Examinez donc attentivement votre dernier contenu agrémenté d’images et posez-vous les questions suivantes :

• Le poids supplémentaire est-il vraiment utile ?
• Chaque image illustre-t-elle la proposition de valeur de ma marque de manière convaincante ou incite-t-elle le lecteur à se plonger dans mon texte par l’attrait de ce qui est raconté ?
• Chaque image est-elle correctement positionnée et légendée de manière attrayante ?
• Chaque graphique et chaque image sur mon site web valent-ils leur pesant d’or ?

Si vous n’êtes pas sûr de vos choix, il est temps de commencer à tester, mesurer et peut-être éliminer pour vous assurer que votre design est approprié. Certains éléments de design comme des séparateurs, des logos et des icônes peuvent être remplacés par du code CSS pour réduire drastiquement le poids d’une page web. N’hésitez pas à optimiser vos images au maximum pour améliorer la vitesse de chargement de vos pages.

Conclusion

Le choix d’un bon design web est plus crucial pour le succès global d’un site Web que beaucoup ne le pensent. En sélectionnant avec soin les images les plus pertinentes pour votre contenu, vous êtes plus susceptible d’améliorer l’expérience utilisateur et, en fin de compte, d’augmenter les conversions (nombre de visiteurs, d’inscrits et de ventes).

Contactez BTK Digital pour connaître toutes les façons dont nous pouvons aider votre site Web à être plus performants sur vos objectifs SEO et marketing.