Mockup, wireframe

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 décrivant 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, 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 être réalisés 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, et ainsi valider 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 :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *