Découvrez la recette pour des wireframes efficaces

Lors de la conception, les wireframes, également appelées maquettes fonctionnelles ou maquettes « fil de fer », sont indispensables pour assurer la communication avec le client et les équipes de développement. C’est généralement l’expert UX qui est en charge de leur définition. Il profite de ce statut pour jouer le rôle de facilitateur entre les différents corps de métier.

Wireframes annotés

Des wireframes précises

Généralement, les wireframes ne possèdent ni couleurs, ni éléments grahiques complexes. Cette apparente simplicité ne veut pas dire qu’il s’agit de brouillons ! En fait, leur objectif n’est pas graphique mais bien fonctionnel : le wireframe permet de définir quelles sont les informations à proposer, où et comment les afficher.

Attention, même s’il ne s’agit que de croquis, les wireframes doivent refléter au plus proche le type d’information affichée, leurs proportions et les moyens d’affichage employés.

… avec des contenus réels

Afin de gagner en efficacité, les contenus des wireframes doivent être les plus fidèles à la réalité. Cela permettra de plus facilement communiquer le contexte d’utilisation et les particularités liés aux contenus, qui plus est de rendre vos interfaces plus explicites et évaluables lors de sessions utilisateurs.

Donnez des précisions sur les interactions

Généralement, les wireframes sont statiques et ne présentent que quelques éléments d’interaction. Bien sûr, de nombreux outils performants vous permettront d’aller très loin en terme de dynamisme, néanmoins vous ne pourrez pas maquetter tous les cas de figure.

Afin d’éviter d’éventuels biais d’interprétation, il est essentiel d’accompagner vos wireframes de notes et commentaires pour décrire ces interactions. Ces derniers peuvent être de nature multiples : fonctionnel, technique ou métier selon qu’ils décrivent un comportement suite à une action, une fréquence de rafraichissement, un classement par défaut, un format de donnée affiché ou une règle de calcul, etc.

N’oubliez pas, il est important de « raconter vos maquettes« . Les wireframes doivent alimenter un storytelling qui facilitera la projection dans le nouveau système.

Quels outils ?

Il existe de très nombreux produits en fonction de ce que vous souhaitez faire.

Nous utilisons généralement Balsamiq, car il est simple d’utilisation et permet de réaliser des maquettes efficaces très rapidement. Si vous souhaitez réaliser des prototypes plus complexes et aller plus dans le détail dans vos interactions, vous pouvez tentez l’aventure Axure.

N’hésitez pas à faire votre marché sur la toile, les outils prolifèrent avec beaucoup de bonnes surprises. Nous avons d’ailleurs découvert récemment un outil surprenant entièrement réalisé en HTML5 : moqups.

Un très bon listing d’outils a été réalisé par smashingbuzz il y a peu.