Wireframe, prototype, maquette – quelle est la différence ?

Wireframe, prototype, maquette – quelle est la différence ?

Je me suis rendu compte que beaucoup de mes collaborateurs utilisaient les noms de mes livrables de conception comme synonymes. Ils ont supposé qu’un wireframe, un prototype et une maquette étaient plus ou moins la même chose – une sorte de croquis grisâtre et encadré représentant une idée ingénieuse. Le problème avec cette vision erronée est qu’ils ne savent jamais vraiment à quoi s’attendre du travail des UX designers et sont souvent confus. “Pourquoi n’est-ce pas cliquable ?“, “Eh bien,  je ne savais pas que je devais cliquer ici …” – ce genre de commentaires sont communs dans la phase de conception d’un projet. Confondre des wireframes avec des prototypes, c’est comme supposer qu’un plan architectural et une maison d’exposition sont la même chose.

 

 

Une maison d’exposition et un plan sont différents moyens de communication dans le domaine de l’architecture : un plan doit spécifier comment le bâtiment devrait être construit, alors qu’une maison d’exposition fournit un aperçu du bien à ses futurs résidents.  Ce comparatif peut être appliqué aux wireframes, prototypes et maquettes. Ils semblent différents, ils communiquent quelque chose de différent et ils servent des objectifs différents. Une maison d’exposition et un plan ont quelque chose en commun cependant : ils représentent tous les deux le produit final. Et là encore ce comparatif peut être appliqué aux wireframes, prototypes et maquettes puisque tous ces documents sont des formes de représentation du produit final.

 

Wireframe

1.     Qu’est-ce qu’un wireframe ?

Un wireframe est une représentation basse fidélité de l’application. Cela doit clairement montrer les principaux groupes de contenu, la structure de l’information, une visualisation de base de l’interaction utilisateur-interface.

Le wireframe est l’épine dorsale de la conception et rappelez-vous que le wireframe devrait contenir une représentation assez fidèle du produit final en terme d’ergonomie et de fonctionnalités. La «représentation» du produit est un terme crucial ici. Vous ne pouvez pas entrer dans trop de détails au niveau graphique ou en terme d’animations, mais d’un autre côté, vous devez créer une représentation solide de la conception finale qui intégrera l’ensemble du contenu et des fonctionnalités importantes. Il s’agit de définir l’architecture de l’ensemble du projet. Ce wireframe servira de référence visuel à l’ensemble des différents intervenants qui travaillent avec vous : développeurs, UI designer, chefs de projet…sans oublier votre client. Il est donc obligatoire de produire des wireframes aboutis, réfléchis. C’est la première référence visuelle du produit. La visualisation se doit d’être esthétique dans sa composition, mais grandement simplifiée. Noir-gris-blanc sont les couleurs typiques que vous utiliserez (vous pouvez ajouter du bleu pour spécifier les liens). Les images en rectangle, le texte en latin, les pictos simples et généralement fournis par les logiciels.

 

2.     Quand utiliser des wireframes ?

Les wireframes sont généralement utilisés comme documentation du projet. Comme ils sont statiques et corrigent une interaction avec une interface à un moment précis, ils doivent être accompagnés d’annotations (de courtes notes expliquant l’interaction, une documentation technique complexe, ou des spécifications fonctionnels – les fameux SPEC !). Cependant, ils pourraient aussi être utilisés de manière moins formelle. Comme ils sont rapides et simples, ils peuvent êtres utiles pour la communication interne de l’équipe. Si les développeurs demandent comment quelque chose doit être fait, la réponse peut être fournie sous la forme d’un wireframe créé rapidement, cela permet de s’y projet rapidement et d’avoir un visuel de la solution envisagée et d’éviter une rédactions technique laborieuse. Les wireframes placés dans le contexte de l’ensemble de la production d’une application sont indispensables en tant que première étape de projets complexes. Généralement je produis des wireframes comme première proposition suite à l’expression d’un besoin client, d’une solution suite à des interview ou une observation utilisateurs. Le wireframe est pour moi le support premier qui sert comme élément central à l’ensemble de la production : ergonomie du produit, référence visuel pour les designer, compréhension des fonctionnalités pour l’équipe technique et définition du budget.

 

Prototype 

1. Qu’est-ce qu’un prototype ?

Un prototype, souvent confondu avec un wireframe, est une représentation à haute fidélité du produit final qui simule l’interaction de l’interface utilisateur. Cela doit permettre à l’utilisateur de tester les interactions principales de l’application d’une manière similaire au produit final.

