Le principe est de faire comprendre au client comment sera organisé son site internet. A la fois sans être trop confus, mais sans être trop détaillé non plus ! Regardons de plus près ce qui se cache derrière le wireframe UX.
Distinguer pour assimiler
Le wireframe, c’est exactement ce milieu entre le zoning et la maquette graphique ou prototype. Pour présenter une réalisation, comme celle d’un site internet ou d’une application mobile par exemple, le simple schéma/zoning ne suffit pas pour illustrer pleinement ce qu’on souhaite appliquer. En revanche, commencer un prototype complet, avec éléments fonctionnels et autres détails, serait illogique si le client souhaite revoir certains points avant la mise en ligne.
Le meilleur moyen de montrer ses idées est alors le wireframe : le principe est d’être assez explicite pour que le client puisse comprendre parfaitement ce qui est envisagé sur son site, sans appliquer rigoureusement la charte graphique de celui-ci. Une combinaison parfaite entre la lisibilité et la simplicité graphique.
Le « fil de fer » comme visuel
Comme mentionné précédemment, le wireframe n’est pas une représentation exacte du produit fini de tout le travail de l’expert UX. Il a pour objectif d’être une représentation suffisamment claire pour donner une idée des suites de la réalisation. Dans cette optique, un wireframe se présente le plus souvent, comme l’indique son nom, par des structures géométriques simples et entièrement en noir et blanc. On peut également être amené à travailler le contenu texte de la page directement dans le wireframe.
Ainsi, on se concentre exclusivement sur le travail relatif à l'expérience utilisateur, la navigation, la clarté des informations, et non des éléments graphiques qui peuvent biaiser l’importance de l’expérience avant celle du visuel. En réalisant un wireframe de chaque écran du site, on obtient une clarification complète de ce qui doit être réalisé ou modifié, ainsi que des différentes interactions entre les pages.
Les bonnes pratiques du wireframe UX
Pour commencer, il est nécessaire d’avoir en tête quelques réflexes de design, à retrouver dans l'article Design d’expérience : 5 réflexes pour performer. Même s’il doit rester simpliste, le wireframe ne doit pas manquer d’éléments : call to action, menu, fil d’ariane, images, vidéos… Si ce n’est pas directement intégré avec précision, il faut que cela soit clairement indiqué.
Parlant d’affichage, étant donné le noir et blanc du wireframe il faut porter une attention toute particulière au contraste de chaque élément. Pour distinguer chaque détail, il faut bien choisir la forme et le contraste de ce qu’il faut mettre en avant. Enfin, n’hésitez pas à illustrer le wireframe avec des motifs, pictogrammes ou images simples, pour aider au discernement de ce qui est présenté.
Un moyen d’échange avec le client
L’intérêt de l’utilisation d’un wireframe est aussi et surtout de pouvoir co-créer. En quoi ça consiste ? Ne pas présenter directement un produit 100% fini dès le départ, qui a une chance sur deux de ne pas plaire. Ici, on priorise plutôt la réflexion commune de ce qu’on veut réaliser pour le site, pour sa structure. Il est primordial, sur de tels projets, que tous les acteurs soient impliqués dans l’avancement du projet, qu’ils puissent tous échanger dessus.
Le tout sans écarter la vision première de l’UX : penser utilisateur. Ceux qui utilisent ne sont pas ceux qui font, il ne faut donc pas oublier les analyses préalables comme le persona, l'audit, les tests utilisateurs…
Le carnet est au dessinateur, ce que le wireframe est à l’UX designer : son meilleur allié pour visualiser, imaginer, inventer ce qu’il souhaite faire pour améliorer l’expérience de l’utilisateur. Une fois la distinction faite avec le zoning et le prototype, on assimile rapidement cette manière de travailler l’expérience avant le design graphique. En échangeant régulièrement avec les différents acteurs du projet, le wireframe prend forme et se retrouvera, finalement, face aux yeux des utilisateurs.
Participer à la conversation