UX et UI en refonte e-commerce : 4 principes et 3 règles pour vendre

Pourquoi l’UX est votre levier de conversion le plus sous-estimé

Deux e-commerces dans le même secteur, avec le même trafic et les mêmes prix. L’un convertit à 0,8%, l’autre à 3,2%. La différence ? L’expérience utilisateur.

La clarté de la navigation, la qualité du parcours utilisateur, la fluidité du tunnel d’achat, la hiérarchie visuelle des fiches produits, et la cohérence des signaux de confiance expliquent cet écart de conversion de 4x. Ce n’est pas de la magie. Ce sont des décisions d’ergonomie et d’architecture prises (ou pas) lors de la conception du site.

Pour une PME e-commerce qui cherche à améliorer ses résultats sans augmenter son budget acquisition, l’optimisation UX est souvent le levier avec le meilleur retour sur investissement. Doubler le taux de conversion double le chiffre d’affaires pour le même volume de trafic. Les guidelines UX établies par le Nielsen Norman Group à partir de milliers de tests utilisateurs restent la référence méthodologique pour optimiser un site e-commerce. Dans le contexte français, les chiffres clés du e-commerce publiés par la FEVAD identifient régulièrement l’expérience utilisateur comme un levier prioritaire de croissance pour les e-commerçants.

UX vs UI en e-commerce : la différence qui change tout dans une refonte

L’UX est la stratégie d’expérience utilisateur. L’UI est l’exécution visuelle de cette stratégie. Comprendre cette distinction, c’est déjà éviter 80% des erreurs de refonte e-commerce.

Sur une fiche produit, l’UX décide quelles informations afficher, dans quel ordre, et combien d’étapes séparent le visiteur du paiement. L’UI décide de la taille du bouton ajouter au panier, de sa couleur, de la typographie qui annonce le prix, et de la hiérarchie visuelle entre la photo, la description et les avis clients.

Une refonte qui travaille uniquement l’UI rendra votre site plus joli sans changer un seul chiffre sur votre tableau de bord. Une refonte qui travaille uniquement l’UX donnera un site fonctionnel mais oubliable, qui ne dégagera ni confiance ni désir.

Concrètement, les deux disciplines se complètent sur un projet e-commerce. L’UX intervient en amont avec un audit comportemental, des wireframes et maquettes fonctionnelles et un parcours utilisateur cartographié. Elle répond à la question : quoi afficher et dans quel ordre.

L’UI intervient ensuite avec les maquettes graphiques e-commerce, le système de design et la déclinaison de chaque écran. Elle répond à la question : comment afficher pour déclencher l’achat. Inverser ces deux étapes, ou en sauter une, c’est la garantie d’une refonte décevante.

Pour une PME e-commerce, l’erreur la plus fréquente est de confier la refonte à un graphiste qui maîtrise l’UI mais ignore l’UX. Le résultat est un site visuellement impeccable mais dont le taux de conversion ne bouge pas.

L’erreur inverse, plus rare mais coûteuse, consiste à confier la refonte à un consultant UX sans designer UI compétent. Le site fonctionne parfaitement mais ne se distingue pas de la concurrence et ne crée aucun désir d’achat.

La bonne approche pour une PME est de travailler avec un binôme ou un profil de designer produit qui maîtrise les deux disciplines. À défaut, séquencer le projet en imposant que l’UX soit validée avant que l’UI ne commence. Jamais l’inverse.

Principe 1 : la clarté avant tout

Un visiteur qui arrive sur votre site doit comprendre en 5 secondes ce que vous vendez, à qui, et pourquoi il devrait acheter ici plutôt qu’ailleurs.

Cette clarté se construit via la hiérarchie visuelle (les éléments importants sont grands et contrastés), la formulation (les titres parlent des bénéfices, pas des caractéristiques techniques), et la cohérence (le message de votre pub correspond à la page sur laquelle elle atterrit). Chaque ambiguïté dans ces 5 premières secondes génère un rebond immédiat.

Principe 2 : réduire la friction à chaque étape

La friction est tout ce qui ralentit ou complique le chemin de l’acheteur vers l’achat.

Un menu de navigation avec 12 catégories principales est de la friction cognitive. Un formulaire d’inscription obligatoire avant de pouvoir passer commande est de la friction. Un bouton d’ajout au panier que l’acheteur ne voit pas immédiatement sur mobile est de la friction.

