Prototype UX design, prototypage fonctionnel

Intérêt du prototype fonctionnel

Le prototype UX design ou prototype fonctionnel permet de simuler le fonctionnement de votre dispositif digital afin de le tester, avant de le produire. Le prototype fonctionnel de l'UX (expérience de l'utilisateur) s'inscrit dans la logique de l'essai-erreur propre à la démarche de conception centrée utilisateur.

Vous avez besoin de faire un prototype de votre projet ?
Vous voulez prototyper un dispositif digital pour le tester ?
Nous allons esquisser les fondamentaux des techniques de prototypage et vous présenter les méthodes pour réaliser un bon prototype fonctionnel. C'est un travail qui relève du design d'interaction. Un développeur front-end et un graphiste pourront vous aider à maquetter plus rapidement le prototype fonctionnel de votre projet.

Avant de façonner votre prototype, vous devez d'abord disposer d'une bonne vision du fonctionnement de votre support interactif. Une phase de conception bien menée prévoit un temps pour concevoir chacun des gabarits du site afin de faire apparaître l'envergure fonctionnelle du projet. Pour élaborer un prototype qualitatif, une bonne pratique consiste à vous appuyer sur les wireframes du projet.
Un prototype fonctionnel signifie que le prototype simule le fonctionnement. Mais pas seulement, le prototype est fonctionnel dans sa capacité à représenter tout ou partie du produit fini. Ce produit peut être un site web, une application mobile, une app tablette, un intranet, un extranet... Le prototype fonctionnel est un échantillon du dispositif digital, un premier exemplaire du produit fini. On pourrait aussi dire un spécimen, un archétype, un étalon. Ce n'est pas la version originale, mais c'est un modèle qui s'en rapproche...

Grâce au wireframing, vous pouvez visualiser le design de l'information et les grands principes d'interaction de l'interface utilisateur. La conception fonctionnelle détaillée doit également faire émerger les principaux parcours d'utilisation en réponse aux scénarios stratégiques à adresser (préparer un achat, approfondir un thème de prévention santé...).

En prémisse du travail de prototypage, il y a donc 2 grands éléments que vous devez maîtriser :

Une vision fonctionnelle élargie du scope projet : pour cela, les wireframes sont l'outil idéal.
Une bonne compréhension des principaux parcours d'utilisation du dispositif : là, vous pouvez vous appuyer sur la scénarisation des parcours utilisateurs.

A quoi va servir le prototype fonctionnel ?

Avant d'aller plus loin dans les détails sur le prototypage, la première question à adresser concerne la vocation du prototype fonctionnel.
En effet, il y a différents cas de figure dans lesquels un prototype de dispositif digital peut être conçu :

Prototype pour vérifier l'ergonomie du dispositif au cours d'un test utilisateur.
Prototyper pour communiquer : particulièrement utile pour exposer (au sens propre comme au sens figuré : exposer à la critique aussi) et partager votre projet, fédérer vos équipes ou convaincre une hiérarchie.
Prototypage dans le but de présenter une partie du support digital : pour persuader de l'intérêt du projet (appel d'offres, soutenance interne à l'entreprise), pour lever des fonds, pour communiquer avec les équipes de direction...
Prototyper une partie du site pour aider les équipes de production à tester les qualités techniques du dispositif : test de charge, expérimentation sur différente plateforme, mise en situation.
Prototype pour visualiser le fonctionnement et évaluer la fluidité des parcours d'utilisation (processus d'inscription, processus de commande, demande de devis...).

Les efforts à consentir au prototypage dépendent de l'objectif que doit remplir le prototype fonctionnel. Dans la majorité des cas, les équipes projet construisent un prototype en vue d'effectuer un test : test avec les utilisateurs, test technique du produit...

Ainsi, si le prototype a vocation à faire l'objet d'une revue technique, il faudra aller au plus proche des qualités escomptées du produit fini en matière de technologie, de code, de programmation.
S'il s'agit d'une présentation commerciale, on se contentera d'illustrer un parcours d'utilisation type. Pour un test utilisateur, il faudra aller plus loin et sélectionner plusieurs scénarios à tester.

