Wireframe : définition et utilités

Wireframe : définition

Le wireframe (maquette fil-de-fer en français) est une maquette utilisée pour la création de sites web, d’applications ou de logiciels. Le wireframe est souvent utilisé en design d’interface ou dans le cadre d’expérience d’utilisateur design (UX design) pour créer un visuel simplifier de la structure et des fonctionnalités d’un site ou application.

Wireframe vs mockup

Un mockup (à ne pas confondre avec le wireframe) est l’étape suivant le wireframe dans la création d’un site web ou d’application mobile. Le mockup est aussi une maquette de site web (ou application/logiciel) mais il est bien plus détaillé et fini que le wireframe. Alors que le wireframe pourrait constituer une sorte de maquette « brouillon » (le design et l’esthétique du site n’étant pas développé), le mockup pourrait ressembler à un « premier essai ». Le prototype serait donc l’étape final après le wireframe et le mockup dans la création de site web, d’application mobile ou de logiciel.

Quand faire des wireframes ? 

Il est préférable de faire 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.

Wireframe : ses éléments

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.

Wireframe pour le 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.

Wireframe pour le 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.

Wireframe pour le 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 faire 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 pour votre 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 faire 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 à votre 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 wireframe. Si vous faite 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 faire.

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

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 à votre 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 à votre 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.