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 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 procure pas une sensation d’appétit.
• Le rouge condense un fort potentiel visuel. Faites-en usage pour provoquer un sentiment d’urgence, pour une promotion par exemple. Employé sur des panneaux de circulation signalant un danger, c’est la couleur idéale pour engager un appel à 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, à l’enfance. Evitez 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 connoter le thème de la nature, du 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 à teinte médiane est symboliquement relié à 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 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, éviter 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.

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

2.3 Repensez votre navigation

Voici quelques règles à respecter pour que les internautes puisse 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. Prohibez les arborescences complexes, aux dispositions exotiques pour ne pas écrire excentriques. Les internautes ne veulent pas voir des dizaines de rubriques affichées dans chacun des 1à menus sur dite internet !

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

• Le menu doit se trouver en haut de votre site
• 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 fixe le header de la page, 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 qu’il faut garder à l’esprit.
  • Pour vous expliquer, un fil d'Ariane est tout simplement le cheminement qu'un utilisateur a eu sur un site internet du type Accueil > Services > Création 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 flux internet est réalisé 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 un pouce, quelque 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 item 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 de chiffre d’affaire.

Certaines informations ne sont pas essentielles pour que vous puissiez recontacter une personnes. Indiquez donc des champs obligatoires et non-obligatoires.

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 attendue 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 pour 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 quand 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 ça dynamise l’expérience visuelle.

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

Autres atouts que vous pouvez ajouter pour moderniser votre site internet se sont des animations ! Il y en a de toute sorte, mais chez Snoweb ont préconise deux sortes d'animations :

• Animation SVG en CSS ou SMIL
• Animation Lottie

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

Ces deux type d'animation sont optimisées et ont un léger impacte sur les performances d'une page, c'est pour cela que nous vous conseillons de les utiliser. Elle ne vont donc pas ralentir le chargement de vote page.

3. Refonte technique

Les deux principaux objectifs d’une refonte technique visent à

• mieux référencer un site internet
• palier à la lenteur de chargement de ses pages

Abordons donc deux thèmes à savoir, 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 à consultee 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 tirée des cookies. Leur texte n’est pas chargé depuis une base de données mais est généré depuis 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 exécutée par vos tests et donc, cet indicateur permet 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é comme objectif suffisant de couverture de code).

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 le plus de données possible afin de réduire la latence de récupération des dites données.

En évitant de recharger intégralement un élément qui aurait déjà été chargé par le passé, vous gagnerez en performance.