PINGDOM_CANARY_STRING
Lucidspark LogoQu'est-ce qu'un wireframe de site web ?
    Inscription gratuite
Diagram

Qu'est-ce qu'un wireframe de site web ?

Quels sont vos besoins en matière de tableau blanc ?

Je veux faire mon propre tableau blanc à Lucidspark.

Sommaire

Temps de lecture : 16 min

Vous voulez faire votre propre tableau blanc ? Essayez Lucidspark. C'est rapide, facile et totalement gratuit.

Inscription gratuite

Que sont les wireframes ?

Imaginons que vous avez été engagé pour construire une maison. Par quel bout allez-vous commencer ? En toute logique, vous allez d'abord vous lancer dans la création d'un plan de niveau, un document qui vous permet de déterminer l'agencement des pièces bien avant le début des travaux. En effet, il est préférable de remanier un plan plutôt que d'avoir à modifier toute la maison une fois le projet concrétisé. 

Il n'est pas question ici de monter des briques et des parpaings, mais plutôt de concevoir une application ou un site Web. Cela dit, les deux processus partagent un point commun : il est indispensable de commencer par créer des wireframes avant de passer à la création à proprement parler.

À l'instar d'un plan de niveau, un wireframe est une représentation élémentaire de la structure et de l'agencement de votre projet. En d'autres termes, un wireframe constitue le « squelette » de votre site Web ou application.

Les wireframes se concentrent exclusivement sur l'organisation et la structure, à savoir la place que prendront vos divers éléments. Oubliez les fioritures pour le moment, votre wireframe se compose de formes basiques qui représentent les éléments visuels de votre page, tels que les barres de recherche, les images d'en-tête et les autres conteneurs.

Concevoir des wireframes vous semble peut-être inaccessible, mais cette activité n'est pas réservée aux professionnels de l'expérience utilisateur. Vous n'avez besoin d'aucun logiciel particulier ni d'une expérience poussée en la matière. En réalité, beaucoup de wireframes voient le jour sur un simple bloc-notes ou même sur une serviette de table : peu importe le support, c'est le croquis qui compte. Cependant, les raffiner et les retravailler vous permettra d'en tirer le maximum. À mesure que vous développez votre idée initiale, remaniez vos diagrammes à l'aide d'un éditeur de wireframes afin d'ajouter des détails et de simuler l'expérience de l'utilisateur. Les wireframes les plus fonctionnels illustrent l'agencement d'une page, ainsi que le parcours utilisateur, l'architecture de l'information et les comportements des utilisateurs visés.

Créer des wireframes présente deux avantages principaux : donner à toutes les parties prenantes une vision claire de la conception de votre produit et centrer votre approche sur l'utilisateur.

Types de wireframes

Les wireframes sont généralement divisés en trois catégories : basse fidélité, moyenne fidélité et haute fidélité. Le degré de fidélité d'un wireframe fait référence à la quantité de détails qu'il renferme. Les wireframes basse fidélité sont des ébauches axées principalement sur l'agencement, tandis que les wireframes haute fidélité comprennent du texte de remplissage et reproduisent certaines des fonctionnalités accessibles aux utilisateurs. 
Examinons de plus près ces différents wireframes et étudions des cas d'utilisation pour chaque degré de fidélité.

Wireframes basse fidélité

wireframe basse fidélité

Créer un wireframe basse fidélité est généralement l'une des premières étapes du processus de conception. Vous pouvez considérer ces diagrammes comme des ébauches, un moyen de visualiser rapidement la structure de base de votre application ou de votre site Web. Lorsque vous réalisez un wireframe basse fidélité, restez simple : réduisez le texte au strict minimum et incluez uniquement les formes élémentaires. Laissez de côté les images, le texte de remplissage et les icônes, que vous représenterez simplement par une case, un X ou autre symbole.

Attention : rapide ne veut pas dire bâclé. Est-ce que vous tendriez une serviette sale à votre supérieur ? Une plateforme de création de wireframes numérique vous permettra de produire des wireframes lisibles et professionnels, tout en facilitant la collaboration. Pas besoin de faire de photocopies ou de prendre en photo votre tableau blanc, le bouton Partager s'occupe de tout.

Wireframes moyenne fidélité

wireframe moyenne fidélité

Une fois que vous avez consigné vos idées dans des wireframes basse fidélité, il est temps de les détailler davantage. Le rôle des wireframes moyenne fidélité est de définir l'échelle et les proportions : la taille de chaque élément est-elle équilibrée par rapport aux autres éléments, à la fenêtre ou à l'écran dans son ensemble ? Les attributs de style restent limités au minimum. Si nécessaire, vous pouvez inclure des icônes génériques et le texte important.

