Comment créer le prototype
de son application ?

Un prototype dans le cas présent d’une application, est un exemple fonctionnel de l’application que vous souhaitez développer.

Il permet de montrer aux utilisateurs potentiels et/ou aux investisseurs, à quoi va ressembler cette application et vous aide à déterminer si votre produit répond à un besoin réel, si l’utilisateur comprend les interfaces et navigue de manière fluide dans l’application (ce que l’on appelle l’expérience utilisateur - UX).

Découvrons ensemble les grandes étapes pour créer votre prototype “From Scratch”. 

- Comprendre le problème

C’est l’étape la plus importante du processus de création du prototype. Valider auprès de vos cibles le problème rencontré et partagé par tous. Se concentrer sur un problème est primordial pour les prochaines étapes.

- Adresser une solution simple

Une fois le problème ciblé, l’étape suivante est d’adresser une solution à ce problème en se concentrant sur les fonctionnalités clés. Il est tout à fait envisageable à ce stade de lister et prioriser les fonctionnalités que vous souhaitez faire tester à vos utilisateurs une fois le prototype terminé. Limitez-vous à un nombre de fonctionnalités pour ne pas mélanger les fonctionnalités qui auront pour but d’améliorer le produit ou de répondre à de nouveaux besoins voir à des besoins spécifiques avec les fonctionnalités essentielles à l’application.

Après avoir identifié vos futurs utilisateurs, vous allez pouvoir avant même de commencer les wireframes tester et retravailler votre projet. En décrivant sous la forme de scénarios, comment vos utilisateurs (personas) vont pouvoir interagir avec votre solution.

Comme c’est le cas pour un "Elevator Pitch", l’objectif est de savoir si le projet est compris dans son ensemble . Toutefois, vous pouvez tout à fait faire lire vos scénarios à d’autres personnes. Cette étape est très utile pour commencer la conception des wireframes.

Augmenter le niveau de détail et l’apparence visuelle de vos interfaces. Cette prochaine étape à pour but de montrer à quoi va ressembler le produit final. 

- Choix de la typographie
- Définir les couleurs (principale, secondaire…)
- Choix des icônes et images
- Peaufiner la structure, les espaces, les grids 

Une fois les mockups terminés, la dernière étape consiste à transformer vos mockups en prototype. C'est-à-dire permettre aux utilisateurs d'interagir avec l’application en la rendant fonctionnelle.

Dans une certaine mesure, le prototype simule le produit final. Il est idéal pour corriger d'éventuels problèmes avant de passer à la phase de développement.

Définissez un nombre maximum de personnes à qui vous allez faire tester votre prototype. L’objectif étant que ce nombre soit assez représentatif, mais pas trop élevé de manière à vous concentrer sur chaque retour. 

Créer des scénarios pour dresser un périmètre et préciser le déroulement autour des tests. Les scénarios pourront avoir comme objectif de tester l’ergonomie, évaluer les parcours au sein de l’application, évaluer la compréhension des utilisateurs. 

Vous avez toujours des difficultés pour différencier les Wireframes des Mockups et du Prototype ? Nous avons rédigé un article pour vous, juste ici. 

Pour la réalisation de vos Wireframes:
- Balsamiq

Pour la conception de Mockups:
- Adobe XD
- Sketch 
- Figma  

Pour animer votre prototype:
- Invision  

Sketch et AdobeXD permettent également d’animer vos interfaces.

Coté inspiration:
- Dribbble 
- Behance 

Autres ressources:

Pour vous aider dans le processus de découverte et de conception, nous avons rédigé un article sur le Design Sprint.

Vous ressentez le besoin d’être conseillé ou d’être challengé sur la création de votre prototype ? Contactez-nous et discutons-en !