logo IAFACTORY
conseil en design UX
conseil en ergonomie
architecture IA - UX
icone conception UX design

Le wireframing est la partie la plus visible des techniques de conception UI design de design d'interface.
Découvrez des exemples illustrés de maquettes fonctionnelles et des ressources pour wireframing ux.

Wireframing UX et conception des maquettes fonctionnelles

Révisé en Janvier 2024

Wireframes et technique de wireframing : le point complet

wireframing

Wireframing signifie concevoir les maquettes fonctionnelles. Le résultat de ce travail de conception débouche sur un référentiel de tous les écrans de votre site web à travers les wireframes. La technique de wireframing est incontournable pour la conception de projets digitaux sur mesure, le lancement de nouvelles plateformes web et pour l'architecture d'écosystème digital complexe. Les wireframes préfigurent le fonctionnement du dispositif digital et esquisse les principes d'ergonomie, si bien que le wireframing UX oriente notablement le design de l'expérience utilisateur.

Vous voulez tout savoir sur le wireframing ?
Comprendre pourquoi les wireframes sont si importants ?
Combien de wireframes doivent être réalisés ?
A quel moment vous devez recourir au wireframing ?
Et surtout, comment maquetter de bons wireframes ?

Cet article fait un point complet sur les techniques de wireframing en vous exposant les méthodes détaillées pour modéliser un wireframe et en vous présentant des exemples de wireframes. Le wireframing est une technique au carrefour du design d'interaction, du design d'information et de l'architecture de l'information. Les wireframes représentent aussi un livrable important dans la conception d'un dispositif digital.

La vocation du wireframe est de préfigurer le fonctionnement de l'interface utilisateur, ce qui en fait un des outils les plus populaires du design d'expérience utilisateur.
Les wireframes esquissent donc le fonctionnement du dispositif. Ils déterminent la ventilation ainsi que le positionnement des fonctionnalités et des contenus au sein de l'écran. On procède au wireframing d'un dispositif digital en phase de conception du cycle projet.

Concevoir les maquettes fonctionnelles est considéré comme un travail structurant dans le processus de fabrication d'un dispositif digital. C'est une étape importante qui permet de préparer la phase de production. En effet, la caractéristique visuelle du wireframe en fait un livrable facile à appréhender pour tous les acteurs du projet digital. Tous les profils métiers prennent connaissance des wireframes avant d'initialiser leur tâche, notamment pour comprendre l'envergure fonctionnelle du projet : les développeurs front-end, les développeurs back-end, les designers graphiques, les gestionnaires de projet, les rédacteurs...

Wireframe ou storyboard ?

Un wireframe matérialise le fonctionnement d'un écran type.
Le wireframe fixe les principes de conception de chaque écran du dispositif digital. Pour un support interactif composé de 50 gabarits types, on procèdera au maquettage de chacun des 50 écrans. On retrace ainsi le fil conducteur du dispositif digital.
On parle aussi de chemin de fer, comme en imprimerie. C'est l'addition de ces 2 analogies qui traduisent le mieux le concept anglophone de wireframe : fil de fer. En effet, les lignes de force sont les principales caractéristiques visuelles d'un wireframe.

La méthode de wireframing implique un approfondissement du fonctionnement de chaque écran type du dispositif digital. La conception fonctionnelle du wireframe consiste à ventiler les fonctionnalités et les contenus à l'écran. Il s'agit d'affecter un composant d'interface utilisateur à chaque zone du gabarit.

Ainsi, le design de l'information permet de visualiser la hiérarchie des éléments affichés à l'écran.
C'est un exercice qui considère l'interface utilisateur sous un angle statique. Or, un support interactif est un produit dynamique où les écrans s'enchaînent. C'est dans cette optique que le concepteur chargé de maquetter le fonctionnement du dispositif doit également considérer chaque gabarit sous un angle interactif : un template s'inscrit toujours comme une étape d'un parcours d'utilisation plus vaste... Tels sont les enjeux du design de l'interaction.

Cette caractéristique paradoxale du wireframe doit être soulignée car elle génère des confusions auprès des non-initiés. En effet, un wireframe est d'abord une maquette fonctionnelle d'un seul écran. C'est bien la conception de tous les écrans qui va permettre de considérer le fonctionnement du dispositif dans son ensemble.
On parle alors de storyboard lorsque tous les wireframes ont été maquettés, c'est à dire lorsque le document de conception permet d'appréhender tout le périmètre fonctionnel du dispositif digital. Il en va de même au cinéma : le storyboard dépeint le déroulé de l'intrigue autour d'une narration qui s'appuie sur l'enchaînement des scènes. Le travail de wireframing relève du même registre de scénarisation. On parle d'ailleurs d'écriture interactive, car le concepteur d'interface est avant tout un scénariste des interactions.

Le wireframe est donc une projection du scope fonctionnel de chaque écran, quand le storyboard considère l'ensemble des écrans.

En matière de vocabulaire, pour désigner les wireframes, certains professionnels utilisent également les termes de mockup (maquette), voire de blueprint (plan). Il est effectivement facile de faire l'analogie avec des plans d'architectes voire des maquettes d'architecture, qui préfigurent la construction d'une maison.

Les wireframes sont-ils des prototypes ?

Un wireframe n'est absolument pas un prototype. Vous ne pouvez pas le considérer comme une base fiable pour organiser un test utilisateur. En effet, un wireframe ne préfigure pas le produit fini. Il ne représente que les grands principes du design de l'information et du design de l'interaction. Le wireframe est juste une esquisse, pas une esquisse juste. Un utilisateur final ne réagira pas de la même façon face à un produit fini.

