Agence Comment l'IA accélère le wireframing sans sacrifier la qualité UX
L'IA transforme le wireframing en accélérant l'exploration de variantes et la génération de structures. Découvrez comment Wex intègre l'IA dans son workflow de conception sans compromettre la qualité UX.
Comment l'IA accélère le wireframing sans sacrifier la qualité UX
Il y a deux ans, générer une dizaine de variantes de wireframes pour un même écran demandait une journée de travail minimum. Aujourd'hui, chez Wex, ça prend une heure. Et les variantes sont meilleures, parce qu'on en explore davantage avant de converger.
Ce n'est pas de la magie. C'est le résultat d'une intégration progressive de l'IA dans notre workflow de conception. Et comme toute intégration sérieuse, elle a demandé du recul, des erreurs, et une question centrale à trancher : qu'est-ce que l'IA peut faire à notre place, et où est-ce que l'expertise humaine reste irremplaçable ?
Voici ce qu'on a appris.
Ce que le wireframing demande vraiment
Pour comprendre ce que l'IA change, il faut d'abord comprendre ce que le wireframing demande.
Un wireframe n'est pas un dessin. C'est une hypothèse de solution, une réponse visuelle à des questions fonctionnelles : comment hiérarchiser l'information sur cet écran ? Quel est le flux naturel du regard ? Où placer l'action principale pour maximiser les conversions ? Comment gérer les états vides, les erreurs, les cas limites ?
Ces questions demandent deux choses très différentes : de la connaissance (des patterns d'interface, des conventions UX, des données issues de la recherche utilisateur) et du jugement (savoir quelle solution est la plus adaptée à ce contexte précis, pour ces utilisateurs, avec ces contraintes).
L'IA est aujourd'hui très compétente sur la connaissance. Elle a ingéré des millions d'interfaces, de guidelines, de patterns. Sur le jugement contextuel, elle reste limitée. Et c'est précisément cette distinction qui guide notre manière de l'utiliser.
Ce que l'IA fait bien dans notre workflow
Générer des premières pistes rapidement
La page blanche est l'ennemi du designer sous pression. L'IA est excellente pour la tuer. En décrivant le contexte fonctionnel d'un écran ("une page de tableau de bord pour un gestionnaire de flotte qui a besoin de voir l'état de ses véhicules en temps réel"), on obtient en quelques secondes trois ou quatre structures d'écran exploitables.
On ne les utilise pas telles quelles. Mais elles servent de point de départ à la discussion, permettent d'identifier rapidement les directions intéressantes, et évitent de partir d'une feuille vide lors des ateliers de conception.
Multiplier les variantes d'exploration
C'est probablement le gain le plus significatif. Là où un designer consacrait sa journée à explorer deux ou trois approches d'un même écran, l'IA permet d'en générer dix en une heure. Certaines sont inutilisables. Plusieurs sont intéressantes. Une ou deux contiennent une idée qu'on n'aurait pas eu sans ce volume d'exploration.
En conception, la qualité de la solution finale est souvent proportionnelle au nombre d'alternatives explorées. L'IA augmente mécaniquement ce volume, ce qui améliore le résultat final, à condition que le designer reste le juge de ce qui vaut la peine d'être retenu.
Accélérer la documentation et l'annotation
Les wireframes doivent être documentés : spécifications fonctionnelles, règles de comportement, états alternatifs. C'est un travail nécessaire mais chronophage, peu créatif, souvent mal fait faute de temps. L'IA prend en charge une bonne partie de cette documentation à partir des wireframes existants, libérant du temps pour les tâches à plus forte valeur ajoutée.
Générer des contenus réalistes pour les maquettes
Les wireframes peuplés de "Lorem ipsum" donnent une fausse impression de la densité réelle du contenu. L'IA génère en quelques secondes des textes réalistes, des noms crédibles, des données cohérentes avec le secteur du client. Le résultat est des maquettes plus honnêtes et des présentations client plus convaincantes.
Ce que l'IA ne fait pas (et ne fera pas de sitôt)
Comprendre les utilisateurs réels
L'IA génère des interfaces plausibles. Elle ne sait pas ce que vos utilisateurs spécifiques vivent, ce qui les frustre, le contexte dans lequel ils utilisent votre produit. Cette compréhension vient de la recherche utilisateur (entretiens, observations, tests) et c'est elle qui alimente les vraies décisions de conception.
Un wireframe généré par l'IA sans recherche préalable, c'est une interface vraisemblable mais pas nécessairement juste. La distinction est fondamentale.
Arbitrer les tensions entre contraintes
Dans tout projet réel, il y a des tensions : entre la simplicité souhaitée et la richesse fonctionnelle demandée par le client, entre les besoins des différents profils d'utilisateurs, entre les contraintes techniques et les ambitions UX. Ces arbitrages demandent du jugement, de l'expérience, et parfois des conversations difficiles avec les parties prenantes. C'est un travail humain, et il le restera.
Garantir la cohérence sur l'ensemble d'un projet
L'IA travaille écran par écran, prompt par prompt. Elle ne maintient pas naturellement la cohérence d'un design system sur 40 écrans, ne détecte pas les incohérences de navigation entre les sections, ne perçoit pas que le pattern utilisé sur l'écran 12 contredit la convention établie sur l'écran 3. La vision d'ensemble reste le territoire du designer.
Notre workflow concret : IA + expertise UX
Voici comment l'IA s'intègre aujourd'hui dans nos projets chez Wex :
Phase 1 : Research (inchangée). Entretiens utilisateurs, analyse de l'existant, définition des personas et des parcours cibles. L'IA intervient en support pour la synthèse des verbatims et la détection de patterns dans les retours, mais l'interprétation reste humaine.
Phase 2 : Exploration IA. À partir du brief fonctionnel issu de la research, on génère un volume large de premières structures d'écrans avec des outils IA. Cette phase produit de la matière brute : des directions, pas des solutions.
Phase 3 : Sélection et raffinement par les designers. Les designers évaluent les directions générées, sélectionnent ce qui mérite d'être approfondi, et travaillent en profondeur sur les écrans clés. C'est là que l'expertise UX prend toute sa valeur : dans la capacité à reconnaître ce qui est juste, pas seulement ce qui est plausible.
Phase 4 : Prototypage et tests. Les wireframes retenus sont prototypés et soumis à des tests utilisateurs. L'IA peut accélérer la production de variantes à tester, mais les tests eux-mêmes restent conduits par des humains, sur des utilisateurs réels.
Le résultat : des projets plus rapides en phase d'exploration, une qualité maintenue ou améliorée grâce au volume d'alternatives testées, et des équipes qui passent moins de temps sur les tâches mécaniques pour se concentrer sur ce qui fait vraiment la différence.
Un cas concret : le configurateur en ligne d'un équipementier industriel
Pour illustrer ce que ce workflow change en pratique, prenons un exemple dans le secteur B2B, un type de projet pour lequel l'apport de l'IA dans la phase de wireframing est particulièrement tangible.
Un fabricant d'équipements de manutention souhaitait proposer à ses clients professionnels un configurateur en ligne pour composer et chiffrer leurs solutions sur mesure : type de chariot, capacité de charge, options de motorisation, accessoires, environnement d'utilisation (froid, extérieur, milieu ATEX...), puis génération d'un devis PDF à soumettre au commercial.
Neuf variables interdépendantes, des règles de compatibilité métier complexes, des profils d'utilisateurs très différents (acheteur logistique, responsable de site, directeur industriel), et une forte attente de réassurance à chaque étape. Un parcours à 7 étapes, sur desktop, utilisé dans des contextes de prise de décision à plusieurs milliers d'euros.
Le défi de conception n'était pas technique : il était structurel. Dans quel ordre présenter les choix ? Comment gérer les dépendances entre options sans bloquer l'utilisateur ? Où placer les points de réassurance (fiches techniques, aides contextuelles, rappel du commercial disponible) ? À quel moment demander les coordonnées pour générer le devis ?
Ces questions n'avaient pas de réponse évidente. Les tester directement sur maquettes haute fidélité aurait coûté plusieurs semaines de conception, pour peut-être découvrir en tests utilisateurs que la logique d'enchaînement retenue ne correspondait pas aux habitudes mentales des acheteurs.
Ce que l'IA a permis de faire. En partant du brief fonctionnel et des profils utilisateurs définis lors de la phase research, nous avons généré en moins d'une journée cinq structurations différentes du parcours : chacune avec une logique d'enchaînement des étapes distincte, des niveaux de guidage variables, et des hypothèses de wording différentes sur les intitulés d'étapes et les libellés d'actions :
- Variante A (logique "entonnoir produit") : on commence par la famille d'équipement, puis on affine progressivement
- Variante B (logique "contexte d'usage d'abord") : on décrit l'environnement et la mission, l'outil propose une sélection filtrée
- Variante C (logique "besoin exprimé") : une première question sur le cas d'usage, suivie d'une arborescence guidée
- Variante D (logique "comparaison") : deux ou trois configurations types présentées d'emblée, que l'utilisateur ajuste
- Variante E (logique hybride) : entrée libre avec suggestions contextuelles à chaque étape
Ces cinq variantes, présentées sous forme de wireframes annotés bas fidélité, ont d'abord été soumises à l'équipe commerciale et produit du client lors d'un atelier de 2 heures. Résultat : deux variantes éliminées immédiatement (incompatibles avec les règles métier), une troisième jugée trop complexe pour les acheteurs non spécialistes. Deux finalistes.
Ces deux variantes ont ensuite été testées sur huit utilisateurs représentatifs (responsables logistique et acheteurs industriels) lors de sessions de tests utilisateurs. Les enseignements ont été déterminants : la logique "contexte d'usage d'abord" était perçue comme plus rassurante par les non-experts, mais créait de la friction chez les acheteurs expérimentés qui savaient déjà ce qu'ils voulaient. La solution finale a combiné les deux logiques : une entrée rapide pour les utilisateurs qui connaissent leur besoin, et un mode guidé pour les autres.
Sans l'IA pour générer rapidement ce volume de variantes exploratoires, nous aurions vraisemblablement travaillé une ou deux pistes. Nous aurions manqué la tension entre les deux profils d'utilisateurs, une tension qui n'est apparue qu'en confrontant cinq approches différentes à la réalité du terrain.
Le vrai enjeu : savoir ce qu'on optimise
L'IA dans le wireframing pose une question stratégique que chaque agence doit trancher : est-ce qu'on l'utilise pour aller plus vite, ou pour aller plus loin ?
Aller plus vite sans investir le temps gagné dans plus de recherche, plus de tests, plus d'itérations : c'est simplement produire des interfaces médiocres plus rapidement. Ce n'est pas notre choix.
Aller plus loin, c'est utiliser le temps libéré par l'IA pour augmenter la qualité du processus : plus d'exploration en phase amont, plus de variantes testées sur des utilisateurs réels, plus de temps consacré aux arbitrages complexes qui font la différence entre une interface fonctionnelle et une interface que les gens adoptent vraiment.
C'est dans cette deuxième direction que nous avons choisi d'aller.
Vous travaillez sur un projet de conception ou de refonte d'interface ? Nous serions heureux de vous montrer concrètement comment notre approche UX augmentée par l'IA s'applique à votre contexte.
Article publié par l'équipe de l'Agence Wex, qui conçoit et construit des produits digitaux : recherche utilisateur, UX et UI design, développement front et headless, accessibilité et maintenance applicative.
Publié par Équipe Wex