Qu'est-ce qu'un wireframe ? Et comment en créer un ?

Read in English (Lire en anglais).

Un wireframe ou prototype est une représentation visuelle de ce que les utilisateurs verront et avec quoi ils interagiront lorsqu'ils arriveront sur un site web, une page web ou une application mobile. Le but d'un wireframe est de finaliser un concept d'expérience utilisateur (UX) avant de coder réellement un site web ou une application. 

Considérez un wireframe comme un croquis numérique, une maquette ou un prototype montrant la position de chaque élément dans une interface utilisateur, y compris le texte, les boutons, les images, les vidéos et les menus. Un wireframe peut également inclure des informations sur le fonctionnement du site ou de l'application.

Les wireframes sont généralement classés en fonction de leur fidélité, c'est-à-dire de leur degré de ressemblance avec le site, la page ou l'application qu'elles deviendront à terme. Voici quelques distinctions : 

• Les wireframes basse fidélité sont les maquettes les plus basiques et les plus grossières d'un site, d'une page ou d'une application, montrant comment tous les éléments seront positionnés à l'écran. Ils incluent généralement des éléments tels que du texte générique et des espaces réservés pour les images, les titres, les menus et les boutons. 

• Les wireframes de moyenne fidélité incluent plus de détails que ceux de basse fidélité. Les détails peuvent inclure un espacement plus précis entre les éléments, des titres réels et des éléments de conception supplémentaires. 

• Les wireframes haute fidélité sont plus réalistes en apparence que leurs homologues basse et moyenne fidélité et ressemblent davantage aux sites ou applications qu'ils représentent. Un wireframe haute fidélité peut inclure des détails visuels tels que la typographie, les couleurs et les images. 

Qui utilise les wireframes ?

Le wireframing ou prototypage est un processus que des personnes occupant divers postes peuvent utiliser pour donner vie à leurs idées. Que vous soyez intéressé par les wireframes pour des projets professionnels ou personnels, il peut être utile d'étudier les parcours professionnels possibles et de vous inspirer de la façon dont les entreprises utilisent les wireframes pour résoudre des problèmes du monde réel. Voici quelques métiers que vous pourriez trouver lors de vos recherches sur les wireframes : 

• Le designer UX / UI mène des recherches sur la manière dont les utilisateurs interagissent avec les applications et les sites web, afin de concevoir des expériences numériques attrayantes. 

• Le graphic designer crée des concepts visuels, y compris des mises en page de sites web dans certains cas, pour communiquer des idées au public. 

• Le web designer détermine l'apparence d'un site web pour les utilisateurs, y compris les couleurs, les polices, les images, ainsi que la mise en page et l'esthétique générales qui déterminent l'expérience des utilisateurs. 

• Le designer mobile détermine l'apparence d'une application mobile, y compris les éléments visuels, la façon dont ils sont disposés et les fonctionnalités de l'application. 

En plus des métiers mentionnés ci-dessus, vous découvrirez peut-être également que les propriétaires d'entreprise, les artistes, les créatifs, les freelances, les formateurs et les amateurs utilisent des wireframes pour imaginer des expériences utilisateur. Par exemple, un fabricant de bijoux créant un site web de commerce électronique pour vendre des bijoux et un enseignant créant une application sur laquelle les étudiants accèdent aux devoirs peuvent tous deux utiliser des wireframes pour réfléchir à des idées. 

Avantages du wireframe

Les wireframes peuvent être un moyen utile de lancer le processus de création d'un site web ou d'une application mobile. Lorsque vous vous lancez dans le prototypage, tenez compte des avantages suivants :

• Vous pouvez réfléchir à un projet au stade le plus précoce sans prendre de décisions sur les polices, les couleurs ou d'autres caractéristiques de conception du produit fini.

• Vous pouvez réfléchir à son esthétique, à l’architecture de l’information et au fonctionnement sans écrire de code. 

• Les collaborateurs et les parties prenantes peuvent donner leur avis sur le wireframe avant que les fonctionnalités ne soient finalisées.

• Un wireframe peut être facile et peu coûteux à créer, et réduire les essais et erreurs ainsi que les dépenses liées à la création du produit fini. 

Logiciels de wireframe 

Il existe de nombreux logiciels de création de wireframes permettant de créer une représentation visuelle de votre site web, de votre page web ou de votre application mobile. Nous avons examiné cinq logiciels dans le tableau ci-dessous et répertorié leur coût, leurs fonctionnalités et leurs notes sur G2*, un site où les utilisateurs évaluent et découvrent des logiciels [1]. 

*Les notes, sur G2, sont basées sur la satisfaction des utilisateurs quant à la facilité d'utilisation, l'expérience de partenariat commercial, la qualité du support et la qualité de l'administration. 

Qu'est-ce qui fait le succès d'un wireframe ? 

Bien que vous puissiez créer des wireframes avec différents niveaux de fidélité, en utilisant différents logiciels, garantir que votre wireframe possède les qualités suivantes peut faciliter le développement de votre produit fini. 

1. Simplicité 

Votre wireframe doit se concentrer sur les composants les plus importants du projet de votre site web ou de votre application : les éléments de page que vous allez inclure, l’endroit où ils apparaîtront et la manière dont les utilisateurs interagiront avec eux. Un wireframe haute fidélité peut inclure des polices, des couleurs ou des images réelles, mais vous devrez toujours veiller à ce que votre wireframe ne soit ni encombré ni surchargé d'informations afin que les collaborateurs puissent facilement l'interpréter. 

2. Description claire des caractéristiques ergonomiques 