Les wireframes peuvent être utilisés pour créer des scénarios. C'est à dire que le concepteur peut choisir d'illustrer un parcours utilisateur pour mieux appréhender la dynamique de l'interface et la fluidité de l'enchaînement des écrans. On créé généralement des scénarios animés une fois l'intégralité des écrans types modélisés. Dans ce cas, on cherche à dépasser le caractère statique de chaque écran pour visualiser l'enchaînement des actions. Le scénario animé permet de passer d'une vision statique de l'écran (design de l'information) à une vision dynamique de la succession des écrans (design de l'interaction). Les scénarios animés sont utiles pour visualiser les interactions, mais pas assez élaborés pour être considérés comme des prototypes.

Pour créer un prototype, il est nécessaire de passer à la phase de design graphique et d'assembler les écrans types autour d'un parcours central. Il ne s'agit pas de fabriquer un prototype représentatif de tout le périmètre fonctionnel du dispositif digital, ce qui serait contre-productif. On créé un prototype de quelques écrans pour tester les solutions de conception et valider les choix effectués sur les plans ergonomiques et fonctionnels.

Pour reprendre une autre analogie, les wireframes représentent le squelette du dispositif. Le design graphique figure la peau. Le développement des interactions de surface symbolisent les habits. Le développement des interactions de structure permettent de considérer le mouvement. C'est l'ensemble de ces caractéristiques qu'il convient de rassembler pour réaliser un prototype. On ne peut pas se baser uniquement sur le squelette pour escompter des résultats représentatifs du produit final.

Les wireframes dans la gestion de projet

On distingue 4 grandes phases dans tout projet :
Analyse, Conception, Production, Evaluation.
Dans les méthodes de gestion de projet ou dans la démarche du design d'expérience utilisateur, la phase de conception succède effectivement à un temps d'analyse : avant-projet, phase d'analyse, phase de cadrage. On peut utiliser différents termes pour qualifier cette phase d'étude qui permet de rassembler toutes les informations du projet en amont de la conception du dispositif digital.

Une phase de cadrage bien menée révèle des objectifs mesurables et centralise l'expression des besoins du commanditaire, les attentes des utilisateurs finaux, ainsi que les grands enjeux du projet. Dans l'idéal, la phase de cadrage éclaircit le dimensionnement du projet sur les plans de l'envergure éditoriale et de l'envergure fonctionnelle.

D'une façon générale, tous les travaux poursuivis en amont de la conception du dispositif digital concourent à rassembler les informations nécessaires à la production d'un produit sur-mesure. Chaque projet est différent. L'incroyable diversité du matériel que l'on peut recueillir dans l'avant-projet en témoigne. Plus le cadrage est précis, plus les besoins sont clarifiés, plus le concepteur pourra apporter des solutions pertinentes. A l'inverse, un projet mal cadré pose des problèmes sur les plans de la conception, car les objectifs ne sont pas clairement définis...

En bref, la phase de conception est tributaire de la qualité de la phase de cadrage.

Conception générale et conception détaillée

Dans la phase de conception, on distingue deux temps :

  • 1. La conception macro : globale
  • 2. La conception micro : détaillée

1. Dans la conception macro...
Le concepteur cherche à dégrossir les principes fonctionnels généraux. On va par exemple utiliser la technique du zoning pour définir les grandes fonctions de chaque zone de l'interface. Les zonings sont particulièrement efficaces pour esquisser les comportements adaptatifs de l'interface. On peut ainsi définir un zoning et apprécier les zones fonctionnelles à l'écran pour chaque point de rupture : grand écran, ordinateur portable, tablette, smartphone...

2. Dans la conception micro....
Le concepteur affine le fonctionnement en utilisant les wireframes pour aboutir à un document complet de conception détaillée. La modélisation des maquettes fonctionnelles succède, normalement, à l'esquisse des grands principes de zoning. La conception micro s'appuie sur le zoning général en détaillant de façon précise le comportement de chacun des écrans.

Lorsque le concepteur est amené à modéliser le fonctionnement de l'interface, il est par ailleurs susceptible de disposer d'un matériel très précis (expression des besoins consistante et exhaustive) comme d'une documentation projet pauvre voire nulle. Ces variables ont un impact direct sur la précision que le concepteur va injecter dans le design d'information des wireframes.

Wireframe haute-fidélité ou zoning macro ?

En principe, une conception détaillée doit figurer des maquettes fonctionnelles détaillées. Maintenant, la finesse apportée au rendu des wireframes va dépendre du profil du concepteur et du temps à disposition.

Pour reprendre la métaphore du storyboard, le dessin de chaque scène peut être plus ou moins fin, plus ou moins précis, plus ou moins élaboré. Dans la mesure où le storyboard est un outil qui préfigure la production, ce qui compte principalement, c'est que les producteurs et les réalisateurs soient en capacité de l'interpréter.

Il en va de même pour les wireframes. Pour répondre à la question de savoir si le wireframe doit être fidèle au rendu final, ou simplement esquisser des grands principes de fonctionnement en mode brouillon, on va se poser la question des destinataires : le chef de projet, un PDG, le directeur artistique, l'équipe du commanditaire ?

Chez IAFACTORY, nous préférons modéliser des wireframes en haute-fidélité, en noir et blanc, avec des niveaux de contrastes très importants. C'est un parti pris. Il permet de figurer les contenus, les visuels, au plus proche de la réalité, en simulant les problèmes d'encombrement et d'espace disponibles dans l'interface.
C'est un excellent moyen pour visualiser le fonctionnement du dispositif. Cela demande un bon sens du design de l'information et du design de l'interaction. Un wireframe haute-fidélité agit en trompe l'oeil et peut également générer des incompréhensions : est-ce une maquette graphique ? Certains directeurs artistiques rejettent ce type d'approche en considérant qu'elle empiète sur leur territoire. C'est recevable. Ou pas... (égo)...

A l'inverse, un wireframe trop vague risque de ne pas remplir ses objectifs de clarification des enjeux fonctionnels de l'interface. Il sera mal accueilli par les équipes graphiques qui n'y verront pas une source suffisamment fiable pour y appuyer leur travail de création.

Pour découvrir des wireframes haute-fidélité, vous pouvez consultez nos exemples de wireframes.
Et pour visualiser des projets de conceptions très diversifiées, allez explorer la galerie des travaux : exemples de projets ux design. Il y a 1750 illustrations de projets UX à découvrir et plus de 1000 wireframes :).

Wireframing et UX design

Il est fréquent que le design d'expérience utilisateur soit réduit au travail de wireframing. Or les wireframes ne sont qu'une partie visible de tous les travaux impliqués par une démarche de conception centrée sur l'utilisateur (ux design).

Un amalgame s'est créé entre UX design (design de l'expérience) et UI design (design de l'interface). Or, le design fonctionnel de l'interface ne préfigure qu'une mince partie de l'expérience. L'expérience utilisateur ne peut par ailleurs être réduite à la simple interface utilisateur...

L'expérience utilisateur considère l'usage, la situation d'utilisation, l'intensité émotionnelle et le degré de satisfaction procurée par l'expérience. L'UX est centrée sur le facteur humain et développe tout un arsenal de solutions pour concevoir l'expérience et en évaluer la qualité (analyse du besoin, analyse de tâche, étude ethnographique, test utilisateur, entretien, tri de cartes...).

Dans cet ensemble de travaux visant à designer l'expérience de l'utilisateur, on trouve effectivement les wireframes qui ont vocation à poser les bases de l'interface utilisateur. Or l'interface utilisateur n'est qu'une couche de l'expérience. C'est donc erroné de considérer l'UX au travers des wireframes. Beaucoup de layers doivent être ajoutés : le design graphique et la sensibilité artistique, la tonalité éditoriale et le style des rédacteurs, l'ingéniosité des séquencs interactives et la subtilité du design d'interaction, la personnalité du dispositif et le caractère de l'entreprise au travers de sa persona, les qualités ergonomiques et techniques, la vitesse des chargement, la disponibilité des interlocuteurs derrière l'écran, la qualité des produits et des services, la réactivité, le service après-vente. C'est bien l'expérience utilisateur globale qui doit être remarquable, pas simplement l'interface utilisateur...

Le fait que le wireframe soit un livrable fondamental dans la production d'un dispositif digital a également tendance à réduire le périmètre des compétences et des missions assignées à l'UX designer, générant un amalgame sur les métiers : un concepteur d'interface (UI) peut être un bon UX designer, alors qu'un bon UX designer peut être un piètre concepteur d'interface (UI)... Ainsi, si vous recherchez un excellent concepteur d'interface utilisateur (UI design), ne cherchez pas forcément un UX designer :).

En wireframing, particulièrement dans la réalisation de wireframe haute-fidélité, on vise l’adéquation entre les exigences des marques et les attentes effectives des utilisateurs finaux : cette approche permet de créer des interfaces performantes et des dispositifs interactifs favorablement accueillis par les usagers. Ce qui est un peu le sens de toute démarche UX design, n'est-ce pas ?

Pourquoi les wireframes sont-ils si importants ?

Pour dire les choses crûment, l'industrie digitale n'est pas épargnée par la médiocrité... Un dispositif digital induit une conduite de projet assez rigoureuse qui passe par des jalons, des étapes, des processus. Or, il faut bien l'admettre, beaucoup de projets digitaux sont gérés de façon superficielles, faisant l'impasse sur les phases d'avant-projet et les techniques les plus élémentaires de recueil du besoin (analyse des besoins des usagers et expression des besoins métier).

Dans ce grand vide méthodologique de la gestion de projet digitale, le concepteur d'interface, considéré à tort comme un UX designer omniscient, doit se débrouiller pour centraliser tous les flux du projet : expression du besoin, attentes des usagers, périmètre fonctionnel, périmètre éditorial... En l'absence de travail préparatoire et de phase d'avant-projet consistante, les attentes et les exigences se reportent en conception, et principalement sur la phase de wireframing... Si bien que les wireframes deviennent la clé de voûte du projet, le seul document dont tous les acteurs stratégiques daignent bien vouloir prendre connaissance (en dehors des maquettes graphiques)...

Plusieurs problèmes résultent de cet état de fait.
D'abord, les wireframes deviennent un grand champ de bataille où les différents porte-voix du projet cherchent à établir leur territoire...
Qui va crier le plus fort : le responsable marketing, le rédacteur, le chef de produit, le consultant, le chef de projet, le porteur de projet, le PDG ?
Dans les faits, chaque acteur cherche à positionner son service, son business, son territoire, au sein des principaux espaces de visibilité de l'interface utilisateur. Cet écueil est toujours le fruit d'une expression des besoins mal cadrée.

