Processus de wireframing en 5 étapes pour créer de meilleurs produits
Je suis certain que vous avez entendu parler des avantages du wireframing lors de vos cours de gestion de produit ou par vos collègues ou pairs. Je suppose également que vous avez déjà tenté d’introduire une forme de processus de wireframing dans votre produit, vous aussi.
Mais, votre processus fonctionne-t-il vraiment ? Parvenez-vous à tirer le meilleur parti de vos wireframes avec votre méthode actuelle ? Eh bien, tout dépend réellement du processus que vous utilisez.
Pour vous aider à augmenter l’efficacité de votre wireframing, permettez-moi de partager mon expérience et de vous exposer une démarche de wireframing que je considère comme la meilleure à ce jour.
Vous voulez plus de The CPO Club ?
Inscrivez-vous gratuitement pour terminer la lecture de cet article :
Have an account? Log In
Le wireframing est une étape essentielle du processus de conception UX
Les wireframes sont des représentations visuelles à haut niveau de votre produit, que vous pouvez utiliser pour illustrer à quoi vous souhaitez qu’il ressemble et comment il doit fonctionner. Avec ces visuels, vous pouvez tester et itérer votre idée avant de demander à vos ingénieurs d’intervenir et de lancer le processus de développement, ce qui vous fait gagner du temps et de l’argent.
J’aime beaucoup la définition du wireframing proposée par les experts en expérience utilisateur de NN/g, car elle met en avant le principal avantage que cela vous apporte.
Technique rapide et économique pour identifier précocement les principaux problèmes d’utilisabilité à l’aide de croquis et de papier. Parfaitement adaptée aux processus Agile et Lean.
Peu importe la méthode de wireframing que vous choisissez (dessiner sur papier convient tout à fait !) ou l’outil de wireframing que vous décidez d’utiliser (pour cela, consultez notre liste des meilleurs outils de wireframing), je vous recommande de suivre ce processus que j’ai découvert après avoir testé pratiquement toutes les méthodes de wireframing existantes.
Étape n°1 : Assurez-vous de bien connaître vos utilisateurs
Une excellente conception commence avec une équipe qui connaît bien ses utilisateurs. Après tout, à quoi bon votre conception et le produit qu’elle illustre s’ils ne répondent pas correctement aux besoins des personnes pour lesquelles ils sont conçus ? C’est pourquoi l’étape la plus importante à effectuer avant de débuter votre wireframing est la recherche utilisateur.
En réalité, la recherche utilisateur devrait se poursuivre tout au long du cycle de vie de votre processus de wireframing (et même après), mais concentrons-nous ici sur la phase initiale où il s’agit de comprendre les besoins et la réalité quotidienne de vos utilisateurs futurs.
Voici quelques activités importantes que je vous recommande durant cette phase :
Entretiens exploratoires : Vous souhaitez savoir ce que veulent vos utilisateurs ? Et pourquoi ne pas leur demander directement ? Vous pouvez commencer par établir une liste de questions qui aideront vos utilisateurs à évoquer les problèmes qu’ils rencontrent et les solutions qu’ils utilisent actuellement pour y répondre.
Ensuite, vous pouvez contacter et recruter des utilisateurs potentiels via les réseaux sociaux, des plateformes spécialisées comme Userinterviews ou Respondent, voire les rencontrer lors de salons professionnels.
Enfin, vous menez l’entretien, soit avec un enregistreur (pour pouvoir l’analyser plus tard), soit avec un collègue qui assiste à l’entretien et prend des notes à vos côtés.
Remarque : Idéalement, faites les deux.
Enquêtes : Si les entretiens constituent une excellente source de données qualitatives permettant de comprendre les raisons du comportement et des besoins des utilisateurs, les enquêtes vous apportent un mélange de données qualitatives et quantitatives, permettant ainsi de valider vos résultats avec une signification statistique.
Je ne vais pas entrer dans les détails ici, car nous avons un guide entier dédié aux questions d’enquêtes à consulter.
Études de terrain : Dans ce cas, vous observez vos utilisateurs dans leur « habitat naturel ». Cela signifie que vous êtes présent de façon virtuelle ou physique dans l’environnement où vos utilisateurs cibles rencontrent les problèmes que vous souhaitez résoudre.
Par exemple, si vous créez un outil destiné à simplifier l’édition de vidéos pour les réseaux sociaux, votre étude de terrain consistera à observer le processus d’un influenceur sur TikTok : tournage de vidéo, montage, puis publication sur sa chaîne.
Bien que les études de terrain soient relativement difficiles à organiser (tous les utilisateurs n’acceptent pas qu’on observe leur quotidien), elles vous offrent le contexte le plus riche et de précieux enseignements sur vos utilisateurs.
Ateliers de découverte avec les parties prenantes : Oui, une excellente expérience utilisateur se construit autour des besoins des utilisateurs, mais n’oublions pas non plus vos parties prenantes clés. Bien que vos utilisateurs soient aussi des parties prenantes, j’utiliserai ici ce terme pour désigner les fondateurs/membres du C-suite, les investisseurs, les entités légales ou réglementaires avec lesquelles vous devez collaborer, etc.
Parfois, vous prenez des décisions de conception non pas selon les besoins des utilisateurs, mais en prenant en considération :
- Votre vision et votre stratégie : Les utilisateurs d’Apple adorent les câbles et les connexions filaires, mais la vision d’Apple, c’est le sans-fil—c’est pour cela qu’ils suppriment constamment les ports. (Maintenant, vous savez !)
- Votre environnement légal : Proposer une grande variété d’options pour les cookies n’est pas forcément l’interface la plus conviviale, mais cela peut être une obligation légale.
Il y a aussi une part d’intuition—même si vous connaissez bien vos utilisateurs, vous pouvez faire appel à votre propre intuition pour prendre certaines décisions de design.
Avec le concept de la recherche et ses types clarifiés, illustrons à quoi cela peut ressembler dans la vie réelle à l’aide d’un exemple.
Exemple 1 : Créer un outil de wireframing pour un professionnel de l’UI
Imaginez que vous êtes chargé de créer un outil de wireframing (quelque chose de similaire à Balsamiq) et que vous voulez savoir comment exactement vos utilisateurs cibles (dans ce cas, les équipes de design) vont l’utiliser et quels problèmes ils espèrent résoudre.
Pour le découvrir, nous pouvons élaborer un questionnaire à poser à nos utilisateurs lors d’un entretien. Voici ce que nous pouvons inclure :
Imaginons maintenant que nous découvrons que les retours sont principalement faits sous forme de commentaires sur une partie spécifique du wireframe produit, et que le product manager doit valider la conception du wireframe. Ce sont deux observations qui impacteront directement notre design puisqu’il nous faudra concevoir un flux de travail et une interface utilisateur pour permettre les commentaires sur le wireframe et son approbation.
Pour résumer, mener une recherche exploratoire est la partie la plus importante de votre processus de wireframing et je vous déconseille de la négliger. Maintenant, avec tous ces apprentissages en main, passons à l’étape suivante de notre processus de wireframing.
Étape n°2 : Construisez vos parcours utilisateur
Avant de créer les écrans/pages en eux-mêmes et d’y placer vos composants comme des formulaires, cartes, images, boutons, etc., vous devez comprendre la séquence d’étapes que vous imaginez que vos utilisateurs vont suivre.
Ces séquences sont également connues comme des 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 « administratif » comme s’inscrire ou modifier leur mot de passe, ou concerner une fonctionnalité principale (par exemple, rechercher et écouter de la musique pour Spotify).
Dans tous les cas, construire des parcours utilisateurs est important car cela vous aidera à mieux visualiser l’ensemble des écrans/pages que vous souhaitez concevoir, ainsi que le contenu nécessaire sur chacun d’eux.
Pour mieux comprendre ces parcours, laissez-moi vous en montrer un avec un outil de diagramme de flux comme Flowmapp.
Exemple 2 : Visualiser un parcours utilisateur d’un outil de design web avec Flowmapp
Supposons que vous créez un outil de design web en glisser-déposer comme Webflow. Vos utilisateurs sont des webdesigners sans code, et vous souhaitez visualiser les étapes nécessaires à l’ajout d’une image d’arrière-plan à leur page web.
Voici à quoi pourrait ressembler le parcours utilisateur pour cette fonctionnalité sur Flowmapp :
Comme on peut le voir, le parcours utilisateur met surtout l’accent sur les actions que l’utilisateur effectue et la séquence/la causalité entre ces actions, plutôt que sur les pages et leur design.
Dans cet exemple, nous voulons que l’utilisateur puisse sélectionner une image depuis la galerie ou en télécharger/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 l’utilisateur.
En observant ce parcours, on comprend que l’utilisateur restera sur la même page—l’éditeur de pages web—et pourra voir un autre écran affichant la galerie d’images sous forme de popup.
Il faudra donc concevoir une page et un popup avec les éléments de design et fonctions appropriés.
Puisque nous avons une vue d’ensemble des étapes permettant aux utilisateurs d’atteindre leurs objectifs dans notre produit, nous pouvons enfin commencer la phase de wireframing à proprement parler.
Étape n°3 : Commencez avec un wireframe basse-fidélité
Oui, la création d’un wireframe n’est que la troisième étape de ce processus de wireframing. Mais croyez-moi, faire les deux étapes précédentes élèvera la qualité de votre wireframe à un tout autre niveau, et cela vaut vraiment le temps investi.
Pour le wireframe en lui-même, je vous recommande de commencer par une version basse-fidélité. Un wireframe basse-fidélité n’inclura aucun détail particulier comme les couleurs/taille précises ni d’autres attributs de design de vos pages/écrans. Il n’aura pas non plus d’images ou de textes réels. À la place, vous utiliserez des espaces réservés pour chacun d’eux.
Et il y a une bonne raison pour laquelle une maquette filaire basse fidélité est ainsi et pourquoi vous devriez commencer par là — les wireframes basse fidélité sont rapides à construire et à modifier.
Il est très probable que vous ayez omis quelque chose d'assez important dans votre conception. Lors de la collecte de retours à ce sujet (nous en parlerons en détail à l'étape suivante), vous pourriez vous rendre compte qu'il y a beaucoup d'éléments ou de flux à changer.
Si vous aviez un design complet, ces modifications vous auraient pris des jours. Mais, avec une maquette filaire basse fidélité, vous pouvez faire vos modifications et soumettre votre design pour une nouvelle série de retours en quelques heures, voire moins.
Donc, après avoir vanté les mérites des wireframes basse fidélité, voyons à quoi ils ressemblent en utilisant un outil de wireframing populaire — Balsamiq.
Exemple 3 : Création d'une maquette filaire de site web
L’avantage des outils de conception spécialisés dans le wireframing, notamment en basse fidélité, c’est que vous n’avez pas à dessiner chaque élément à partir de zéro.
À la place, ces outils proposent généralement une variété d’éléments d’interface de base pré-fabriqués (par exemple images, menus, fils d’Ariane, boutons, etc.) ainsi que des contrôles glisser-déposer pour rendre la conception particulièrement rapide. Voici un exemple que j'ai créé à l'aide de Balsamiq.
De par leur nature même, les wireframes basse fidélité sont généralement en niveaux de gris ou comportent peu de couleurs et d’éléments visuels. Ce que vous voyez surtout, c’est l’apparence générale des éléments de l’interface utilisateur dans votre conception, leur position et l’architecture de l’information.
Maintenant que votre wireframe basse fidélité est prêt, il est temps de le soumettre à un premier tour de revue.
Étape 4 : Itérer en interne sur votre wireframe basse fidélité
Avant d’investir temps et efforts dans la création du design final de votre produit, supposons qu’il y a beaucoup de choses que nous avons mal faites ou oubliées dans la conception, et commençons à montrer notre wireframe basse fidélité à nos collègues et parties prenantes.
Bien sûr, vous pourriez aussi montrer ce design à vos utilisateurs. Mais, sachant combien il est difficile de recruter des utilisateurs prêts à examiner ou à tester l’utilisabilité de votre design, je vous recommande de réserver leur temps précieux à l’évaluation de designs haute fidélité, plutôt que de le gaspiller à signaler des problèmes que vos collègues auraient facilement repérés.
Je recommande toutefois d’impliquer vos parties prenantes à cette phase. Deux raisons principales à cela :
- Réduire la « distance » entre elles et les membres de l’équipe chargés de construire le produit, en les impliquant dès les premières étapes.
- Résoudre les problèmes de conception liés à l’alignement stratégique très tôt afin de gagner du temps par la suite.
Enfin, dès que vous avez collecté les retours de vos collègues et parties prenantes, vous pouvez corriger votre wireframe basse fidélité sur cette base, valider les modifications avec eux, puis passer à la création du vrai design visuel de votre produit.
Étape 5 : Préparer une maquette filaire haute fidélité et un prototype cliquable
Maintenant que vous comprenez bien à quoi ressemblera votre design dans ses grandes lignes, vous pouvez investir sans risques dans la création des aspects visuels de votre conception et la faire évoluer pour qu’elle ressemble au plus près à ce que vous souhaitez obtenir.
À ce stade de conception, votre wireframe numérique comprendra :
- Votre design d’interface : avec les bonnes couleurs, ombres, typographies et polices, marges, etc.
- Votre contenu visuel : si vous prévoyez d’intégrer des images, illustrations, vidéos ou autres éléments graphiques sur vos pages, c’est à ce moment-là que vous les ajoutez.
- Le texte de vos pages : on fait référence ici au texte de vos éléments d’interface, boutons, en-têtes, etc.
- Une maquette de votre contenu : si votre design inclut du contenu généré par les utilisateurs ou votre propre contenu, il convient d’en ajouter également une version fictive. (Par exemple, la conception d’un commentaire sous un post ayant le format et le contenu typique d’un message que pourraient poster vos vrais utilisateurs.)
En plus d’être le livrable principal pour votre équipe d’ingénierie chargée de construire votre produit, la maquette filaire haute fidélité peut également servir d’outil de test d’utilisabilité auprès de vos utilisateurs réels.
Vous pouvez soit utiliser directement la maquette haute fidélité pour les tests, soit aller plus loin en y ajoutant des interactions pour en faire un prototype cliquable.
Il est très facile de confondre les termes évoqués ici (wireframes haute fidélité, prototypes interactifs, etc.). Laissez-moi donc vous les clarifier et vous montrer quelques exemples.
Différencier les types de maquettes : maquettes statiques vs wireframes haute fidélité vs prototypes cliquables
Ces trois concepts sont très 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 sont relativement nouveaux dans les domaines du produit et du design.
Voici ce que chaque terme signifie :
Wireframe haute fidélité : Nous avons déjà abordé celui-ci plus haut. Alors, laissez-moi plutôt vous montrer à quoi cela ressemble.
Ce design attrayant concerne un service qui vous permet d'embaucher des chefs privés pour cuisiner des plats gastronomiques pour vous. Comme on peut le voir, ce design inclut tout : des images finales, les couleurs et les positions. Il y a aussi un peu de texte "lorem ipsum" pour représenter le témoignage d'un chef professionnel sur la page.
Maquette : Contrairement à son homologue, la maquette n'inclut pas seulement le design final, mais elle montre également l'environnement dans lequel ce design apparaît. Par exemple, si vous créez un en-tête de lettre, une maquette montrera une feuille de papier sur une table avec votre design dessus.
Dans le cas d'une application mobile, votre maquette affichera la silhouette d'un iPhone ou d'un appareil Android avec votre design visible à l'écran.
Prototype : Le prototype ressemble à un wireframe haute fidélité, mais, en plus de l'apparence finale, il tente aussi d'imiter la fonctionnalité du produit.
Avec des prototypes cliquables, ou des outils de prototypage 3D, vous pouvez ajouter des interactions de base telles que le défilement, les animations, les clics sur les boutons, la navigation dans l'application, etc.
En simulant l'interactivité de votre produit, les prototypes vous permettent de tester le fonctionnement que vous souhaitez pour vos fonctionnalités, avant même de les développer.
De plus, vous pouvez réaliser des tests utilisateurs en donnant vos prototypes haute fidélité à vos utilisateurs, et observer comment ils interagissent avec votre produit, résolvent leurs problèmes ou essaient de s'orienter dans votre design.
La création de wireframes est un jeu de tests et d’itérations
La nature itérative des wireframes vous permet d'économiser beaucoup d'efforts pour corriger vos erreurs. De plus, en passant par un tel processus de wireframing, vous vous assurez que vos utilisateurs reçoivent un produit qui répondra au mieux à leurs besoins.
Utilisez-vous un processus de wireframing différent dans votre entreprise ? Je suis curieux de savoir, alors laissez un commentaire ci-dessous et dites-nous comment vous procédez !
J'espère que ce guide vous a plu et qu'il vous a été 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 produit et la stratégie produit par Kerstin Exner.
- Les 3 P du produit par Benoit des Ligneris.
- Documents d'exigences produit par Sarah Tolle.
Enfin, vous pouvez vous abonner à notre newsletter : nous enverrons également du contenu captivant dans votre boîte de réception.
