read time

1 min

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 Agile Product Management
 

Publié le 25 oct. 2015

Mis à jour le 28 janv. 2022

clipboardCopier le lien
Ecrit par
Hugo Geissmann
Hugo Geissmann

Les prochains évènements

Le No-Code pour les PM

calendar

31 jan 2022

Découvrir

Comment se lancer dans le No-Code ?

calendar

31 jan 2022

Découvrir

Le No-Code pour construire des back-offices/SaaS

calendar

1 fév 2022

Découvrir

La Product Conf Paris

calendar

9 juin 2022

Découvrir

Filles_ordinateur

Envie de partager tes idées ?


Plus de 20.000 passioné.e.s du Produit viennent sur notre média chaque mois. Retours d’expérience, opinions clivantes, n’hésite pas à nous proposer des contenus.

 

Contacter la rédaction