Ensuite, alors que la maquette fonctionnelle cherche à éclaircir le périmètre fonctionnel du projet digital, elle devient le réceptacle de toutes les interrogations business du commanditaire. Les besoins émergent au fil de l'eau, et le concepteur d'interface fait face au grand classique de la conception : le projet n'a pas de fondation solide... C'est comme si tous les enjeux du projet se révélaient d'un coup, au travers des wireframes. C'est le cas ! Mais cela doit être préparé en amont, les wireframes n'étant qu'une traduction de la rencontre entre des objectifs business et des besoins à adresser côté usager...

Enfin, la popularité et les effets de mode autour du design graphique et du design fonctionnel attirent beaucoup de regard sur les wireframes... Trop d'interlocuteurs sont amenés à commenter les wireframes. Le concepteur d'interface voit ainsi son travail désolidarisé des enjeux fondamentaux d'une bonne conception : qualités ergonomiques, rationalisation fonctionnelle, cohérence des codes...
L'UI designer joue un rôle de pompier pour éteindre les feux et répondre aux crises des différentes parties prenantes du projet. Là encore, cela résulte d'incompréhensions sur les enjeux et les objectifs des wireframes. Il ne s'agit que de conception fonctionnelle :). A noter que ces interlocuteurs n'iraient pas jeter un oeil aux caractéristiques du code produit par un développeur.

Moralité : les wireframes sont considérés comme un outil marketing alors qu'ils sont, à la base, de simples travaux de conception fonctionnelle.

Wireframe et ergonomie

Un dispositif digital doit être ergonomique au même titre qu'une montre donne l'heure. Il s'agit d'une qualité inhérente que doit atteindre tout dispositif digital : utilité, efficacité, efficience sont les maîtres mots à considérer sur les plans de l'ergonomie.

L'ergonomie d'un support interactif ne se contrôle pas à l'arrivée, en bout de course. Ainsi, le concepteur d'interface doit avoir une large connaissance des principes ergonomiques fondamentaux, qu'il applique au moment de maquetter les wireframes. C'est effectivement à la source qu'il faut étouffer les risques d'erreurs ergonomiques. Or, beaucoup de freins à l'utilisation constatés dans les audits ergonomiques sont les fruits d'erreur de conception...

Bien entendu, les wireframes ne sont que des esquisses et il n'est pas question ici de procéder à une revue des qualités ergonomiques d'une interface projetée en noir et blanc, en mode fil de fer... Le propos est bien de dire que le concepteur doit appliquer les règles ergonomiques à sa démarche de conception, sur le plan de l'interface.

Naturellement, la démarche ergonomique, comme l'UX design au sens large, dépassent largement les questions de façonnage et d'interface utilisateur. La démarche ergonomique considère l'utilisateur à chaque étape du projet digital, en phase d'analyse du besoin comme au moment de l'évaluation. La conception n'échappe pas à la démarche ergo.

Le concepteur d'interface gagne d'autant plus à passer maître dans les règles ergonomiques, qu'il est de plus en plus soumis à la question... Comme les vieux inquisiteurs d'une époque à oublier, nous avons aujourd'hui de plus en plus d'ergonome de comptoir autour de la table de réunion. Il faut faire avec, la mode vous y oblige :). Tout le monde est ergonome comme tout le monde est sélectionneur de l'équipe de France...

Conception sur-mesure ou conception standardisée ?

Lorsque vous devez concevoir le fonctionnement d'un dispositif digital ambitieux, vous devez le plus souvent recourir à une conception sur-mesure. C'est un peu le principe de la maison d'architecte faite sur plan. Le commanditaire formule des demandes trop originales pour être traitées de façon industrielle. Ces projets font l'objet de phase de conception fonctionnelle pointue.

Certains projets exigent, au contraire, du préfabriqué. C'est le business des outils de gestion de contenu ou des sites ecommerce clés en main : Drupal, Wordpress, Magento, Prestashop...

Ainsi, le maquettage fonctionnel vogue entre ces deux extrêmes : une conception fonctionnelle sur-mesure, 100% originale vs. un design clé en main quasi prêt à l'utilisation. Les codes ergonomiques et fonctionnels des principaux dispositifs digitaux (site business, site ecommerce, site éditoriale...) sont aujourd'hui relativement standardisés, si bien qu'il est d'usage de s'appuyer sur des squelettes et des modèles de conception prêts à l'utilisation pour se concentrer sur l'essentiel : le contenu et le produit...
Si cela peut vous aider, IAFACTORY a modélisé plus de 160 écrans et une dizaine de wireframe de dispositifs digitaux éprouvés et testés sur les plans ergonomiques et fonctionnels...

Objectifs du wireframing ux design

Modéliser le fonctionnement grâce au wireframe

Clarifier le fonctionnement du dispositif pour avoir une feuille de route tout au long du projet, c'est la fonction principale du wireframing.
Concrètement, au travers des travaux de wireframing ux, il s’agit de traduire vos enjeux ainsi que les attentes des utilisateurs en éléments d’interface, en fonctionnalités, en contenus. La phase de conception fonctionnelle débouche sur le travail de wireframing, et les wireframes détaillés doivent être une traduction des objectifs business en critères d’expérience positive pour l’utilisateur... Lorsque vous travaillez en wireframing, vous devez faire converger l'expérience utilisateur et les objectifs business du commanditaire. Il faut garder ces deux flux en tête en permanence...

Le principal objectif du travail de wireframing est d'esquisser le fonctionnement de l'interface utilisateur, pour chaque écran, en vue de sa production. Le maquettage fonctionnel permet de dégrossir le périmètre fonctionnel et de visualiser la ventilation des éléments à l'écran. Les wireframes se concentrent principalement à traduire l'envergure fonctionnelle du dispositif digital. En effet, la conception fonctionnelle se concentre sur les modèles types (les écrans types, ou gabarits types), les fameux templates. Le concepteur doit être capable de visualiser un maximum de cas différents pour proposer une synthèse et un modèle capable de répondre à tous les cas d'utilisation. Ainsi, le travail porte davantage sur la dimension fonctionnelle...

