Mockup, wireframe

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 Les Clés du Product Management
 

Publié le 25 oct. 2015

Mis à jour le 28 févr. 2024

clipboardCopier le lien
Ecrit par
Hugo Geissmann
Hugo Geissmann Hugo, co-fondateur et PDG de Thiga, a débuté chez ATOS Origin en 2008, puis rejoint Xebia en 2010. Créateur de Xebia Studio, il a lancé Thiga en 2013 avec Alexandre pour promouvoir le Product Management en France. En une décennie, Hugo a marqué la communauté Produit française en lançant la Product Conference et contribuant au premier "contrat agile". Investisseur dans des startups comme Tabesto, Ottho, RenovationMan, Hugo est un acteur clé du secteur tech, participant à des ouvrages sur le Product Management.

Les prochains évènements

La Product Conf Paris

calendar

15 May 2024

Découvrir

Transformed Workshop by Marty Cagan

calendar

25 Apr 2024

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