De l’utilité de Prototyper
Vous avez peut être déjà eu l’occasion de mener des projets web en vous passant de la phase de prototypage, avec comme justification « c’est juste un site vitrine, on n’a pas besoin de conseils UX ». Cet argument, somme toute défendable dans le cadre d’un site ayant peu ou pas de fonctionnalités, l’est beaucoup moins dans le cas d’un site Web ou d’une application plus complexe.
En effet, le prototypage en 3 étapes permet de limiter le risque d’irréversibilité du projet. Dans le cadre d’une évolution par itération, cette étape est indispensable pour avancer dans le projet et l’amener à maturité avant de commencer le webdesign et le développement, qui sont les étapes les plus longues et donc coûteuses du projet. Ainsi, cette étape vous permettra de réduire le coût final de votre site Web ou de votre application.
Avant le prototypage, il faut se poser les bonnes questions !
Au démarrage de tout projet, il est indispensable que les équipes agence et client se réunissent afin de procéder à la phase de questionnement. Cette phase est déterminante dans le bon déroulement de votre projet, car elle invite l’ensemble des intervenants du projet à se réunir et soulever les questions préliminaires au démarrage du projet :
- Qui va utiliser mon application / mon site Web ?
- Dans quels contextes est utilisée mon application / mon site Web ?
- Quels services apporte mon application / site web ?
- Quel sera le contenu de mon application / mon site Web ?
- Quels sont les contenus prioritaires ?
Ces questions sont primordiales pour comprendre le fonctionnement global du projet, et définir ce qui est faisable ou non dans le périmètre offert par le budget et les délais de livraison du produit fini. C’est une étape d’échange qui permettra de définir la planification globale du projetet la raison d’être de l’application / du site Web.Une fois que l’équipe projet a répondu à ces questions, on peut passer à la première phase du prototypage : les sketch.
Phase 1 : les sketch
Les Sketch (ou zonings) sont des maquettes réalisées à l’aide d’un papier et d’un crayon. On peut également s’aider de post-its pour aller plus rapidement et jouer avec les différents éléments comme un puzzle. Cet échange ouvrira le débat sur la hiérarchisation et l’architecture de l’information et la position de chaque élément dans la maquette. Ainsi, l’agence pourra développer des concepts autour des différentes fonctionnalités exprimées, et des modes de navigation. Ce sera aussi l’occasion de définir un MVP (minimum Value Product), c’est à dire les fonctionnalités essentielles nécessaires à l’accomplissement de l’objectif du produit. Ce sera également l’occasion de cerner les attentes parfois non exprimées par le client, car elles sont implicites à ses yeux.
Phase 2 : les mockups ou wireframes
Les wireframes sont des prototypes plus avancés que les Sketch, ce sont des maquettes « fil de fer » à échelle réelle. Réalisées à l’aide de logiciels comme Balsamiq ou Axure, ces maquettes permettront de définir l’aspect fonctionnel du site Web / de l’application : quel comportement a telle page au scroll, quelles sont les étapes de connexion à l’espace mon compte etc… On maquette tous les écrans clés et les écrans type qui serviront de base pour le reste du site / de l’application. Ce maquettage permettra d’affiner le budget de développement de manière précise (on pourra définir le temps passé plus précisément que sur un devis « à l’aveugle ») et de faire évoluer la réflexion autour du projet, tant du côté du client que du côté de l’agence. Cette phase est également riche en échanges et nécessite d’établir un dialogue constructif. Lors de cette phase, l’UX designer conseille le client au quotidien afin de rendre le site accessible à tous, facilement, et avec une expérience claire et riche.
Phase 3 : les prototypes animés
Une fois les mockups terminés, vous pouvez passer au webdesign, mais le rendu maquettes reste statique et offre une vision parcellaire de l’expérience utilisateur. Pour palier à la froideur des pages en jpg, des applications vous permettent d’animer vos prototypes en définissant des zones cliquables et des pages d’atterrissage, comme Invision, Axure ou encore Atomic. L’animation des prototypes a l’avantage d’offrir au client une expérience immersive, qui lui donnera une idée assez précise du rendu final, en dehors des animations CSS ou javascript. Attention néanmoins à faire preuve de pédagogie, car certains interlocuteurs ne comprennent pas bien en quoi le développement est nécessaire, tant l’expérience peut se rapprocher de la réalité !
En résumé, le prototypage n’a que des avantages
- Il permet à l’équipe de se poser les bonnes questions, et à échanger.
- Il permet d’obtenir rapidement un support permettant l’échange et la naissance d’idées.
- Il permet d’amener votre site Web / application mobile à un stade de maturité plus avancé.
- Il permet de réduire les coûts du webdesign en limitant l’interprétation sur la conception du produit et donc éviter des allers-retours inutiles.
- Il permet de cadrer les coûts de développement dès les phases préliminaires au développement, avec des validations intermédiaires.
- Il permet au client d’avoir une immersion dans le projet via les prototypes animés.
Pour conclure, ne vous passez pas de l’étape prototypage qui peut vous sembler allonger le planning, mais qui en réalité vous permettra de gagner du temps par la suite, et assurera à votre projet une durabilité du fait de la réflexion engagée main dans la main avec l’agence qui vous conseille !
A lire également
Figma vol.3 : le process de validation client
Non classé • Méthodologie • ProtipsSketch-Invision vs. Figma Après plusieurs longs mois de résistance, nous sommes définitivement passés sur Figma, et c’est indéniable c’est un
Figma vol.2 : Les plugins
Méthodologie • ProtipsPour continuer notre série sur le logiciel Figma, nous allons nous pencher dans ce deuxième article sur ces petites extensions