App Prototyping - avantages, outils de conception et exemples

Souvent, le prototypage n'est pas suffisamment pris en compte dans la phase initiale d'un projet de logiciel. L'utilité d'un prototype est pourtant très précieuse pour économiser des coûts et du temps et obtenir un meilleur résultat au final. Tu peux lire dans les lignes suivantes pourquoi il en est ainsi et comment nous créons et utilisons des prototypes chez Apps with love.

Ce qu'est app prototyping

Avec les prototypes, on essaie de simuler une application sans devoir faire des efforts de programmation. Les prototypes peuvent être considérés comme des présentations "PowerPoint" interactives et multilinéaires. Ils montrent comment une app va fonctionner, sans être complètement fonctionnelle.

Chez Apps with love, nous distinguons deux types de prototypes :

1. les prototypes fonctionnels

2. prototypes visuels

Un prototype fonctionnel a pour objectif de présenter l'application conçue dans son intégralité. Il s'agit de voir si les fonctions, par exemple les boutons, sont placées de manière à ce que les utilisateurs les trouvent et les utilisent. Dans ce contexte, nous parlons également d'un clickdummy : il s'agit de découvrir comment l'application peut fonctionner. L'aspect visuel n'est pas au premier plan. Il s'agit plutôt de valider fonctionnellement les interactions des utilisateurs avec l'app.

Si possible, un prototype fonctionnel devrait inclure tous les écrans de l'app. Tu peux voir un exemple simple ici :

Si tu souhaites essayer toi-même le prototype Figma, tu peux le faire ici.

En revanche, un prototype visuel pourrait théoriquement représenter l'application complète, mais cela serait généralement trop compliqué et donc trop coûteux. C'est pourquoi les prototypes visuels se limitent par exemple à une seule transition entre les écrans ou à l'animation d'un élément sur un écran (p. ex. un bouton ou un chargeur). Les prototypes visuels concernent donc plutôt des éléments visuels individuels et leur conception.

Pourquoi créer un prototype cliquable pour une application?

On peut comparer cela à la construction d'une maison : Pourquoi un architecte devrait-il élaborer une maquette à partir des plans de construction avant de commencer la construction proprement dite ? Des thèmes comme l'exposition à la lumière, l'orientation au sud ou l'intégration dans le quartier ne peuvent être considérés correctement qu'à ce moment-là. Il en va de même pour les logiciels, en particulier les applications. Les applications mobiles sont élaborées sur un ordinateur de bureau. Mais le produit final n'est vu par les utilisateurs que sur les petits écrans des téléphones portables. Si le design de l'application n'est pas pris en compte lors de la conception sur un petit écran, des erreurs de réflexion peuvent facilement se glisser. Un prototype permet de s'en prémunir.

La procédure de prototypage rapide

Le prototypage rapide n'est pas, comme le terme le laisse supposer, rapide ou plus rapide que le prototypage "normal". Du moins pas dans le domaine du design d'interface utilisateur ou d'expérience utilisateur (UI/UX). Le terme "prototypage rapide" vient du secteur du design industriel, où les produits ou les composants sont testés au moyen de modèles 3D avant d'être produits en masse. Dans ce contexte, la création d'un prototype est beaucoup plus rapide et moins coûteuse que d'attendre le produit fini et d'y constater des défauts. 

Dans le domaine de l'UI/UX, nous interprétons ce terme de la manière suivante : chaque partie dont la conception est terminée est examinée par le public cible au moyen de tests. Si des défauts sont constatés, ils peuvent être corrigés immédiatement et à un coût relativement faible. Par prototypage rapide, nous entendons donc le prototypage normal comme partie intégrante d'un processus itératif lors de la conception.

Ce qu'un prototype peut apporter

La plupart des prototypes ou "clickdummys" se limitent à une succession multilinéaire d'écrans. Ceux-ci peuvent être appelés par un clic ou un tap. En tant qu'utilisateur, on obtient ainsi, en plus de l'aspect visuel, une sensation de temps. Combien de temps prend l'utilisation de l'application ? Pourrait-on éventuellement raccourcir le chemin vers l'écran cible ? Une bonne UX est l'alpha et l'oméga d'une app et il est important de rendre l'utilisation la plus simple et la moins compliquée possible pour les utilisateurs.

