Aller au contenu principal
Retour au blogue

Pour les designers

Les prototypes : ces héros méconnus qui font le succès des applications web et mobiles

Marie Desnos
20 oct. 2021 ∙ 6 mins
Professionnel en technologie qui révise une application web

Vous l’avez entendu ou vous en avez fait l’expérience : la conception d’une application web ou mobile est une mission ardue. Elle requiert du temps, beaucoup de travail, un bon budget et un partenaire numérique extraordinaire. Mais même avec toutes ces cartes en mains, l’immensité de la tâche peut décourager.

Vous vous êtes peut-être déjà demandé comment tester votre idée avant de lancer votre solution numérique ou comment convaincre des investisseurs potentiels de la viabilité de votre projet. C’est là tout l’intérêt du prototype.

Même si notre équipe a les compétences (et la motivation!) pour vous livrer une application web ou mobile toute faite, nous savons bien que le prototype est parfois une étape incontournable pour atteindre ses objectifs d’affaires.

Dans cet article, nous couvrirons donc le b.a.-ba des prototypes : ce que c’est, leurs différents types, ce qu’ils peuvent apporter à votre entreprise et les outils que nous utilisons pour créer des prototypes de qualité.

Gif d'un prototype

Un prototype, c'est quoi?

En design thinking, le prototype est la concrétisation d’une idée dont on peut tirer des leçons avant d’investir beaucoup de temps et d’argent dans la réalisation complète d’un produit au succès incertain. Il s’agit d’une étape essentielle dans le processus de création de solutions numériques : le prototype vous permet de valider vos choix et de confirmer les caractéristiques du produit avec une équipe technique.

Un bon prototype, c’est le meilleur moyen de tester vos idées initiales, de les présenter et d’avoir des rétroactions rapidement. De plus, vous pouvez en profiter pour évaluer la qualité du produit et la faisabilité du projet avant de lancer la production et d’engager des coûts de développement.

Toutefois, tous les prototypes ne se valent pas. Ils diffèrent les uns des autres, ont leurs propres caractéristiques et servent à tester des éléments distincts. Voilà pourquoi la première étape de notre processus de prototypage consiste à déterminer les objectifs de nos clients pour leur proposer l’outil idéal.

De la conception à la création, les détails de chaque prototype se précisent et s’affinent. Quelques exemples de caractéristiques habituelles :

  • Représentation : Le format du prototype (ex. : le support ou le type, comme le papier ou le HTML, le mobile ou le web).
  • Précision : Le degré de fidélité du prototype (ex. : la quantité de détails, les touches finales, le réalisme).
  • Interactivité : Les caractéristiques qui réagissent aux actions de l’utilisateur (ex. : prototype entièrement ou partiellement interactif, ou en mode consultation seulement).

Maquettes fonctionnelles

Quels sont les différents types de prototypes?

Il existe deux catégories : les prototypes pour les utilisateurs et les prototypes techniques.

Les prototypes pour les utilisateurs

