Comment créer un prototype d’application mobile
La création d’une nouvelle application mobile reste encore aujourd’hui un projet d’envergure avec un grand nombre de choix importants à faire pour son bon déroulement.
Vous êtes peut être dans ce cas : vous avez un projet d’application en tête et une vision de son aspect et l’utilisation qui en sera faite. Simplement vous n’êtes encore qu’au stade de l’idée et expliquer votre projet aux investisseurs ou aux développeurs potentiels reste un challenge.
La création de prototype d’application mobile permet de concrétiser la vision que vous avez de votre projet. Cela vous permet de passer d’une simple idée qui n’existe probablement que dans votre tête à une première implémentation de celle-ci.
Dans cet article, je vais vous exposer le meilleur moyen de créer un prototype d’application mobile ainsi que les nombreux bénéfices que cela peut apporter à votre projet.
Pourquoi créer un prototype d’application mobile ?
La création de prototype est une étape devenue indispensable dans nos différents projets mobiles. Cela présente en effet de nombreux avantages.
Premièrement, le prototype d’application mobile permet de concrétiser votre vision. En fonction du niveau de détail du prototype et le degré de définition de votre projet, le prototype permet d’exprimer sur un document ou un outil votre vision, la clarifier, en débattre, etc.
Cela permet d’exprimer votre vision et d’affiner cette expression : cela vous rapproche de la création de la première version de votre application.
Deuxièmement, il s’agit du premier pas logique vers les spécifications techniques pouvant donner naissance à votre application. À partir d’un prototype des écrans et une modélisation des interactions utilisateur sur ces écrans — savoir comment l’utilisateur se déplace sur l’application — il est bien plus facile pour un développeur ou une agence de réaliser des spécifications techniques qui permettront ensuite de développer l’application.
Enfin, un prototype peut servir de plateforme pour pitcher les investisseurs, décisionnaires et futurs utilisateurs de l’application. Un prototype interactif permet de collecter un grand nombre de feedbacks car sa création répond à beaucoup de questions implicites concernant l’application.
Le prototype permet de supporter votre pitch face aux investisseurs, afin qu’ils aient une vision plus concrète du projet dans lequel vous leur demandez de s’engager.
Sur un bon prototype interactif, vous pourrez aussi observer les réactions d’utilisateurs potentiels : cela constitue une source de données pour vos recherches en matière d’expérience utilisateur et optimisation d’interface — UX/UI — mais aussi une source de signaux positifs pour les investisseurs, démontrant l’utilisation qui pourra être fait de votre application.
En fonction du niveau de détail du prototype, il peut permettre deux bénéfices additionnels :
- Travailler l’expérience utilisateur — l’UX — l’interface, les écrans et leur accessibilité peuvent tous être représentés sur les maquettes graphiques de l’application
- Si l’application est destinée à être distribuée sur Android et iOS, il peut être intéressant de créer deux prototypes fidèles aux conventions des deux plateformes et observer les différences en terme d’interface. Par exemple un bouton retour sur Android est bien souvent située dans une barre de navigation en bas de l’écran de l’application alors que cette même barre sea en haut sur iOS.
 |
 |
