Comment tester en amont des applications, des workflows et des sites web

Une déclaration d’amour au mockup
Nous adorons les prototypes, nous adorons les mockups. Les prototypes HTML en particulier sont parfaits pour tester de nouvelles idées. Ils permettent de rendre rapidement tangibles des principes d’utilisation ou des concepts de contenu. Et en plus, avec le prototype HTML, nous sommes déjà là où nous voulons être : dans le navigateur. Les utilisateur·rice·s peuvent ainsi naviguer sur la page dès cette étape, et les équipes peuvent rapidement recueillir des retours. Lors d’une première itération, les retours collectés nous reviennent pour améliorer le prototype.

Qu’est-ce qu’un prototype ?
Un prototype désigne, dans le contexte du web, un site ou une application cliquable dans lequel/laquelle toutes les fonctionnalités ne sont pas encore développées, mais où les principes d’utilisation et la conception sont déjà visibles. Par exemple, des points de menu ou des fonctions peuvent être déclenchés en partie sans effet. Dans un processus de commande, des champs de formulaire peuvent déjà être remplis, même si aucune sauvegarde des données n’est effectuée lors de l’envoi. Ou encore, un site web peut avoir un point de menu « Nos produits », qui affiche plusieurs fois le même produit. L’objectif d’un prototype est de donner une « sensation » de l’utilisation pour pouvoir évaluer l’expérience utilisateur souhaitée à un stade précoce.

Du prototype à l’application ou au site web

Le grand avantage des prototypes HTML est qu’ils ne sont pas des produits jetables. Après les tests et les ajustements du prototype, celui-ci peut être réutilisé dans le projet. On peut par exemple l’améliorer progressivement pour en faire un « high-fidelity prototype », c’est-à-dire un prototype détaillé, qui peut ensuite être développé pour devenir le site web ou l’application web finale. Il constitue donc l’entrée parfaite dans un projet.

Prototype en HTML ou en Sketch

Dans notre agence, nous distinguons deux types de prototypes : d’un côté, les prototypes HTML déjà évoqués. Ceux-ci sont composés de HTML et CSS, d’images, de textes et peuvent être consultés dans n’importe quel navigateur. Ils permettent par exemple d’effectuer des tests sur smartphones ou tablettes. De l’autre côté, il y a les mockups basés sur Sketch (comparable à Photoshop). Avec Sketch, des maquettes statiques sont créées, que l’on peut imaginer comme des captures d’écran. À l’aide d’InVision, nous relions ensuite les différentes captures d’écran entre elles pour transformer des maquettes statiques en pages navigables et donc exploitables.

Prototype vs. Mockup

Quelle est la différence entre un prototype et un mockup, et une agence web ne devrait-elle pas clarifier cela ? Oui, mais ce n’est malheureusement pas si simple. Les limites sont ici très floues et l’utilisation des termes n’est pas cohérente dans le secteur. En principe, un mockup désigne plutôt un leurre, tandis qu’un prototype représente un exemple – même limité – fonctionnel. On peut donc dire qu’un mockup est plutôt axé sur le design en soi, tandis qu’un prototype se concentre davantage sur le fonctionnement.

Utilisation judicieuse

Bien sûr, l’utilisation de prototypes ou de mockups n’est pas judicieuse dans tous les projets, mais dans la plupart des cas. En particulier si un projet web est fortement axé sur l’interaction avec les utilisateur·rice·s, il est recommandé de commencer par un prototype, notamment pour les applications web, les sites e-commerce, les processus de commande, les connexions ou les pages à structures complexes. Selon notre expérience, un prototype améliore considérablement le résultat final en termes d’utilisabilité et d’expérience utilisateur.