À moins que vous ne développiez l’ensemble de l’application vous-même, vous allez devoir passer par la « terrible » étape du cahier des charges. Ceci consiste à coucher sur papier l’ensemble de l’application ainsi que ses règles de fonctionnement. C’est long, complexe et on oublie toujours des choses. Ce qui peut rapidement faire déraper le coût et/ou les délais d’un projet.
Comment construire la maquette fonctionnelle d’un site web ?
Dès le début, de nombreuses fonctionnalités nous sont venues en tête, surtout après la séance de créativité en groupe. Avant d’aller trop loin, nous avons retenu les fonctionnalités principales qui font l’attrait de Predeez. Suivant l’adage » une image vaut mille mots « , nous ne réalisons désormais plus de cahier des charges à proprement parler mais des « mock-up » – ou maquettes fonctionnelles – à l’aide de l’outil Balsamiq. La meilleure façon de donner vie à une idée ; la matière première des graphistes, ergonomistes, webmarketeurs, intégrateurs et développeurs qui travailleront (s’amuseront) sur le projet.
L’objectif ? Structurer et hiérarchiser les différentes fonctionnalités du site.
L’enjeu ? Faciliter la navigation de l’utilisateur pour la rendre la plus intuitive possible.
Concrètement, Balsamiq est une application web qui permet de glisser/déposer divers éléments sur une page afin de constituer une maquette des écrans que l’on souhaite. L’idée consiste à décrire très rapidement l’ensemble des écrans. Voici, par exemple, l’écran d’accueil de Predeez dans sa première version.
Et voici l’écran de connexion à la plateforme :
Il est également possible de réaliser des liens entre les maquettes. Cela permet de passer d’un écran à l’autre en cliquant.
En parallèle, nous agrémentons les « mock-up » de « user stories » (ou « récits d’utilisateur »). Les « user stories » permettent de détailler les scénariis auxquels pourra être confronté l’internaute naviguant sur Predeez. Elles traduisent la vision et le process « utilisateur » en répondant à quatre questions clés : Qui ? Quoi ? Pourquoi ? Comment ? Cette étape a notamment permis de mettre en évidence des incohérences fonctionnelles auxquelles il a fallu trouver des réponses.
Votre application web ne doit pas être parfaite pour être lancée
Dernière chose, n’essayez pas tout de suite de décrire l’application parfaite, garnie de toutes les options, qui répondra à tous les besoins. Vous aurez tout le temps d’enrichir votre produit une fois lancé…
Ce qu’il faut viser en premier, c’est ce que l’on appelle le PMV (Produit Minimum Viable).
Eric Ries en donne la définition suivante : “le PMV est la version d’un nouveau produit qui permet à une équipe de collecter sur les clients le maximum d’enseignements validés, et ce avec un minimum d’effort”.
En résumé, il s’agit de réaliser rapidement un prototype de produit minimal, afin de vérifier l’existence d’un besoin, d’identifier le marché associé, et de valider les hypothèses :
Comme tout travail préparatoire, la création de la maquette fonctionnelle est primordiale avant de se lancer à corps perdu dans la création graphique et le développement (au risque de perdre beaucoup de temps…). Pour renforcer cette étape, et rendre la maquette « mature », nous avons réalisé plusieurs séances de travail espacées dans le temps.
Une fois les maquettes terminées, place au graphisme !