Le prototype pour les utilisateurs est en fait une simulation du fonctionnement et de l’aspect de l’application pour l’utilisateur final (sans aucune programmation en arrière-plan).

  1. Basse fidélité : Avez-vous déjà vu de simples représentations d’écrans faites au papier et au crayon? C’est généralement ce qu’on entend par prototypes basse fidélité. Ceux-ci peuvent être assez utiles en début de conception, dans la phase des idées. Nous utilisons ce type de prototype pour récolter des avis préliminaires avant d’aller plus loin. Un de ses plus grands avantages est qu’il peut être conçu rapidement et à bas prix pour recueillir des informations sur les flux. Il fait ressortir les problèmes d’utilisabilité dès le début du processus et permet de les corriger sans attendre. Il favorise l’intégration et la communication au sein de l’équipe et aide à monter une bonne documentation de projet (ex. : avec des dessins et des diagrammes, il est plus simple de comprendre et de mettre par écrit la suite du projet).
  2. Moyenne fidélité : Ce type de prototype comprend des maquettes fonctionnelles et du contenu fictif, mais ne permet que des interactions numériques limitées. Il est très utile pour concevoir l’expérience utilisateur. Son plus grand atout est d’être plus réaliste que le prototype basse fidélité. Il permet aussi de détecter les problèmes d’utilisabilité au plus tôt, par des essais avec de vrais utilisateurs, ce qui évite de travailler à une fonction qui finalement entraverait le fonctionnement ou ne produirait pas l’engouement escompté. Ce type de prototype reste tout de même rapide à mettre en place, à modifier et à répéter aussi facilement que fréquemment.
  3. Haute fidélité: C’est le genre de prototype qui se rapproche le plus du produit final. Il comprend de vraies données et des maquettes fonctionnelles et interactives d’interface utilisateur. C’est le livrable que nous fournissons à la fin de notre phase découverte. En général, nous classons les prototypes haute fidélité en deux catégories aux objectifs distincts :

    a. Le prototype de test : Sans visuel de marque ou avec un visuel provisoire, ce format est utilisé pour tester l’intérêt des utilisateurs pour une solution, l’utilisabilité globale du produit et certains flux d’utilisateurs. Nous aspirons d’ailleurs à simuler le plus de flux possible du plus petit produit viable (PPPV), même si l’aspect et le fonctionnement ne sont pas définitifs.

    b. Le prototype de vente : Ce prototype est livré avec les caractéristiques de la marque pour séduire les investisseurs et les clients potentiels. Il n’est pas entièrement représentatif du PPPV, mais présente les principaux flux qui permettent de ficeler l’aspect vente. Idéalement, nous recherchons l’effet « wow », même s’il faut pour cela présenter des éléments phares qui ne seront inclus dans l’application que plus loin dans le processus.

Exemple d'un prototype

Les prototypes techniques

Les prototypes techniques concernent tout le travail en coulisse et les tests de fonctionnalités de base (dans les grandes lignes).

  1. Prototype de faisabilité : Le plus grand avantage de ce prototype est qu’il permet d’évaluer les risques techniques et la faisabilité tout en testant de nouvelles technologies. Les développeurs programment le strict nécessaire pour tester la faisabilité.
  2. Prototype avec données réelles : Déploiement limité par l’équipe technique pour fournir une démonstration de faisabilité et confirmer le bon fonctionnement de la solution avec de vraies données.
  3. Démonstration de faisabilité : L’objectif de la démonstration de faisabilité est d’éclairer les zones grises en validant l’orientation fonctionnelle du projet ou en éliminant les risques techniques. La démonstration de faisabilité permet également de vérifier une difficulté technique (le risque ou l’épreuve à surmonter pour créer la solution).

Quels sont les principaux avantages d’un prototype?

Si vous demandez à notre équipe de conception pourquoi vous gagneriez à vous associer avec nous pour créer votre prototype, la réponse serait : pour réduire les risques. Une erreur de flux ou de fonction qui est découverte durant le prototypage aura un coût moindre (presque nul). Inversement, une erreur ou une caractéristique non pertinente qui ne génère aucune valeur ajoutée coûtera cher à votre projet et pourrait même le mettre en péril si elle y est intégrée.

L’approche de prototypage d’Osedea vous permet de prévoir votre projet et de le tester sur vos utilisateurs sans dépenser un sou pour la moindre ligne de code, et ainsi de réduire les risques. Vous dressez une feuille de route plus précise pour votre produit et établissez une estimation réaliste : tout pour ne pas vous lancer dans une entreprise hasardeuse.

Schéma des avantages d'un prototype

Comment créons-nous nos prototypes?

Les outils et les techniques derrière nos processus évoluent rapidement. Nous en avons plusieurs à notre disposition, selon les appareils : Balsamiq, Adobe XD, Axure, Sketch, InVision, Marvel… Mais notre préféré, c’est Figma un outil puissant, simple et intuitif pour tous les intervenants.

Le mot de la fin

La matérialisation des idées et des projets numériques peut avoir l’air d’une tâche colossale. Il est donc tentant de se hâter vers la phase de développement. Nous espérons que cet article vous aura fait voir le prototype comme ce qu’il est : une étape à part entière de la conception de vos produits et services numériques.

Besoin d’assistance ou de renseignements supplémentaires, n'hésitez pas à communiquez avec nous.