/ Sketch

Prototypage rapide - App mobile #1

Il me tenait à coeur depuis un moment de présenter quelques cas d'études simples mais efficaces de prototypage rapide.

Chacun comprend le terme "prototype" à sa manière, mais il me semble nécessaire de replacer la vision que j'en est.

Un prototype est un "moyen" d'exprimer une idée à la base abstraite de manière concrète et matérielle. C'est une expression adaptée et destinée à un public qui va "tester" ce prototype et qui serait potentiellement le public utilisateur de la production finale.

Fake it until you make it

Le prototype est réalisé dans le but de simuler le produit final réel aux yeux des testeurs. Il remplit sont objectif lorsque le testeur croit à chaque moment du test qu'il est en train d'utiliser le produit en question, ou du moins, lorsqu'il peut se projeter dans les conditions finales d'utilisation.

Le prototype, le "minimum lovable product" comme on peut l'appeler prend alors tout son sens : grâce à lui, on peut très rapidement faire remonter du feedback des utilisateurs finaux, de manière à valider une idée, un concept, une fonction, ou au contraire très rapidement changer de direction.

Il représente le coeur d'une expérience, l'expression d'une hypothèse, mais comporte le nécessaire à "s'intégrer dans un système complet".

Par exemple, Google utilise du prototypage rapide pour tester des fonctions Gmail. Rapidement, avec un Design Sprint par exemple, ils avancent un rendu prototype d'une partie de Gmail. Derrière rien de développé, juste de l'image cliquable et des animations standards. Mais lorsqu'il est présenté au testeur, il est aussi prévu des vues "d'introduction" au prototype, comme, pour notre exemple, la vue ou l'utilisateur se connecte à son compte gmail. Ainsi, le testeur se projette, croit être dans l'application et va pouvoir donner un feedback efficient, encore faut-il bien gérer la session de test et le questionnaire prévu, mais cela est pour un autre article :)

Cas d'étude app mobile #1

Volontairement, je choisi pour commencer cette série, un cas d'étude très simple.
En dehors de ma casquette designer, je m'occupe également d'animer une communauté autour du Design sur Lyon. Nous utilisons un groupe Facebook pour échanger, mais nous sommes maintenant plus de 1300 dessus. Il est désormais impossible de retrouver le profile de quelqu'un facilement, Facebook ne proposant pas un Carnet de contacts partagé.

D'ailleurs, n'ayant rien trouvé d'efficace pour répondre à ma problématique (oui, même sur product hunt !), je me lance dans un mini mini sprint pour réaliser le prototype exprimant une solution possible.

Je n'ai pas plus de 1 journée à alouer à ce "test".
La matinée concerne la remonté du besoin, quelques questionnaires aux Designers de la communauté. Une phase d'inspiration également, pour rapidement récupérer les bonnes idées là ou elles sont : Un moteur de recherche efficace et fonctionnant par tags sur Instagram, un listing par fiches, etc...

Arrive 12h30, repas. 14h reprise, et jusqu'à 19h cela ne laisse pas beaucoup de temps ! Je m'occupe de réaliser un storyboard de la navigation test en 1 heure, ce qui me laisse 4h pour la réalisation du prototype "minimum lovable".

C'est là que Sketch entre en jeu.

Sketch app est mon outil de prédilection. D'une efficience incroyable, il permet de construire très rapidement un prototype suffisant pour "faker" la réalité. Sans parler des plug-ins disponible comme Craft de invision pour ne citer que lui.

Rapidement, je réalise un Styleguide de base pour mon app en utilisant les symboles de sketch. Blocs, éléments de fiche contact, etc... Le tout en préparant en même temps les styles graphiques et les styles de texte.

Quand je dis que c'est un prototype simple, c'est qu'il n'y a pas beaucoup de vues, le parcours à tester est rapide et je ne rentre pas dans une utilisation trop technique de sketch, avec par exemple l'utilisation de fichiers Json, les symboles dans les symboles, etc...

Styleguide préparé en 1h, il me reste ainsi 3h pour construire les différentes vues de navigation, générer du contenu dynamique avec Craft, et finaliser un peu les styles. Ensuite, un clique pour tout envoyer dans Invision et encore 30 minutes pour lier les différentes vues et rendre le tout "naviguable".

On découvre le rendu ?

19h, j'envoie le Prototype par sms à quelques amis de la communauté pour récupérer du feedback pour le lendemain matin. Je poste également le lien de test sur le groupe Facebook, accompagné de quelques questions ouvertes.

Tester le prototype ?

Le prototype

Et voilà !
L'investissement d'une journée était fructueux et rentable. Une journée pour un prototype à porter aux tests, je trouve cela plutôt excitant !

Pour le prochain cas d'étude, nous irons un peu plus loin dans les bonnes pratiques ainsi que l'utilisation de Sketch app. Un bon moyen de vous montrer la puissance et "la nécessité" de bonnes méthodes de conception, si ce n'est pas co-conception, ainsi qu'un bon process de prototypage rapide mais efficace !