Un wireframe est une maquette qui va venir concrétiser toute la phase de recherche utilisateur et d’idéation réalisée en amont (voir notre article sur la recherche utilisateur). Cette maquette va permettre de formaliser la structure et les fonctionnalités identifiées et qui répondent aux besoins utilisateur et aux problématiques identifiées.

En phase de wireframes, on se concentre sur la structure du produit ainsi que ses fonctionnalités et non sur l’esthétisme et l’identité. Pour visualiser concrètement, imaginez les wireframes comme des premiers plans d’architecte avec les mesures et la structure si vous vouliez faire construire votre maison.

Il existe différents niveaux de réalismes dans la réalisation de wireframes.

Wireframe basse fidélité

Ces maquettes peuvent prendre plusieurs formats, du simple croquis sur une feuille à des maquettes réalisées sur des logiciels de design. En général, ces maquettes n’intègrent pas de pictogrammes, couleurs ou typographies spécifiques. Le contenu y est également en général assez pauvre, on peut le remplacer par des formes qui modélisent l’emplacement du texte ou par du Lorem Ipsum. Ces maquettes sont utiles si le projet manque de maturité ou si l’on veut très rapidement créer une première version pour itérer en équipe en fonction des apprentissages.

Wireframe haute fidélité

Ces maquettes, la plupart du temps réalisées sur des logiciels de design (poke Figma), permettent de représenter la structure et les fonctionnalités du produit de la manière la plus fidèle possible. A cette étape, on reste sur un niveau de gris mais on y intègre un maximum de contenus réels. Ces maquettes sont aussi souvent interactives, pour permettre de les tester auprès d’utilisateurs dans un contexte le plus réaliste possible. Certains éléments graphiques peuvent être intégrés pour donner du contexte et plus de réalisme à la maquette.

D’accord, mais à quoi ça sert dans la phase de conception d’un produit ou site internet ?

On peut identifier de nombreux avantages à passer par des wireframes, en fonction de la maturité du projet et des enjeux définis en amont du projet. Voici les avantages que nous apportent les wireframes sur nos projets :

Donner vie et concrétiser des idées et solutions imaginées

Il faut donner vie aux idées générées. Les wireframes sont la solution idéale pour les formaliser, les communiquer aux équipes et voir leur pertinence. Avant la conception des wireframes, tout est encore possible en termes de fonctionnement, alors on donne un aspect visuel aux solutions qui nous semblent les plus adaptées pour pouvoir itérer et aboutir à notre vision idéale.

Concevoir la structure et le fonctionnement du produit ou site internet

Les wireframes vont permettre de structurer le produit et de créer les différentes fonctionnalités. Créer la solution visuelle d’une fonctionnalité permet de la partager aux équipes et au client. Le client peut enfin visualiser comment est ce que ça peut fonctionner. Il est alors plus simple de le tester et de pouvoir échanger à son sujet, puis d’itérer sur différentes versions.

Se focaliser sur le fonctionnel plutôt que l’esthétique

L’esthétisme et l’identité, c’est beau, décisif et primordial dans la création d’un produit ou sa refonte. Alors, oui, nous sommes d’accord, cela a un impact direct sur l’expérience vécue par l’utilisateur. Mais à ce stade, nous allons d’abord nous focaliser sur le fonctionnel : “comment est-ce que l’on peut structurer l’information ? “, “comment est ce que cette fonctionnalité doit se comporter ?”. On reste donc très simple sur nos maquettes, avec de simples niveaux de gris en couleurs, sans éléments graphiques, gardons à l’esprit que nous concevons d’abord un produit simple d’utilisation et utile.

Préparer de potentiels tests utilisateurs pour valider le produit

Les tests utilisateurs sont essentiels en Design UX. Ils permettent de valider les parcours créés, mais aussi d’identifier comment les utilisateurs vont interagir avec les différentes fonctionnalités, comment ils vont trouver telle ou telle information. L’UI peut jouer un rôle primordial, car les gens aiment les choses belles, mais les wireframes permettent de se focaliser sur la structure et l’aspect fonctionnel et d’organiser des tests rapidement sans devoir passer par des mois de design & de développement.

Anticiper les contraintes techniques

Il est préférable de partager aux équipes techniques les solutions formalisées à travers les wireframes avant de passer à la suite du projet. Ainsi, nous pouvons anticiper la faisabilité, les potentielles difficultés et contraintes à prendre en compte en fonction des technologies choisies par exemple, et ainsi itérer rapidement pour avoir une solution viable et réalisable. Cela permet également aux développeurs de visualiser le comportement des fonctionnalités plus tôt dans le projet, pour que des choix pertinents puissent être fait. Vous l’aurez compris, notre objectif n’est pas de créer des éléments non-réalisables en développement.

Vous souhaitez savoir comment on procède chez Uxer pour réaliser nos wireframes ?

Nous créons l’ensemble de nos maquettes sur Figma ❤️, plateforme de design conçue pour le web. Nous proposons à nos clients des prototypes haute fidélité, afin d’assurer une qualité de travail, une projection maximum du client sur son produit ou site internet, c’est-à-dire avec les contenus réels et une version réaliste du produit dans sa structure et son fonctionnement.

Lorsque l’on commence les wireframes, on se penche systématiquement sur les vues les plus complexes ou les plus importantes en termes d’objectifs du client. Il faut savoir qu’une fois la solution trouvée et formalisée, il sera facile de décliner sur d’autres vues plus simples, plutôt que de commencer par des vues simples et se retrouver bloqué à la moindre complexité, car les maquettes créées ne s’adaptent pas.

On travaille toujours nos wireframes sur la base de contenus réels. STOP AU LOREM ! Le Lorem, c’est beau, et magique, ça remplit des sections de texte sans se soucier du vrai contenu. Le problème est que lorsque le client va vous fournir le texte réel à mettre en place, vous vous rendrez compte que l’espace que vous aviez prévu et la mise en page ne s’adaptent plus, car il y a 2 fois ou 3 fois plus de textes. 🤒

Enfin, tous nos wireframes sont interactifs, c’est-à-dire que vous pouvez y naviguer, dans chaque onglet, sur chaque fonctionnalité, comme si le site était réel sauf qu’il s’agit de maquettes (mais chut, on y voit que du feu !!). Il n’y a rien de mieux pour faire tester au client et qu’il se rende compte, ainsi que pour rendre des tests utilisateurs les plus fidèles possibles.

La conception de maquettes peut s’étaler sur plusieurs semaines. Il est important de garder une communication régulière avec le client pour qu’il puisse suivre l’avancé et les choix réalisés sur les maquettes. Ces allers-retours peuvent être longs et assez chronoghages par mail, quand il s’agit de demander des changements ou des questions sur les maquettes. Nous utilisons donc le système de commentaire sur Figma qui nous permet d’échanger très rapidement sur des éléments très précis des maquettes et de prendre des décisions rapides et efficaces.

Aller plus loin et passer au niveau supérieur

Dans un prochain article, nous vous parlerons du Kit Wireframes que nous avons créé sur Figma. Se basant sur la création de composants, il nous permet de gagner du temps sur des éléments récurrents et obligatoires, mais reste assez souple pour pouvoir les modifier et en ajouter de nouveaux. Stay tuned ! ✌️