La forme du prototype fonctionnel va dépendre du contexte de votre projet et des résultats que vous souhaitez réellement obtenir grâce au prototypage. Cela paraît évident, mais c'est important de le souligner, car il y a différentes manières de prototyper... La création d'un simple prototype fonctionnel de quelques écrans ne demande pas les mêmes efforts qu'un prototype très élaboré qui doit être passé au crible d'un test utilisateur.

Choisir les parcours à prototyper

Au moment de préparer le prototype, vous vous interrogez probablement sur le nombre d'écrans à prototyper. Pour répondre à cette question, il faut bien définir les parcours d'utilisation que l'on souhaite voir.

Dans un site ecommerce, on choisit souvent de prototyper la descente catalogue, de la page d'accueil jusqu'à la fiche produit, avec un degré de finesse qui va de 4 à 5 écrans jusqu'à des interactions plus poussées (comparaison, tri, filtre, ajout au panier). Plus le prototype fonctionnel doit se rapprocher du produit final, plus vous devrez investir du temps de développement technique (programmation). On peut aussi prototyper l'espace client, le processus d'inscription, le tunnel d'achat, un moteur de navigation à facettes. On peut aller très loin dans le prototypage...

Pour un site éditorial, on cherche à illustrer la fluidité des rebonds entre les contenus. Les prototypes concernent alors davantage les problématiques d'architecture de l'information : navigation, zone de rebond, etc.

Le choix du nombre de parcours utilisateurs à illustrer est une décision stratégique. Il n'y a pas de réponse type. C'est au cas par cas, en fonction de la problématique du projet.

Définir le type de prototype à créer

Le premier prototype fonctionnel fabriqué par IAFACTORY remonte début 2000 : il s'agissait d'une succession de maquette graphique dont les interactions reposaient sur la technique de l'image mappé (un lien dans une image) pour scénariser la progression éditoriale dans un portail e-santé.
Depuis ces premiers tests, et pour des raisons métaphysiques qu'il n'est pas nécessaire de développer ici, nous avons acquis la conviction qu'un prototype fonctionnel doit se rapprocher au plus près des qualités attendues du produit fini...

Pour préparer un test utilisateur, un wireframe n'est absolument pas le support adéquat pour prototyper votre dispositif. Oubliez Axure, s'il vous plaît. Vous devez mettre la peau sur le squelette. Chaque écran du parcours testé doit ressembler au produit final. C'est une perte de temps et d'argent de vérifier l'ergonomie d'un site sur la base de wireframes : ils ne sont pas porteurs des dimensions sensorielles qu'apportent les couches graphiques et interactionnelles.
Le minimum syndical est de passer chaque écran storyboardé en phase de design graphique. Ensuite, il faut animer l'ensemble : vous pouvez passer à la vitesse supérieure en réalisant un prototype sur des bases réelles avec une intégration HTML et CSS de chaque page. A vous de choisir où vous allez placer le curseur sur les animations de surface.
Il faut, au minimum, que l'interaction de structure soit assurée, c'est à dire, le passage d'un écran à l'autre dans le cadre du parcours testé. Prévoyez plusieurs zones cliquables, de sorte à ce que l'utilisateur puisse cliquer sur des éléments qui ne relèvent pas du parcours central...

Pour un test technique, la couche graphique est moins importante : on peut se contenter d'un squelette HTML, s'il s'agit de vérifier le fonctionnement et les choix techniques.

La règle à suivre, pour vous aider à définir le type de prototype que vous devez créer, est d'être au plus proche du produit fini si vous souhaitez entrer en contact avec des utilisateurs finaux pour tester votre produit. S'il s'agit de test interne, les enjeux sont moindres. Pour une présentation commerciale ou une soutenance interne, quelques petits artifices feront l'affaire : un montage vidéo, une séquence animée comme le permettait le bon vieux flash, la technique de l'image mappée, voire même un petit prototype avec Powerpoint (une création graphique par diapositive, et quelques liens embarqués dans la présentation : ça marche !).