L’audit UX consiste à parcourir votre site avec les yeux d’un acheteur qui découvre votre boutique et à noter chaque moment d’hésitation, chaque point où l’utilisateur se perd, ou chaque action forcée qui crée de l’inconfort.

Selon les recherches du Baymard Institute, référence mondiale en usability e-commerce, le taux d’abandon de panier moyen atteint 70,22%. Cette statistique illustre à quel point chaque friction dans le tunnel d’achat coûte directement en chiffre d’affaires.

La friction sur la fiche produit

Sur la fiche produit, les frictions principales sont le bouton d’ajout au panier peu visible sur mobile, les informations manquantes sur les délais de livraison, l’absence de guide des tailles pour les produits qui en nécessitent un, et les images produits insuffisantes en nombre ou en qualité.

Ces frictions se corrigent sans refonte et produisent un impact immédiat sur le taux de conversion.

La friction dans le tunnel d’achat

Entre la fiche produit et la page panier, les abandons viennent souvent de la découverte tardive des frais de livraison, de l’obligation de créer un compte pour commander, ou d’une navigation interrompue par des pop-ups intrusifs.

Afficher les frais de livraison dès la fiche produit ou la page catégorie reste la correction avec le meilleur retour sur investissement. Pour aller plus loin, un parcours d’achat optimisé réduit mécaniquement les abandons à chaque étape.

La friction au paiement

Sur la page de paiement, les causes principales d’abandon sont les formulaires trop longs, l’absence de signaux de sécurité visuels, le manque de choix sur les moyens de paiement, et les délais de traitement non rassurants.

Réduire le nombre de champs au minimum, afficher les badges de sécurité et les logos des moyens de paiement, et rassurer sur la rapidité de livraison diminue mécaniquement le taux d’abandon à cette étape.

Réduire la friction sur ces trois étapes critiques reste le chantier UX avec le meilleur retour sur investissement pour une PME.

Principe 3 : la cohérence des signaux de confiance

Un acheteur qui ne vous connaît pas a besoin de preuves sociales et de signaux qui lui disent que votre boutique est légitime, que la transaction est sécurisée, et que le produit correspondra à ses attentes.

Ces signaux doivent être présents et cohérents sur toutes les pages du tunnel. Un logo de marque professionnel, des avis clients visibles, une politique de retour claire, les logos des moyens de paiement reconnus, et un numéro de contact visible sont les signaux de confiance de base. Leur absence ou leur incohérence génère une anxiété qui se traduit par des abandons.

Principe 4 : l’expérience mobile pensée pour le pouce

Sur mobile, l’interaction principale se fait avec le pouce. Les zones cliquables doivent faire au minimum 44x44 pixels pour respecter les standards d’accessibilité.

Les éléments importants (call to action, navigation principale) doivent être accessibles sans déplacer la main. Les formulaires doivent déclencher le bon clavier natif (numérique pour les champs de téléphone, email pour les champs email).

Ces détails d’ergonomie mobile sont souvent négligés parce que les designers testent leurs créations sur desktop. Testez systématiquement votre site sur un vrai téléphone, avec un seul pouce, en simulant le comportement d’un acheteur pressé.

En résumé.

Les 4 principes UX d’un e-commerce qui convertit sont la clarté en 5 secondes, la réduction de la friction sur chaque étape, la cohérence des signaux de confiance, et l’ergonomie mobile pensée pour le pouce.

Un site qui applique ces 4 principes sans compromis convertit 3 à 4 fois mieux qu’un site qui les ignore, pour le même volume de trafic.

Le cas Kiwi Saint-Tropez illustre cet effet : de 8 à 63 conversions par semaine une fois le parcours optimisé et les leviers coordonnés.

UI e-commerce : les 5 décisions visuelles qui impactent vos ventes

Une fois l’UX cadrée, l’UI prend le relais avec cinq décisions qui pèsent directement sur votre taux de conversion. Aucune n’est cosmétique. Toutes sont mesurables sur vos ventes en quelques semaines après mise en ligne.

La typographie qui rassure ou qui fait douter

Sur une fiche produit, la typographie n’est pas un détail de designer. Elle conditionne la lisibilité du prix, la hiérarchie de l’information et la perception de qualité de votre marque.

Les règles concrètes pour une PME e-commerce : taille minimum de 16 pixels en desktop et 18 pixels en mobile pour le corps de texte. Taille minimum de 24 pixels pour le prix sur fiche produit. Une seule famille typographique pour le corps, une seconde maximum pour les titres.

