Comment créer des wireframes haute fidélité : guide complet
La création de « maquettes fonctionnelles » afin de recueillir des retours avant d’investir dans une construction complète est une pratique bien plus ancienne qu’on ne le pense. Même au Moyen Âge, les ingénieurs (si on les appelait ainsi à l’époque) réalisaient des prototypes d’outils et d’objets et les présentaient à leurs seigneurs avant de lancer la production à grande échelle.
Le monde moderne du logiciel a naturellement adopté ce procédé également. Cependant, contrairement à la fabrication d’un prototype physique d’un produit, les outils modernes de maquettage et de prototypage permettent de tester le prototype à une étape encore plus précoce – alors même qu’il est en cours de conception.
Le sujet du jour porte sur la partie la plus importante de la création de prototypes logiciels : la maquette fonctionnelle haute fidélité, qui permet l’interactivité et donne vie à un concept.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
Comprendre les maquettes fonctionnelles haute fidélité
Avant d’expliquer ce que sont les maquettes haute fidélité, laissez-moi d’abord aborder le concept même de fidélité d’une maquette.
La fidélité fait référence au niveau de détail que vous incluez lorsque vous réalisez la maquette de votre produit. Il peut s’agir de détails visuels comme les couleurs des éléments d’interface utilisateur qui représentent votre image de marque ou les images devant figurer sur cet écran (par exemple les photos produits dans les résultats de recherche d’un site e-commerce).
Au-delà des aspects visuels, il existe aussi la fidélité du contenu. Cela signifie que vous utilisez soit du texte/contenu fictif (ex : lorem ipsum) soit du contenu réel (noms et descriptions de produits).
Selon le niveau de fidélité de votre maquette, vous utiliserez soit des éléments visuels en niveaux de gris avec un aspect générique et du contenu de remplacement (basse fidélité), soit un jeu de couleurs personnalisé issu de votre système de design accompagné de contenu réel (haute fidélité).
Voici à quoi cela ressemble côte à côte.
Même si l’on pourrait penser que les maquettes haute fidélité sont le choix évident en comparaison, ce n’est pas toujours le cas. L’avantage des maquettes basse fidélité réside dans la rapidité avec laquelle vous pouvez les concevoir, les tester auprès d’utilisateurs et itérer dessus.
Ainsi, lors des toutes premières phases de conception, il est courant de passer par plusieurs itérations en basse fidélité avant de réaliser une maquette haute fidélité.
Avantages des maquettes fonctionnelles haute fidélité
Les maquettes haute fidélité, bien que nécessitant plus de temps à réaliser, sont un élément très précieux de votre projet de design car elles offrent de nombreux avantages. En voici quelques-uns :
- Meilleure communication : Nous sommes des êtres visuels et comprenons mieux le design si vous utilisez les bonnes couleurs, éléments et contenus. Il est donc très probable qu’une personne valide votre maquette basse fidélité mais repère des soucis et vous fasse des retours dès qu’elle voit la version haute fidélité pour la première fois.
- Meilleurs tests d’utilisabilité : La qualité des retours utilisateurs augmente dès lors que vous montrez le contenu réel tel qu’il apparaîtra dans la version finale. Une page de résultats de recherche ressemblera à une succession de boîtes grises sur une maquette basse fidélité. Il est impossible de savoir si les éléments de cette page sont faciles à parcourir sans voir de vraies images et du vrai texte dessus.
- Prototypage : Les prototypes cliquables sont peu convaincants s’ils s’appuient sur des maquettes basse fidélité. Les prototypes haute fidélité, en revanche, se rapprochent du design final et sont suffisamment aboutis pour être partagés avec vos utilisateurs précoces.
- Communication entre équipes design et technique : Vous pouvez partager vos maquettes haute fidélité avec votre équipe de développement pour obtenir rapidement des retours concernant les défis d’implémentation et les points de vigilance. Elles apportent le niveau de détail nécessaire pour que les développeurs comprennent comment ils devront construire l’interface et quels problèmes ils pourront potentiellement rencontrer.
Enfin, les maquettes haute fidélité permettent à vous et à vos collègues designers de visualiser l’apparence finale de votre produit, de repérer des incohérences ou autres soucis graphiques à corriger avant de montrer à nouveau votre interface à des utilisateurs.
Outils et logiciels pour les maquettes haute fidélité
Alors qu’il est possible de dessiner des maquettes basse fidélité sur papier ou tableau blanc, il est indispensable de choisir un outil spécialisé de conception produit pour passer à la création d’une maquette haute fidélité.
Voyons ainsi quelques solutions populaires parmi lesquelles vous pourrez choisir, et découvrons leurs possibilités.
Figma
Figma est le leader du marché de la conception de produits numériques, avec plus de 40 % des designers d’expérience utilisateur le choisissant pour le prototypage, la définition de parcours utilisateur et la création de maquettes.
Plateforme : Web, bureau (MacOS, Windows)
Là où il excelle : collaboration en temps réel entre designers, responsables et développeurs, ainsi qu’un support multi-plateformes.
En termes de fonctionnalités, voici ce que je souhaite mettre en avant pour Figma :
Collaboration : Figma permet à plusieurs membres de l’équipe de travailler sur le même fichier en même temps. Vous pouvez voir les curseurs de chacun qui navigue ou modifie le fichier de conception, laisser des commentaires, et discuter en temps réel via une petite boîte de message qui s’ouvre à côté de votre curseur.
Prise en charge des systèmes et composants de design : Vous pouvez créer des composants réutilisables dans Figma (y compris avec plusieurs états) ainsi que définir un système de design complet selon vos propres directives et composants.
Prototypage : Vous pouvez transformer vos conceptions en prototypes cliquables que les utilisateurs peuvent parcourir pour comprendre le ressenti de votre produit. Ce n’est pas le système de prototypage le plus avancé du marché, mais il reste très performant.
Sketch
Sketch était autrefois l’outil de design de référence avant l’arrivée de Figma et reste une alternative populaire à Framer et à d’autres outils prisés de la conception. Certains avancent que sa limitation aux utilisateurs Mac fait partie des raisons pour lesquelles cet excellent outil a perdu sa place de leader.
Plateformes : macOS
Là où il excelle : Sketch est hautement personnalisable grâce à une prise en charge étendue des plugins, ce qui en fait un excellent choix pour les besoins de conception de niche.
Voyons maintenant les fonctionnalités phares de Sketch.
Édition vectorielle : Par rapport à la concurrence, Sketch propose sans doute l’outil d’édition vectorielle le plus robuste du marché, intégrant la gestion des opérateurs booléens et de correspondance pour définir vos formes.
Aperçu web : Bien qu’il ne s’agisse pas d’un éditeur complet, Sketch dispose bien d’une application web permettant de consulter les designs, de transmettre les éléments aux développeurs et de tester les prototypes.
Prototypage : Les capacités de prototypage de Sketch sont au même niveau que celles de Figma. Vous pouvez, ici aussi, connecter vos plans de travail via un flux, rendre des éléments interactifs, et bien plus encore.
Adobe XD
Il s’agit de la réponse du géant de la création Adobe à la concurrence féroce sur le marché du wireframe et du design UI/UX.
Plateformes : macOS, Windows
Là où il excelle : Adobe XD est pleinement intégré à leur Creative Cloud, ce qui permet d’importer facilement des créations et éléments issus d’autres outils Adobe et plus encore.
Après avoir exploré les capacités de cet outil, voici ce qui mérite également d’être souligné :
Prototypage : AdobeXD se distingue par sa capacité à prototyper des micro-interactions, en plus de la suite de prototypage standard.
Animations : Étant édité par la société à l’origine d’After Effects, il n’est pas surprenant qu’AdobeXD propose des fonctionnalités d’animation d’éléments d’interface avancées.
Collaboration : Bien que moins avancé que Figma, AdobeXD permet à plusieurs personnes de modifier le design en même temps.
Axure RP
Alors que les autres étaient des outils généraux de conception UI/UX qui savent aussi faire des wireframes et des prototypes, celui-ci se concentre spécifiquement sur cet aspect.
Plateformes : macOS, Windows
Là où il excelle : En tant qu’outil spécialisé, Axure RP permet d’aller plus loin dans le prototypage grâce à la gestion d’interactions complexes et de parcours utilisateur élaborés.
Voyons maintenant quelles sont les fonctionnalités que cet outil propose :
Logique avancée : Au lieu d’un simple « clic pour ouvrir le plan suivant », Axure RP permet d’intégrer une logique complexe dans les prototypes. Cela signifie que vous pouvez ouvrir des menus, sélectionner des éléments, et la conception ainsi que le contenu se transformeront dynamiquement selon votre sélection ou d’autres actions similaires.
Documentation de transfert : Bien que presque tous les produits mentionnés ici proposent une remise aux développeurs, Axure RP est le seul qui permet de créer une documentation extrêmement détaillée décrivant votre conception et votre logique.
Diagrammes de flux : En plus de concevoir des maquettes détaillées, vous pouvez aussi utiliser Axure RP pour réaliser des diagrammes de flux décrivant le parcours utilisateur et la logique métier derrière votre conception.
En résumé, il n’y a pas de « meilleur outil de maquettage haute-fidélité ». Les outils présentés ici, ainsi que ceux de notre sélection d’outils de conception UX, présentent tous des forces et des faiblesses. Le choix dépendra donc de vos préférences et des aspects les plus importants pour vous et votre équipe.
Bonnes pratiques pour créer des wireframes haute-fidélité
Lorsque vous arrivez enfin à l’étape du processus de conception où il est temps de développer ce type de wireframe, suivez ces conseils pour tirer le meilleur parti de votre maquette hi-fi.
Bonnes pratiques du processus de wireframing
- Assurez-vous que votre persona utilisateur est à jour. Vous disposiez déjà d’une version de persona pour concevoir votre premier prototype basse fidélité. Pourtant, ce persona est probablement obsolète car vous avez déjà effectué quelques tests avec et découvert de nombreux nouveaux aspects de sa personnalité et de ses besoins.
- Passez en revue tous les retours utilisateurs précédents avant de commencer le wireframe haute-fidélité. Il y a probablement des commentaires que vous aviez jugés non-pertinents lors de la revue du prototype lo-fi, mais qui deviendront très importants maintenant.
- Il n’existe pas de "version finale" d’un wireframe. N’accordez pas trop d’importance aux détails. Plutôt que de peaufiner votre wireframe détaillé durant des semaines, apportez quelques modifications et testez-les rapidement. Plus le cycle de contribution d’idées de l’équipe et de tests par les utilisateurs est court, plus vite votre wireframe sera prêt à devenir un design finalisé.
- Profitez des composants et modèles de votre design system. Il n’y a pas de trophée pour avoir tout fait à partir de zéro ! Utiliser ces modèles permet de gagner beaucoup de temps et le résultat se rapprochera un maximum du design final.
Conseils de conception de wireframe
En plus des conseils précédents pour mener à bien le processus de conception, voici quelques astuces liées à la conception elle-même.
- Gardez un design cohérent. Même si ce n’est encore qu’un wireframe et non le design final, je vous conseille de toujours conserver une cohérence, y compris au niveau des couleurs, de la typographie et des espaces. Ainsi, vous éviterez que les personnes qui testent votre design rencontrent des problèmes inutiles d’utilisabilité et vous fourniront des retours biaisés.
- Maintenez la hiérarchie visuelle. En principe, elle devait déjà exister dans la version lo-fi. Mais si ce n’est pas le cas, ajoutez-la maintenant. Ensuite, vos wireframes haute-fidélité vous permettront de tester l’efficacité de votre hiérarchie visuelle.
- Ajoutez des éléments d’accessibilité à votre design. Les wireframes hi-fi sont aussi d’excellents outils pour tester l’accessibilité de votre proposition. Assurez-vous donc de définir des contrastes adaptés entre les différents éléments superposés et gardez en tête les autres aspects relatifs à l’accessibilité.
Enfin, n’oubliez pas de fournir des repères visuels aux utilisateurs qui testent le design. Ce conseil est particulièrement valable si vous testez uniquement une partie du produit et que certaines étapes ou écrans sont absents. Pour éviter toute confusion, affichez systématiquement des notes indiquant où l’utilisateur se trouve dans le parcours et ce qu’il doit faire à ce moment-là.
Techniques avancées pour le wireframing haute-fidélité
Les bonnes pratiques décrites ci-dessus vous permettront d’obtenir une version « suffisamment bonne » de votre wireframe hi-fi. Mais si vous souhaitez créer quelque chose d’exceptionnel, voici quelques techniques avancées à considérer.
Wireframes interactifs
Certains outils de wireframing populaires sont dotés de fonctionnalités de prototypage intégrées. Alors, pourquoi ne pas en profiter pour donner vie à votre wireframe ? Vous pouvez rendre vos éléments d’interface cliquables et permettre aux utilisateurs de naviguer d’un écran à l’autre—reproduisant ainsi le parcours qu’ils auront dans la véritable application. Je vous suggère d’ajouter des transitions animées, qui rendront le changement de page ou d’écran plus explicite pour vos utilisateurs.
Vous pouvez aussi ajouter des animations et transitions à différents éléments de votre application mobile ou de votre design web et voir si cela permet à vos utilisateurs de remarquer un élément particulier à l’écran ou d’interagir avec comme vous l’aviez prévu.
Éléments de conception visuelle
Pour que votre wireframe haute-fidélité représente au mieux votre produit et votre marque, vous pouvez également envisager d’incorporer les éléments suivants :
- Typographie : Les polices, espacements et couleurs de texte définis dans votre charte graphique.
- Branding : Votre logo, les couleurs de la marque et les éléments visuels représentant votre identité.
- Contenu réel : Au lieu d’utiliser du lorem ipsum à l’endroit où devrait figurer une description de produit dans le design de votre application e-commerce, rédigez une véritable description de produit.
- Ressources visuelles réelles : Si vous aviez prévu d’intégrer des illustrations ou des images sur vos écrans, ajoutez-les également.
- Dégradés et ombres : Ils rendront votre wireframe plus réaliste et vous permettront d’ajouter un niveau de hiérarchie visuelle ou d’interactions.
Remarque : Pour la mise en avant des interactions à l’aide des ombres, le Material Design de Google est une référence. Il utilise les ombres pour montrer l’élévation et indiquer à l’utilisateur si un élément est survolé, cliqué ou inactif.
Conseils pour la collaboration en équipe
Le prototypage et le wireframing ne sont jamais des missions solitaires. Vous travaillez soit avec votre équipe de design, en séance de brainstorming avec votre chef de produit, soit en discussion avec vos parties prenantes.
Je vous suggère donc de suivre ces conseils pour faciliter la collaboration et le développement autour de vos designs :
- Organisez régulièrement des séances de brainstorming. Invitez votre chef de produit et vos collègues designers. Pourquoi pas un ingénieur également, pour vous aider à choisir la solution la plus solide techniquement. Le mot clé est régulier : cela peut être chaque semaine, toutes les deux semaines ou moins souvent, mais il est important de maintenir ces réunions car elles vous permettent de trouver des solutions intéressantes à vos problèmes de design.
- Effectuez régulièrement des revues de design. Si vous travaillez en équipe, soumettez votre design à une revue croisée et laissez plusieurs regards neufs l’examiner afin de détecter des problèmes qui auraient pu vous échapper. Ce processus améliore considérablement la qualité de votre design et vous aide à le rendre cohérent.
- Documentez vos réflexions et commentaires. Ajoutez des annotations et commentaires sur le design pour expliquer certaines décisions ou donner du contexte à vos collègues.
Enfin, assurez-vous que tout ce que vous réalisez soit aligné avec la stratégie de l’entreprise et la vision produit. Consultez donc votre équipe produit et la direction à ce sujet.
Testez votre design comme s’il s’agissait du produit final.
Le principal avantage des wireframes haute-fidélité réside sans doute dans leur capacité à présenter le produit de la manière la plus proche possible de la version finale. Ainsi, vos utilisateurs peuvent tester la représentation visuelle de votre produit sans que vous ayez à le développer réellement.
Je vous encourage donc vivement à adopter le processus de wireframing et à l’utiliser pour tester vos designs et hypothèses tout au long de votre workflow de conception. J’espère vous avoir apporté suffisamment de contexte et de conseils utiles pour en tirer le meilleur parti.
Si vous souhaitez aller plus loin sur ce sujet, je vous recommande la guide complet du wireframing. Par ailleurs, vous pouvez aussi vous abonner à notre newsletter pour encore plus de ressources et guides sur le product management.
