Les 10 étapes à ne pas oublier pour une refonte d’un site Internet

2. Refonte design

Votre site Internet a un aspect ancien, voire vétuste ? Les retours que vous pouvez entendre sur son aspect sont mitigés et vous constatez que la plupart des autres sites que vous consultez — y compris ceux de vos concurrents — sont esthétiquement plus aboutis ?

Voici les conseils qui visent à orienter vos premiers efforts de refonte graphique.

Vous pourriez par exemple envisager :

• utiliser un nouveau logo
• établir une nouvelle charte graphique
• développer de nouvelles maquettes du site
• améliorer l’ergonomie du site Internet

Les bonnes pratiques pour une refonte :

2.1 L’influence de la couleur dans le design

Peut-être avez-vous lu Le Petit Livre des couleurs de Michel Pastoureau ? Si ce n’est pas le cas, foncez l’acheter et inspirez-vous-en, car la couleur a une symbolique.

Pire, le choix des couleurs influence inconsciemment le comportement de vos visiteurs.

La raison est simple : les couleurs ont une symbolique inconsciente.

• Le bleu est synonyme de fiabilité, de sécurité, mais également de connaissance. C’est pourquoi les acteurs de la technologie, comme LinkedIn ou Facebook, ou encore ceux de la santé, l’adoptent. C’est la couleur du consensus ; veillez cependant à ne pas l’utiliser pour des produits alimentaires. Contrairement au jaune ou au rouge, il ne suscite pas l’appétit.
• Le rouge condense un fort potentiel visuel. Faites-en usage pour provoquer un sentiment d’urgence, par exemple pour une promotion. Employé sur des panneaux de circulation signalant un danger, c’est la couleur idéale pour engager un appel à l’action : une décision rapide, un achat impulsif.
• Le jaune est associé à la joie, aux loisirs et est ainsi souvent employé dans un contexte lié à l’éducation et à l’enfance. Évitez d’en faire usage pour des produits masculins ou des articles de luxe. Pour le luxe, optez pour la couleur or !
• Le vert revêt une connotation symbolique de stabilité : il suggère la croissance d’une société. Paradoxalement, il est aussi employé pour évoquer la nature, le bien-être, mettre en avant l’écologie ou la fraîcheur. La différence entre ces antipodes est délimitée par la teinte : un vert clair ou de teinte médiane est symboliquement lié à l’écologie, un vert foncé, au monde de la finance et de l’argent.

Cependant, tout le monde ne perçoit pas la couleur de la même manière. Elle ne doit pas être le seul élément que vous utilisez pour transmettre un message. Ajoutez des formes, par exemple une croix ou un pictogramme d’attention, pour marquer une erreur, en plus de lui appliquer une couleur rouge.

2.2 L’importance des textes et leur lisibilité

La typographie peut faire la différence entre un design passable et un bon design. En général, le texte recouvre une part non négligeable de votre site. Il est donc important que sa lecture soit visuellement agréable.

Pour bien choisir votre police d’écriture, gardez à l’esprit quelques règles. D’abord, évitez de choisir une police surchargée et faiblement espacée, car il est important d’aérer votre texte pour augmenter son potentiel d’attraction visuelle.

Évitez les typographies trop rondes, trop petites, trop grasses, mais choisissez-la fine, avec un interligne (espace entre deux lignes) suffisant pour laisser respirer le texte.

2.3 Repensez votre navigation

Voici quelques règles à respecter pour que les internautes puissent naviguer de manière fluide sur votre site Internet. Le plus important c’est d’avoir la navigation la plus claire possible. Et qui dit claire veut souvent dire simple. Évitez les arborescences complexes ou aux dispositions exotiques, qui peuvent paraître excentriques. Les internautes ne veulent pas voir des dizaines de rubriques affichées dans chacun des menus de votre site Internet !

Veillez aussi à respecter quelques règles de mise en page :

• Le menu doit se trouver en haut de votre site Internet
• Positionnez un bouton d’action en haut à droite de la page. Il s’agit d’une convention et les utilisateurs ont pour habitude de trouver ce type d’items à cet endroit.
• Une autre règle à respecter est de maintenir le header de la page fixe, ce qui évite d’avoir à chercher l’information lors de la navigation. De manière générale, il est bon que l’information soit facilement accessible.
• Pensez aussi à utiliser un « fil d’Ariane ». C’est très pratique pour indiquer à l’internaute où il se situe sur la page et c’est donc une bonne pratique à garder à l’esprit.
  • Pour vous expliquer, un fil d’Ariane est tout simplement le cheminement qu’un utilisateur a suivi sur un site Internet du type Accueil > Services > Création de site Internet > Contact
  • Ce fil d’Ariane est d’autant plus pratique sur un site de vente en ligne.

Dans la mesure où le temps d’attention moyen sur Internet est de 8 secondes, un utilisateur qui ne trouve pas rapidement l’information qu’il cherche aura tendance à quitter votre site.

2.4 Site visible sur mobile

Saviez-vous que plus de la moitié du trafic Internet est réalisée sur smartphone ?

Un autre chiffre intéressant est à mentionner : dans le monde, il y avait en 2021, plus de 5 milliards d’utilisateurs uniques de smartphones. Autrement dit, il est indispensable de penser au confort de navigation de ces internautes.

Rendez donc votre site « responsive », c’est-à-dire adapté à ce type d’appareils. Pour cela, les images et illustrations utilisées doivent s’adapter aux mobiles.