Pour modéliser le fonctionnement de l'interface, l'UI designer (concepteur de l'interface) doit également avoir une bonne vision du périmètre éditorial du dispositif digital. Il travaille sur la nature des différents contenus, leur registre, les types de médias à disposition, la densité générale des articles. Cette connaissance permet de modéliser des interfaces qui agrègeront efficacement les contenus.

Plus globalement, les objectifs fondamentaux poursuivis par le maquettage fonctionnel dans la phase de wireframing :

  • Ventiler les composants d'interface à l'écran (fonction, contenu, navigation, formulaire).
  • Maquetter le fonctionnement des écrans principaux du dispositif digital.
  • Décliner le fonctionnement de chacun des gabarits du support digital.
  • Concevoir tout (ou partie) de support, sous toutes ses facettes,
  • Synthétiser les données type à faire figurer au sein de l'interface, pour chaque écran type.
  • Permettre aux acteurs du projet, de visualiser le squelette de l'interface utilisateur.
  • Détailler le fonctionnement des fonctionnalités avancées.
  • Esquisser l'enchaînement des écrans pour les séquences complexes comme les processus.
  • Clarifier la nature des interactions pour chaque écran.

Sur un plan plus technique, la conception des wireframes doit également suivre certaines bonnes pratiques :

  • Matérialiser tous les discours de façon lisible et accessible.
  • Fixer les éléments des stratégies marketing et de communication.
  • Définir les zones d’interaction et leurs impacts.
  • Eclaircir tous les comportements de surface à l’écran.
  • Détailler le fonctionnement de toutes les composantes fonctionnelles.
  • Prévoir les variables d’ajustement permettant de gérer les cas marginaux.
  • Documenter le projet et garantir la maitrise de la production.

Plus spécifiquement, voici les caractéristiques qui permettent d'apprécier un bon wireframe :

  • Les wireframes donnent à voir un design de l'information homogène dans tout le dispositif.
  • La maquette fonctionnelle propose d'excellents niveaux de contraste pour distinguer les différents éléments de l'interface.
  • La hiérarchie des actions attendues de l'utilisateur apparaît clairement.
  • Les call to action (appels à l'action) et les principes d'ergonomie incitative sont mis en scène.
  • Des repères stables et cohérents apparaissent dans toute l'interface.
  • Les écrans sont équilibrés et jamais surchargés.
  • Des contenus réels sont utilisés pour illustrer chaque écran type.

Wireframing et ergonomie des interfaces

De même qu'une interface graphique doit respecter les principes ergonomiques de base, le concepteur d'interface doit être en mesure de préfigurer l'ergonomie en veillant à suivre les lignes directrices d'une bonne interface :

  • Guidage : des marqueurs sont fournis pour se repérer et inciter à explorer le dispositif.
  • Charge de travail : les écrans complexes sont fragmentés en étapes ou en plusieurs éléments.
  • Action explicite : les actions proposées sont toujours conçues pour être à la main de l'utilisateur.
  • Flexibilité de l'interface : différents scénarios d'utilisation sont envisagés pour réaliser une même tâche.
  • Gestion des erreurs : l'interface limite le risque d'erreur de façon préventive et prévoit des actions pour corriger d'éventuelles erreurs.
  • Signifiance des codes : pas d'utilisation de jargon technique, pas de pictogramme pouvant être incompris.
  • Homogénéité et cohérence : le concepteur fait l'effort de proposer des codes d'interface homogènes.

Créer de la compréhension à l'aide du wireframing

Nous avons exposé les risques de considérer les wireframes comme des réceptacles d'un rendez-vous manqué dans l'expression des besoins... Néanmoins, toute une frange de professionnels considère les wireframes comme un outil de conception qui doit être utilisé pour créer de la compréhension.
Il s'agit du mythe de la co-création et des légendes sous-tendues par les idéologues du design thinking. Il y a beaucoup de marketing fallacieux sous ces approches, mais, sur le fond, on peut effectivement considérer que les wireframes peuvent être un outil de travail collaboratif, en réunion. Dans ce cas on sort du maquettage fonctionnel...

On considère alors la technique du wireframing comme un support d'échange permettant aux acteurs du projet d'accoucher leurs idées. Chacun peut ainsi voir les idées se formaliser progressivement et visualiser l'avancement du projet de façon tangible. Disons qu'un wireframe est un schéma, orienté et sophistiqué certes, mais c'est aussi un outil qui permet in fine de formaliser toute type d’idée, sous tout type de forme, et donc pas uniquement des interfaces fonctionnelles...
Si on envisage les wireframes comme un outil de compréhension et de partage dans le projet, au-delà du caractère purement fonctionnel, il s’agit alors de :

  • Concevoir le wireframe comme un support de compréhension et de partage.
  • Poser une première base tangible favorisant les processus itératifs.
  • Matérialiser les interactions des utilisateurs avec des produits et de services.
  • Créer de la compréhension et designer pour mieux comprendre.
  • Apprivoiser la complexité des métiers de nos clients.
  • Donner une forme visuelle à des problématiques verbales.
  • Explorer les différentes idées qui traduiront au mieux le discours.
  • Donner une forme visuelle aux systèmes informationnels.
  • Anticiper et s’adapter aux comportements et réactions des utilisateurs.

Exemples de wireframing ux

wireframing wireframing
wireframing ux Carrefour
iafactory - Julien MUCKENSTURM
exemple de wireframe exemple de wireframe
wireframing ux Home and cook
iafactory - Julien MUCKENSTURM
wireframing ux wireframing ux
wireframing ux Valeo
iafactory - Julien MUCKENSTURM

Méthode pour la conception des wireframes

Inventoriez les composantes fonctionnelles

La première étape du travail de wireframing consiste à établir l'inventaire fonctionnel du dispositif digital. Un bon inventaire fonctionnel dresse la liste de tous les gabarits et de toutes les fonctionnalités du site. Bref, il fait le point sur le scope fonctionnel du projet, et met tout le monde d'accord sur l'envergure fonctionnelle du dispositif.

Regroupez tous les gabarits autour des grandes zones fonctionnelles de votre dispositif. Pour un site ecommerce, on découpe par exemple le périmètre fonctionnel autour de la descente catalogue, de l'espace client, du processus de commande, etc.

Vous noterez qu'on choisit généralement les zones fonctionnelles autour des grands scénarios stratégiques du dispositif digital. Chaque espace fonctionnel répond à des enjeux particuliers sur le plan de l'expérience utilisateur, et il n'est pas rare que la partie en question soit suffisamment originale pour nécessiter une ergonomie particulière (un checkout n'est pas un espace client...).

Du zoning au wireframing : du macro au micro

Les wireframes détaillés ou storyboard haute-fidélité permettent de passer d’une vision macro à une approche micro de l’interface en transposant visuellement, précisément et intégralement les champs fonctionnels du support : principes de navigation, présentation des médias, organisation, hiérarchie, priorisation des contenus, fonctionnalités… En effet, avant l'étape de wireframig, vous avez normalement pris le temps de définir les grandes zones de l'interface (conception macro) - au travers des zoning.

Vous devez essayer de rationaliser le fonctionnement de l'interface en affectant des fonctions précises à chaque zone de l'interface. Ces fonctions doivent être transversales, autant que faire se peut... Néanmoins, certaines zones fonctionnelles peuvent nécessiter des ajustements. Comme nous l'évoquions pour l'exemple du site ecommerce, le zoning du processus de commande sera différent du zoning de la fiche produit. Au sens macro.

Dans le maquettage du zoning, vous figurez la navigation, les éléments de branding, les marquages de repérage, les zones communicationnelles, les zones de rebonds, les marqueurs de l'ergonomie incitative.

Utilisez une grille modulaire, c'est à dire un système de grille bâti sur un quadrillage pour créer des lignes de force : définissez le nombre de modules fonctionnels et éditoriaux que chaque zoning doit être en capacité d'emmagaziner sur le plan vertical et horizontal...

Fixez les limites d'encombrements. Ajustez le nombre et la taille des modules. Les formats doivent être cohérents.

Projetez enfin votre zoning sur les différents points de rupture de votre projet pour répondre aux problématiques du design adaptatif. Autrement dit, esquisser à minima le rendu du zoning sur écran desktop, tablette, smartphone.

Préparez le document de conception fonctionnelle

Pour chaque espace fonctionnel assez original pour faire l'objet d'un travail de conception spécifique (descente catalogue, checkout), listez les gabarits dans une page sommaire et affectez une nomenclature claire à chaque écran... Vous pouvez créer un document spécifique pour chaque grand espace fonctionnel du site. Veillez toutefois à ne pas cloisonner l'ergonomie de chaque espace. Votre design d'interaction et les qualités ergonomiques de l'ensemble en prendraient un sacré coup !

Si vous travaillez sur la descente catalogue d'un site ecommerce, vous allez concevoir la page d'accueil, le gabarit d'un rayon de niveau 1, le modèle de page de résultats, les modalités de filtre et de comparaison, le template de la fiche produit, et tous les composants fonctionnels qui se rattachent à l'expérience utilisateur et à l'envergure fonctionnelle de la descente catalogue. C'est un gros travail ! Vous devez nommer chaque élément fonctionnel que vous concevez, dans une optique de production rationalisée et documentée.

Basez-vous sur le zoning pour maquetter les éléments persistants dans l'interface : le logo, la navigation, les zones de titres. Si vous avez bien travaillé votre zoning, vous avez à votre disposition des formats de conteneurs (modules) pour distiller les contenus et les fonctions à l'écran.
On dit souvent qu'un site est un système de boîte, qui englobe des boîtes, qui sont elles-mêmes dans des boîtes. Oui c'est vrai, et alors ? Appuyez votre design d'interface sur le concept de Matriochka. Les résultats sont excellents sur les plans de la perception et de la compréhension auprès des utilisateurs.
Et si un marketeur vous demande de penser en dehors de la boîte et de faire du out of the box, renvoyez-le à la bibliographie UX design du site iafactory ou envoyez le se faire voir de notre part :).

