Améliorer le design d’un site doit être une préoccupation de tous les instants comme nous l’avons envisagé dans Créer un blog ou un site e-commerce avec WordPress. Vous avez 0,05 seconde pour faire une bonne première impression en ligne. Avant même qu’un internaute ne commence à lire votre contenu, il s’est déjà fait une idée sur la qualité de votre site. Il faut donc à tout prix sauver les apparences.

6 clés pour améliorer le design d’un site

6 clés pour améliorer le design d'un site (57)

Le constat qui conduit à vouloir réaliser un audit du design de son site commence généralement par les problèmes suivants :

  • faible taux de conversion
  • taux de rebond élevé
  • temps de visite moyen très court
  • faible nombre de ventes
  • audience faible

Chaque petit détail compte et nécessite de passer beaucoup de temps à tester et à améliorer les choses, notamment en matière de rentabilité e-commerce. Rappelons que les plus consciencieux se focalisent sur le problème le plus important, comme nous avons appris à le faire dans Monétiser son site, son blog ou son application mobile.

Le guide pour créer un blog ou un site e-commerce vous donne du reste tous les éléments essentiels pour bâtir votre site en mettant à profit les meilleures pratiques en matière de design.

Améliorer le rendu, les couleurs et les polices

6 clés pour améliorer le design d'un site (52)

L’œil est naturellement attiré par les éléments suivants :

  • le logo : si vous ne devez confier qu’une seule chose à un professionnel, c’est votre logo.
  • le menu principal : prenez des rubriques évidentes par rapport à votre niche et à la démographie de votre audience. Reprenez les codes habituels d’un blog si vous lancez un blog ou d’un site e-commerce si vous voulez vendre en ligne.
  • l’outil de recherche : il est capital si votre catalogue de produits est étendu ou si vous avez un grand nombre d’articles.
  • les liens vers les réseaux sociaux : ce serait dommage de passer à côté d’une possibilité de bâtir votre communauté en ligne.
  • la première image de la page : trop souvent négligée, cette première image et le premier bouton cliquable de la page doivent inciter l’internaute à faire ce que vous voulez qu’il fasse en priorité (s’inscrire, acheter, etc.).
  • le contenu écrit : les textes sont scannés rapidement, vous devez donc prévoir plusieurs niveaux de lecture (titres, sous-titres, citations, paragraphes, phrases en gras, etc.).
  • le bas de la page : empruntez les codes d’autres sites de votre catégorie si vous êtes démuni au moment de le constituer.

Les couleurs véhiculent une certaine psychologie, le bleu et le noir sont à privilégier pour les sites d’entreprise. De plus en plus de travaux mettent en avant qu’une part importante des internautes a des problèmes de vision. De ce fait, on recommande assez souvent d’éviter d’utiliser à titre principal le rouge et le vert. Travaillez également les contrastes et les ruptures pour favoriser les clics.

Les polices sont enfin très importantes pour conférer une identité visuelle harmonieuse à votre site. Faites simple en vous contentant de trouver une police différenciatrice pour les titres via Google Fonts. Prenez une police usuelle pour le corps du texte.

Concernant la taille des textes et des interlignes en fonction du support de lecture, privilégiez le confort du lecteur chaque fois que c’est possible.

Optimiser la lisibilité, la navigation et l’ergonomie

6 clés pour améliorer le design d'un site (51)

Si la navigation n’est pas intuitive sur votre site, il y a peu de chances que vous puissiez générer des ventes, des abonnements ou fidéliser vos visiteurs. Reprenez les bases d’une bonne interface utilisateur si nécessaire.

Il faut à tout prix simplifier :

  • utiliser les espaces vides pour aérer la lecture et aider l’internaute à se focaliser sur l’essentiel.
  • en rester aux fondamentaux : éviter les gadgets, les éléments intrusifs comme les pop-ups, les widgets qui surchargent la page et les cliparts ou gifs clignotants façon page perso de 1999.

Plus un site est complexe, moins il est attirant pour un internaute. Ne cherchez pas à réinventer la roue. Un internaute lambda sera plus à l’aise si votre site e-commerce respecte les standards d’un site e-commerce ou si votre blog reprend les fonctionnalités classiques d’un blog.

Sous prétexte que ce sont des designers qui créent des thèmes WordPress, on se retrouve avec un grand nombre de thèmes payants qui répondent uniquement aux besoins d’une agence de design qui se doit d’impressionner le chaland avec de grandes photos et des animations époustouflantes.

