Le prototype web fait partie de la phase de conception d’un projet de création de site internet ou de développement d’application mobile. Il vise à simuler l’interface du produit et d’anticiper les interactions des utilisateurs avec le futur produit, il en est un premier aperçu du produit. C’est l’interface avec son design, ses principales interactions, sa mise en page. Le niveau de détails varie sensiblement d’un prototype à un autre. Toutes les interactions ne sont pas nécessairement disponibles, toutes les pages ne sont pas forcément connectées entre elles. Dans le cadre d’un projet de développement d’un site ou d’une application, il est tout à fait possible de créer plusieurs prototypes.
Le prototype est d’ailleurs parfois seulement statique. Au cours de sa présentation, la personne en charge de sa conception – qui connaît mieux l’interface que quiconque – gère en temps réel les actions simulées par l’utilisateur, les changements de page, les animations. Ce type de prototypage s’oppose au prototype interactif, cliquable ou encore dynamique. Comme son nom l’indique, il doit fournir une réponse pour chaque interaction. Le client clique sur le bouton du formulaire, le formulaire doit apparaître. Il choisit de cliquer sur une illustration présentée sur un carrousel, l’illustration apparaît. De la même façon, si le client pointe le curseur de sa souris sur un menu déroulant, il observe en temps réel les liens hypertextes de cet élément d’interface graphique.
Les prototypes d’application ou de site internet sont des représentations plus ou moins détaillées des produits finaux. On distingue tout d’abord le prototype basse fidélité. Relativement rapide à concevoir, il donne avant tout un aperçu du design du projet web. Il est fréquemment caractérisé par des textes lorem ipsum (suite de mots sans signification qui font office de remplissage).
Pour avoir une meilleure idée du site web ou de l’application web ou mobile à coder, l’entreprise qui s’occupe du développement est susceptible de créer un prototype dit haute fidélité. Du logo aux contenus en passant par les interactions, l’interface correspond entièrement ou presque totalement à celle du produit final. Un néophyte n’y voit en général que du feu et a l’impression de véritablement naviguer sur un site internet ou une application mobile. Pour le concepteur, ce prototype permet d’évaluer particulièrement bien le comportement de l’utilisateur qui le découvre, plutôt que de se concentrer à simuler chaque action effectuée. En revanche, il est moins évident d’apporter des modifications sur des modèles aussi sophistiqués.
Le prototype diminue tout d’abord significativement le risque d’incompréhension entre l’équipe de développement et le client et, par la même occasion, peut paradoxalement accélérer la concrétisation d’un projet. Les retouches design et les ajouts de fonctionnalité tardifs sont plus faciles à prévenir quand on soumet à validation un prototype.
La réalisation d’un prototype de nature dynamique est ensuite salvatrice lorsqu’on souhaite s’assurer que toutes les interactions fonctionnent et qu’elles sont comprises de l’utilisateur.
En outre, cette phase clé peut permettre de faire émerger de nouvelles idées, qu’il s’agisse de peaufiner le design graphique ou d’enrichir le projet de nouvelles fonctionnalités.
Différentes solutions servent aux agences de développement qui conçoivent régulièrement de nouveaux prototypes. On compte notamment le logiciel Sketch, paru en 2008, plébiscité pour sa grande librairie d’extensions mais qui a le désavantage d’être seulement disponible sur Mac. S’il est délicat à prendre en main, Axure, à la fois décliné sur Windows et MacOS, quant à lui s’avère particulièrement indiqué pour la création des prototypes haute fidélité. Parmi les autres outils qui trouvent les faveurs des concepteurs de prototype, il y a InVision Studio, Figma et le célèbre Adobe XD.