Différence d’interface entre iOS (à gauche) et Android (à droite)
Comment créer un prototype interactif ?
Je ne vais pas vous expliquer comment utiliser un bloc note et crayon pour dessiner les différents écrans de votre application ainsi que la façon dont ils sont liés entre eux et dont on y navigue.
Bien que cela soit un premier pas vers la formalisation de l’aspect de votre application, je vais vous présenter des solutions qui vont vous permettre non seulement de créer un premier prototype d’application mais surtout de le rendre interactif.
Keynote, pour créer des prototypes interactifs gratuits
Keynote, l’outil de présentation d’Apple, permet de faire prototypes interactifs certes limités mais gratuits.
Cela permet de rapidement créer des planches de “wireframing” — prototypes fil de fer en Français — représentant les différents écrans de l’application, ainsi que des zones cliquables pour transitionner d’un écran à l’autre.
Certaines personnes proposent même des thèmes Keynotes pour faciliter le travail de prototypage comme Steven Brewis sur Dribble
Un tutoriel expliquant l’utilisation de keynote pour du wireframing est disponible ici (en Anglais)
MarvelApp, la plateforme web
MarvelApp est une application web qui permet de designer rapidement des prototypes d’application.
MarvelApp vous propose de nombreux éléments standards iOS et Android pour créer un prototype réaliste en un minimum de temps.
Vous pouvez ensuite partager une version web de votre prototype pour la présenter et collecter des retours.
MavelApp permet de créer des prototypes interactifs réalistes et poussés très simplement.
Le fait que l’application soit gratuite et que sa prise en main soit relativement simple en fait une solution de choix pour votre premier projet.
Logiciels spécialisés : Sketch, Invision Studio
Enfin, il existe des outils plus spécialisés pour le prototypage d’applications. Ces outils sont aussi utilisables pour la création de sites Internet ou d’application web.
On citera Sketch et Invision Studio avec lesquels nous avons le plus d’expérience. Néanmoins, il existe de nombreux autres outils comme FramerX, Adobe XD Prototype, etc.
Ces outils sont plus professionnels et permettent de créer des éléments stylisés réutilisables, définir des transitions et surtout exporter des maquettes dans des formats ou sur des plateformes qui permettent directement d’être jouées en démonstration sur le téléphone cible.
Pour aller plus loin sur les outils et méthodes de prototypage, je vous suggère cette très bonne vidéo de Franck Dupont chez The Family:
Que faire une fois le prototype créé ?
Une fois votre prototype créé, vous pouvez l’utiliser de plusieurs façons.
La collecte de feedback grâce au prototype interactif
Premièrement, le prototype interactif permet de rassurer les investisseurs existants et pitcher les investisseurs potentiels.
À partir de votre prototype vous pouvez présenter votre application de manière très concrète et permettre aux investisseurs de se projeter sur le produit final dans lequel ils investissent.
Leurs retours vous offrent alors la possibilité d’améliorer le prototype et de suivre un processus très lean et itérer sur le prototype — opération bien moins coûteuse que de créer de nouvelles versions de l’application — jusqu’à obtenir une version satisfaisante.
Dans le même esprit, cela vous permet de collecter des retours d’utilisateurs tests : vous pourrez les observer interagir sur le prototype :
- Cherchent-ils désespérément un bouton pour accéder à une fonctionnalité clé ?
- Sont-ils perdus sur votre menu de navigation ou comprennent-ils tout de suite comment utiliser votre application ?
Cycle “Lean” tiré de The Lean Startup d’Eric Ries, présenté par KISSmetrics
Ces informations vous permettent de connaître la maturité de votre interface et vous donne des indice sur l’expérience que vos utilisateurs auront avec votre application.
L’obtention de devis précis
Je ne compte plus le nombre de fois où la question “Combien coûte une app” m’a été posée. Comme pour l’achat d’une voiture, le devis pour une application mobile peut aller du simple au triple — voir plus — en fonction des fonctionnalités demandées.
Le prototype interactif permet aux agences et développeurs de se faire une idée précise de ce que vous souhaitez développer et leur permet de vous présenter des estimations précises.
Il permet d’exprimer concrètement votre vision ainsi que de réduire les potentielles incompréhensions et rassurer le prestataire sur la clarté du projet.
La création de spécifications techniques
En fonction de la complexité du projet, une étape préliminaire à l’obtention d’un devis peut être la rédaction de spécifications techniques.
En effet sur un projet à forte technicité, les éléments techniques non présents sur le prototype peuvent avoir un impact important sur le devis — par exemple un backoffice d’administration — il peut être nécessaire de rédiger des spécifications techniques afin de spécifier les éléments non visibles sur le prototype avant d’effectuer un devis.
Encore une fois, le prototype définie beaucoup d’informations autour de l’interface et l’expérience utilisateur. Cela permet aux consultants techniques ou aux agences que vous contacterez de se focaliser sur les choix techniques adaptés pour créer votre application.
Conclusion
La méthode et les outils présentés dans cet article peuvent vous permettre d’améliorer vos chances de mener à bien un projet d’application mobile.
Un prototype — surtout s’il est interactif — permet non seulement de matérialiser votre vision en une représentation très proche de l’application finale mais aussi de collecter des retours de vos futurs utilisateurs ainsi que des investisseurs et financeurs du projet.
Les retours des différents acteurs de votre application permettent d’affiner de nombreux points comme l’interface, les fonctionnalités clés, etc. avant même de commencer les opérations de développement.
Cela permet de générer beaucoup de valeur pour un investissement initial faible, quand on le compare aux investissements engagés lors du développement de l’application mobile. Mieux encore, plus le projet est défini et précis, moins les frais de développements seront importants : l’application étant clairement définie, les développeurs ont moins de “guess work”, ils se posent moins de question sur le résultat final et produisent une application conforme aux attentes en moins de temps.
La maîtrise d’outils de prototypage permet donc de mieux maîtriser les coûts de développement, améliorer le produit final et répondre à un grand nombre de questions inhérentes à la création d’une application mobile.