Au moment de rédiger un cahier des charges, évitez les tendances, mais soyez toujours dans la bonne direction, notamment en matière de prise en charge du multi-écrans (responsive design).

Toiletter les pages

6 clés pour améliorer le design d'un site (9)

Plusieurs zones sont considérées comme chaudes en matière de clics sur une page : le haut de l’article, le haut du bandeau latéral et le bas de l’article. Ce sont les moments où l’internaute décide de ce qu’il va faire ensuite. Simplifiez au maximum ce choix pour votre visiteur : inscription à la newsletter, lien vers un produit, articles connexes, etc.

Ne mettez pas une série de plusieurs propositions sans les hiérarchiser visuellement (nous suivre sur Facebook, recommander l’article, s’abonner, acheter, etc.). Ne pas mettre en avant un choix est le meilleur moyen de ne rien obtenir de l’internaute sinon une décision de fermer la page.

Optimiser le contenu

6 clés pour améliorer le design d'un site (49)

L’orthographe et la grammaire sont essentielles. Votre manière de mettre en forme les textes doit aussi faciliter le scannage rapide de vos différents points. C’est triste, mais les listes ont un succès fou sur Internet car elles se parcourent aisément, parfois au détriment du raisonnement.

Optimiser les performances de chargement

6 clés pour améliorer le design d'un site (3)

Un chapitre entier est consacré à ce thème dans Créer un blog ou un site e-commerce avec WordPress.

Quelques solutions s’imposent si vous avez recours à un hébergement mutualisé et que votre site est terriblement lent :

  • Choisissez une offre adaptée d’hébergement : il vaut mieux mettre un peu plus d’argent plutôt que de se faire des cheveux blancs chaque fois que quelqu’un vous dit que votre site rame. 1&1 est suffisant pour un site vitrine qui vient de démarrer. En revanche, regardez plutôt un acteur français comme O2switch pour des performances optimales si vous commencez à avoir du trafic.
  • Choisissez un thème déjà optimisé : trop souvent, au moment de choisir un thème, les débutants ne regardent que le design. Or l’architecture du code est essentielle : un développeur expérimenté aura le souci de proposer un code utilisant le minimum de lignes possibles. On parle à raison de beauté du code. Certains thèmes gratuits sont plus rapides que des thèmes vendus au prix fort. Testez plusieurs thèmes et comparez leurs performances sur Google PageSpeed Insights, Pingdom et GTmetrix. Cela vous permettra en plus de glaner des idées d’optimisation.
  • Mettez un cache et compressez vos codes JavaScript et feuilles de style CSS : suivez notre configuration recommandée.
  • Utilisez un service pour gérer votre système de noms de domaine (DNS) et accélérer votre site : CloudFlare est très bien.
  • Utilisez un content delivery network (CDN) : au minimum pour accélérer le chargement de vos photos.
  • Enlevez des extensions : de manière étonnante, des plugins parmi les plus téléchargés de WordPress sont de véritables usines à gaz en matière de performances. On pense notamment aux outils de vérification de liens morts (Broken Link Checker), aux scans de sécurité (WordFence), aux services d’articles connexes. Utilisez la liste noire de WP Engine (en conservant votre service de cache favori). Désactivez une à une vos extensions pour identifier les plus gourmandes.
  • Externalisez la charge sur des services cloud : Jetpack permet par exemple de ne pas solliciter votre serveur au moment de proposer des articles connexes. De nombreux services en ligne permettent de tester vos liens morts.
  • Limitez certaines fonctionnalités : un ajout très simple permet de conserver un nombre limité de révisions de vos articles dans la base de données.
  • Optimisez et réparez votre base de données : une extension peut le faire automatiquement pour vous à échéances régulières.

Avec le temps, vous apprendrez à vous contenter de l’essentiel, même si tout webmaster qui débute adore ajouter des fonctionnalités à son site. Sachez que l’on peut être heureux avec une dizaine d’extensions.

Optimiser le référencement naturel pour les moteurs de recherche

6 clés pour améliorer le design d'un site (2)

Il ne s’agit pas d’écrire pour les moteurs de recherche, car seule la qualité de votre contenu peut faire la différence sur le long terme. Nous l’avons vu dans Créer un blog ou un site e-commerce avec WordPress. L’utilisation d’un thème ayant été conçu pour optimiser les performances en matière de référencement est bien évidemment un atout, tout comme le recours à une extension spécialisée.

A vous de jouer maintenant !

1 réponse

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *