Origines de “wireframe” : terme utilisé par Jakob Nielsen dès 1993 dans son ouvrage Usability Engineering pour désigner la conception de la partie graphique de l’interface homme-machine.
Les wireframes et mockups sont des outils permettant de modéliser l’interface d’un produit ainsi que le parcours utilisateur.
Le wireframe (littéralement: “fil de fer”) est une description schématique. Il décrit les écrans d'un application de manière succincte ; une sorte de squelette qui préfigure de la logique globale d’agencement de chaque écran ainsi que de leurs enchaînements.
Le mockup est une maquette plus aboutie qui évoque de manière fidèle le look & feel de l’interface : si le wireframe est le squelette d'une interface, le mockup en est la « peau ».
Ces approches permettent de matérialiser de manière précise les comportements attendus pour ce qui est de l’interface de l’utilisation du produit. Ils complètent ainsi les autres éléments de spécifications (éléments techniques, User Stories et test d’acceptation associés) qui pourront aller plus loin dans la description, en précisant notamment les règles métier de fonctionnement ne se traduisant pas dans l’interface utilisateur.
Ces éléments sont traditionnellement réalisés par un Designer. Il est guidé par un besoin fonctionnel plus ou moins précis en fonction de la maturité du besoin. Cependant, en fonction de ses appétences pour le design, le Product Owner peut également les prendre en charge s'il a une idée précise de l'interface attendue. Attention cependant : le design d'experience utilisateur est un discipline comme une autre, et la réalisation ne serait-ce que d'un wireframe par un Product Owner peut biaiser le travail de création d'un designer.
Certains mockups peuvent également se réaliser sous la forme de prototypes simulant les fonctionnalités : il s’agit alors de maquettes. Des outils* permettent de prototyper rapidement des interfaces pour réaliser des tests utilisateurs. Ils valident ainsi certaines hypothèses à moindre coût avant d’engager de réels développements.
*Un ThigAdvice concernant les outils de mockupage: on aime :
- Balsamiq mockups
- Axure
- Sketch
- Omnigraffle
- Proto.io
Pour aller plus loin : Téléchargez notre livre Les Clés du Product Management
