Comment réaliser vos prototypes et maquettes digitales

04/11/2015, publié par Stevy Matton
maquette et prototype digitaux

Dans un précédent post, j’évoquais toute l’importance de la phase de prototypage pour la conception de vos services digitaux. Il me semblait nécessaire d’insister sur cette étape, et surtout d’évoquer quelques méthodes et outils pour qu’elle remplisse son objectif : vous faire économiser de l’argent !

Un prérequis à la maquette : le story-board

Le but du prototype est de reproduire le plus fidèlement possible l’expérience utilisateur. Aussi, la rédaction d’un story-board décrivant les étapes du parcours utilisateur est essentielle. Court et explicite, il ne doit pas comporter plus de 10 étapes pour être compréhensible dans son ensemble. Le cas échéant, subdiviser votre story-board en plusieurs parties de 8 à 10 étapes… et réaliser autant de maquettes. L’outil le plus flexible pour le story-board ? Le papier, le crayon et la gomme. N’oublions pas notre objectif : rapide et peu coûteux !

Créa minimaliste mais texte réel

Une créa minimaliste du produit final suffit au prototype. Vous pouvez créer un univers graphique cohérent au travers d’un jeu de couleurs défini et d’une barre de navigation permanente que vous répétez sur tous les écrans du prototype. Cependant, ne perdez pas de temps à finaliser trop finement l’aspect graphique : le retour que vous attendez des utilisateurs concerne la cohérence de votre produit dans son utilisation. À cette étape, un « j’aimerais avoir la liste des produits en cliquant sur ce bouton » ou un « pourquoi ne pas me rappeler mes précédents choix à ce stade ? » sera bien plus utile que « je n’aime pas l’utilisation d’illustrations plutôt que de photos ».
A contrario, utilisez des textes réels, clairs et précis pour décrire les produits digitaux et les actions utilisateurs sous-jacentes. L’utilisation du lorem ipsum ne m’apparaît pas comme un gain de temps ni d’argent à ce stade. Il sera plutôt source de déconcentration dans l’évaluation de la maquette, conduira à des incompréhensions et donc coûtera cher à l’arrivée. Le choix de mots précis vous sera également précieux. Il mettra l’équipe conceptrice face à ses éventuelles contradictions : pouvoir nommer précisément une action ou un effet recherché est preuve de cohérence et de pertinence dans la conception.

Powerpoint sur PC, Keynote sur Mac pour vos maquettes et prototypes

Peu coûteux, rapides, permettant l’animation (bouton à cliquer, transition, liste), exportables sur PDF pour visualiser l’effet sur un mobile, ce sont à mon avis les bons outils pour élaborer vos prototypes. Autre avantage : ils sont très répandus et faciliteront le travail collaboratif.

Un collecteur, un polisseur et de multiples contributeurs

La réalisation de la maquette n’est pas l’apanage d’un designer ou d’un concepteur mais bien d’une équipe entière. N’hésitez pas à distribuer la réalisation des écrans de la maquette, avec comme fil conducteur le story-board. Plus vous aurez de contributeurs, plus rapide sera sa réalisation. Pour que l’équipe avance en bonne intelligence, 2 rôles clés sont à assigner :

  • le collecteur : en charge de collecter et d’assembler l’ensemble des travaux produits au sein d’une maquette cohérente;
  • le polisseur : en charge de la retouche et de la finition de l’ensemble afin d’y apporter cohérence graphique et visuelle. Le but ici est d’éviter les diversions liées à des incohérences, des coquilles, de mauvais enchaînements d’écrans ou des défauts trop flagrants.

En utilisant ces techniques, la réalisation d’un prototype peut être concentrée sur 2 ou 3 jours. La prochaine étape sera de mobiliser les bons acteurs internes et externes pour son évaluation. Mais ceci est un autre sujet.