Évitez les polices trop fines qui dégradent la lisibilité sur mobile et créent une impression de fragilité. Privilégiez les sans-serif modernes (Inter, DM Sans, Manrope) qui sont neutres et bien adaptées au e-commerce.

La palette de couleurs qui convertit

Une palette e-commerce qui vend ne contient pas plus de 4 couleurs fonctionnelles. Une couleur de marque pour l’identité, une couleur de CTA principale (souvent un orange, un vert ou un bleu vif pour le bouton ajouter au panier), une couleur d’alerte (rouge pour les soldes, l’urgence ou les erreurs), et une couleur de confiance (souvent un vert pour le stock disponible ou la confirmation).

Le reste doit rester neutre, en niveaux de gris, pour ne pas concurrencer vos produits. L’erreur classique est de multiplier les couleurs vives et de noyer le CTA principal au milieu d’un carnaval visuel.

La règle simple : si vos boutons ajouter au panier ne se voient pas en plissant les yeux à 2 mètres de l’écran, ils sont mal positionnés visuellement.

Les boutons et CTA : l’élément le plus négligé

Le bouton ajouter au panier est probablement l’élément le plus cliqué de votre site, et pourtant celui qui est le plus souvent négligé en refonte.

Quatre règles non négociables. Premièrement, taille minimum tactile de 44 pixels sur mobile (recommandation officielle Apple et Google). Deuxièmement, état hover et état active clairement visibles, pour que le visiteur sache que son clic est pris en compte.

Troisièmement, position above the fold sur fiche produit en desktop, et sticky en bas d’écran sur mobile pour éviter qu’il disparaisse pendant le scroll. Quatrièmement, libellé qui déclenche l’action. Préférez "Ajouter au panier" plutôt que "OK" ou "Valider".

Le verbe d’action concret augmente le taux de clic de 10 à 25% selon les tests A/B publiés par les principales agences de conversion.

Les images produits : première impression et confiance

Sur un e-commerce, l’image produit est le seul substitut à l’expérience physique du produit. Sa qualité conditionne directement la confiance d’achat.

Les standards UI à respecter : fond cohérent entre toutes les photos d’une même catégorie (idéalement fond blanc pur pour les packshots, fond lifestyle pour les ambiances, mais jamais les deux mélangés sur une grille). Taille minimum de 1200 pixels sur le côté le plus long pour permettre le zoom détaillé.

Format AVIF obligatoire pour passer le Core Web Vital LCP. Une vidéo de 15 à 30 secondes sur les produits techniques (mode d’utilisation, dimensions, matières). Au minimum 5 photos par produit, dont une photo d’échelle avec un humain ou un objet de référence.

Des fiches produits qui convertissent combinent ces standards visuels avec un contenu éditorial qui lève les dernières objections.

La grille et les composants réutilisables

Un e-commerce qui dégage une impression de sérieux et de qualité repose sur un système de design cohérent (souvent appelé design system). Concrètement, cela signifie que les espacements verticaux entre blocs sont constants (8, 16, 24 ou 32 pixels), que les alignements de colonnes sont stricts sur toutes les pages.

Les boutons primaires et secondaires ont des styles identiques d’une page à l’autre. Les composants comme les cartes produit, les filtres ou les modales suivent un même langage visuel.

Sans système de design, chaque nouvelle page ajoutée par votre équipe devient une exception. Le site se transforme progressivement en patchwork visuel qui érode la confiance d’achat.

Pour une PME, l’investissement dans un mini design system Webflow, Figma ou Shopify (selon votre CMS) est rentabilisé en moins de 12 mois par la cohérence qu’il apporte.

Comment diagnostiquer vos problèmes UX sans budget de recherche

Les outils d’analyse comportementale comme Hotjar ou Microsoft Clarity (gratuit) permettent d’enregistrer les sessions de vos vrais visiteurs.

Ces enregistrements révèlent exactement où les acheteurs hésitent, où ils scrollent sans cliquer, et où ils abandonnent. C’est une source d’enseignement sur vos problèmes UX réels que ni Google Analytics ni votre propre intuition ne peuvent vous donner.

Analyser 20 sessions sur vos pages clés (home, catégorie, fiche produit, panier) révèle généralement 5 à 10 points de friction actionnables en quelques heures.

