Les wireframes : pourquoi les utiliser et comment en tirer profit ?

Qui utilise les wireframes (ou maquettes structurelles) ? Qu’apportent-elles lors d’un projet ? Pourquoi et comment les utiliser pour en tirer profit ? Cet article répondra à toutes vos questions.

Qu’est-ce qu’un wireframe ?

Pour commencer, un wireframe est une façon de représenter une conception digitale : une page d’un site ou d’une application, une interface, etc. Ils ne sont pas interactifs ni très détaillés, leur design simple servant simplement à guider le projet. On les qualifie de représentation basse-fidélité ou low-hi (pour low fidelity). En effet, c’est une représentation graphique qui contient uniquement les éléments de base et le contenu. Cependant, certains parleront tout de même de wireframe low, medium et high quality. Cela dépend en partie du type de wireframe qu’on réalise : croquis ou numérique. Nous vous avons mis un exemple pour chaque niveau, mais on aura plutôt tendance à appeler le dernier maquette que wireframe.

Un wireframe est comme le plan d’un bâtiment. Lorsqu’on veut construire un bâtiment massif, on ne commence pas tout de suite à construire. On fait des croquis, des dessins, des plans, des calculs, etc.

Il en va de même pour la conception de sites web et d’applications. Vous ne pouvez pas commencer tout de suite à construire, car vous risqueriez de négliger quelque chose ou d’oublier un élément essentiel. Un wireframe vous aidera à rassembler les éléments essentiels et à avoir une vue d’ensemble. 

Voici quelques caractéristiques d’un wireframe :

• montrer les principaux éléments du contenu
• représenter le périmètre et la structure de la mise en page
• décrire l’interface utilisateur élémentaire

Attention, on utilise souvent les termes wireframe, maquette et prototypes de manière interchangeable, pourtant ce sont trois choses bien distinctes. Apportons une petite précision sur ce point, cela permettra également de mieux comprendre la notion de wireframe.

• La maquette :

Une maquette est une représentation visuelle d’un produit. Tandis qu’un wireframe représente principalement la structure d’un produit, une maquette montre ce à quoi le produit va ressembler. Cependant, tout comme pour le wireframe, on ne peut pas cliquer sur la maquette. C’est une représentation graphique statique dans laquelle l’identité de l’entreprise est appliquée par le biais du style visuel.

Enfin, contrairement au wireframe, la maquette est une représentation moyenne ou haute fidélité (mid-fi ou high-fi). Elle aide à prendre des décisions finales concernant les couleurs, le style et la typographie d’un produit. Avec une maquette, on expérimente donc avec le côté visuel du produit pour voir ce qui semble être le mieux. Là encore, on peut apporter immédiatement des modifications suite à des retours clients ou de potentiels utilisateurs. Bien entendu, cela est bien plus simple que d’apporter des modifications à l’interface utilisateur après le lancement du produit. Contrairement au wireframe, on ne peut pas faire de croquis de la maquette. On va généralement utiliser un outil de maquette. Il en existe beaucoup, comme Marvel, InVision ou Moqups.

Et si vous voulez voir de superbes maquettes, vous pouvez aller sur dribble.

• Le prototype : 

La différence entre le produit final et le prototype réside principalement dans le fait que l’interface et le backend d’un prototype ne sont souvent pas liés. Cela sert notamment à réduire les coûts de développement jusqu’à l’approbation de l’interface utilisateur. Après avoir testé le prototype, l’équipe peut poursuivre le codage.

L’un des avantages d’un prototype est qu’il est totalement interactif, ce qui permet aux utilisateurs de découvrir l’interface quasi-finale et d’avoir leurs retours. Parmi les outils de prototypage, il y a par exemple Mockplus et Adobe XD.

Toutes les conceptions web ne passent pas forcément par les trois étapes wireframe, maquette et prototype. Toutefois, chaque étape présente des avantages. Leur utilisation dépendra donc des projets. On est ainsi libre de personnaliser le processus de la manière qui convient le mieux aux besoins du projet. 

	Caractéristiques générales	Usage courant
Wireframe	Représentation simple de la structure avec les éléments de base	Communication, Documentation, Créativité
Maquette	Visualisation statique, branding	Communication auprès des parties prenantes
Prototype	Interactivité	Tests utilisateurs interactifs, UI