Le cas du prototype en version bêta

Une autre approche, particulièrement intéressante, est de considérer la phase de production comme un prototypage à grande échelle.
C'est l'école de l'amélioration continue. Concrètement, tous les travaux de production (conception fonctionnelle, design graphique, intégration, développement back-end) concourent à alimenter un grand prototype accessible sur une adresse locale de pré-production. On peut aller plus loin avec la mise en ligne d'un prototype en version bêta, le must du prototypage.

Les équipes de production les plus souples sont capables de visualiser la construction de leur produit en continu : ainsi, pas besoin de bricoler un prototype, il existe déjà...

Cette technique de version alpha, beta, gamma, est la plus élaborée dans le cadre d'une démarche de conception centrée utilisateur : le prototype repose sur les fondamentaux du support digital ciblé. Mieux, le prototype EST le produit final. On peut alors tester toutes les variantes du projet sans se creuser la tête sur les parcours, ou sur la qualité mineure du prototype par rapport au produit fini...

Il n'y a pas à dire, le choix de la technique de prototypage relève de l'école de pensée :). C'est une décision stratégique. Notre recommandation est de bannir tous les prototypes de conception basée sur des storyboards, qui ne sont pas des prototypes.
Mettez aux oubliettes les discours des professionnels du design thinking. Un wireframe ne sera jamais perçu de la même façon qu'une maquette graphique. Une maquette graphique sera toujours interprétée différemment si elle est visualisée comme un élément statique ou comme un écran dynamique faisant partie d'une interaction élaborée.
A retenir :
JAMAIS de prototype avec un wireframe.
Même en mode sauvage. Parce que c'est inutile.
Gardez les wireframes pour esquisser le fonctionnement, et pas pour être le fonctionnement.

Prototyper pour animer l'interface

Le prototype fonctionnel simule toujours les interactions du dispositif digital. Il peut représenter quelques écrans comme une version bêta prête à être utilisée dans son intégralité. Le prototype fonctionnel peut aussi faire office de pré-test utilisateur afin d’ajuster les choix de conception de façon réactive.

En bref, au moment de construire votre prototype, vous devez savoir à quelle école de pensée vous allez vous rattacher :). C'est un objectif fondamental de la phase de prototypage :

Design thinking : ils testent même le papier. Ce sont des marketeurs, il faut leur pardonner.
Secte de l'agilité : tout doit être agile, l'univers, les individus, la conception. Ils testent tout est n'importe quoi tout le temps pour trouver la formule magique.
Les développeurs et les GAFA : le prototype EST le produit fini.
Les bricoleurs : ils s'appuient sur les travaux de conception et de design pour échafauder le prototype.

Les objectifs visés par la création d'un prototype fonctionnel :

Clarifier le fonctionnement du support de façon ultra-détaillée,
Simuler les interactions potentielles,
Illustrer le détail d’un parcours utilisateur et ses implications,
Démontrer l’efficacité d’une interface,
Soumettre l’interface à un pré-test utilisateur,
Présenter le projet en avant-première,
Tester le produit.
etc.

Animer un produit digital permet de lisser les incompréhensions et de gagner en clarté. Cela facilite les échanges en production. D’autre part, le prototype fonctionnel permet d’approfondir le détail du fonctionnement de l’interface, or, comme nous le savons tous, la qualité est dans le détail…

Parce que toutes les entreprises ne peuvent concevoir un dispositif digital comme un prototype permanent, nous vous recommandons de recourir à un prototypage de votre projet dans les cas suivants :

