À retenir:
Un prototype est une maquette interactive.
En utilisant un prototype, on peut découvrir des points de friction avec le produit.
Il permet de confirmer que les demandes des parties prenantes ont été intégrées.
Quand on veut lancer un site web, un logiciel ou une application, il y a beaucoup de préparations à faire – comme dans tout projet dans le fond.
Je voulais souligner l’importance de bien préparer chacune des étapes en amont. Je vais vous parler de l’une d’elle en particulier qui est selon moi primordiale: faire un prototype et le tester avec votre cible.
Qu’est-ce qu’un prototype?
Très connue dans « le monde de la tech » (oui, j’aurais pu utiliser une appellation plus professionnelle), le prototypage permet de tester un design. Quand je dis tester, je veux dire que des utilisateurs peuvent utiliser le produit – le produit étant ici, un site web, un logiciel ou une application web.
Pour faire simple, un prototype est une maquette interactive. Selon comment vous le paramétrer, le prototype peut avoir toutes sortes d’interactions: sélectionner un case à cocher, ajouter un produit à une wishlist, etc. Bien sûr, ces interactions sont superficielles et il faut les paramétrer.
Un prototype est une solution bon marché pour tester une hypothèse, une idée, un projet digital avant de se lancer dans le développement. Pensez à toutes les ressources qui peuvent être sauver avec un prototype: on peut modifier le design global, les interactions et la navigation avant même de commencer le développement. Dans certains projets, ces éléments ont un impact crucial sur la façon dont un projet est développé. Il permet aussi de réduire les allers-retours entre les développeurs et les designers, parce qu’il donne la direction esthétique et fonctionnel en amont.
Passer du temps sur la maquette et le prototype est au final un gain de temps et de ressources dans la réalisation globale d’un projet.
À quoi sert un prototype?
Grâce à cette étape, plusieurs éléments peuvent être validés:
- Les équipes de design et de développement peuvent confirmer que les designs proposés peuvent être développés sur la plateforme choisie, ou avec le langage de développement choisi. C’est aussi à ce moment que les designers peuvent proposer des alternatives selon les recommendations des développeurs qui pourraient voir des obstacles techniques à développer le design proposé. De petites modifications de design sont parfois un gain de temps considérables pour les développeurs, sans compromettre l’objectif final d’un projet. Les projets sont toujours soumis à des contraintes de temps, d’argent et techniques.
- Le design peut être testé par les utilisateurs concernés. Vous construisez un ERP sur mesure qui sera utilisé par les commerciaux? Assurez-vous que le design de l’ERP est à leur service. Il peut être difficile de modifier la façon de travailler de collaborateurs dans une entreprise, surtout quand ça implique un nouveau logiciel. L’utilisation peut être intimidante et le manque de temps est un obstacle à l’intégration d’un nouvel outil dans sa routine de travail. Je travaillais dans une entreprise pour laquelle un ERP sur mesure avait été développé sur plusieurs années (sur 2/3 ans il me semble). Une fois les principales fonctionnalités développées, l’ERP fut lancé. Malgré un système bien pensé – cet ERP répondait à un certain nombre de lacunes dans la gestion de l’information dans l’entreprise – les commerciaux ont eu du mal à utiliser le logiciel. C’est normal dans la phase d’intégration d’un nouvel outil que cela prenne du temps, toutefois on peut réduire cette période en adaptant l’interface utilisateur* à sa cible, à ses besoins et à ses problématiques. Si les équipes qui développent un produit ne sont pas sensibilisées à ces problématiques, le design est mis de côté, et cela peut avoir une conséquence capitale sur le succès du produit.
*Interface utilisateur: en anglais User Interface ou UI. C’est tout ce qui prend en compte le design visuel: les couleurs, la typographie, la disposition des éléments, la hiérarchisation du contenu ainsi que les micro-animations, par exemple un bouton qui change de couleur quand on passe la souris dessus.
Différence entre un prototype et une maquette
Tout commence avec une maquette, puis on transforme la maquette en un prototype en l’animant.
Avec Figma* par exemple, on commence par faire une maquette. Puis après, on passe à l’étape « prototype » qui permet d’ajouter des interactions, comme faire défiler une page, passer à un autre écran quand on clique sur un élément, ajouter une fenêtre pop-up quand on change d’écran, etc.
On a beaucoup d’options avec ce logiciel, et cela permet de construire un prototype assez proche de la réalité pour pouvoir ensuite le tester avec sa cible d’utilisateurs.
Exemple: vous voulez lancer un site qui aide les personnes de plus de 55 ans vivant en Belgique à préparer leur retraite.
Assurez-vous de faire tester votre prototype à des femmes et des hommes de plus de 55 ans vivant en Belgique, et penser peut-être même créer un prototype en français, un en allemand et un en néerlandais.
*Figma: c’est un des logiciels de design qui permet de faire des wireframe et des prototypes les plus utilisés du moment. C’est un outil disponible en ligne et qui a une version gratuite.
Différence entre un wireframe et un prototype
Un wireframe est similaire à une maquette. Il ne contient pas encore tous les détails finaux, comme les photos finales, les textes finaux, etc.; mais il permet d’avoir une idée de ce à quoi va ressembler la structure finale d’une page.
Comme la maquette, le wireframe n’est pas interactif alors que le prototype l’est.
Comment fabriquer un prototype?
Il y a plusieurs façon de fabriquer un prototype pour un produit digital.
Il semble toutefois que les logiciels de conception les plus utilisés sont Figma, Adobe XD et Sketch.
J’utilise Figma et c’est un outil très complet qui permet de faire des wireframe et des prototypes. Il semble que Adobe XD et Sketch ont aussi le potentiel de créer des maquettes interactives, donc des prototypes 🙂
Pour en savoir plus sur les outils disponibles pour faire des prototypes, voici un un article détaille rédigé par l’agence La Grande Ourse.
Sources:
https://blog-ux.com/quest-ce-que-lui-design/
https://www.mailabs.fr/design/ui-design/
https://lagrandeourse.design/blog/outils/quels-outils-pour-un-prototypage
et mon expérience personnelle 🙂
Laisser un commentaire