Les heatmaps complètent cette analyse en visualisant les zones chaudes et froides de chaque page, et le scroll depth indique jusqu’où vos visiteurs lisent vraiment. Le benchmark de l’expérience digitale par Contentsquare fournit chaque année les KPIs de référence par secteur pour comparer vos performances.

Combinés aux données Google Search Console sur les requêtes d’entrée et aux résultats d’A/B testing ciblé, ces outils donnent une vision complète des comportements réels, sans passer par un laboratoire de recherche utilisateur coûteux.

Une arborescence e-commerce bien pensée amplifie d’ailleurs l’efficacité de ces analyses en rendant le parcours utilisateur plus lisible.

Quand faut-il refondre plutôt qu’optimiser ?

Une refonte complète n’est justifiée que dans trois situations.

Première situation : votre site technique est vieillissant et limite votre capacité à évoluer (plateforme obsolète, code non maintenu, temps de chargement dégradés qui ne peuvent pas être corrigés ponctuellement).

Deuxième situation : votre positionnement commercial a évolué et votre site ne reflète plus qui vous êtes aujourd’hui.

Troisième situation : votre taux de conversion plafonne à un niveau bas malgré plusieurs rounds d’optimisation itérative ciblée.

Hors de ces trois cas, l’optimisation continue donne souvent de meilleurs résultats qu’une refonte complète, avec un risque nettement inférieur.

La décision dépend aussi de la nature du problème. Si le blocage est purement visuel (image de marque datée, interface vieillissante), une refonte UI seule peut suffire. Si le blocage est structurel (parcours d’achat confus, architecture de navigation incohérente), seule une refonte UX résoudra le problème. Si les deux se cumulent, la refonte complète UX puis UI est la seule voie.

Une refonte e-commerce peut doubler vos conversions ou détruire votre trafic organique en 48 heures. Tout dépend de comment elle est préparée.

Trois règles méthodologiques protègent contre les échecs les plus fréquents.

Règle 1 : protéger le SEO existant avant de refondre

Si votre site actuel génère du trafic organique, c’est un actif à protéger absolument.

Toute refonte qui modifie les URLs doit s’accompagner d’un plan de redirections 301 exhaustif : chaque ancienne URL vers sa nouvelle cible. L’ignorer peut coûter 50% de votre trafic organique dans les semaines suivant le lancement.

Avant la refonte : exporter et documenter l’existant

Exportez l’intégralité du sitemap actuel et documentez toutes les URLs qui génèrent du trafic organique dans Google Search Console.

Cette cartographie de l’existant sert de base de comparaison post-refonte et garantit qu’aucune URL importante ne soit oubliée dans le plan de redirections.

Pendant la refonte : préparer les redirections 301

Préparez le plan de redirections 301 exhaustif sur l’environnement de staging, avant tout lancement en production.

Comparez le sitemap avant la refonte avec le sitemap post-refonte, et vérifiez que chaque URL manquante est redirigée. Cette vérification prend quelques heures mais évite des pertes qui peuvent prendre 6 à 12 mois à récupérer.

Après le lancement : monitorer Search Console

Monitorez Google Search Console pendant les 4 semaines suivant le lancement pour détecter les erreurs d’indexation, les pages en 404 qui auraient dû être redirigées, et les variations anormales de trafic organique.

Cette phase de surveillance active permet de corriger rapidement les problèmes résiduels avant qu’ils n’impactent durablement vos positions.

La page SEO, GEO et IA détaille les standards de migration SEO appliqués sur nos projets de refonte. Un bon cahier des charges intègre d’ailleurs dès le départ cette exigence SEO, avant tout arbitrage graphique sur les wireframes ou les prototypes.

Règle 2 : partir des données de comportement, pas des préférences esthétiques

L’erreur la plus fréquente en refonte : concevoir le nouveau site sur la base des préférences esthétiques du dirigeant et du designer, sans analyse des comportements des visiteurs actuels.

Un site beau qui ignore que 80% de vos visiteurs abandonnent à l’étape du panier a manqué l’objectif principal.

Avant de démarrer la phase de design e-commerce qui convertit, analysez : quelles pages ont les meilleurs taux de conversion et pourquoi, où se concentrent les abandons dans le tunnel actuel, quels éléments vos visiteurs cliquent le plus (heatmaps Hotjar ou Microsoft Clarity), et quelles requêtes amènent le trafic le plus qualifié (Google Search Console).

