À l'origine, le terme de "wireframe" désignait une représentation visuelle d'objets tridimensionnels, comme ceux utilisés dans la conception et le développement de produits. Aujourd'hui, il est également employé pour décrire la modélisation 3D dans l'animation informatique, ainsi que dans la conception et le développement de pages web 2D et d'applications mobiles.
Poursuivez votre lecture pour en savoir plus sur l'utilité des wireframes de sites web, le rôle de l'UX et de l'UI au début de la conception web et d'applications, et la manière dont les logiciels de wireframe rendent tout cela plus simple, plus rapide et plus efficace.
Qu'est-ce qu'un wireframe ?
Dans le domaine du web design, un wireframe (ou diagramme de wireframe) est une représentation visuelle en niveaux de gris de la structure et des fonctionnalités d'une page web ou d'un écran d'application mobile. Les wireframes sont utilisés au début du processus de développement pour établir la structure de base d'une page avant d'ajouter le design visuel et le contenu. Ils peuvent être créés sur papier, à l'aide de logiciels ou directement en HTML/CSS. Étant donné que les wireframes sont intentionnellement épurés de tout détail visuel, ils s'avèrent parfaits comme outils de planification pour clarifier la mise en page, la hiérarchie et le comportement avant d'investir du temps dans des visuels ou du code finalisés.
Utilisez un wireframe UX pour répondre aux questions suivantes :
-
Qu'est-ce qui sera affiché sur l'interface utilisateur ?
-
Où les éléments seront-ils placés sur la page ?
-
Comment les utilisateurs interagiront-ils avec les éléments de la page ?
-
Comment la page web ou l'application fonctionnera-t-elle ?
Wireframes, maquettes et prototypes
Les équipes utilisent souvent ces termes de manière interchangeable, mais ils répondent à des objectifs différents à des niveaux de fidélité distincts. Les diagrammes de wireframe se distinguent des maquettes et des prototypes car ils constituent une représentation basse fidélité axée sur la mise en page et les fonctionnalités. Considérez le wireframe comme un plan de construction qui montre les fonctionnalités proposées et le fonctionnement attendu du produit. Cette simplicité permet de réviser et d'affiner le projet au fur et à mesure.
La plupart des exemples de diagrammes de wireframe comprennent des lignes et des cases simples, avec très peu de couleurs et uniquement les détails les plus basiques. Ces formes simples représentent des éléments UX tels que les menus, les boutons, le contenu et les fonctions de navigation. Par exemple, un simple rectangle contenant les mots "Logo/Page d'accueil" peut indiquer l'emplacement du logo de l'entreprise et le fait que ce logo renverra à la page d'accueil du site.
En opposition, une maquette (mockup) s'apparente plutôt à un modèle non fonctionnel. Elle vous donne une idée plus précise de l'aspect final du produit avec les graphismes, les couleurs, l'identité de marque et les polices, mais aucune fonction de l'UI n'est activée.
Un prototype est plus proche d'une version entièrement fonctionnelle du produit final. Il peut être utilisé pour faire la démonstration de caractéristiques et de fonctionnalités, ainsi que pour tester l'UX et le contrôle qualité.
L'utilité des wireframes pour le développement de sites web et d'applications
En pratique, les équipes tirent parti des wireframes de plusieurs manières récurrentes.
Maintenir l'alignement et la concentration des équipes
Les wireframes permettent d'aligner tous les participants au développement du site web. Ainsi, les designs sont calibrés plus précisément, la création de contenu est simplifiée, et l'équipe de développement comprend mieux ce qu'elle construit. Cela évite également aux équipes de devoir bricoler, corriger ou reconstruire entièrement le projet plus tard au cours du processus (le phénomène de dérive des objectifs ou « scope creep »).
Dès que toutes les parties prenantes ont approuvé le contenu et les fonctionnalités décrits dans le wireframe, l'équipe peut avancer en toute confiance. Au fil du projet, le wireframe sert de référence pour maintenir les différentes équipes sur la bonne voie.
Offrir une expérience de marque positive
Les wireframes réduisent également les risques pour la marque et sa réputation en aidant les équipes à détecter les expériences confuses ou frustrantes avant qu'elles ne touchent les utilisateurs. Quand l'UX et l'UI d'un site web ou d'une application sont bien conçus, personne ne le remarque vraiment : le produit fonctionne et tout le monde est satisfait. En revanche, un mauvais design peut nuire durablement à votre marque et à votre réputation. La création de wireframes pour applications et sites web est une étape essentielle pour concevoir une UX exceptionnelle.
Garantir que le site ou l'application s'aligne sur les objectifs
Visualiser clairement les fonctionnalités sans l'influence du design créatif permet aux parties prenantes de se concentrer sur d'autres aspects du projet. Le wireframing fixe les attentes sur la mise en œuvre des fonctionnalités en montrant leur fonctionnement, leur emplacement et leur valeur ajoutée. Une fonctionnalité peut ainsi être retirée si elle ne s'aligne pas sur les objectifs de votre site.
Mettre l'accent sur l'ergonomie
Le wireframing offre un regard objectif sur le nom des liens, les parcours de conversion, la facilité d'utilisation, la navigation et l'emplacement des fonctionnalités. Les wireframes vous aident à identifier les failles de l'architecture ou des fonctionnalités du site et vous permettent de visualiser le flux du point de vue de l'utilisateur. Se concentrer très tôt sur l'ergonomie est crucial, car il est bien moins coûteux et plus simple de résoudre les problèmes lors de la phase de conception qu'après avoir commencé à coder.
Anticiper l'évolution du contenu
Si vous savoir que votre site va s'enrichir à court terme, il doit pouvoir absorber cette croissance avec un impact minimal sur son architecture, son ergonomie et son design. Le wireframing permet de mettre en lumière ces opportunités d'évolution du contenu et de déterminer comment les intégrer.
Intégrer les commentaires et encourager la collaboration dès le début
Pour lancer un nouveau projet ou la refonte d'un produit, il est important de recueillir rapidement des avis et des commentaires afin de ne pas perdre de temps ni d'argent dans la mauvaise direction. Un wireframe est un excellent moyen de transmettre rapidement des idées et d'obtenir des retours précoces pour concevoir un meilleur produit.
En travaillant avec les clients et d'autres parties prenantes, vous pouvez collaborer et parvenir à un consensus sur l'aspect de l'interface, son fonctionnement et les éléments à y inclure.
Partager des diagrammes de wireframe avec votre client, vos concepteurs, l'équipe de développement et toutes les autres personnes impliquées encourage un dialogue ouvert. Cela favorise les retours et la collaboration pour s'assurer que tout le monde est sur la même longueur d'onde dès le départ.
Optimiser le développement Agile
Les wireframes s'intègrent parfaitement aux environnements Agile. Vous pouvez collaborer avec les chefs de produit et les développeurs pour identifier les sections du design à développer lors de chaque itération. En développant le produit par blocs itératifs, il est mais aussi plus facile de recueillir des commentaires et d'affiner le processus de conception et de développement au besoin. Il est toujours préférable d'obtenir des retours tôt, avant de consacrer trop de temps au développement.
Gagner du temps et de l'argent
Un wireframe bien conçu permet d'économiser du temps et de l'argent car votre équipe de développement comprend mieux le produit global qu'elle va construire, évitant ainsi d'avoir à corriger des problèmes plus tard. L'équipe n'aura pas besoin de recourir à des solutions de contournement de dernière minute pour faire fonctionner correctement les fonctionnalités.
Autres équipes utilisant les diagrammes de wireframe
Puisque les wireframes favorisent l'alignement entre les différents rôles, ils s'avèrent particulièrement utiles comme référence partagée pour l'ensemble de l'équipe produit, et pas seulement pour les concepteurs.
Clients et parties prenantes
Les wireframes offrent à vos clients (ou même aux parties prenantes internes, comme votre équipe marketing) une vision globale et facile à lire de ce qui est développé. Les réviseurs peuvent rapidement évaluer si le design répond à leurs attentes, repérer les éventuels oublis, explorer les actions disponibles et observer l'agencement des éléments de l'interface.
Présenter les wireframes aux clients permet de mettre en lumière d'éventuels problèmes ou des éléments manquants qui avaient été négligés ou non envisagés. Il est bien plus simple et économique de corriger ces points lors de la création des wireframes que d'essayer de résoudre des problèmes une fois le code écrit.
Chefs de projet
Les chefs de projet utilisent les wireframes pour s'assurer que toutes les parties prenantes sont sur la même longueur d'onde. Le partage du wireframe permet à chacun de visualiser la direction du projet, d'identifier les problèmes potentiels, de suggérer des améliorations et de s'accorder sur ce qui sera construit.
Les chefs de projet peuvent utiliser les wireframes comme une liste de contrôle pour suivre l'avancement et s'assurer que tout est mis en œuvre comme convenu.
Développeurs
Les développeurs s'appuient sur les wireframes pour comprendre les exigences techniques et identifier les endroits où ils doivent implémenter des fonctionnalités spécifiques. L'utilisation de plusieurs wireframes pour construire un storyboard aide les développeurs à déterminer comment les interactions utilisateur doivent ou peuvent s'articuler. Le scénarimage (storyboarding) avec des wireframes donne aux développeurs une idée de la circulation des données et les aide à identifier les goulots d'étranglement potentiels.
Conception UX, UI et wireframe
La conception de l'expérience utilisateur (UX) est une méthode visant à accroître la fidélité et la satisfaction des clients en améliorant l'ergonomie et le plaisir lors de l'interaction entre le client et le site, l'application ou le produit. La conception de l'interface utilisateur (UI) est plus proche du graphisme, bien que ses responsabilités soient un peu plus complexes. En général, la conception de l'expérience utilisateur précède celle de l'interface utilisateur. L'UX et l'UI ont tendance à se chevaucher (et devraient le faire) dans le processus de conception des wireframes. Les domaines d'action comprennent :
Architecture de l'information et wireframes
Partie intégrante du processus global de développement de sites web et de création de wireframes, l'architecture de l'information consiste à organiser et hiérarchiser l'information de manière à ce qu'elle soit comprise par les futurs utilisateurs d'un site ou d'une application mobile. Il existe quatre éléments fondamentaux, selon l'ouvrage Information Architecture for the World Wide Web :
-
Schémas et structures d'organisation : catégoriser et structurer l'information
-
Systèmes d'étiquetage : représenter l'information
-
Systèmes de navigation : naviguer dans l'information
-
Systèmes de recherche : chercher et trouver l'information
Une bonne architecture de l'information commence par une analyse commerciale complète afin de développer une stratégie de contenu offrant une vision globale de la structure, du contenu et du design en fonction des objectifs de l'entreprise. Pour confirmer la justesse de l'analyse et de la stratégie, les wireframes et les prototypes papier constituent une première étape essentielle. Tester les prototypes et les wireframes est le meilleur moyen de recueillir les commentaires des utilisateurs dès le début du processus de conception, ce qui permet d'éviter des refontes coûteuses une fois le site en ligne. Ces tests vous aident également à évaluer différents designs en termes de performances et de préférences des utilisateurs afin de créer le meilleur produit possible.
Au stade du wireframing, la conception de l'information consiste également à anticiper ce que les différents types d'utilisateurs doivent voir en premier et les actions qu'ils sont susceptibles d'entreprendre. Par exemple, si votre site web propose un service de messagerie, la plupart des utilisateurs qui le visitent se répartiront en deux catégories : les utilisateurs habituels et les nouveaux visiteurs. Les premiers souhaiteront probablement se connecter, tandis que les seconds voudront peut-être créer un compte ou simplement en savoir plus sur votre service. Sur votre page d'accueil, vous devez tenir compte de chaque type de visite victor et lui fournir suffisamment d'informations pour atteindre ses objectifs respectifs. Ces informations peuvent être communiquées via des boutons : connexion, inscription ou en savoir plus. La conception de l'information consiste à décider des éléments à inclure et de leur emplacement.
Conception de la navigation et wireframes
Le système de navigation comprend un ensemble d'éléments à l'écran qui permettent à l'utilisateur de passer d'une page à l'autre. La conception de la navigation doit clarifier la relation entre les liens afin que les utilisateurs comprennent naturellement leurs options de navigation. En règle générale, les sites web proposent plusieurs systèmes de navigation, tels qu'une navigation globale, locale, supplémentaire, contextuelle et de courtoisie.
Comme son nom l'indique, la conception de la navigation détermine la manière dont les utilisateurs se déplacent dans votre application ou votre site web. Depuis un écran donné, un utilisateur peut naviguer vers plusieurs autres écrans. Cependant, ils ne le sauront pas à moins que vous ne le leur indiquiez : les menus déroulants, les liens cliquables et les barres de défilement sont autant d'exemples d'éléments visuels qui aident les utilisateurs à naviguer dans votre produit.
Conception de l'interface utilisateur et wireframes
La conception de l'UI consiste à choisir et à agencer les éléments d'interface qui aident les utilisateurs à interagir avec les fonctionnalités du système de manière à maximiser l'efficacité et la facilité d'utilisation. Les éléments d'UI courants comprennent les boutons, les champs de saisie de texte, les cases à cocher, les menus et les boutons d'option.
La conception de l'interface rassemble tous ces éléments : les informations, la navigation et tout ce qui compose votre wireframe. La conception de la navigation et celle de l'information ont toutes deux des composants à l'écran tels que des boutons et des menus. La conception de l'interface fait référence à la manière dont les éléments sont intégrés dans l'interface utilisateur globale, y compris les zones de texte, les images d'en-tête et les barres latérales.
Types de wireframes
Il existe quatre types de wireframes différents :
-
Les wireframes de base. Également appelés rendus basse fidélité, il s'agit de schémas de page très simples, généralement en noir et blanc.
-
Les wireframes annotés. Ils ajoutent un large éventail de détails à un wireframe de base. Les annotations sont de brèves notes, généralement situées sur le côté ou au bas du wireframe, qui décrivent chaque élément. Elles sont généralement séparées par zones de contenu et de fonctionnalités, et indiquent (brièvement) la raison d'être et l'objectif de chaque élément.
-
Les wireframes de flux utilisateur (user flow). Lorsque l'annotation ne suffit pas à montrer comment l'utilisateur d'un site ou d'une application va logiquement naviguer d'une page à l'autre, des informations supplémentaires peuvent être nécessaires. Ces wireframes de flux utilisateur peuvent être des vues statiques d'un wireframe entièrement interactif, mais ils peuvent aussi inclure un diaporama ou une série de wireframes pour illustrer un flux utilisateur principal ou un ensemble de flux.
-
Les wireframes interactifs haute définition. Vous pouvez faire l'expérience d'interactions (par exemple, des pressions, des clics et des balayages) au sein d'un même wireframe ou entre plusieurs wireframes. L'ajout d'interactions avant de passer aux maquettes complètes ou au prototypage en direct permet aux concepteurs et aux développeurs de gagner de précieuses heures de travail. Cette variante de wireframes ne peut être réalisée que dans des logiciels de présentation et de conception graphique ou dans des logiciels de création de wireframes et de prototypes.
Comment concevoir et créer un wireframe simple
Maintenant que nous avons examiné les composants fondamentaux des wireframes, voyons comment assembler le tout pour concevoir et créer un wireframe simple.
Et n'oubliez pas : en matière de wireframing, plus vous commencez tôt, mieux c'est.
-
Pensez à l'objectif final du site web et concevez-le en gardant cet objectif à l'esprit. Réfléchissez à la manière dont l'utilisateur interagira avec l'interface.
-
Commencez par une représentation simple et basse fidélité de la page web divisée en trois parties : l'en-tête (la première chose que les utilisateurs verront en haut de la page), le corps de la page web et le pied de page, qui contient généralement des informations moins importantes.
-
Ensuite, pensez à la navigation. Ajoutez des boutons et des liens permettant aux utilisateurs de visiter les principales sections de votre site, y compris les zones de contenu, la recherche et la connexion de l'utilisateur.
-
Annotez votre wireframe pour plus de clarté.
Une fois cette étape atteinte, vous pouvez partager le wireframe avec les parties prenantes avant de passer à la suite. Vous pouvez dessiner le wireframe initial à la main sur papier ou sur un tableau blanc, mais une fois arrivé à l'étape finale, vous utiliserez probablement un logiciel pour développer davantage le wireframe.
Si vous concevez autre chose qu'une simple page d'atterrissage (landing page), il est également utile de planifier l'ensemble des écrans dont vous aurez besoin avant de commencer à dessiner les mises en page individuelles. Que vous créiez un wireframe pour une application ou un site web, une chose est sûre : vous devrez créer plusieurs wireframes. Le wireframing repose entièrement sur le flux utilisateur. Comment l'utilisateur navigue-t-il dans votre application ? Y a-t-il un endroit précis où vous souhaitez qu'il arrive ?
Chaque projet nécessite un flux de travail différent, mais en règle générale, vous devriez concevoir votre premier wireframe lors de la phase de lancement ou de planification du cycle de vie du projet. Avant de commencer vos diagrammes, cartographiez les itinéraires possibles qu'un utilisateur peut emprunter, en énumérant chaque nouvel écran qu'il pourrait rencontrer. Pour chaque écran supplémentaire, vous aurez besoin d'un wireframe de plus. De plus, le niveau de fidélité des wireframes tend à évoluer à mesure que le projet passe de l'exploration initiale à la planification concrète.
Ce travail préliminaire peut sembler excessif, mais il en vaut la peine. Se lancer directement dans le processus de création de wireframes sans une idée claire du flux utilisateur conduit à des diagrammes confus et désordonnés.
Un flux de travail plus détaillé, étape par étape
Si vous souhaitez un processus plus granulaire que les quatre étapes ci-dessus, le flux de travail suivant peut vous aider à passer d'une ébauche de mise en page à des wireframes de plus haute fidélité prêts à être partagés.
1. Commencez à ajouter des formes de base
Après une planification minutieuse, vous devriez être prêt à ébaucher votre wireframe. Commencez par sélectionnant un « cadre » pour votre diagramme. Si vous créez un wireframe d'application, sélectionnez une forme similaire à l'écran d'un appareil mobile. Pour un wireframe de site web, choisissez une forme qui ressemble à une fenêtre de navigateur. La plupart des plateformes numériques de création de wireframes proposent ces deux cadres de base dans leur bibliothèque de formes.
2. Ajoutez des boutons et des liens
Une fois la mise en page de votre wireframe établie, il est temps d'ajouter des fonctionnalités. Sur n'importe quel écran de votre produit, il y a probablement plusieurs boutons qui redirigeront l'utilisateur vers un nouvel écran. Vous les avez peut-être ajoutés sous forme de formes à l'étape précédente, mais si ce n'est pas le cas, sélectionnez une forme de base pour représenter chaque bouton et ajoutez-les maintenant. Vous pouvez également ajouter le texte qui apparaîtra sur le bouton (par exemple, « accueil »). Si votre plateforme de wireframing intègre des fonctionnalités de liaison, associez chaque bouton au wireframe vers lequel il doit diriger l'utilisateur.
3. Recueillez les commentaires et modifiez
Il est maintenant temps de partager votre wireframe avec d'autres parties prenantes pour obtenir des commentaires, effectuer des révisions et obtenir leur approbation.
4. Ajoutez des détails
À ce stade, votre diagramme est probablement un wireframe de moyenne fidélité. Une fois la conception de base approuvée, vous pouvez commencer à affiner les détails. Ajoutez des images et du texte. Utilisez la couleur pour différencier les différents éléments de la page, tout en restant dans les niveaux de gris. Assurez-vous que tout est à la bonne taille, au pixel près.
5. Partagez votre wireframe
Vous should maintenant disposer d'un wireframe fonctionnel de haute fidélité. Partagez-le avec les parties prenantes du projet et les équipes concernées.
Modèles et exemples de wireframes
Les modèles de wireframe peuvent vous aider à concevoir plus rapidement une nouvelle page web ou une nouvelle application. La plupart des logiciels de conception de sites et d'applications proposent une grande variété de modèles.
Quel que soit votre secteur d'activité ou la plateforme pour laquelle vous concevez, les wireframes peuvent vous aider à concevoir et à mettre en œuvre une expérience utilisateur parfaite. Jetez un coup d'œil à ces exemples de wireframes, dont certains sont combinés à des flux d'utilisateurs ou de tâches.