Toutes les notes que vous ajoutez à un wireframe doivent se concentrer sur la description de la manière dont les utilisateurs interagiront avec les éléments de la page. Ces descriptions doivent être courtes et claires, par exemple : « Clics sur le bouton pour accéder à la page de paiement dans une nouvelle fenêtre ». N’incluez ces descriptions que lorsque la facilité d'utilisation n'est pas évidente à partir des éléments visuels du wireframe. 

3. Styles et symboles réutilisables

Les styles et symboles réutilisables, tels que les cases pour les images et les lignes horizontales pour le texte, peuvent accélérer le processus de création de wireframes, maintenir leur cohérence et les rendre plus faciles à interpréter.

Wireframe de site web et wireframe d'application mobile

Le wireframe d'un site web et celui d'une application mobile diffèrent sur plusieurs points essentiels, notamment la taille et la mise en page, la manière dont les utilisateurs interagissent avec les éléments de l'interface et le fonctionnement de ces éléments. Par exemple, les utilisateurs d'un site web peuvent cliquer sur des éléments de page à l'aide d'une souris ou appuyer sur des éléments à l'aide d'un écran tactile, tandis que les utilisateurs d'une application mobile appuient sur des éléments pour les utiliser.    

Comment créer un wireframe

Prêt à créer votre premier wireframe ou à améliorer votre flux de travail existant ? Suivez les étapes ci-dessous. 

1. Rédigez une brève description du produit final. 

Si vous recherchez des wireframes, c’est que vous avez peut-être une idée de site web, de page web ou d'application mobile que vous souhaitez mettre en œuvre. Pensez à consulter des exemples de sites web ou d'applications que vous aimez utiliser ou que vous trouvez faciles à parcourir pour avoir des idées sur l'expérience que vous souhaitez offrir à vos utilisateurs.

Commencez par rédiger une description de ce que vous souhaitez créer et de l'expérience que vous souhaitez offrir aux utilisateurs. Rédiger une courte description et la garder à portée de main peut vous aider à visualiser l'aspect final du produit fini. 

Voici un exemple : 

« Je crée un site web de salon de coiffure qui permet aux utilisateurs de prendre rendez-vous avec des coiffeurs, d'évaluer les services et les prix, de lire et de publier des avis de clients et de parcourir notre galerie de coiffures, le tout depuis la page d'accueil. » 

2. Esquissez le produit final à la main. 

À l'aide de votre description écrite, commencez à esquisser à la main l'interface utilisateur du site ou de l'application. L'esquisse d'un wireframe à la main peut être un processus rapide et nécessite généralement un minimum d'efforts et de coûts. De plus, un croquis dessiné à la main peut servir de base à la création d'un wireframe numérique, en particulier si vous utilisez un logiciel de wireframe pour la première fois. 

Votre croquis dessiné à la main peut inclure une zone pour les menus de navigation, des cases pour les images et les boutons de commande, ainsi que des lignes horizontales pour le texte et les titres. Il doit également tenir compte des dimensions des différents appareils et écrans. L'essentiel ici est de ne pas trop se concentrer sur l'esthétique du croquis dessiné à la main, car vous pourrez affiner ces détails à un stade ultérieur du processus de prototypage et de conception. Concentrez-vous plutôt sur la disposition générale de l'interface. 

3. Sélectionnez le logiciel de wireframe.

Lorsque vous êtes prêt à transformer votre croquis en wireframe numérique, sélectionnez le logiciel de maquette qui vous aidera le mieux à atteindre vos objectifs. À l'aide du tableau ci-dessus, tenez compte du coût, des fonctionnalités et de la facilité d'utilisation. Lisez la documentation d'assistance ou suivez des tutoriels sur l'utilisation des logiciels qui vous intéressent le plus. Si un essai gratuit est proposé, inscrivez-vous avant l'achat afin de pouvoir prendre une décision éclairée. 

4. Construisez votre wireframe.

L'étape suivante consiste à créer votre wireframe à l'aide d'un logiciel et de votre croquis dessiné à la main. Il peut être utile de consulter des exemples de wireframes au fur et à mesure que vous créez le vôtre. Assurez-vous d'inclure la mise en page de tous les éléments de la page et des notes sur le fonctionnement des éléments tout en laissant de côté le contenu réel et les excès de détails. 

5. Demandez l’avis des autres.

Obtenir des avis est une étape importante dans la création de wireframes qui se transformeront en sites et applications conviviaux. Si vous créez un wireframe pour vous aider à mener à bien un projet personnel, demandez l'aide de personnes de votre réseau. Si vous créez un wireframe pour des projets professionnels, demandez l'avis des parties prenantes et de vos collaborateurs. 

Voici quelques questions que vous pourriez poser :

• « Ce site ou cette application sera-t-il suffisamment facile à utiliser ? » 

• « La mise en page est-elle suffisamment intuitive ? »

• « Y a-t-il des zones qui prêtent à confusion ou qui sont encombrées ? »

• « Quels changements recommandez-vous ? » 

6. Utilisez les retours d’information.

Une fois que vous avez recueilli les avis sollicités, l'étape suivante consiste à les intégrer dans votre wireframe. Vous constaterez peut-être que vous devez modifier complètement la mise en page, transformer un wireframe de basse ou moyenne fidélité en un wireframe de haute fidélité ou passer par plusieurs cycles d’avis et de modifications. Une fois le wireframe finalisé, vous pouvez commencer à créer votre site ou votre application.

Commencez avec Coursera

Suivre des cours en ligne peut être un excellent moyen d'apprendre les techniques de prototypage, la conception UX et les compétences de codage pour créer des expériences numériques appréciées des utilisateurs. Jetez un coup d’oeil aux possibilités suivantes :