par Vilya, Responsable du pôle Web Design & Intégration à l’Agence Dn’D
Aujourd’hui, l’usage quasi quotidien des devices mobiles amène les designers à créer, repenser, expérimenter des interfaces adaptées pour chaque device (mobile, tablette, smartwatch, etc). Ils réfléchissent à la conception d’une expérience, l’adaptent ou la modifient selon les conditions d’utilisation, selon l’appareil employé.
La qualité de l’expérience utilisateur d’un produit va dépendre de nombreux facteurs. Elle peut être influencée par la qualité du design, par son intuitivité et son inventivité. Cependant, il faut garder en tête qu’elle reste étroitement liée au but de votre produit : répondre aux attentes et aux exigences de vos futurs utilisateurs.
Pour offrir la meilleure expérience utilisateur, vous aurez besoin de tester vos solutions rapidement afin de déterminer si vous êtes sur la bonne voie ou s’il faut faire machine arrière et passer à autre chose. C’est à ce stade que nous pouvons faire intervenir le prototype.
Mais avant d’aller plus loin, qu’est-ce qu’un prototype ?
Le prototype
Selon le contexte, nous pouvons deviner une image assez précise de ce qu’est un prototype. Voici trois définitions de ce terme afin d’en avoir une vision globale et ne pas se limiter au secteur du design.
“Un prototype est selon la définition de l’OCDE « un modèle original qui possède toutes les qualités techniques et toutes les caractéristiques de fonctionnement d’un nouveau produit. (…) », mais il s’agit aussi parfois d’un exemplaire incomplet de ce que pourra être un produit ou un objet matériel final.” – Wikipedia
“Premier exemplaire construit d’un ensemble mécanique, d’un appareil, d’une machine et qui est destiné à en expérimenter en service les qualités en vue de la construction en série.” – Larousse
“In software development, a prototype is a rudimentary working model of a product or information system, usually built for demonstration purposes or as part of the development process.” – TechTarget
La dernière définition est la plus appropriée à notre domaine d’activité. L’idée que nous pouvons en retenir est la suivante : un modèle non définitif sur lequel s’appuyer au cours de la phase de création, aboutissant à un produit fini. Il s’agit donc d’un outil à inclure au bon moment dans vos processus de création. Il vous permettra de jongler facilement entre les phases de maquettes, les échanges en interne et les phases de tests sur différents devices par exemple.
Quel type de prototype, à quel moment ?
Selon votre workflow et vos deadlines, vous aurez la possibilité d’inclure plusieurs types de prototypes tout au long du processus de création.
Voici les trois principaux :
• Le prototype papier, à partir de roughs ou d’outline mockups
Ce type de prototype, que certains utilisent beaucoup, vous permet de vous lancer dans du wireframing à la main et de tester rapidement les premières idées de fonctionnalité et de layout.
Wireframing simple sur papier (Refonte Cop. Copine 2015)
• Le prototype fonctionnel, à partir de wireframes
Ce type de prototype vous permet de tester un ensemble de pages, les premières fonctionnalités et de vous placer dans des conditions réelles d’utilisation. Les tests se révèlent très immersifs grâce aux animations, à une navigation scénarisée, à la manipulation en direct sur device, etc. Vous pourrez, à ce moment là, commencer à recueillir les premiers feedbacks et identifier très tôt les premiers problèmes.
Test de la navigation latérale sur mobile (Refonte Cop. Copine 2015)
• Le “high-fidelity prototype”, à partir des maquettes
Le principal intérêt de ce prototype est de donner un aperçu du produit “final”. Il permettra aussi d’avoir un rendu des effets plus complexes qui seront réalisés et du comportement de certains éléments (effets de transition, déploiement de la navigation, etc.). Ce prototype offre un réel gain de temps en comparaison des prototypes entièrement codés à la main. Ils vous serviront à animer vos présentations, les rendant plus interactives que de simples présentations de fichiers .jpeg.
Navigation sur le prototype desktop (Refonte Cop. Copine 2015)
En agence ou en freelance, le prototype permet aux designers d’améliorer l’UI et l’UX d’un produit. Quelles sont les autres raisons poussant à l’inclure dans le workflow d’une équipe composée de développeurs, d’intégrateurs et de chefs de projets ?
Des plateformes et des outils faits pour collaborer
Vous trouverez un bon nombre de plateformes dédiées à la création de prototype sur le web. Quelques-unes vont se distinguer par leur panel d’outils et répondront à des besoins plus précis, comme Atomic, FramerJS, InVision, Marvel, Principle ou encore Proto.io,.
Gestion des “screens” composant un prototype sur InVision
En plus de créer vos prototypes, ils faciliteront l’intervention des différents acteurs du projet en permettant d’échanger avec eux sur une même plateforme.
Vous aurez la possibilité de regrouper les feedbacks des designers, de déterminer la faisabilité d’une fonctionnalité avec les développeurs, de partager le prototype avec les chefs de projet et de proposer des démonstrations sur device à vos clients. La qualité des retours est ce qui nous a principalement rassuré dans notre volonté d’inclure ce nouvel outil dans nos processus. Ces derniers sont nettement plus précis, les échanges avec le client sont facilités et l’identification des petites coquilles est instantanée.
Échanges via commentaires et annotations des maquettesDe manière générale, voici une liste succincte des fonctionnalités les plus intéressantes que nous avons pu tester jusqu’à maintenant :
• synchronisation et mise à jour automatique des maquettes (via Dropbox, Google Drive, app dédiée)
• centralisation des ressources sous forme de style guide
• implémentation d’outils de user testing sur la plateforme (via User Testing, Lookback, Validately)
• export du prototype pour une utilisation offline
• mise à disposition de transitions et d’effets plus ou moins complexes
• génération de code (JavaScript, HTML et CSS)
• génération des assets pour les développeurs et intégrateurs
• liveshare dédiée aux présentations en confcall
• intégration à Slack
Ces plateformes se révèlent de plus en plus complètes au fil du temps et répondent à des besoins de plus en plus diversifiés. Ce sont donc des outils à adopter et à surveiller de près. N’hésitez pas à souscrire à leurs newsletters afin d’être informé des nouvelles features !
Nous avons pu constater que ces plateformes se révèlent d’une grande utilité. Elles peuvent se placer en tant qu’élément central dans la conception d’un projet, autour duquel, plusieurs métiers peuvent échanger. Un outil qui peut très vite devenir indispensable pour vos workflows !
Bonne découverte à vous !