Pourquoi utiliser les wireframes ?

Certaines personnes pensent que les wireframe prennent trop de temps et ne sont pas utiles. Mais en fait, c’est tout le contraire, ils en font gagner ! Un wireframe n’est pas coûteux et rapide à réaliser. 

C’est le schéma structurel directeur de la future solution web. L’objectif principal est de montrer au client la structure des pages du site ou de l’interface avant sa conception. De plus, faire un wireframe réalisé à la main a l’avantage de garder les idées sur papier. Cela les rend légères et non engageantes : tout peut être changé.

On peut montrer le wireframe à des utilisateurs potentiels pour tenir compte de leur avis, tout cela donc dans une démarche agile. D’ailleurs, si les méthodes agiles en conception web vous intéressent, nous vous conseillons de lire notre article sur le sujet. Revenons à nos moutons. Les clients accorderont plus d’attention à la fonctionnalité et à l’expérience utilisateur qu’à l’esthétique. De plus, les wireframe empêchent les parties prenantes de faire dérailler les réunions pour des détails non pertinents comme la couleur des boutons. Ils permettent aux utilisateurs de se concentrer sur les interactions plutôt que sur les éléments visuels.

Supposons qu’on n’ait pas commencé avec des wireframe. Au lieu de cela, on se lance dans Photoshop et on crée une belle page d’accueil bien conçue. Le client l’a aimée en général, mais il préfère que la section « À propos » soit à gauche plutôt qu’à droite. Il n’a pas non plus aimé l’aspect de la barre de navigation, sur laquelle on a travaillé tout le week-end. Il faudrait faire les corrections, déplacer chaque couche, une par une, ce qui demande beaucoup de travail et de temps. Le problème est là. Un wireframe permet de corriger ou de proposer d’autres solutions rapidement, sans attacher trop d’importance à l’idée elle-même. On la représente brièvement et simplement sans trop s’investir personnellement et en terme de temps. À l’inverse, en mettant trop de cœur à l’ouvrage pour un client finalement insatisfait, on risque d’être déçu voire démoralisé.

En établissant une structure de site web simple via un wireframe, on peut rapidement modifier l’emplacement de n’importe quel élément pour répondre aux besoins du client. On peut étudier ce qui doit se trouver sur les différentes pages, même avec un croquis rapide au brouillon.

Enfin, le wireframe papier permet également à tous les membres de l’équipe de participer à la réalisation d’un wireframe. Cela rend le travail collaboratif et donc plus qualitatif. 

Disons que, quelque soit l’utilisation du wireframe, son but n’est pas d’être soigné, mais d’être pertinent. Il permet d’avancer dans la bonne direction, toujours en accord avec le client. Et pour être spécialistes en gestion de projet web, on peut vous affirmer que ce genre d’étapes en amont ou au tout début de la conception peut être d’une grande utilité. Chez joliPixel, on aime le travail collaboratif. Plusieurs expériences nous ont d’ailleurs montré l’importance d’être toujours aligné avec le client. Mais on n’est pas là pour parler méthodes agiles, alors passons.

Comment utiliser les wireframes?

Plutôt Sketchy ou Numérique ? 

Tout d’abord, il y a deux possibilités pour créer un wireframe : le dessiner à la main (dans un carnet par exemple), ou utiliser des outils (nous y reviendrons par la suite). Tout dépend de vos préférences et de la finalité de votre wireframe (à qui vous allez le montrer, etc).

• Le Sketchy (à la main, un peu brouillon ) : certains trouvent qu’un wireframe simple est plus attrayant pour le client. En leur montrant qu’il s’agit d’un processus continu, qu’ils peuvent critiquer et manipuler librement les éléments et les placements. 

• Le Numérique : il donne un aspect plus formel et plus sophistiqué. Celui-ci va un peu plus loin en utilisant quelques éléments de conception de base par le biais du numérique. Il s’agit donc d’un niveau proche des maquettes. Il montre au client une idée de ce à quoi ressemblera le site web. Cela peut en effet aider les clients qui pourraient avoir du mal à visualiser le produit fini.

Définissez les éléments à inclure dans votre wireframe 

• Pensez aux éléments généraux lorsque vous préparez chaque page web : en-tête, pied de page, barre latérale et zones de contenu. 
• Ensuite, pensez à des éléments supplémentaires : barres de navigation, widgets, boutons.

