Chez TooNetCreation, nous avons récemment reçu deux clients très satisfaits de leurs maquettes e-commerce générées avec l’intelligence artificielle. Ils avaient des pages catégories, des listes de produits, des fiches produits. Le rendu était séduisant. Les écrans donnaient l’impression que le projet était déjà bien avancé.
En reprenant le fonctionnement de ces boutiques, nous avons pourtant dû revenir sur les parcours de navigation et d’achat, ainsi que sur les informations qui manquaient à la conception. Une partie importante de notre travail a consisté à expliquer cette différence aux clients : leurs interfaces étaient jolies, mais l’expérience utilisateur restait largement à construire.
Je comprends qu’on puisse être impressionné par un résultat obtenu en quelques minutes. Mais lorsque je regarde une interface, je cherche d’abord à savoir ce qu’une personne peut réellement y faire. Sur un e-commerce, la question devient très concrète : peut-elle trouver le bon produit, le comparer et aller jusqu’à la commande sans devoir deviner la suite ?
Une maquette convaincante peut donner une fausse impression d’avancement
Un générateur sait produire les codes visuels habituels d’une boutique : une bannière, une grille de cartes, des filtres, un bouton « Ajouter au panier ». En regardant l’écran, on reconnaît immédiatement une interface e-commerce. Cela ne prouve pas que les choix nécessaires à son utilisation ont été faits.
Le phénomène est connu en ergonomie. Le Nielsen Norman Group décrit l’effet esthétique–utilisabilité : une interface agréable nous paraît souvent plus facile à utiliser qu’elle ne l’est réellement. Des participants à des tests peuvent même complimenter les couleurs d’un site après avoir eu du mal à accomplir leur tâche.
Dans une évaluation de prototypes générés avec l’IA, le même organisme a relevé, sur les scénarios étudiés, des informations répétées, une hiérarchie peu claire et des enchaînements contre-intuitifs. Ce constat ne concerne pas tous les outils ni toutes les générations. Il rappelle simplement qu’une apparence aboutie ne remplace pas une revue UX.
J’appelle dette UX le travail de conception repoussé, qui finit par réapparaître sous forme de corrections : réorganiser les contenus, réécrire les menus, reprendre les interactions ou parfois modifier plusieurs gabarits. L’IA n’a pas créé ce problème. Elle permet de produire des écrans si rapidement qu’on peut passer à côté de ces décisions.
Pages catégories, listes et fiches produits : ce que je vérifie derrière le design
La catégorie doit orienter, pas simplement présenter
Une belle page catégorie n’aide pas beaucoup si l’acheteur ne sait pas quelle rubrique choisir. Je commence par les intitulés. Correspondent-ils aux mots employés par les clients ? Les sous-catégories sont-elles distinctes ? Peut-on revenir facilement à un niveau supérieur ?
Les noms « Univers », « Inspirations » ou « Collections » peuvent convenir à certaines marques. Pour une boutique de matériel technique, ils risquent aussi d’obliger le visiteur à ouvrir plusieurs rubriques avant de trouver ce qu’il cherche. La navigation doit être conçue à partir du catalogue et des usages, pas seulement d’une ambiance graphique.
La liste de produits doit permettre de comparer
Une grille avec des photos harmonisées peut être très réussie visuellement. Mais les informations utiles changent selon ce que l’on vend. Sur des vêtements, la taille et la couleur comptent. Sur des équipements professionnels, ce seront peut-être la capacité, les dimensions ou la compatibilité.
Je regarde donc les critères visibles sur chaque carte, les possibilités de filtre et la façon dont les résultats évoluent. L’acheteur doit pouvoir réduire son choix sans ouvrir une série de fiches pour récupérer la même information.
Le Baymard Institute a documenté ces problèmes lors de tests sur des sites e-commerce : la qualité du filtrage et des listes conditionne la capacité des utilisateurs à trouver un produit adapté. La présence d’une jolie barre de filtres dans une maquette ne suffit pas à démontrer qu’elle répond aux bons critères.
La fiche produit doit lever les doutes avant l’achat
Sur une fiche, je vérifie le prix, les variantes, la disponibilité et les informations nécessaires pour décider. Selon le produit, cela peut inclure les caractéristiques, la livraison, les retours ou certaines conditions d’utilisation. Si ces contenus n’ont pas été prévus, ils seront ajoutés au dernier moment, parfois dans des blocs qui n’étaient pas conçus pour les accueillir.
Je regarde aussi ce qui se passe lorsque l’on clique sur « Ajouter au panier ». Un compteur qui change discrètement dans l’en-tête n’est pas toujours une confirmation suffisante. Si l’utilisateur ne sait pas si son action a fonctionné, il peut recommencer.
Ce sont des détails qui comptent davantage, pour le parcours, que l’arrondi d’une carte produit.
Du premier clic à la commande : le parcours que la maquette ne raconte pas
Pour évaluer une boutique, je préfère suivre une tâche complète. Imaginons une personne qui cherche un baby-foot d’extérieur, ne connaît pas les marques et veut comparer deux modèles avant d’acheter. Cet exemple sert à illustrer la méthode ; il ne décrit pas les deux dossiers clients évoqués au début.
| Étape | Ce que doit pouvoir faire l’acheteur | Point de vigilance UX |
|---|---|---|
| Rechercher | Trouver la catégorie des modèles d’extérieur. | Intitulés vagues et chemins de navigation peu prévisibles. |
| Comparer | Filtrer les prix, dimensions et caractéristiques utiles. | Filtres décoratifs ou critères absents. |
| Choisir | Vérifier les options, le stock et la livraison. | Informations dispersées ou non prévues dans la fiche. |
| Commander | Ajouter au panier, vérifier le récapitulatif et payer. | Retour visuel insuffisant, erreurs sans explication, étapes oubliées. |
Cette lecture met en évidence ce qu’une série de captures d’écran ne montre pas : les transitions, les erreurs, les retours en arrière et les informations dont on a besoin au bon moment. Une interface fonctionne lorsqu’on peut avancer d’une étape à l’autre sans explication supplémentaire.
Le parcours doit aussi être repris sur mobile. Un filtre accessible à gauche de l’écran sur ordinateur peut devenir difficile à retrouver sur téléphone. Une animation au survol ne sert à rien sur un écran tactile si aucune autre interaction n’a été prévue.
Expliquer au client pourquoi il reste du travail, sans dévaloriser sa maquette
C’est probablement la partie la plus délicate de ce type de projet. Nos deux clients étaient satisfaits de ce qu’ils avaient obtenu. Ils avaient passé du temps à formuler leurs demandes et à sélectionner des propositions. Leur enthousiasme était légitime.
Quand nous expliquons que les parcours doivent être repris, nous ne remettons pas en cause l’intérêt de leur travail. Nous distinguons ce qui est déjà acquis — une piste visuelle, des intentions de mise en page — de ce qui n’a pas encore été conçu.
Plutôt que de dire « l’UX est mauvaise », je préfère poser une tâche : « Je ne connais pas votre catalogue. Comment puis-je trouver ce produit, comparer deux variantes, connaître le coût de livraison et terminer ma commande ? » Nous suivons ensuite ce chemin dans la proposition.
Les questions arrivent vite : quelle rubrique faut-il ouvrir ? Où se trouve l’information ? Que se passe-t-il en cas d’indisponibilité ? Le panier conserve-t-il le choix effectué ? Le client voit alors les décisions qui manquent, sans avoir besoin d’un long discours sur l’ergonomie.
Ce travail pédagogique prend du temps parce qu’il oblige parfois à repartir des objectifs et de la structure du catalogue. Corriger directement les maquettes, sans expliquer les causes, risquerait de reproduire le même problème sur les autres pages.
Comment nous reprenons un projet e-commerce généré avec l’IA
Je commence par identifier les tâches principales : trouver une référence précise, comparer plusieurs articles, demander un renseignement ou acheter. Puis je vérifie l’arborescence et les liens entre les pages. Ce travail précède les ajustements graphiques.
Nous pouvons ensuite reprendre les wireframes et la conception UX/UI avec les vrais contenus. Les prix, caractéristiques et conditions ne sont pas des textes que l’on remplit après la maquette. Ils déterminent la place nécessaire sur la page.
Lorsque la direction artistique fonctionne, nous la conservons. L’objectif n’est pas de refaire tous les écrans. Nous retravaillons les composants et les étapes qui gênent le parcours, puis nous les testons avec des scénarios concrets.
Une revue rapide peut révéler des difficultés de navigation, des confirmations absentes ou des libellés incompréhensibles. Les contrôles au clavier, de contraste ou de zoom complètent cette première analyse, sans remplacer une évaluation formelle des critères WCAG du W3C ou du RGAA. J’explique cette différence dans notre article sur l’audit UX et la priorisation des corrections.
À la fin, nous devons pouvoir indiquer pour chaque problème : l’étape concernée, ce qui bloque l’utilisateur, la correction proposée et sa priorité. Une liste de remarques est peu utile si elle ne permet pas de décider quoi traiter en premier.
L’IA reste utile pour explorer le design, à condition de lui donner un cadre
L’IA permet d’explorer rapidement des compositions et des pistes visuelles. C’est un usage intéressant. En revanche, je ne lui demanderais pas de décider seule des critères de filtrage, de la hiérarchie du catalogue ou des étapes de commande.
Pour obtenir une proposition plus pertinente, le brief doit préciser les utilisateurs, leurs tâches et les données nécessaires. C’est aussi la direction décrite dans les travaux du Nielsen Norman Group sur le contexte UX donné aux outils génératifs.
Il y a une différence entre demander « une fiche produit moderne » et demander « une fiche qui aide un acheteur à comparer trois variantes, vérifier leur disponibilité puis comprendre le résultat de l’ajout au panier ». Dans le second cas, on commence à parler de ce que l’utilisateur doit accomplir.
L’IA peut alors accélérer la production des premières propositions. À nous de vérifier que les écrans correspondent à un parcours réel.
Questions fréquentes
Une boutique créée avec l’IA a-t-elle forcément une mauvaise UX ?
Non. La qualité dépend du travail de conception, des informations fournies et des tests. Une maquette générée peut être une bonne base, mais elle ne valide pas à elle seule la navigation ou le tunnel d’achat.
Peut-on corriger les parcours sans refaire le design ?
Souvent, oui. Si l’identité graphique fonctionne, on peut conserver les couleurs et les composants tout en reprenant l’arborescence, les contenus, les interactions et certaines étapes de commande. Une analyse permet de déterminer ce qui mérite vraiment d’être modifié.
Quel est le premier test à faire sur un e-commerce généré par IA ?
Demander à une personne qui ne connaît pas le site de trouver un produit, le comparer et aller jusqu’au récapitulatif de commande. Observer les hésitations et les erreurs est plus instructif qu’une simple appréciation esthétique.
Avant d’intégrer les maquettes, testons le parcours
Lorsque les écrans sont déjà générés, je conseille de choisir une tâche d’achat réelle et de la suivre jusqu’au bout. Si une information manque ou si la suite du parcours doit être expliquée oralement, la conception n’est pas terminée. Mieux vaut régler ce problème avant d’intégrer tous les gabarits de la boutique.
Si vous avez déjà produit vos écrans avec l’IA, notre équipe peut examiner les parcours prioritaires et identifier ce qu’il faut conserver ou reprendre. Notre audit UX/UI permet de commencer par les problèmes concrets.