Les boutons et icônes doivent être suffisamment grands pour pouvoir cliquer dessus avec le pouce, quelle que soit la taille du téléphone ou du doigt.

De nos jours, tous les sites Internet développés sont responsive, mais ce n’est peut-être pas le cas de votre site actuel, réalisé dans les années 2000.

2.5 Formulaire de contact

Voici l’un des éléments les plus importants de votre site Internet. Car c’est le formulaire qui va permettre au visiteur de devenir un client potentiel. Plus que de recueillir de l’information, cet élément a pour vocation de créer un premier lien entre vous ; c’est pourquoi il est préférable de le simplifier.

En effet, en demandant trop d’informations pour une simple prise de contact, votre prospect pourrait se lasser de la bonne impression que vous lui avez faite avec votre site Internet et, tout simplement, ne pas remplir ce formulaire. In fine, vous risqueriez de rater une prise de contact, donc un client potentiel et, par ricochet, un accroissement du chiffre d’affaires.

Certaines informations ne sont pas essentielles pour que vous puissiez recontacter une personne. Indiquez donc les champs obligatoires et les champs facultatifs.

Pensez également que le formulaire de contact sera rempli par un internaute seul face à son écran. Soyez donc prudent et renseignez des labels et des "placeholder". Il s’agit des textes grisés, avec une faible opacité et qui disparaissent quand vous cliquez dessus pour remplir le formulaire. Ces textes ont pour but de préciser le type d’information attendu dans chaque encart du formulaire (par exemple le format d’une date de naissance en jj/mm/aaaa).

2.6 Modernisez vos maquettes

Lorsque vous développez de nouvelles maquettes de votre interface utilisateur, pensez à en simplifier le design. Décomposez les parties de votre site en blocs et gardez comme fil rouge la simplicité et l’épuration de ces derniers.

La tendance actuelle est d’agrémenter ces blocs de micro-interactions, c’est-à-dire de composantes visuelles qui traduisent l’action de l’utilisateur. Un exemple classique des micro-interactions est la surbrillance des rubriques d’un menu lorsque vous les parcourez avec le curseur de la souris. Il s’agit bien d’un effet visuel qui traduit l’action de l’utilisateur et cela dynamise l’expérience visuelle.

De nombreux types de micro-interactions existent, n’hésitez pas à les utiliser, mais n’en abusez pas.

D’autres atouts que vous pouvez ajouter pour moderniser votre site Internet sont les animations ! Il y en a de toutes sortes, mais chez Snoweb on préconise deux types d’animations :

• Animation SVG en CSS ou SMIL
• Animation Lottie

Pourquoi Snoweb ne préconise que ces deux types d’animation ?

Ces deux types d’animation sont optimisés et ont un léger impact sur les performances d’une page ; c’est pourquoi nous vous conseillons de les utiliser. Elles ne vont donc pas ralentir le chargement de votre page.

3. Refonte technique

Les deux principaux objectifs d’une refonte technique sont les suivants :

• mieux référencer un site Internet
• pallier la lenteur de chargement de ses pages

Abordons donc deux thèmes : comment améliorer la vitesse de chargement des pages et quels outils utiliser pour suivre le trafic de votre site Internet.

Pour des informations complémentaires, n’hésitez pas à consulter notre article sur l’optimisation de la vitesse de chargement des pages.

3.1 La vitesse de chargement

La première étape consiste à utiliser des pages web statiques plutôt que des pages dynamiques. En effet, une page statique propose un contenu qui ne varie pas en fonction des données de l’utilisateur, comme sa localisation, l’heure de consultation ou toute autre information issue des cookies. Le texte n’est pas chargé depuis une base de données, mais généré à partir d’un fichier de code source fixe.

Il en résulte que ce type de page ne nécessite presque aucun effort de chargement du serveur, ce qui accélère grandement sa vitesse d’affichage et offre un rendu ultra-rapide.

3.2 Le code coverage

La deuxième étape d’une refonte technique consiste à analyser votre couverture de code.

Il s’agit d’une métrique qui vous indiquera si les tests du code de votre page web sont bons. Il s’agit d’une mesure de la qualité du code évaluée par vos tests ; cet indicateur permet donc de mesurer la qualité d’une page.

Nous n’entrerons pas dans les considérations techniques de cet outil, car c’est un sujet à part entière.

Gardez cependant à l’esprit que la couverture de code est un indicateur de qualité d’une page web et qu’atteindre 100 % de code coverage n’est pas forcément un objectif pertinent (un taux de 80 % est parfois jugé suffisant).

3.3 Le lazy loading

Ensuite, la troisième étape consiste à adopter le lazy loading, c’est-à-dire à charger les bons éléments au moment opportun plutôt que d’exécuter l’ensemble de votre page en un seul bloc.

Cette pratique est surtout valable pour le chargement des images et, plus généralement, des médias gourmands en données.

Une étape complémentaire à cette troisième consiste à optimiser nos médias. Il faut les alléger : compressez-les ! Pour ce faire, utilisez des outils comme GZIP, qui permet de réduire la taille de n’importe quel fichier et ayez le réflexe de minifier les fichiers HTML, CSS et JavaScript.

3.4 Le cache

Nous abordons enfin la cinquième et dernière étape de la refonte technique de votre site. Elle consiste à mettre en cache autant de données que possible afin de réduire la latence lors de la récupération de ces données.

En évitant de recharger intégralement un élément déjà chargé, vous gagnerez en performance.