Une fois que vous avez une idée des éléments, vous pouvez commencer à créer votre wireframe.

Tous les composants du wireframe sont généralement affichés et organisés de manière à tenir compte des points suivants :

• Contenu : qu’est-ce que l’on affichera exactement sur cette page ?
• Structure : comment assemblera-t-on ces éléments ?
• Hiérarchie : comment présenterons-nous ces éléments (positionnement, taille…) ?
• Fonctionnalité : comment ces éléments fonctionneront-ils ensemble ?
• Comportement : comment ces éléments vont-ils interagir avec l’utilisateur ?

Préparez vos wireframes et passez à l’action ! 

Il suffit alors de :

• dessiner des rectangles qui correspondent proportionnellement au support d’affichage de vos pages (smartphone, ordinateur, tablette…)
• dessiner vos éléments !

Ps: n’oubliez pas de ne pas inclure les éléments à ne pas inclure : 

• Éléments graphiques : Les wireframes ne sont pas sensés en comporter, car cela détournerait l’attention du problème de base, à savoir la structure de la page. C’est pourquoi on les crée généralement sans utiliser de couleurs, de graphiques ou de typographie.

• Lorem ipsum texte : Le texte factice ne doit pas être utilisé dans un wireframe. Utilisez plutôt du vrai texte pour plus de clarté.

• Conception réelle (échelle et emplacements exacts au millimètre près): Les wireframes ne doivent pas définir l’aspect final de la page. Elle doit montrer comment le site fonctionnera, et non à quoi il ressemblera.

Bonus : des tips pour tirer profit des wireframes

Un designer nous partage dans cet article l’une de ses techniques pour tirer un maximum profit des wireframe. Les wireframes sont à considérer au sens “esquisse sur papier”, lors des phases préliminaires de la conception d’une solution web. Il utilise cette technique afin d’explorer de multiples directions avant de se plonger dans le design visuel.

“Les wireframes en papier sont rapides à réaliser et renforcent le fait que les idées sont bon marché et peuvent être jetées sans danger.”

Dustin Senos

Pour les non anglophones (et ceux qui ont la flemme), voici un résumé de sa méthode : 

• prenez un cahier et dessinez une grille d’au moins 20 petits rectangles. Faites-les correspondre à peu près au format de l’appareil pour lequel vous concevez. Pour une interface utilisateur de bureau, faites-en le rapport hauteur/largeur d’un écran d’ordinateur.

• avec votre stylo, remplissez chaque boîte avec une approche différente du problème de conception que vous essayez de résoudre. Commencez par esquisser les idées les plus évidentes. Sortez-les de votre tête, n’arrêtez pas avant d’avoir rempli chaque boîte avec une idée.

Comme il l’explique, il y a peu de chances que vous puissiez remplir toutes les cases avec une bonne solution, et c’est normal. Le but est de faire passer votre esprit du confort à l’inconnu. 

Si vous avez du mal à trouver une nouvelle idée, poussez-vous à créer sous la contrainte. Et si le menu était radial ? S’il n’y avait que des images ? Ou s’il n’y en avait pas du tout ? Que ferait Apple ? Que ferait Google ? Et s’il n’y avait ni listes ni tableaux tableaux ? Quelles sont les différentes façons de placer les éléments les plus importants au plus près du pouce de l’utilisateur ? Il nous confie que pour lui, les choses commencent généralement à devenir intéressantes après les 10 premières esquisses.

Forcez-vous à remplir toutes les cases, et remplissez-en d’autres si vous avez encore du jus.

• Maintenant que toutes les boîtes sont remplies, regardez-les et choisissez quelques idées qui vous semblent prometteuses. Parlez-en avec quelqu’un et recueillez ses idées. En vous forçant à verbaliser des concepts, vous découvrirez souvent des idées nouvelles et intéressantes.

• Répétez le processus

• Enfin, prenez les meilleures idées et dessinez-les avec une plus de détails, plus fidèles à la solution finale. Dessinez des cases plus grandes sur une nouvelle page. Dustin Senos conseille de dessiner au moins quatre pages sur un format A4. 

On est sensé avoir consacré peu de temps à ces esquisses. On doit donc pouvoir retourner en arrière sans craindre le temps supplémentaire que cela pourrait occasionner.

