Créer un prototype d’application mobile ou de site internet

Avec cet article sur comment créer un prototype d’application mobile ou de site internet, nous voulons vous aider à compléter la partie démo de votre business plan. Nous avons en effet constaté qu’il est difficile pour les porteurs de projet de passer de leur idée de création d’entreprise à une approche plus concrète de ce qu’ils comptent offrir. Or, les images valent mieux qu’un long discours, surtout si votre temps de présentation est limité. Sans être développeur, il existe de nombreux outils pour réaliser des maquettes interactives et ainsi donner un avant-goût de la magie de votre produit ou service aux clients, partenaires et investisseurs éventuels.

Notez que si vous préparez en même temps le business plan d’une application mobile, d’un site internet ou d’un logiciel SaaS, vous pouvez utiliser notre modèle de business plan avec une méthode efficace et de nombreux conseils pour vous faciliter le travail.

Téléchargez le modèle de business plan maintenant (PowerPoint PPT, Excel XLS et PDF)


Créer un prototype d’application mobile ou de site internet

Outre que c’est un passage obligé du business plan, l’intérêt de faire un prototype est aussi d’avoir un produit minimum viable. Dans Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days, Jake Knapp, John Zeratsky et Braden Kowitz de Google Ventures donnent une méthode de prototypage en une semaine pour tester rapidement son offre auprès de clients potentiels. En se confrontant tout de suite à la réalité du marché, vous évitez de perdre du temps ou d’épuiser vos économies à développer quelque chose pour vous apercevoir au final que cela n’intéresse personne.

Choisir les bons outils pour son prototype web et mobile

En général, le prototype est l’aboutissement de trois étapes principales :

  • Le wireframe est la maquette fonctionnelle de votre projet d’application mobile ou de site internet, c’est un croquis des différents éléments de l’interface.
  • Le mock-up est la maquette visuelle réalisée à partir du schéma initial, avec les différents écrans que seront amenés à voir les utilisateurs selon le terminal utilisé.
  • Le storyboard est l’ensemble des interactions possibles entre l’utilisateur et votre service, sur chaque écran.

Notez que ces éléments sont souvent demandés par les développeurs lorsqu’ils sont sollicités pour des devis. Vous avancez donc aussi sur ce terrain en mettant au point votre prototype.

À ce stade, il est important de choisir les bons outils pour réaliser votre prototype en fonction de l’offre à tester :

  • Sur un écran (site internet, application mobile, logiciel SaaS, etc.) : utilisez PowerPoint, Keynote ou un service de création de sites comme WordPress.
  • Sur papier (rapport, brochure, flyer) : utilisez PowerPoint, Keynote, un service en ligne comme Canva ou encore Word.
  • Pour un service (service relation client, démarchage téléphonique) : faites un script et répartissez les rôles au sein de votre équipe.
  • Pour un lieu à repenser (boutique, bureau) : modifiez un espace existant.
  • Pour un objet : modifiez un objet existant, faites une impression 3D de votre prototype ou concentrez-vous sur les aspects marketing via PowerPoint, Keynote et des photos ou aperçus de l’objet.

Vous aurez compris qu’avec un peu d’imagination et quelques outils, il est possible de prototyper presque tout avec PowerPoint et Keynote. C’est pour cela que nous avons inclus dans notre modèle de business plan un grand nombre de mockups pour smartphone Android, iPhone, tablette iPad ou ordinateur. Vous pouvez évidemment intégrer directement une vidéo démo ou des captures d’écran, mais si vous souhaitez rendre la présentation plus interactive, tout est prévu pour valoriser au mieux votre prototype.

Construire juste assez pour apprendre

Le prototype final doit pouvoir être testé entièrement en moins d’un quart d’heure. Cette limite vous oblige à aller à l’essentiel. N’oubliez pas que le prototype est fait pour vous éviter de passer des semaines voire des mois à élaborer une solution. Surtout, les prototypes sont par définition jetables. C’est une vision intermédiaire de votre produit ou service car l’hypothèse temporairement retenue est susceptible de ne pas marcher. Inutile donc de prendre quelques jours de plus pour peaufiner, autant tester de suite.

L’exigence principale est que le prototype soit suffisamment réaliste pour que vous puissiez recueillir des réactions naturelles. Si l’illusion est imparfaite, les personnes à qui vous soumettrez le prototype auront tendance à faire de simples retours, ce qui est moins intéressant que de les voir interagir de manière authentique avec votre application ou site internet.

Heureusement, il existe un grand nombre de services en ligne et de logiciels pour bâtir l’équivalent d’un décor de cinéma, avec de faux écrans et de fausses pages. Voici une dizaine d’outils que nous vous recommandons pour faire vos prototypes web et mobile :

Services en ligne

  • MockingBird : gratuit, parfait pour un prototype rapide.
  • InVision : présentation simple et claire, prise en main très intuitive.
  • MarvelApp : très complet, possibilité de collaborer facilement sur un prototype.
  • Concept : l’historique des versions est très pratique pour revenir en arrière.
  • Pingendo : éditeur HTML pour créer des prototypes de sites internet.
  • Proto.io : profitez de la période d’essai, car ensuite la version gratuite est assez limitée.

Logiciels

  • Axure : le logiciel de référence en wireframe pour web et mobile.
  • Balsamiq Mockups : plus facile à prendre en main que le précédent.
  • Origami : sur Mac uniquement, par les designers de Facebook.

Au terme de ce travail, vous devez avoir tous les écrans prévus dans le wireframe initial sous forme de mockups. Pensez aux petits détails pour rendre crédible votre prototype. Par exemple, si vous voulez tester un prototype de site internet, veillez à avoir la fenêtre du navigateur sur vos différents mockups. De même, pour voir comment les utilisateurs réagissent à la description de votre application sur l’App Store ou Google Play, utilisez une réplique exacte du format habituel de présentation de ces plateformes. Vous pouvez même prévoir un mockup pour simuler le processus d’installation.

Assembler les différents éléments et vérifier que tout fonctionne

Pour créer la possibilité de cliquer comme sur un vrai site ou une application mobile, nous allons nous appuyer sur une fonctionnalité méconnue de PowerPoint et Keynote : la possibilité de faire des liens internes entre les diapositives. Sachez que certains des outils de prototypage déjà évoqués proposent aussi d’ajouter des liens entre éléments et de tester son prototype en conditions réelles. Néanmoins, à nos yeux, rien ne remplace la simplicité de PowerPoint et Keynote.

Il convient tout d’abord de personnaliser la taille des diapositives pour qu’une fois en plein écran, vous ayez les dimensions d’un écran d’ordinateur, de smartphone ou de tablette. Utilisez un tableau de conversion selon la définition de l’écran et le tour est joué. L’illusion sera ainsi parfaite si vous chargez la présentation en mode diaporama sur le terminal de votre choix. Ensuite, vous pouvez ajouter autant de slides qu’il y a de mockups à insérer sous forme d’images.

À présent, il faut suivre votre storyboard pour mettre en place l’ensemble des liens internes. Utilisez des formes transparentes pour positionner vos liens par-dessus les mockups. Par exemple, si vous avez prévu trois icônes sur l’accueil de votre application, il faut ajouter trois cercles transparents avec des liens. Idem sur la page produit d’un site e-commerce, vous devez mettre un lien sur le bouton d’achat vers le mockup pour passer à la commande.

Une fois ce travail de fourmi réalisé, testez votre prototype, en envisageant les différents scénarios d’interaction possibles avec chaque écran et en vérifiant la cohérence d’une diapositive à l’autre.

Tester son prototype auprès de cinq clients potentiels

Il est désormais temps de montrer votre travail. Tester son prototype d’application mobile ou de site internet auprès de cinq personnes est suffisant. Pionnier de l’ergonomie web, Jakob Nielsen a en effet mené des dizaines d’interviews avant de réaliser qu’en général 85 % des problèmes sur un site ou une application sont identifiés après avoir interrogé cinq personnes seulement. Selon Nielsen, plutôt que de s’acharner pour identifier les 15 % restants, il vaut mieux réparer le gros des erreurs, quitte à refaire un autre prototype ensuite.

Une seule personne doit être chargée des entretiens individuels. Vous pouvez partir sur un format d’une heure. Nous avons prévu un scénario de démo qui dure un quart d’heure, parce que dans les faits c’est toujours plus long. Il faut aussi que votre interlocuteur ait le temps d’exprimer sa pensée et de répondre à vos questions. Veillez à ne pas être trop directif. Par exemple, si le but de votre prototype est de savoir si les clients ont envie de télécharger votre application, il suffit de laisser votre interlocuteur lire la description sur la fausse page de l’App Store ou de Google Play. Demandez-lui alors comment il se déciderait ou non à télécharger votre application plutôt qu’une autre. Le but est de l’encourager à agir naturellement, pas de lui imposer le scénario préétabli.

Une fois votre prototype d’application mobile ou de site internet mis au point, vous pouvez l’utiliser dans votre démo de business plan. Pensez à faire deux formats de présentation :

  • Une version courte de la démo intégrée aux autres slides pour appuyer votre propos.
  • La version entièrement cliquable en annexe au cas où vous auriez besoin de montrer les fonctionnalités de votre produit ou service pendant l’éventuelle séance de questions-réponses. Généralement, vos interlocuteurs apprécieront que vous soyez dans le concret.

Pour poursuivre vos réflexions, nous vous conseillons d’utiliser notre modèle de business plan.

Téléchargez le modèle de business plan maintenant (PowerPoint PPT, Excel XLS et PDF)