Projet digital : la phase de wireframes

Rappel : on a décidé de repartir des bases du projet digital car sans bonne base, on ne peut rien construire de très solide. Alors après avoir parlé du contexte et attaqué la rédaction du cahier des charges, arrêtons-nous un instant sur la réalisation des wireframes.

Wireframe en français ça donne quoi ?

Et bien on parle d’une maquette fil de fer, mais personnellement je ne trouve pas la version française plus parlante que l’originale. Donc lorsque l’on aborde le sujet avec nos clients, on l’explique comme un schéma fonctionnel des écrans d’un site web ou d’une application mobile. Pas assez clair ? OK, on va simplement dessiner les écrans pour placer les différents blocs de contenu et identifier les zones d’action : navigation, sliders, boutons… [caption id="attachment_1538" align="aligncenter" width="600"] Elle est pas belle ma wireframe ? Bon, en fait c'est celle de Chris Bannister[/caption]

Jamais sans ma wireframe

Ou pourquoi les wireframes sont aujourd’hui incontournables. On l’a vu en détaillant la rédaction d’un cahier des charges, il est parfois difficile de penser à tout lorsque l’on rédige. En schématisant les écrans, on visualise les différents éléments et on identifie plus facilement les oublis et les incohérences. Les wireframes sont aussi à la croisée des chemins entre le fonctionnel, le SEO, la transformation et l’expérience utilisateur. On doit concevoir cette phase en partant des objectifs et besoins identifiés sur ces différents composants. Dépouillées de l’aspect design, la wireframe permet de se consacrer à l’essentiel et de se poser les bonnes questions : est-ce que mon action principale est identifiée, est ce que l’on respecte le parcours utilisateur anticipé, etc. La wireframe est enfin un outil puissant pour concevoir facilement les différentes versions d’un même écran : desktop, tablette, mobile. L’idée est d’identifier en amont les écrans les plus représentatifs / structurels pour les attaquer en premier puis dérouler sur leur déclinaison.

Alors la wireframe remplace la maquette ?

Surtout pas ! La maquette permet de travailler et de valider le design et l’adaptation de la charte graphique, tandis que la wireframe permet de placer les éléments et de vérifier la cohérence d’un parcours complet. Il est d’ailleurs beaucoup plus aisé de modifier une wireframe qu’une maquette, d’où l’importance de la phase de wireframing qui va réellement permettre de gagner un temps fou sur les phases ultérieures. Une tentation, lorsque l’on conçoit une wireframe, est de la rendre « jolie » et de tendre sans s’en apercevoir vers la maquette. Erreur ! La décision et la discussion risque de se porter vers la couleur, l’iconographie ou des éléments de design alors que le but est de regarder le fonctionnel.

Le bon outil

Les logiciels modernes permettent non seulement d’aller vite mais aussi de suivre les standards en piochant parmi des blocs fonctionnels. C’est particulièrement intéressant sur la partie mobile car suivant le projet d’application mobile, on peut distinguer le design iOS de celui d’Android qui suivent des normes qui peuvent différer. Il existe pléthore d’outils sur le marché, gratuit ou pas, généralistes ou spécialisés, etc… On trouve avec un brin de recherche sur son moteur préféré des listes des « meilleures » applications. Chez TPZ, on utilise généralement XD, Sketch ou Lucidchart suivant le type de projet. Les deux premiers permettent d’évoluer facilement vers la mockup (interaction dans la wireframe pour simuler le parcours utilisateur et mettre en avant les zones d’actions possibles) tandis que le dernier est également un outil de diagramme et de gestion de flux relativement complet. Si vous voulez faire un peu de sémantique je vous recommande un article très clair sur les différences entre zoning, wireframe, mockup et prototype. Vous êtes convaincus ? Nous on adore faire des wireframes, alors n’hésitez pas à nous interroger sur l’AMOA (assistance à la maîtrise d'ouvrage : spécifications avant développement), c’est une des phases les plus enrichissantes d’un projet digital !