Maquettez le fonctionnement de chaque écran

Chaque écran type doit figurer des données dynamiques : les produits les plus en vus sur la page d'accueil, les caractéristiques du produit dans la fiche produit... Vous pouvez commencer par lister les flux dynamiques du gabarit à concevoir pour vous aider à bien saisir les données à représenter. Vous devez effectivement d'abord savoir ce que vous souhaitez représenter, avant de définir comment le représenter... Dans la pratique, c'est tout sauf une évidence...

Pour maquetter le fonctionnement détaillé de chaque écran, vous devez d'abord visualiser ce que vous souhaitez obtenir. En principe, un écran type s'inscrit dans un parcours d'utilisation, lequel doit adresser un ensemble de réponse à des scénarios d'usage (préparer l'achat, comparer, acheter, obtenir un prix...).

Pour vous aider à amorcer le travail de conception, vous pouvez vous appuyer sur les éléments suivants :

  • Lister les éléments structurants et transversaux de l'interface identifiés dans le zoning.
  • Inventorier les flux dynamiques qui seront agrégés au sein du gabarit type.
  • Mettre à plat les objectifs du gabarit et les prioriser.
  • Définir les grandes réponses fonctionnelles et éditoriales que devra apporter le template.

Sur ces bases, vous pouvez poser le fonctionnement des éléments de navigation transversaux (ce qui présuppose une bonne connaissance de l'architecture de l'information pour choisir le bon design de navigation).
Et choisir les modules les plus pertinents pour répondre aux objectifs.

Hiérarchisez les modules (les boîtes) en fonction de l'importance des actions que vous souhaitez que l'utilisateur réalise (parcours central).
Optez pour une grille de lecture agencée de la gauche vers la droite et du haut vers le bas. Là encore, dans la pratique, c'est tout sauf évident...

Quelques astuces pour vous aider à maquetter

  • Travaillez en niveaux de gris (noir et blanc). Banissez la couleur.
  • Evitez d'utiliser des photos.
  • Créez des contrastes puissants entre les différents modules.
  • Donnez le contraste le plus fort aux call to action.
  • Limitez le nombre d'actions proposées dans chaque gabarit : 1 gabarit adresse 1 objectif stratégique.
  • N'utilisez qu'une seule typographie.
  • Pas plus de 5 à 8 styles de traitements typographiques différents (Titre, chapô, sous-titre, texte, mise en relief, intertitres...).
  • Modélisez des modules homogènes sur le plan de la taille (mais diversifiez le traitement du format par des niveaux de gris, des bordures.
  • Regroupez les formats de même nature autour d'un style de même nature (payant = un style).
  • Faîtes apparaître les liens avec un soulignement (principe d'affordance : on sait qu'on peut cliquer sans avoir à expérimentez...) : très important pour les équipes de production.
  • Commentez vos wireframes : il ne s'agit pas de spécifications, mais de remarques pour expliquer tel ou tel choix (important dans le travail collaboratif).

Le piège du wireframing : foncez tête baissée dans les wireframes...

Trop souvent, tous les porteurs de projet souhaitent amorcer leur projet par un storyboard et foncer dans le wireframing ! "Vite, je veux voir mon interface"...
Vous aurez beau tenter d’expliquer les risques impliqués par une conception prématurée, l’usage est si répandu, même dans le cadre de projet d’envergure internationale, qu’il en est devenu une norme. Et c'est bien dommage. Au final, c’est souvent le précipice qui se profile avec une telle méthodologie…

En règle générale, la phase de wireframing qui débouche sur la matérialisation des storyboards intervient en aval des investigations visant à cadrer le projet : recueil des besoins métiers, étude sur les usages, étude des performances du dispositif (audit ergonomique, analyse statistique des données de tracking…), définition des persona type et des parcours utilisateurs, etc.
Nous vous invitons à refuser de travailler (:-) la conception détaillée de projet bancal : à la fin, vous serez responsable de l'échec (c'est toujours la faute de l'ergonomie de l'interface...), alors que le projet a été mal cadré.

De fait, en amont du wireframing, il faut prévoir une intervention dans le cycle projet qui permet, usuellement, de créer, rassembler et formaliser les informations nécessaires à la prise de décision. Seul ce travail permet de transposer le matériel en aval sous forme d’interface.

Vous devez donc misez, en wireframing, sur la connaissance des attentes des utilisateurs finaux et de leurs usages. Mais aussi, sur la connaissance des besoins de l’annonceur. Ainsi vous pourrez transposer les discours et les services transactionnels sous forme d’interface. Il ne s’agit donc pas d’un travail arbitraire mais d’une démarche rationnelle.

Wireframing détaillé

En wireframing détaillé, pour chaque gabarit, vous modélisez de façon détaillée, l’organisation des éléments à l’écran, la ventilation des contenus, le positionnement et le fonctionnement des fonctionnalités, l’intégration des modules, les modalités transactionnelles ainsi que tous les composants fonctionnels, ergonomiques, éditoriaux et commerciaux rattachés à l’interface.

Comme vous le savez, ux design oblige, en phase de wireframing, votre approche consiste à créer, autant que faire se peut, des supports simples d’utilisation, élégants et performants. Essayez toujours de concilier les exigences du business avec les attentes des utilisateurs finaux : ce travail de grand écart vous obligera à faire preuve de facultés schizophréniques. C'est une pathologie qui traduit toute la richesse du métier d'UI design. C'est de la créativité rationnelle quoi. Ou de la rationalité créative.

Les wireframes sont le livrable clé du projet

Si vous diffusez vos wireframes sans avoir pris le soin de les contextualiser autour des enjeux du projet digital, vous foncez droit dans le mur.

En effet, veillez à documenter et à introduire vos travaux de conception comme des supports de communication. Cette responsabilité vous revient, car un wireframe ne doit jamais être appréhendé en dehors de son contexte. Des écrans répondent toujours à des objectifs. C'est votre rôle de présenter intelligemment votre travail :

  • Rappelez les objectifs du projet.
  • Listez les cibles auxquelles s'adresse le dispositif (persona).
  • Esquisser les principaux scénarios auxquels répond le support interactif.
  • Projeter les grands parcours utilisateurs du dispositif.
  • Insistez sur le caractère fonctionnel du document qui ne doit pas être interprété comme une maquette graphique.
  • Expliquez le découpage fonctionnel du projet.
  • Introduisez la conception par un synopsis résumant les enjeux de l'interface.
  • Donnez une personnalité à votre site (persona de site web).
  • Argumentez vos choix dans une page présentant les objectifs auxquels répondent chaque gabarit.
  • Commentez vos travaux.
  • Alors, enfin, vous êtes prêts pour la diffusion :).

