Refonte graphique et UX : conseils pour équilibrer modernité et habitudes des utilisateurs

Je ne sais pas à partir de quand on se rend compte dans le développement web qu’une page a besoin d’une refonte graphique et/ou refonte UX.
Une chose est sûre, on ne peut pas tout modifier et repartir d’une page blanche comme on le ferait pour une nouvelle page. Puisque les utilisateurs réguliers ont déjà des habitudes de travail, habitudes qu’on ne veut pas perturber. Sinon l’utilisateur sera mécontent, et à raison. Qui n’a pas déjà râlé en cherchant son pot de confiture qui avait bougé 3 rayons plus loin dans son supermarché de proximité ?


Depuis mon arrivée chez Babbar, YourTextGuru a connu plusieurs refontes. Si vous n’aimez pas ces changements graphiques, bah c’est en partie à cause de moi du coup, désolé… 🙄

Une première refonte d’abord dans une nouvelle version baptisée YTG 2.0, plus orientée stratégie de contenu, et surtout pour prendre un petit coup de fraîcheur et de modernité. Je vous laisse juger par vous-même.

Puis des refontes plus ponctuelles sur des pages isolées. Et ce sont ces cas-là qui vont nous intéresser. 

Définition d’une refonte graphique


Avant sur YourTextGuru (les anciens savent 👴), on arrivait directement sur la page de liste des guides une fois connecté sur YourTextGuru. C’était la page d’accueil historique. Mais avec la nouvelle approche orientée stratégie de contenu, l’équipe de YTG voulait refléter à travers cette page d’entrée le parcours “projet”. 

Mais déjà, qu’est-ce qu’une refonte graphique et pourquoi fait-on cela ?

La refonte graphique et UX d’un site web consiste à revisiter l’apparence visuelle et l’expérience utilisateur pour mieux répondre aux besoins des utilisateurs tout en restant alignée sur les objectifs stratégiques.

Les critères d’une volonté de refonte peuvent être multiples :
– Les retours utilisateurs (difficulté de navigation, problèmes de compréhension).
– L’obsolescence du design (esthétique dépassée, incohérence visuelle).
– Les évolutions technologiques ou des usages (mobile-first, rapidité).
– Les métriques d’engagement (taux de rebond élevé, faible conversion).
– De nouvelles fonctionnalités à proposer.

Les étapes clés pour réussir une refonte graphique et UX sur internet

Lorsque l’on entreprend une refonte graphique et UX sur internet, il est crucial de suivre certaines étapes pour garantir un résultat optimal. La première consiste à analyser en profondeur l’interface graphique existante. Identifier les points faibles et les zones qui causent des frustrations utilisateur permettra de mieux cerner les axes d’amélioration. Cette analyse doit aussi inclure une évaluation des objectifs stratégiques pour le produit afin de s’assurer que chaque changement aligne esthétique, fonctionnalité et performance.

Ensuite, vient l’étape de prototypage, où l’on esquisse les premières versions de la nouvelle interface graphique. Ces prototypes permettent de visualiser les ajustements et de tester les modifications auprès d’un panel restreint d’utilisateurs avant le déploiement global. Un produit réussi est celui qui parvient à équilibrer innovation et continuité, tout en s’adaptant aux attentes des internautes qui le consultent quotidiennement.

Rôle des couleurs et visuels dans l’UX

Généralement on commence par afficher nos blocs d’éléments principaux. Ensuite on aime bien ajouter de la couleur, un dashboard a vite fait d’être monotone. Il faut se dire qu’avec une capture d’écran d’une page, on est capable si on connait un minimum l’outil de savoir repérer à quel endroit elle a été prise.
Je ne dis pas qu’il faut mettre de la couleur à foison. Elle peut venir de différentes façons : par le biais d’images, par le biais de fond de couleur, par des graphiques ou par des emoji tout simplement.


La couleur peut avoir un sens et DOIT SOUVENT avoir un sens. Elle sert à hiérarchiser l’information, à associer des émotions, à guider l’œil de l’utilisateur.
Si par exemple, on a affecté une couleur à chaque personne dans un outil type agenda, on évite d’ajouter aussi une couleur à chaque type d’événement dans l’agenda. Ou d’avoir un bouton vert qui un coup sert à enregistrer quelque chose, puis sur la page d’après permet d’afficher une bulle d’infos.
On (enfin surtout la gente féminine) m’a souvent dit dans ma vie perso de ne pas mettre plus de 3 couleurs différentes dans ma tenue, mais de ne pas être monochrome non plus (coucou Néo dans Matrix 🕶️). Je pense que c’est pareil dans le web, pas plus de 3 couleurs (le fond clair ne compte pas, sauf s’il est de couleur atypique comme du noir).