Dans une certaine mesure, les apps peuvent être rendues perceptibles avant même d'exister. C'est pourquoi les prototypes sont particulièrement bien adaptés pour convaincre les bailleurs de fonds potentiels de l'idée d'une app. On a déjà bien plus entre les mains qu'une "simple" idée commerciale théorique. Cela facilite la recherche d'investisseurs ou augmente les chances de crowdfunding, car on peut déjà donner une image beaucoup plus réaliste du produit final possible que si on se contentait de le décrire.

Comme nous l'avons déjà mentionné plus haut, les prototypes permettent notamment de se prémunir contre les erreurs de réflexion et les dépenses élevées pour les annuler. Logiquement, on pourrait économiser de l'argent en renonçant à un prototype lors de la conception. Cependant, la probabilité qu'une idée échoue pendant le prototypage est souvent élevée. Si l'erreur de conception n'était constatée qu'une fois l'application programmée, il faudrait pratiquement tout recommencer, ou du moins reprogrammer beaucoup de choses pour corriger l'erreur. Ces dépenses dépasseraient de loin celles d'une phase de prototypage propre. C'est pourquoi il vaut la peine d'investir dans un prototype lors de la conception et de ne pas commencer directement par la programmation.

Pourquoi un certain degré de programmation peut tout de même être utile

Outre les prototypes de design cliquables, il existe également des prototypes qui contiennent des éléments déjà programmés. On crée des prototypes programmés par exemple pour des apps qui doivent fonctionner en interaction avec un autre matériel. Dans ce cas, un prototype conceptuel ne servirait à rien, car on veut tester concrètement la communication entre le matériel et le logiciel et non pas l'architecture de l'application ou l'expérience utilisateur, comme c'est généralement le cas pour les prototypes. 

Dans ce cas, nous parlons plutôt d'une preuve de concept (PoC) ou explicitement d'un prototype technique. Il s'agit de valider si un certain composant technique peut fonctionner. Pour cela, il faut au moins une certaine quantité de travail de programmation. Mais il peut aussi s'agir d'une application pour console ou d'une application avec pratiquement aucune interface utilisateur (UI).

Les prototypes techniques programmés ou les PoC apportent donc un avantage lorsque l'on ne veut pas tester l'interface utilisateur ou l'expérience utilisateur, mais effectivement la faisabilité technique ou la fonctionnalité. Par exemple, lorsque l'interaction avec un produit existant (logiciel ou matériel) ou une interface (Bluetooth, NFC, authentification complexe) est nécessaire.

Pour ce prototype, seuls deux écrans sont nécessaires

• un aperçu

• la vue détaillée d'une image

Comme aucun contenu "réel" n'est affiché, la vue détaillée de toutes les images est identique. L'effort nécessaire à la réalisation de ce prototype est minime. Néanmoins, il illustre la structure de la solution et la manière dont la navigation dans la collection de photos fonctionnera.

Ici, tu peux essayer le prototype toi-même.

Ici, le nombre d'écrans dépend du nombre de photos dans la collection. Il faut un écran par photo dans le prototype.

• Aperçu

• Vue détaillée de l'image 1

• Vue détaillée de l'image 2

• Vue détaillée de l'image 3

• ...

Le nombre d'écrans d'un prototype peut donc rapidement se multiplier en fonction de ce qui doit être représenté.

Ici, tu peux cliquer toi-même à travers le prototype.

Economise du temps, des coûts et des nerfs

Les clickdummys et les prototypes en général sont un outil précieux pour tester des fonctionnalités sans que cela n'implique déjà des efforts de programmation coûteux. En reproduisant le flux d'utilisateurs prévu, les éventuelles erreurs de logique deviennent visibles et peuvent être corrigées à temps. En outre, les prototypes aident énormément les futurs utilisateurs ou clients à se représenter comment la solution fonctionnera. En d'autres termes, les prototypes illustrent beaucoup mieux l'idée qui se cache derrière une application prévue et la manière dont elle sera perçue. Un prototype peut donc également devenir un outil important, par exemple pour la recherche de bailleurs de fonds potentiels.

Un investissement relativement faible dans une phase de prototypage propre vaut donc vraiment la peine, car il permet d'économiser du temps et de l'argent à long terme.

Contacte-nous si tu as une idée d'application que tu souhaites valider et faire passer au niveau supérieur à l'aide d'un prototype.