Oui je sais, c'est beaucoup de travail... Faîtes-le, vous verrez la différence.

Les wireframes sont incontestablement le livrable clé du projet (sur le plan des méthodes, et à égalité avec les créations graphiques). C'est un document qui a tendance à faire beaucoup de chemin... Les maquettes fonctionnelles passent entre trop de main, si on peut dire les choses autrement. Or, si le rôle des wireframes est de fixer le périmètre du projet, il n'est pas d'alimenter les discussions de café du commerce. Pas plus que les débats pompeux sur le marketing.

Les wireframes sont souvent l’objet de débats houleux dépassant leur propre fonction puisqu’ils fixent visuellement les éléments de stratégie et peuvent faire émerger, parfois, des problèmes complexes non identifiés. Inutile de vous dire que vous avez le feu au derrière en phase de wireframing :).

Quoiqu'il en soit, il est impératif de concevoir votre support interactif au travers du wireframing détaillé afin de documenter le projet de façon précise. Cela garantit la fluidité de toutes les étapes de la chaine interactive et de la production. La technique du wireframing permet également de limiter les pertes d’information... enfin, surtout si on se donne la peine de maintenir les wireframes à jour : entre le premier jet et la version finale validée par le service marketing, il peut y a voir une différence énorme...

Les wireframes, c'est donc l'histoire d'un petit investissement en conception, pour d'énormes gains de productivité en production... et une expérience d'utilisation qui part sur les bons rails.