Cette méthode permet donc de remplir en très peu de temps plusieurs pages avec différentes approches d’un problème, d’élargir notre réflexion et de proposer des idées non évidentes. Les réactions que l’on a reçues sont de haut niveau et conceptuelles plutôt qu’esthétiques et trop spécifiques. De plus, elles s’appliquent facilement à d’autres esquisses. Cette méthode nous évite de nous engager sans réfléchir dans notre première idée au début du projet.

Les différents outils de wireframes

Les outils que vous déciderez d’utiliser dépendront de vos préférences personnelles et des exigences du projet. Certains recherchent des techniques simples et rapides, et exploitent donc les outils de wireframes low-fi. D’autres préfèrent des wireframes haute fidélité se rapprochant presque des maquettes, bien que cela prenne un peu plus de temps. Nous allons donc vous présenter quelques une d’entre eux, mais il en existe beaucoup d’autres comme uxpin, OmniGraffle, MockFlow, etc…

Illustrator et inDesign

Illustrator est créé pour le dessin, et inDesign est un programme pour la mise en page et la documentation. Donc, techniquement, ces deux éléments combinés peuvent faire un excellent outil wireframe. Pourquoi les deux ? Tout d’abord, illustrator ne prend pas en charge les pages multiples et les pages maîtres, mais inDesign le fait. De plus, inDesign ne propose pas de bibliothèques de dessins et d’icônes, mais illustrator le fait. Par conséquent, en utilisant Illustrator pour la majorité des illustrations, vous pouvez utiliser InDesign pour tout rassembler et ajouter des notes d’interactions.

Balsamiq

Balsamiq Mockups est spécialisé dans la création de wireframe et de maquettes. Il est simple à utiliser, intuitif et vous permet d’être opérationnel en un rien de temps. Bien qu’il soit payant, il existe une version d’essai gratuite.

wireframe.cc

wireframe.cc est un outil de wireframe très simple et minimaliste pour les sites web et les applications mobiles. Il a également une version d’essai gratuite de 7 jours.

HTML/CSS

Si le HTML et le CSS font partie de votre liste de compétences, vous pouvez alors mettre en place du code et lier vos images. C’est un outil peu coûteux qui vous permet de créer un wireframe pour votre site web. Il offre également toute une gamme de framework.

Conclusion

Comme toute pratique, l’utilisation des wireframe a ses partisans et ses réfractaires. Certains disent qu’il est rare de nos jours d’assister à une réunion où la conversation déraille sur des sujets comme la couleur des boutons. Et que, même si c’est le cas, tout bon designer devrait être capable de se concentrer sur des discussions plus pertinentes. Ensuite, certains trouvent que les wireframes ne sont pas si rapides que cela à créer et qu’il est plus efficace de réaliser directement des maquettes. Notamment avec les outils de glisser-déposer qui existent aujourd’hui. Quoi qu’il en soit, notre conseil est d’essayer pour se faire son propre avis.

Toutefois, comme on le précisait plus tôt, l’utilisation ou non des wireframe et du type de wireframe dépend de chaque projet. Certains n’y seront pas appropriés, tandis que d’autres pourront en tirer fortement profit. Cela dépend aussi des méthodes de travail des équipes, le but étant de travailler en laissant chacun exprimer son potentiel.

Quoi qu’il en soit, peu importe le type de wireframe que l’on choisit, on constate qu’ils peuvent apporter une forte valeur ajoutée en matière de gestion de projet. On donnant à notre client une structure visuelle dès les phases les plus amont du projet. Toute discussion ou tout malentendu qui pourrait survenir au cours du projet est alors résolu directement et sans conséquences tierces. Cela apporte également de la confiance à tous les partis pour la suite du projet, notamment lorsqu’on entre dans les phases où l’enjeu est plus grand.

Le dernier point que nous soulignerons pour conclure cet article sera à l’image du témoignage de Dustin Senos. Comme il le prouve dans son article, les wireframes peuvent être utilisés à des fins créatives. Certes certains projets assez classiques ne nécessitent pas forcément l’intervention de méthodes de créativité. Cependant, que ce soit pour des projets plus gros ou simplement à titre personnel, stimuler sa créativité régulièrement s’inscrit dans une démarche d’acquisition d’expérience et de progression. Et à notre sens, elle est essentielle dans notre métier.