Les wireframes basse fidélité aident à obtenir l'adhésion des parties prenantes, mais ne vont pas plus loin. Un wireframe moyenne fidélité transforme ces esquisses sommaires pour faire émerger une vision plus précise et plus détaillée de votre projet. Ils sont généralement élaborés au début du processus de conception.

Certaines plateformes de création de wireframes vous permettent d'ajouter des fonctionnalités utilisateur à vos diagrammes. Un wireframe moyenne fidélité est censé donner au lecteur une idée du parcours utilisateur. Si un bouton a un impact sur la disposition de la page ou redirige l'utilisateur vers une nouvelle page, ajoutez-y un lien vers un wireframe illustrant l'écran suivant.

Wireframes haute fidélité

Dans les wireframes haute fidélité, c'est la précision qui prime. Chaque élément du diagramme doit être exactement au bon endroit, au pixel près. Dans la mesure du possible, vous devez inclure les images et le texte qui figureront dans le produit final. Les menus et autres éléments cliquables de la page doivent être fonctionnels et comporter le même niveau de détail.

En raison de leur niveau avancé de détail, les wireframes haute fidélité sont généralement créés par des concepteurs d'expériences utilisateur. Tandis que les deux autres types de wireframes servent généralement aux personnes non spécialisées pour communiquer leurs idées à des concepteurs professionnels, les wireframes haute fidélité fonctionnent dans le sens inverse : les concepteurs les utilisent pour faire approuver la version finale par les parties prenantes.

Les wireframes, en particulier les wireframes haute fidélité, sont souvent confondus avec des maquettes (ou mockups). Si vous ne connaissez pas les différences entre ces deux types de diagrammes, continuez votre lecture pour découvrir leurs caractéristiques et utilisations respectives.

Différences entre les wireframes et les maquettes / mockups

Les wireframes sont pour ainsi dire les plans de niveau d'une application ou d'un site Web, alors qu'une maquette est un modèle 3D en couleur construit à l'échelle. De la même manière que vous ne pourriez jamais confondre un plan de niveau avec une maison construite, il est impossible de confondre un wireframe, quel que soit son degré de fidélité, avec le produit fini. Et c'est bien normal ! Les wireframes ne sont pas censés être des chefs-d'œuvre graphiques, ils sont avant tout utilisés pour communiquer une structure et illustrer ses fonctionnalités.

Les mockups, en revanche, sont destinées à modéliser un produit final le plus fidèlement possible. Les polices, les couleurs, les images et autres attributs de style sont tous inclus dans une maquette, mais sans aucune des fonctionnalités d'un wireframe.

Comme nous l'avons vu plus haut, les wireframes sont utilisés tout au long du processus de conception et sont souvent créés par des personnes ne faisant pas partie de l'équipe de conception. Ils permettent aux parties prenantes d'éliminer les éventuels défauts de conception structurelle et de s'entendre sur le fonctionnement de l'application ou du site Web. La majorité des éléments esthétiques sont omis.

Les mockups se concentrent sur l'aspect du produit et sont généralement créées par les designers une fois les wireframes réalisés. Lorsque les maquettes d'un produit sont approuvées par les intervenants concernés, le projet peut passer au développement.

Quel rôle jouent les wireframes dans la conception d'expériences utilisateur ?

Tout le monde peut créer un wireframe. Cependant, ces diagrammes sont le plus souvent utilisés par les concepteurs d'expériences utilisateur et nous allons vous expliquer pourquoi.

Comme leur nom l'indique, les concepteurs d'expériences utilisateur (UX designer en anglais) déterminent les interactions qu'ont les utilisateurs avec un produit. Dans le cas d'une application ou d'un site Web, c'est donc à eux qu'il revient de concevoir l'interface. Les wireframes permettent aux concepteurs d'expériences utilisateur de simuler l'interface utilisateur et de peaufiner sa conception avant de démarrer la phase de programmation.

Comment ça marche en pratique ? Lorsqu'une équipe chargée de l'expérience utilisateur conçoit une interface Web, elle doit tenir compte de plusieurs aspects : quel doit être le parcours des utilisateurs sur la page ? Est-ce qu'il y a des pop-ups ? Des menus déroulants ? Et si oui, où sont-ils situés ?

En créant des wireframes de site Web, les concepteurs d'expériences utilisateur sont en mesure d'élaborer à la fois l'agencement du site et son parcours utilisateur. Il est possible de rendre les éléments d'un wireframe cliquables afin de simuler l'expérience réelle des utilisateurs. Les concepteurs peuvent ensuite partager leur travail avec d'autres équipes pour recueillir leurs commentaires. Les wireframes d'applications sont utilisés de la même manière.