Les tons pastels sont en vogue ces derniers temps mais libre à vous de laisser votre âme d’artiste s’exprimer. Retenez cependant et c’est là le plus important par-rapport à de la peinture, c’est qu’il faut que votre design plaise au plus grand nombre et pas juste à vous. Donc oui cela peut être très esthétique du vert sur fond noir et à votre goût, un style très différent de la concurrence. Mais ça va bloquer une grande partie des gens qui visitent votre site. Au-delà du contenu ou de ce que vous avez à proposer, la première impression d’un site est visuelle.
Le but est de vendre, autant ne pas rebuter des potentiels acheteurs avec une UI trop excentrique.

Focus sur l’impact des changements UX sur les utilisateurs réguliers

J’en ai parlé précédemment, l’accueil historique était la liste des guides. Il est impératif que les utilisateurs gardent leurs repères malgré un changement d’interface. Il était donc nécessaire d’ajouter plusieurs raccourcis qui ramènent à cette page, quitte à ce que ce soit plus imposant que d’autres éléments. Il n’y a rien de plus frustrant pour un utilisateur que de perdre du temps à chercher une fonctionnalité qu’on a l’habitude d’utiliser.
De manière globale, il faut identifier les éléments à préserver pour ne pas perturber l’expérience utilisateur.

Pour autant, ne pas négliger les nouvelles fonctionnalités. Les utilisateurs ont des habitudes et ont bien souvent du mal à en sortir pour expérimenter de nouvelles choses. Je reprends le parallèle au supermarché en début d’article parce que je trouve ça très parlant : vous avez l’habitude d’acheter une pâte à tartiner dans un rayon spécifique. Ce qui va vous faire acheter une marque différente, c’est la mise en avant soit à l’entrée du magasin, soit en tête de gondole du rayon où vous allez avec une potentielle remise de découverte pour attirer votre regard. Si la nouvelle marque est noyée dans le rayon, vous n’y prêterez jamais attention.

De même que si le magasin a une nouvelle gamme de tartines, il ne va pas la mettre juste au rayon tartines. Ce sera sur votre passage vers le rayon pâte à tartiner, car il est fort probable que vous soyez le type de potentiel acheteur visé par cette nouvelle gamme de tartines.

Côté web, la page d’accueil est un bon moyen de faire découvrir une nouvelle fonctionnalité. Sur la nouvelle page d’entrée de YTG, on voulait mettre en avant la recherche de métriques sur un hôte ou sur un mot-clé. C’était donc évident d’ajouter deux champs de recherche enjolivés comme vous pouvez le constater ci-dessous des avatars de nos deux têtes d’affiches que sont Sylvain et Guillaume Peyronnet. Et en haut de page, un encadré supplémentaire qui résume les dernières mises à jour et éventuelles nouvelles fonctionnalités, présentées par Pierre Calvet.

Influenception : l’influence de l’influence

Je l’ai mentionné plus tôt, les images permettent d’ajouter une teinte d’originalité dans une page un peu trop sobre. Toutefois, ces images doivent être cohérentes pour une bonne harmonie. Rien de pire que les outils avec des images de profil où certaines sont pixélisées, en noir et blanc, à côté d’un avatar très coloré et en haute définition.
Nous avons fait le choix d’avoir des avatars dessinés, ça passe mieux avec la cohérence visuelle de notre outil. Et faire sortir les avatars de leurs rectangles permet d’ajouter un peu de relief à la page.

Petit aparté : personnellement j’aime bien mettre en avant des personnalités liées à l’outil. Je ne suis pas un fervent défenseur de la génération “influenceur” mais je trouve que c’est important d’avoir des figures emblématiques auxquelles se référer dans une application qui va fournir des conseils et des analyses comme c’est le cas avec YTG.
À notre époque, il est bon de valoriser et de faire connaître par une mise en avant dans l’outil les gens qui ont de l’expertise et peuvent servir de vitrine au sein de l’équipe. Ça donne tout de suite une dimension humaine.

Mesurer le succès de la refonte

Après la mise en ligne, des tests, il ne reste plus qu’à récolter des feedbacks utilisateurs pour peaufiner cette refonte. Ne pas hésiter à scruter les réseaux ou trier les résultats Google/Youtube par date récente afin de ne pas rater d’éventuels ressentis d’utilisateurs qui auraient publié leurs avis.
Les autres bons indicateurs seront les KPI : les taux de clic sur les boutons de la page d’accueil, le temps passé sur la page, etc

Le but d’une refonte

En conclusion, une refonte graphique et UX ne se résume pas à un simple coup de peinture pour moderniser un site. Elle représente une opportunité stratégique de transformer l’expérience utilisateur, de renforcer l’engagement et de rester compétitif dans un environnement numérique en constante évolution. En écoutant vos utilisateurs, en analysant les performances actuelles et en adoptant des choix de design réfléchis, vous pouvez non seulement améliorer l’esthétique de votre site, mais aussi maximiser son efficacité. Alors, n’ayez pas peur du changement ! 🚀