Un prototype est une simulation de l’interaction finale entre l’utilisateur et l’interface. Il peut ne pas ressembler exactement au produit final, mais doit être très similaire : des visuels correspondant à la charte iconographique, un design soigné, des transitions d’interfaces travaillées. L’objectif est de se rapprocher au maximum de l’expérience utilisateur finale. Par-contre L’interdépendance entre les mécanismes d’interface et de backend est omise afin de réduire les coûts de production.

 

schéma du process de production

2. Quand utiliser un prototype ?

Les prototypes sont utilisés lors des tests utilisateurs. Une telle simulation des interactions finales forme un excellent support pour vérifier la facilité d’utilisation de l’interface proposée avant de lancer le développement de l’application. L’utilisation de wireframes n’est généralement pas la meilleure solution dans la réalisation de tests utilisateurs du produit car la compréhension de l’interface n’est pas évidente : elle est minimaliste, schématisée et non designée. Par contre, un prototype est la forme la plus attrayante de la documentation de conception car l’interface est tangible, directe et peut être extrêmement proche du produit final. Cependant le prototypage est plutôt une forme de communication coûteuse car relativement longue à produire. Il est préférable de créer des prototypes qui peuvent être par la suite réutilisés dans la phase de développement. Fait correctement et combiné avec les tests utilisateurs, le prototypage peut être rentabilisé à condition de partir dans la bonne conception dès le début ! Sinon, malheureusement… il faut repartir de zéro.

 

Marvel  est un outil idéal pour créer des prototypes

 

Maquette 

1.     Qu’est-ce qu’une maquette?

Une maquette est une représentation de haute fidélité de l’application. C’est la représentation visuelle statique de l’application avant que celle-ci ne passe en développement. Le designer en charge de cette étape de production se servira d’ailleurs des wireframe réalisés en amont par l’UX designer afin de réaliser ses maquettes. Souvent le client est beaucoup plus impliqué dans cette étape de production car c’est à ce moment là ou il a l’impression de visualiser réellement son produit : il découvre son vrai logo, sa charte graphique, son contenu. Bref un peu de concret !

2. Quand utiliser une maquette ?

Parfois dès le début de projet si c’est un projet très simple avec peu de budget, mais c’est rare et risqué. Généralement les maquettes sont produites lorsque la conception est validée suite à des tests utilisateurs. Pas avant. Sinon c’est prendre le risque de faire perdre du temps à toute l’équipe en cas de changement : retravailler la conception, solliciter à nouveau les développeurs dans l’estimation de charge, designer les nouvelles évolutions. Le pire scénario qu’il puisse exister c’est probablement de modifier les maquettes alors que le développement est lancé. La catastrophe.

 

Alors que choisir ?  

Avant de choisir un moyen de communication dans le processus de conception, vous devez :

  • Spécifier le problème que vous essayez de résoudre.
  • Apprendre à connaître et comprendre votre cible en faisant des interview utilisateurs, en organisant des workshop, en définissant vos personas et vos users stories.
  • Analyser la concurrence sectorielle.
  • Définir les exigences globales du produit et ses objectifs premiers.

Si vous ne passez pas par ces étapes vous risquez de perdre un temps précieux.

Maintenant, réfléchissez au livrable qui vous conviendra le mieux dans votre workflow. Qu’est-ce qui est le plus adapté ? Documentation formalisée, croquis informels, discussions en mode brainstorming ? Avez-vous du temps, du budget et des connaissances techniques pour produire des prototypes ? De simples wireframe peuvent-ils suffire ? Avez-vous prévu de faire des tests utilisateurs ? Vous êtes confiant et partez directement dans le design d’interfaces ? A vous de voir. De mon côté je m’efforce à produire des wireframe des hautes qualités accompagnés d’une solide documentation technique.

Si vous cherchez de votre côté des logiciels pour produire des wireframe ou des prototypes, je vous conseille d’aller faire un tour sur cette synthèse d’outils.

 

 

Benjamin Horvais, UX Product Manger

MVP : 5 astuces pour lancer un produit

MVP : 5 astuces pour lancer un produit

Si le lancement de nouveaux produits était facile, vous liriez probablement cet article via votre Google Glass ou sur Amazon Fire Phone.

Lire l'article

Benchmark UI de CRM…des idées fonctionnelles et créatives

Benchmark UI de CRM…des idées fonctionnelles et créatives

Une sélection d’interfaces de CRM réalisées par la communauté Dribble. Inspiring !

Lire l'article

Comment rédiger un cahier des charges ?

Comment rédiger un cahier des charges ?

Le cahier des charges permet avant tout de définir un premier scope de production. La première pierre à l’édifice.

Lire l'article