Démarche du wireframing

En résumé, les apports des wireframes et du wireframing

  • Mettent en musique le blabla des réunions,
  • Clarifient les débats sur des éléments tangibles et concrets,
  • Favorisent les échanges au cours des ateliers de travail,
  • Encouragent les itérations en phase de création.

Voici le déroulé classique d'une phase de conception détaillée débouchant sur des travaux de wireframing :

  • brief et définition de la feuille de route : problématique, objectif,
  • définition du périmètre fonctionnel à traiter,
  • découpage du périmètre fonctionnel en chantier,
  • projection des composantes fonctionnelles et inventaire des gabarits,
  • arborescence éditoriale et fonctionnelle,
  • formalisation des écrans pour chaque chantier, itérations, ajustements,
  • conception détaillée des fonctionnalités et des modules,
  • ventilation des contenus et des composantes fonctionnelles,
  • consolidation des retours et diffusion du document validé,
  • etc.

In fine, il est difficile de qualifier et quantifier la nature exacte des tâches impliquées par le travail de wireframing, tant la nature des projets est diversifiée. En tant que concepteur et qu'UX designer, vous devez vous adapter à votre projet, quelle que soit la nature et le contexte :

  • secteur d’activité (distribution, télécom, banque, assurance, énergie, mode, etc.),
  • type de dispositif (corporate, ecommerce, image de marque, événementiel, etc.),
  • spécificité du terminal (application dvd, borne interactive, site internet, intranet, mobile, etc.)
  • à destination de tout type de cible (B2B, B2C, B2E, collectivités, etc.).

Le maître mot : l'adaptabilité.

Travaux complémentaires au wireframing ux

Pour amorcer le travail, on s'appuie sur l'inventaire fonctionnel qui fait le point sur l'envergure fonctionnelle du projet. La cartographie des composantes de fonctionnement du projet autour de l'arborescence fonctionnelle est utile pour représenter la mécanique du support interactif.

Avant de matérialiser les wireframes, on peut prioriser les messages et travailler sur la définition de l'interface utilisateur.

Impossible de travailler en wireframing sans avoir défini le fonctionnement du design de navigation.

La définition de l'interface utilisateur débouche sur la conception du zoning macro de l'interface.

Le travail de conception fonctionnelle détaillé doit être complété par un prototype fonctionnel pour visualiser le design d'interaction et avoir une base pour effectuer des tests utilisateurs. Il faudra également prendre le soin de rédiger les spécifications fonctionnelles, lesquelles vont expliciter toutes les implications des composantes fonctionnelles scénarisées.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources le wireframing

APPROFONDIR
le wireframing

Livre : Les éléments de l'expérience utilisateur
Les éléments de l'expérience utilisateur

Aller plus loin autour du wireframing

Articles du journal à méditer :

Études de cas à lire :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Compétences métier pour le wireframing :

Fiche métier :

Livres à bouquiner :

Autres ressources sur le web :

  • Un logiciel pour concevoir rapidement : balsamiq
  • Un autre logiciel pour concevoir rapidement : mockingbird
  • Un logiciel complémentaire dédié au prototypage: axure
  • Un webservice pour transformer une page web en "wireframe" : wirify
Plus de techniques de conception
CONCEPTION D'INTERFACE
Clarification de la structure du site, des modèles de gabarits et des fonctions attribuées aux zones.
zoning
CONCEPTION D'INTERFACE
Storyboard des écrans : approche scénarisée de l'enchainement des écrans illustrant un parcours.
prototypage
CONCEPTION D'INTERFACE
Clarification des interactions et de leurs implications front-back de tous les écrans du dispositif.
specification fonctionnelle
Wireframing
  • avec iafactory
  • prestation sur-mesure
  • livraison sous 15J