projet à forte dominante fonctionnelle et ergonomique,
modélisation de processus,
projet impliquant une interface riche (beaucoup de subtilité interactives qui n'apparaissent pas dans les wireframes et les spécifications),
création d’un service dématérialisé impliquant plusieurs étapes,
nécessité de rentrer dans un détail micro du fonctionnement,
équipe projet sur le qui-vive : besoin d’approfondir le comment ça marche.

Prototype fonctionnel et UX design

Le prototype est un outil important des méthodes de design de l'expérience utilisateur. La méthode UX s'appuie effectivement sur 3 phases (analyse, conception, évaluation), et considère la mesure de l'expérience comme le facteur le plus important pour la réussite d'un projet.

Les techniques de prototypage fonctionnels sont donc en première ligne dans l'application de la démarche UX design, pour évaluer les solutions de conception et améliorer les qualités ergonomiques du dispositif digital. C'est la boucle essai-erreur, autrement dit, prototype et test utilisateur.

Comment vous y prendre pour créer votre prototype ?

Vous devez définir le périmètre fonctionnel du prototype et choisir les parcours que vous souhaitez visualiser en maquette interactive. Il faut répondre à la question du Quoi prototyper.
Vous pouvez choisir de prototyper 1 parcours comme 10 parcours, tout dépend de vos objectifs. Il faut à minima scénariser un enchaînement de 4 - 5 écrans.

Une fois que vous avez clarifié le nombre de scénarios que vous souhaitez prototyper, vous pouvez vous interroger sur le Comment prototyper. Pour répondre à cette question, il suffit de statuer sur le stade de développement auquel se situe votre projet :

En phase d'avant-projet :
vous devez d'abord faire le point sur votre projet (recueil du besoin utilisateur, objectifs business) avant de passer en phase de wirframing (conception fonctionnelle détaillée).
En conception fonctionnelle :
prenez-les écrans structurants des wireframes et maquettez-les graphiquement.
En phase de création graphique :
prenez les maquettes graphiques répondant au parcours à illustrer, puis animez les : image mappé, vidéo, intégration quick and dirty, intégration propre...
En phase de développement front-end :
utilisez les pages les plus représentatives du parcours et affinez les interactions de cette partie du dispositif digital.
En phase de developpement back-end :
essayez de créer une version bêta exploitable (facile à dire). Vous pouvez extraire les parties du site qui sont déjà opérationnelles, pour alimenter des tests.

Créer un prototype, même simple, demande du temps, c'est pourquoi vous devez vraiment considérer l'intérêt du prototype par rapport à la phase de production dans laquelle se situe votre projet. Dans l'idéal, un prototype fonctionnel est fidèle au produit fini.
Si vous utilisez Axure en mode wireframe ou un outil de wireframing pour prototyper votre dispositif, vous n'êtes pas entrain de réaliser un bon prototype. C'est comme un plat gastronomique sans sauce. Un Jacuzzi sans eau chaude. Une voiture sans carrosserie. L'utilisateur final n'est pas en mesure d'apprécier l'expérience avec tous ses sens. Et le prototype ne peut pas remplir pas sa fonction...

Démarche pour prototyper un dispositif digital

Au préalable, il faut avoir une vision du fonctionnement du projet :). Le prototype permet de passer d'une version "statique" (écran figé) à une version "dynamique (enchaînement des écrans). Cela revient à donner corps au design d'interaction :

S'appuyer sur les écrans conçus en phase de wireframing.
Définition des parcours utilisateurs à illustrer.
Validation des fonctionnalités et des modules à approfondir pour créer le prototype.
Scénarisation du prototype.
Maquette fonctionnelle des écrans (wireframes).
Maquette graphique (design).
Animation des maquettes, ou intégration plus poussée.

Travaux complémentaires au prototypage du fonctionnement

En amont du prototypage, il y le travail de conception détaillée au travers du wireframing. Il faut avoir une bonne vision des scénarios d'utilisation et des parcours utilisateur pour orienter le prototype fonctionnel de façon intelligente...
La visualisation du fonctionnement au travers de l'arborescence fonctionnelle est un super bonus pour déterminer les éléments à tester.

Le prototype est souvent lié au test utilisateur dans la mesure où sans prototype fonctionnel représentatif du support interactif, on ne peut rien tester...

Le prototype fonctionnel de l'ux peut déboucher sur la rédaction des spécifications fonctionnelles, explicitant toutes les implications des composantes fonctionnelles.