Inscription gratuite

Quand commencer à créer des wireframes

Il est préférable de créer des wireframes aussi tôt que possible dans le cycle de vie d'un projet (dans la mesure du raisonnable, bien évidemment). Chaque projet a un workflow qui lui est propre, mais en règle générale, vous devez établir votre premier wireframe au cours de la phase d'initiation ou de planification du projet.

Si vous créez vos premiers wireframes lors de la phase d'initiation, commencez par des wireframes basse fidélité. La phase d'initiation est consacrée à l'expérimentation : vous avez une idée de site Web ou d'application, mais vous ne savez pas encore précisément quelle forme elle prendra. La création de wireframes basse fidélité est rapide et facile : il s'agit ainsi d'un outil de brainstorming idéal. Consignez vos idées, envoyez-les aux autres parties prenantes pour obtenir leur avis, puis retournez à la planche à dessin.

Lorsque votre projet entre dans la phase de planification, vous devez commencer à générer des wireframes de moyenne et haute fidélité. La phase de planification est celle où vos concepts prennent forme, et vous aurez besoin de wireframes fiables et fournis avant de pouvoir passer à la phase d'exécution.

Vos wireframes devraient devenir plus sophistiqués et se perfectionner au fur et à mesure que le projet avance dans ces deux premières phases. Lors de la remise des modèles à l'équipe de développement pour codage (la phase d'exécution), vous devriez avoir terminé vos wireframes.

Éléments d'un wireframe

Les wireframes gardent une apparence simple et une esthétique plutôt épurée. C'est en partie pour cette raison qu'ils sont si efficaces. Lors du développement de sites Web et d'applications, il est tentant de commencer immédiatement à jouer avec les polices et des couleurs, avant même d'avoir bien planifié l'expérience utilisateur. Lorsque vous créez des wireframes, mettez de côté les détails pour vous concentrer sur trois aspects fondamentaux de votre produit : le design de l'information, de la navigation et de l'interface.

Design de l'information

Lorsque les utilisateurs interagissent avec votre application ou votre site Web, ils absorbent des informations en permanence : quel type de site Web visitent-ils ? Comment peuvent-ils interagir avec ? Quelle est la « fonction » du site ? Ce processus est automatique et largement subliminal. En tant que concepteur, votre rôle est de faciliter ces interactions en choisissant la meilleure manière de présenter l'information sur une page.

Comment ça marche en pratique ?

Par exemple, si votre site Web propose un service de messagerie, la plupart des visiteurs du site seront soit des utilisateurs habituels, soit de nouveaux visiteurs. Les utilisateurs habituels voudront très certainement se connecter, alors que les nouveaux visiteurs souhaiteront peut-être créer un compte ou simplement en savoir plus sur votre service. Sur votre page d'accueil, vous devez tenir compte de chacun de ces visiteurs et leur fournir suffisamment d'informations pour qu'ils puissent atteindre leurs objectifs respectifs. Ces informations peuvent par exemple être communiquées via des boutons : Se connecter, S'inscrire ou En savoir plus. Le design de l'information consiste à déterminer les éléments à inclure et à les positionner de manière efficace.

Design de la navigation

Nous avons tous installé des applications qui demandent une recherche interminable pour trouver le menu Paramètres. Et nous avons tous eu l'impression qu'un site Web nous faisait tourner en rond : ce moment où vous avez l'impression que la page « Informations de votre compte » n'est plus qu'à un clic, pour finir par revenir sur la page d'accueil ou pire, une page d'erreur 404. Il est très clair qu'en tant qu'utilisateurs, nous sommes constamment confrontés à des systèmes de navigation mal conçus.

Comme son nom l'indique, le design de la navigation détermine la façon dont les utilisateurs se déplacent dans votre application ou site Web. À partir d'un écran donné, un utilisateur peut accéder à un certain nombre d'autres écrans. Mais il ne le saura pas si vous ne lui dites pas : les menus déroulants, les liens et les barres de défilement sont tous des exemples d'éléments visuels qui aident l'utilisateur à naviguer dans votre produit.

Design de l'interface

Le design de l'interface réunit tout cela : l'information, la navigation et, bien sûr, tous les autres éléments de votre wireframe. Le design de la navigation et de l'information ont tous deux des composants à l'écran : boutons, menus, etc. Le design de l'interface fait référence à la manière dont ces éléments sont incorporés dans l'interface utilisateur, qui comprend elle-même d'autres éléments, tels que les zones de texte, les images d'en-tête et les barres latérales.

