Pourquoi faire un prototype avant de développer un site web ou une application mobile ?

Qu’est-ce qu’un prototype ?

Par définition, un prototype est le premier exemplaire d’un produit industriel. D’abord utilisé dans la création de logiciels lourds, cette technique est aujourd’hui recommandée par les professionnels du web.

En effet, c’est un étape indispensable dans le métier d’un UX designer. Cette méthode consiste à élaborer des prototypes de l’interface finale d’un site web ou d’une application mobile.

Il existe plusieurs niveaux de réalisation, du plus grossier (zoning, croquis) au plus élaboré (wireframe, mockups). C’est à vous de choisir lequel sera le plus pertinent suivant votre projet ou son état d’avancement.

Les différents types de prototypes

Maquette, mockup, wireframe, zoning, prototype… plusieurs termes que beaucoup confondent faute de définition claire. Voici donc une définition simple de chacun d’eux, cela devrait vous éclairer.
 

• Le zoning : c’est la méthode de conception la moins élaborée, elle consiste à schématiser une page sous forme de blocs de contenu grossier afin de déterminer l’organisation de la page et de son contenu.

• L’arborescence fonctionnelle : il s'agit de représenter visuellement les imbrications et les connexions entre les différents gabarits composants le support interactif, ce qui revient à en illustrer le fonctionnement. Ce n'est pas à proprement parlé une méthode de conception, mais plus une vision de l'activité, qu'il faut questionner.

• Le wireframe : se fait généralement après le zoning et permet d’intégrer le vrai contenu de la page afin de montrer les fonctions de celle-ci. Son objectif est avant tout fonctionnel.

• Le mockup : c’est tout simplement un wireframe transformé en page HTML. Il permet de se projeter, car une fois la page dynamique on peut naviguer entre les pages, tester des formulaires…

• La maquette : c’est pareil que le mockup...avec des couleurs. Son but est de permettre de se projeter et de tester aussi bien le fond (le contenu) que la forme (le design). En ajoutant les bonnes couleurs et les bonnes images, vous pourrez avoir un aperçu plus réaliste de votre futur site ou application.

• Le prototype : permet de se focaliser sur le fond en testant les fonctionnalités. Il permet de décider avec quelles technologies les informations seront affichées, quel langage il faudra utiliser… Son but est avant tout fonctionnel. Un prototype est généralement unique (soit abandonné par la suite, soit fait pour évoluer), contrairement aux wireframes et maquettes qui peuvent être multiples.

Pourquoi faire un prototype ?

Maintenant que vous connaissez la différence entre toutes ces techniques, il est temps de se pencher sur la question du pourquoi. Pourquoi est-il si important de faire un prototype ? Pourquoi ne pas développer sa plateforme directement sans passer par toutes ces étapes ?

Il est primordial de faire un prototype car celui-ci servira de base à la phase de conception de votre site ou de votre application mobile. Suivant le projet, il sera parfois nécessaire de faire tester l’interface à des utilisateurs réels afin d’être sûr qu’elle est user friendly, c’est à dire qu’elle est compréhensible, agréable et facile d’utilisation pour les utilisateurs. Sachez qu’il est beaucoup plus coûteux, long et frustrant de faire des changements dans le code plutôt que dans la conception.

Les avantages du prototype sont multiples :

1. Il favorise la définition du périmètre fonctionnel de votre projet

2. Il permet de présenter aux utilisateurs une vrai interface sur laquelle ils vont pouvoir réagir

3. Il permet de se concentrer sur le fond (contenu, fonctionnalités…) sans être distrait par la forme (couleur, image…)

4. Il facilite l’évolution de l’interface proposée au départ, afin qu’elle corresponde le mieux possible aux attentes et besoins des futurs utilisateurs

5. Il permet de corriger ou valider des choix (techniques, fonctionnels) avant de commencer le développement technique.

Les outils de prototypage

Il existe plusieurs outils qui permettent de créer différents types de prototypes comme par exemple Balsamiq, Adobe XD, Axure, Wireframe CC, MockingBird, Moqups, UXpin, InVison… Ces logiciels ou plateformes en ligne permettent de créer des prototypes très facilement : certaines se gèrent en cliquer-glisser, d’autres nécessitent quelques connaissances informatiques.

La plupart d’entre eux sont gratuits ou proposent une version Freemium, mais si vous souhaitez créer des prototypes avancés, il faudra acheter un logiciel ou souscrire à un abonnement sur l’une de ces plateformes.