Je suis certain que vous avez entendu parler des avantages du maquettage filaire, que ce soit dans le cadre de vos formations en gestion de produit ou par l’intermédiaire de collègues ou de pairs. Je suppose également que vous avez essayé d’introduire une forme de processus de maquettage filaire dans votre produit.
Mais votre processus fonctionne-t-il correctement ? Êtes-vous capable de tirer le meilleur parti de vos maquettes filaires avec la manière dont vous procédez actuellement ? Eh bien, cela dépend réellement du processus que vous utilisez.
Pour vous aider à accroître l’efficacité de votre maquettage filaire, laissez-moi vous faire part de mon expérience et vous présenter un processus de maquettage filaire que j’ai trouvé être le meilleur qui soit.
Le maquettage filaire est une partie essentielle du processus de conception UX
Les maquettes filaires sont des représentations visuelles de haut niveau de votre produit, que vous pouvez utiliser pour illustrer l’apparence et le fonctionnement que vous souhaitez lui donner. Grâce à ces visuels, vous pouvez tester et itérer sur votre idée avant de demander à vos ingénieurs d’intervenir et de commencer le processus de développement, ce qui vous fait économiser du temps et de l’argent.
J’apprécie beaucoup la définition du maquettage filaire proposée par les experts de l’expérience utilisateur de NN/g, car elle met en évidence le principal avantage que vous en retirez.
Technique rapide et économique pour identifier rapidement les principaux problèmes d’utilisabilité grâce à des esquisses et du papier. Parfaitement adaptée aux processus agiles et Lean.
Quelle que soit la méthode de maquettage filaire que vous choisissez (dessiner sur papier convient parfaitement !) ou l’outil de maquettage filaire que vous décidez d’utiliser (pour cela, consultez notre liste des meilleurs outils de maquettage filaire), je vous recommande de suivre ce processus, que j’ai établi après avoir essayé pratiquement tous les processus de maquettage filaire qui existent.
Étape n° 1 : assurez-vous de suffisamment bien connaître vos utilisateurs
Une excellente conception commence par une équipe qui connaît bien ses utilisateurs. Après tout, à quoi servent votre conception et le produit qu’elle représente s’ils ne sont pas en mesure de répondre correctement aux besoins des personnes auxquelles ils sont destinés ? Par conséquent, l’étape la plus importante à réaliser avant de commencer votre maquettage filaire est la recherche utilisateur.
En réalité, la recherche utilisateur devrait se poursuivre tout au long du cycle de vie de votre processus de maquettage filaire (et même après), mais concentrons-nous sur la phase initiale, lorsque vous essayez de comprendre les besoins et la réalité quotidienne de vos futurs clients.
Voici quelques-unes des activités importantes que je vous recommande de réaliser au cours de cette phase :
Entretiens exploratoires : Vous voulez savoir ce que souhaitent vos utilisateurs ? Alors, pourquoi ne pas leur poser directement la question ? Vous pouvez commencer par dresser une liste de questions qui aideront vos utilisateurs à parler des problèmes qu’ils rencontrent et des solutions qu’ils utilisent pour les résoudre.
Vous pouvez ensuite contacter et recruter des utilisateurs potentiels par l’intermédiaire des réseaux sociaux, de plateformes spécialisées comme Userinterviews ou Respondent, ou même les rencontrer lors de salons professionnels.
Enfin, vous réalisez l’entretien avec un enregistreur (afin de pouvoir l’analyser ultérieurement) ou avec un collègue chargé de l’entretien assis à vos côtés et prenant des notes.
Remarque : idéalement, vous ferez les deux.
Enquêtes : Alors que les entretiens constituent une excellente source de données qualitatives qui permettent de découvrir les raisons sous-jacentes aux besoins et aux comportements des utilisateurs, les enquêtes vous fournissent un mélange de données qualitatives et quantitatives, vous permettant de valider vos résultats avec une signification statistique.
Je n’entrerai pas trop dans les détails ici, car nous avons un guide complet consacré aux questions d’enquête que vous pouvez consulter.
Études de terrain : Dans ce cas, vous observez vos utilisateurs dans leur « habitat naturel ». Cela signifie que vous êtes présent, virtuellement ou physiquement, dans l’environnement où vos utilisateurs cibles rencontrent les problèmes que vous souhaitez résoudre.
Par exemple, supposons que vous construisiez un outil qui facilite le montage de vidéos pour les réseaux sociaux. Votre étude de terrain consisterait à observer le processus suivi par un influenceur des réseaux sociaux pour tourner une vidéo TikTok, la monter et la mettre en ligne sur sa chaîne.
Bien que les études de terrain soient relativement difficiles à organiser (tous les utilisateurs ne seront pas à l’aise à l’idée que vous observiez leurs activités quotidiennes), elles vous offrent le contexte et les enseignements les plus riches concernant vos utilisateurs.
Ateliers de découverte avec les parties prenantes : Oui, une excellente conception de l’expérience utilisateur repose sur les besoins des utilisateurs, mais n’oublions pas non plus vos principales parties prenantes. Bien que vos utilisateurs soient eux aussi des parties prenantes, j’utiliserai ce terme pour désigner vos fondateurs et votre comité de direction, vos investisseurs, tout organisme juridique ou réglementaire avec lequel vous devez travailler, etc.
Parfois, vous prenez des décisions de conception qui ne reposent pas sur les besoins de vos utilisateurs, mais qui tiennent compte des éléments suivants :
- Votre vision et votre stratégie : Les utilisateurs d’Apple adorent les câbles et les connexions filaires, mais la vision d’Apple est sans fil — c’est pourquoi l’entreprise continue de supprimer des ports. (Vous le savez maintenant !)
- Votre environnement juridique : Proposer un vaste choix d’options relatives aux cookies n’est pas l’interface la plus conviviale, mais c’est une obligation légale qui peut vous incomber.
L’intuition peut également avoir sa place — même si vous connaissez bien vos utilisateurs, vous pouvez vous fier à votre propre intuition pour prendre une décision de conception.
Maintenant que le concept et les types de recherche sont clairs, illustrons à quoi cela ressemble dans la vie réelle à l’aide d’un exemple.
Have an account? Log In
Exemple 1 : créer un outil de création de maquettes filaires pour un professionnel de l’UI
Imaginez que vous soyez chargé de créer un outil de création de maquettes filaires (quelque chose de similaire à Balsamiq) et que vous souhaitiez savoir exactement comment vos utilisateurs cibles (dans ce cas, des équipes de conception) vont l’utiliser et quels problèmes ils espèrent résoudre.
Pour le découvrir, nous pouvons concevoir un questionnaire que nous poserons à nos utilisateurs lors d’un entretien. Voici ce que nous pouvons inclure :
Imaginons maintenant que nous découvrions que les retours prennent principalement la forme d’un commentaire sur une partie précise de la maquette filaire du produit, et que le chef de produit doive valider la conception de la maquette filaire. Il s’agit de deux constats qui auront une incidence directe sur notre conception, car nous devons concevoir un flux de travail et une interface utilisateur permettant de commenter la maquette filaire et de l’approuver.
En résumé, mener une recherche exploratoire constitue la partie la plus importante de votre processus de création de maquettes filaires et je vous déconseille de la négliger. Maintenant que vous disposez de tous ces enseignements, passons à l’étape suivante de notre processus de création de maquettes filaires.
Étape n° 2 : créer vos parcours utilisateurs
Avant de créer les écrans/pages eux-mêmes et d’y placer vos composants tels que les formulaires, les cartes, les images, les boutons, etc., vous devez comprendre la séquence d’étapes que vos utilisateurs sont censés suivre.
Ces séquences sont également appelées parcours utilisateurs et représentent tous les chemins possibles que vos utilisateurs peuvent emprunter pour atteindre leurs objectifs. Ces objectifs peuvent être quelque chose d’ordinaire et d’« administratif », comme s’inscrire ou modifier son mot de passe, ou représenter vos fonctionnalités principales (comme rechercher de la musique et l’écouter en continu sur Spotify).
Dans tous les cas, créer des parcours utilisateurs est important, car cela vous aidera à mieux visualiser tous les écrans/pages que vous souhaitez concevoir, ainsi que le contenu nécessaire pour chacun d’eux.
Pour mieux comprendre ces parcours, laissez-moi vous en montrer un à l’aide de l’outil de création de diagrammes de flux Flowmapp.
Exemple 2 : visualiser le parcours utilisateur d’un outil de conception web à l’aide de Flowmapp
Supposons que vous construisiez un outil de conception web avec glisser-déposer comme Webflow. Vos utilisateurs sont des concepteurs web sans code et vous souhaitez visualiser les étapes qu’ils suivront pour ajouter une image d’arrière-plan à leur page web.
Voici à quoi ressemblera le parcours utilisateur de cette fonctionnalité dans Flowmapp :
Comme nous pouvons le constater, l’accent est davantage mis, dans un parcours utilisateur, sur les actions effectuées par l’utilisateur et sur la séquence/la causalité qui les relie que sur les pages et leur conception.
Dans cet exemple, nous voulons que l’utilisateur puisse sélectionner une image dans la galerie ou en importer/ajouter une à la galerie. Nous voulons également que l’utilisateur puisse prévisualiser l’image avant que notre outil ne l’applique comme arrière-plan de la page web de notre utilisateur.
En examinant le parcours présenté ici, nous comprenons que l’utilisateur restera sur la même page — l’éditeur de pages web — et verra peut-être un autre écran affichant la galerie d’images sous la forme d’une fenêtre contextuelle.
Il y a donc une page et une fenêtre contextuelle à concevoir, avec les éléments et fonctionnalités de conception pertinents.
Maintenant que nous avons une vue d’ensemble des étapes suivies par les utilisateurs pour atteindre leurs objectifs dans notre produit, nous pouvons enfin commencer la création des maquettes filaires proprement dite.
Étape n° 3 : commencer par une maquette filaire basse fidélité
Oui, créer une maquette filaire constitue la troisième étape de ce processus. Cependant, croyez-moi, réaliser les deux étapes précédentes fera passer la qualité de votre maquette filaire à un tout autre niveau, et il vaut vraiment la peine d’y consacrer du temps.
En ce qui concerne la maquette fonctionnelle elle-même, je vous recommande de commencer par une maquette basse fidélité. Une maquette basse fidélité n’inclura aucun détail spécifique comme les couleurs et les tailles appropriées, ni les autres attributs de conception de vos pages et écrans. Elle ne comportera pas non plus de véritables images ni de textes réels. À la place, vous disposerez d’espaces réservés pour les deux.
Et il y a une bonne raison pour laquelle une maquette basse fidélité est conçue de cette manière et pour laquelle vous devriez commencer par elle : les maquettes basse fidélité sont rapides à créer et à modifier.
Il est fort probable que vous ayez oublié quelque chose d’assez important dans votre conception. Lorsque vous recueillerez des retours à son sujet (nous en parlerons en détail à l’étape suivante), vous pourriez comprendre qu’un grand nombre d’éléments et de flux doivent être modifiés.
Si vous aviez eu une conception complète, effectuer ces modifications vous aurait pris plusieurs jours. Mais avec une maquette basse fidélité, vous pouvez apporter vos modifications et soumettre à nouveau votre conception à une série de retours en quelques heures seulement, voire moins.
Alors, après avoir autant vanté les mérites des maquettes basse fidélité, voyons à quoi elles ressemblent en utilisant un outil de création de maquettes populaire : Balsamiq.
Exemple 3 : créer une maquette fonctionnelle de site web
L’avantage des outils de conception spécialisés dans la création de maquettes fonctionnelles, en particulier basse fidélité, est que vous n’avez pas à dessiner chaque élément à partir de zéro.
Ils sont généralement livrés avec une variété d’éléments d’interface de base préconçus (par exemple, des images, des menus, des fils d’Ariane, des boutons, etc.), ainsi qu’avec des commandes de glisser-déposer qui vous permettent de concevoir très rapidement. Voici un exemple que j’ai créé avec Balsamiq.
Compte tenu de la nature même des maquettes basse fidélité, elles sont généralement en niveaux de gris ou comportent très peu de couleurs et d’éléments de conception visuelle. À la place, vous pouvez uniquement voir l’apparence générale des éléments d’interface utilisateur de votre conception, ainsi que leur emplacement et l’architecture de l’information.
Maintenant, si votre maquette basse fidélité est prête, il est temps de la soumettre à votre première série d’évaluations.
Étape n° 4 : itérer en interne sur votre conception basse fidélité
Avant d’investir du temps et des efforts dans la création de la conception finale de votre produit, partons du principe qu’il y a de nombreuses choses que nous avons mal faites ou que nous avons oublié de prendre en compte dans la conception, et commençons à montrer notre maquette basse fidélité à nos collègues et aux parties prenantes.
Bien sûr, vous pourriez également montrer cette conception à vos utilisateurs. Mais, compte tenu de la difficulté à recruter des utilisateurs disposés à évaluer votre conception ou à effectuer des tests d’utilisabilité, je vous recommande de consacrer leur temps précieux à l’évaluation de conceptions de plus haute fidélité, plutôt que de leur faire perdre du temps à signaler des problèmes que vos collègues auraient facilement pu détecter.
Je vous recommande toutefois d’impliquer vos parties prenantes à cette étape. Voici deux raisons essentielles :
- Réduire la « distance » entre elles et les membres de l’équipe qui créent le produit en les impliquant dès les premières étapes.
- Corriger dès les premières phases les problèmes de conception liés à l’alignement stratégique afin de vous faire gagner du temps par la suite.
Enfin, dès que vous avez recueilli les retours de vos collègues et de vos parties prenantes, vous pouvez corriger votre maquette basse fidélité en fonction de ces retours, valider les corrections avec eux, puis passer à la création de la conception visuelle réelle de votre produit.
Étape n° 5 : préparer une maquette fonctionnelle haute fidélité et un prototype cliquable
Maintenant que vous comprenez correctement à quoi ressemblera votre conception dans ses grandes lignes, vous pouvez investir sereinement dans la création de ses éléments visuels et la faire évoluer jusqu’à ce qu’elle ressemble au plus près de ce que vous avez l’intention de créer.
À cette étape de la conception, votre maquette fonctionnelle numérique comprendra :
- Votre conception d’interface utilisateur : notamment les couleurs, les ombres, la typographie et les polices, les marges appropriées, etc.
- Votre contenu visuel : si vous prévoyez d’utiliser des images, des illustrations, des vidéos ou d’autres éléments graphiques sur vos pages, c’est à ce moment-là que vous les ajoutez.
- Le contenu de vos pages : il s’agit du texte présent sur les éléments de votre interface utilisateur, vos boutons, vos en-têtes, etc.
- Une maquette de votre contenu : si votre conception comprend du contenu généré par les utilisateurs ou votre propre contenu, vous devez également en ajouter une version simulée. (Par exemple, la conception d’un commentaire sous une publication, avec la taille et le contenu habituels d’un commentaire que vos utilisateurs réels pourraient rédiger.)
En plus de constituer le principal livrable destiné à votre équipe d’ingénierie, qui créera votre produit sur la base de sa conception, la maquette fonctionnelle haute fidélité peut également servir d’excellent outil pour effectuer des tests d’utilisabilité auprès de vos véritables utilisateurs.
Vous pouvez utiliser directement la maquette haute fidélité pour le test, ou aller plus loin en y ajoutant une conception des interactions afin de la transformer en prototype cliquable.
Il est vraiment facile de confondre les termes dont j’ai parlé ici (maquettes haute fidélité, prototypes interactifs, etc.). Alors, permettez-moi de les clarifier pour vous et de vous montrer quelques exemples.
More Articles
Différencier les types de maquettes filaires : maquettes graphiques, maquettes filaires haute fidélité et prototypes cliquables
Ces trois concepts sont assez similaires les uns aux autres et, malheureusement, les gens les utilisent de manière interchangeable, ce qui crée de la confusion chez ceux qui débutent dans le produit et le design.
Voici ce que signifie chaque terme :
Maquette filaire haute fidélité : Nous avons déjà abordé ce concept plus haut. Je vais donc plutôt vous montrer à quoi il ressemble.
Ce design convaincant correspond à un service qui vous permet d’engager des chefs privés pour cuisiner des plats haut de gamme pour vous. Comme nous pouvons le voir, ce design comprend tout, des images finales aux couleurs et aux positions. Il contient également un peu de texte « lorem ipsum » pour représenter le témoignage d’un chef professionnel sur la page.
Maquette graphique : Contrairement à son homologue, la maquette graphique n’inclut pas uniquement le design final : elle montre également l’environnement dans lequel ce design apparaît. Les générateurs de maquettes de produits peuvent aider à créer ces visuels contextuels. Par exemple, si vous concevez un papier à en-tête, une maquette graphique montrerait une feuille de papier posée sur une table avec votre design dessus.
Dans le cas d’une application mobile, votre maquette graphique montrera la silhouette d’un iPhone ou d’un appareil Android avec votre design affiché à l’écran.
Prototype : Le prototype ressemble à une maquette filaire haute fidélité, mais, en plus de l’apparence finale, il cherchera également à simuler les fonctionnalités du produit.
Avec des prototypes cliquables ou des outils de prototypage 3D, vous pouvez ajouter des interactions de base comme le défilement, les animations, le clic sur des boutons, la navigation dans l’application, etc.
En simulant l’interactivité de votre produit, les prototypes vous permettent de tester le fonctionnement souhaité de vos fonctionnalités avant de les développer.
De plus, vous pouvez effectuer des tests utilisateurs en donnant vos prototypes haute fidélité à vos utilisateurs et en observant comment ils interagissent avec votre produit, résolvent leurs problèmes ou essaient de s’orienter dans votre design.
La création de maquettes filaires est un processus de tests et d’itérations
La nature itérative des maquettes filaires vous permet d’économiser énormément d’efforts lors de la correction de vos erreurs. De plus, en suivant un processus de création de maquettes filaires comme celui-ci, vous vous assurez que vos utilisateurs bénéficient d’un produit qui répond au mieux à leurs besoins.
Utilisez-vous un processus de création de maquettes filaires différent dans votre entreprise ? Je serais curieux de le savoir : laissez un commentaire ci-dessous et dites-nous comment vous procédez !
J’espère que vous avez apprécié ce guide et que vous l’avez trouvé utile. N’hésitez pas à consulter d’autres guides sur la gestion de produit rédigés par certains des meilleurs professionnels du domaine, tels que :
- La différence entre la vision et la stratégie produit par Kerstin Exner.
- Les 3 P du produit par Benoit des Ligneris.
- Les documents d’exigences produit par Sarah Tolle.
Enfin, vous pouvez vous abonner à notre newsletter et nous vous enverrons également du contenu passionnant dans votre boîte de réception.