Comment créer un wireframe

Maintenant que vous avez assimilé les aspects théoriques de la création de wireframes, il est temps de mettre ces connaissances en pratique. Suivez ces quelques étapes pour vous lancer :

1. Élaborez un plan


wireframe

Que ce soit pour une application ou un site Web, une chose est certaine : vous devrez créer plus d'un wireframe. L'étude du parcours utilisateur est la raison d'être des wireframes. Comment les utilisateurs se déplacent-ils dans votre application ? Voulez-vous qu'ils aboutissent à un certain endroit ?

Avant de commencer à dessiner vos diagrammes, tracez les parcours potentiels qu'un utilisateur est susceptible de suivre, en énumérant chaque nouvel écran qu'il pourrait rencontrer. Vous devrez créer un autre wireframe pour chaque écran supplémentaire.

Ce travail préliminaire peut sembler démesuré, mais le jeu en vaut la chandelle. Si vous vous lancez immédiatement dans la création de wireframes sans avoir une idée précise de votre parcours utilisateur, vous risquez de créer des diagrammes confus.

2. Commencez à ajouter des formes de base


wireframe

Après une ou deux séances de planification avancée, vous devriez être prêt à tracer vos premières ébauches. Commencez par sélectionner un « cadre » pour votre diagramme. Si vous créez un wireframe d'application, sélectionnez une forme s'apparentant à l'écran d'un appareil mobile. Pour un site Web, préférez une forme correspondant à l'écran d'un navigateur. La plupart des éditeurs de wireframes proposent ces deux formats dans leur bibliothèque de formes.

Ensuite, ajoutez les éléments les plus volumineux. Choisissez des formes et des conteneurs de base pour représenter les éléments de type barre d'en-tête, colonne latérale, zone de texte, etc. Il n'est pas nécessaire d'inclure du texte ou des images à ce stade, contentez-vous de définir l'agencement général de votre page.

Répétez ce processus pour chaque wireframe que vous devez créer.

3. Ajoutez des boutons et connectez vos wireframes avec des liens


wireframe

Une fois que vous avez établi l'agencement de vos wireframes, il est temps d'ajouter quelques fonctionnalités. Sur chacun des écrans de votre produit se trouvent probablement plusieurs boutons pour diriger l'utilisateur vers un autre écran. Vous avez sans doute ajouté des formes à la dernière étape pour les représenter, mais si ce n'est pas le cas, sélectionnez une forme de base pour chaque bouton et ajoutez-les maintenant. Vous pouvez également indiquer le texte qui apparaîtra sur le bouton (« Accueil », par exemple).

Si votre éditeur de wireframes vous permet de connecter vos divers écrans, ajoutez à vos boutons un lien vers le wireframe correspondant à l'écran vers lequel il doit diriger l'utilisateur.

Conseil : choisissez une seule police pour votre wireframe. Mettez du texte en gras et en italique lorsque nécessaire, mais conservez les autres attributs pour vos maquettes et vos prototypes.

4. Sollicitez des commentaires et apportez des modifications


wireframe

Vous avez passé des heures à élaborer vos wireframes. Leur agencement semble correct, et vous les avez connectés entre eux pour simuler votre parcours utilisateur. Il est temps maintenant de les partager avec les autres intervenants. Il est probable que certains aspects de vos wireframes puissent être améliorés, et c'est pourquoi il est important de les soumettre à un regard extérieur avant d'ajouter des détails supplémentaires.

Peut-être qu'un bouton est un peu décentré ou que la barre de menu est trop large et étouffe le reste de la page. Quelles que soient les réactions de vos collègues, écoutez-les et tenez compte de leurs idées : la collaboration est la clé du succès.

Apportez toutes les améliorations pertinentes que l'on vous a recommandées. Partagez à nouveau vos diagrammes avec les autres intervenants et répétez cette étape jusqu'à ce que tout le monde approuve le résultat.

5. Ajoutez des détails


wireframe

À ce stade, vos diagrammes s'apparentent probablement à des wireframes moyenne fidélité. Une fois le modèle de base approuvé, vous pouvez commencer à affiner les détails. Ajoutez des images et du texte. Utilisez de la couleur pour différencier les éléments de la page, mais restez dans une palette de niveaux de gris. Assurez-vous que tout soit à l'échelle, au pixel près.

6. Partagez vos wireframes

Vous devriez maintenant disposer d'un ensemble de wireframes haute fidélité parfaitement exploitables. Partagez-les avec les acteurs du projet et les équipes concernées.


Français
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
ConfidentialitéLégal
© 2021 Lucid Software Inc.