Ces données guident le design system et les micro-interactions vers ce qui améliore le chiffre d’affaires, pas seulement ce qui est esthétiquement satisfaisant. Les prototypes Figma et les wireframes doivent refléter ces données, pas l’inverse.

Règle 3 : tester avant le lancement en production

Un lancement en production sans phase de test suffisante est le risque le plus évitable d’une refonte.

La checklist minimale avant production :

1. Test du tunnel de commande complet sur les 3 navigateurs principaux (Chrome, Safari, Firefox) et sur iOS et Android,

2. Vérification de toutes les intégrations (paiement, logistique, CRM), test des redirections sur un échantillon représentatif d’URLs,

3. Vérification des performances via les Core Web Vitals de Google avec un LCP inférieur à 2,5 secondes, un INP inférieur à 200 millisecondes et un CLS inférieur à 0,1, et validation du tracking GA4 et des pixels publicitaires.

Planifiez le lancement sur un créneau à faible trafic (nuit ou week-end) avec un plan de rollback documenté et testé. Savoir exactement comment revenir à la version précédente en moins de 30 minutes si un problème critique se manifeste est la garantie d’un lancement serein.

En résumé. Refondre au lieu d’optimiser se justifie dans trois cas précis (plateforme obsolète, positionnement changé, plafond de conversion).

Les trois règles qui sauvent une refonte sont la protection du SEO via redirections 301 exhaustives, la décision fondée sur les données comportementales et non les préférences esthétiques, et le test complet avant production avec plan de rollback.

Shopify, PrestaShop, Webflow : ce qui change selon la plateforme

La méthode de refonte s’applique quelle que soit la plateforme cible, mais chaque environnement a ses spécificités.

Une refonte sur Shopify demande une attention particulière aux thèmes personnalisés et aux apps tierces dont les paramètres ne sont pas toujours migrés automatiquement. Notre page e-commerce Shopify détaille la méthode d’accompagnement pour les PME qui migrent ou refondent sur cette plateforme.

Une refonte sur PrestaShop implique de maîtriser les spécificités de la version actuelle et de la version cible, avec des points de vigilance particuliers sur les modules tiers et les personnalisations back-office. Notre guide dédié à la migration PrestaShop couvre les étapes clés d’un passage de version.

Une refonte sur Webflow concerne plutôt les sites vitrine et services, avec une approche différente de celle des e-commerces transactionnels lourds.

UI imposée vs UI personnalisable selon le CMS

Le degré de liberté sur l’interface visuelle dépend directement de votre CMS. Shopify impose une structure de thème avec des contraintes sur les grilles, les menus et les pages produit. La personnalisation UI passe par le code Liquid ou par des apps tierces, ce qui limite les possibilités sans développeur.

PrestaShop offre plus de flexibilité technique sur l’UI grâce à ses modules et son accès complet au front-end. En contrepartie, cette liberté exige une expertise technique plus poussée et un risque de dette technique si les personnalisations ne sont pas documentées.

Webflow donne un contrôle quasi total sur l’UI via son éditeur visuel. C’est la plateforme idéale pour un design system sur mesure sans écrire de code. La limite : Webflow n’est pas conçu pour les catalogues e-commerce lourds (plus de 500 références).

Quelle que soit la plateforme, le principe reste le même : la refonte réussit quand elle est guidée par les données, protège le SEO existant, et est validée en test avant lancement.

Les outils utilisés par les meilleures équipes (Figma pour le design, Microsoft Clarity ou Hotjar pour l’analyse comportementale, Google Search Console pour le SEO) sont les mêmes d’une plateforme à l’autre.

En résumé.

La méthode UX et UI de refonte ne change pas selon la plateforme, seules les spécificités techniques et le degré de liberté UI varient.

Shopify demande de la vigilance sur les apps et thèmes, PrestaShop sur les modules et les versions, Webflow est plus adapté aux sites vitrine qu’aux catalogues e-commerce lourds.

Dans tous les cas, la coordination des experts autour d’une direction unique conditionne la réussite du projet.

Pour un accompagnement complet sur votre projet de refonte ou d’optimisation UX et UI, la page sites et développement présente l’approche upwedo. qui associe stratégie, design et développement.

Pour un pilotage de plus long terme de votre croissance digitale, notre direction stratégique coordonne stratégie, UX, acquisition et analytics dans un seul dispositif.

Prenez 30 minutes pour cadrer votre projet avec nous et identifier les leviers UX et UI prioritaires pour votre e-commerce.