Depuis la création du pôle Design de Dernier Cri, nous avons toujours mis un point d’honneur à tester nos productions auprès d’utilisateurs avant de lancer le développement.

Notre méthodologie issue du Design Sprint, imaginée par Google Ventures, permet de produire des maquettes, de les prototyper et de les confronter à des utilisateurs, le tout en 5 jours ! L’objectif étant de créer une version utilisable du produit le plus rapidement possible afin de réduire les coûts associés.

Sur le papier cette méthodologie “à l’américaine” fonctionne, cependant, nous avons remarqué qu’il fallait allouer plus de temps au design des maquettes et apporter plus de soin au prototype pour en extraire des retours utilisateurs concrets et “purs”.

Lors des tests utilisateurs, l’objectif est littéralement de “confronter” le produit aux potentiels futurs utilisateurs. Cette confrontation est forcément biaisée si les utilisateurs font des remarques du type “Ah oui c’est parce que ce n’est pas encore terminé.” ou encore “Bon je me doute que c’est un prototype donc ok…”

Ce genre d’indulgences de la part des utilisateurs vont à l’encontre de l’objectif initial de récupérer des retours brutes, parfois très cash, mais dans un objectif constant d’améliorer le produit. Cette “indulgence” est souvent dues à plusieurs points capitaux à savoir :

• Des maquettes Work In Progress : Nous sommes tous des utilisateurs d’applications. Quand nous voyons des écrans à moitié finis ou qui manquent d’identité, il y a comme un blocage qui nous empêche de nous projeter et donc de faire des vrais retours. Les écrans doivent donc être le plus réels possibles.
• L’oubli généralisé de l’UX Writing : Les fameux écrans avec du Lorem Ipsum ont bien entendu raison de la compréhension globale du produit. Comment comprendre ce qu’essaye d’expliquer un écran si la moitié est composée de faux textes ?
• Le manque de contextualisation : Lors des tests utilisateurs, on immerge une personne dans une mission à accomplir, un parcours linéaire à suivre. Ce parcours doit avoir des enjeux mais surtout une continuité narrative cohérente. Par exemple si je sélectionne que je suis intolérant au lactose (dans une application alimentaire) et que l’écran d’après ne me propose que des recettes à base lait… en tant qu’utilisateur, je ressens comme une incompréhension immédiate, une déconnexion avec la cohérence globale.
• Le réalisme du prototype : Bien que l’on applique les trois bonnes pratiques listées plus haut, le réalisme du prototype reste LA pièce maitresse pour capter les vraies réactions de vos vrais utilisateurs. Le réalisme d’un prototype se caractérise par le design des interactions aux plus proches du réel (exemple : écrire avec un clavier dans un champ), sa continuité logique (exemple : on me demande mon prénom à l’inscription → on l’utilise plus tard) et enfin l’utilisation complète de son panel “expérientiel” (sons, vibrations, transitions, etc…)

‍

Dans cette quête du prototype ultime, nous avons pu tester et éprouver pas mal de solutions afin de trouver celui qui correspondait le plus à nos besoins et ambitions. Un petit peu d’histoire donc avec nos tentatives plus ou moins réussies avec des solutions de prototypage :

‍

Invision / Marvel App

‍

‍
Les solutions de prototypage les plus connues et utilisées par les designer sont surement Invision et Marvel App. Permettant une prise en main quasiment instantanée, on peut très facilement connecter des écrans entre eux afin de créer un parcours que l’on peut ensuite tester.
Le seul bémol de ces solutions est bien entendu leurs limites techniques. Au delà du pricing de la solution SaaS qui peut rapidement s’envoler (surtout en tant qu’agence avec le cumul des projets), le vrai problème est qu’atteindre un réalisme le plus proche de l’application finale est très compliqué car on ne peut rien animer ni jouer avec les sonneries ou vibrations du support utilisé.

En conclusion : cette solution permet principalement de faire des parcours très simples et une prise en main parfaite pour les débutants.

‍

Flinto/Principle

‍

Avec Flinto et Principle, des logiciels à installer en local (donc pas une solution SaaS) on commence à atteindre un niveau de réalisme et d’interactions beaucoup plus correct. Il y a plus de transitions entre les écrans, des interactions supplémentaires sont proposées.
Cependant, nous avons rencontré les limites suivantes : Les textes ne sont pas éditables dans les deux solutions suite à l’import des maquettes rendant impossibles les modifications directes. Certaines interactions devaient encore être “simulées” comme l’écriture dans les champs par exemple. Enfin, les prototypes et les parcours ambitieux devenaient rapidement source de bugs et autre problème technique car la liseuse du prototype ne les supportait pas.
Enfin dernier bémol de taille, Flinto et Principle ne sont disponibles que sur Mac. Il est donc très difficile de livrer/proposer le prototype final à nos clients.

En conclusion : Les deux logiciels nous ont permis d’aller plus loin dans le réalisme de nos prototypes. Cependant, leurs limitations techniques, la difficultés d’utilisation ainsi que le manque de compatibilités sont vite devenus des points négatifs critiques.

‍

Figma / Adobe XD

‍

Et pourquoi ne pas profiter des outils que nous utilisons au quotidien pour designer, pour prototyper ? Figma proposant son propre module de prototypage. La réponse est la même que pour Invision et MarvelApp : La limitation des possibilités d’interactions proposées.
Nous pouvons l’utiliser pour des prototypes très simples quand nous souhaitons vérifier des comportements ou des parcours qui ne nécessitent pas encore d’animations ou de transitions. Cependant nous jugeons le niveau de réalisme trop limitant pour des tests utilisateurs de qualité.
Pour l’aspect livrable pour les clients, ces solutions sont aussi optimales car elles sont disponibles sur Mac et PC et peuvent être consultées dans un navigateur. Votre client n’a donc pas à télécharger de logiciel et peut tout de suite voir le résultat !

En conclusion : Même si nous utilisons ces logiciels tous les jours, les possibilités de prototypage qu’ils proposent sont trop limitantes pour atteindre le réalisme souhaité pour nos prototypes.

‍

Protopie

Et soudain, un jour sur ProductHunt, apparait Protopie. Le programme fait des promesses énormes sur les effets, les animations, les comportements et les transitions qu’il propose. La promesse est belle (comme souvent), donc je décide de le tester. Je n’étais absolument pas préparé à trouver ce qui allait non seulement changer notre manière de prototyper mais aussi impacter notre process de conception et le livrable clients.

‍

Protopie est un logiciel (Mac et PC déjà un bon point) qui possède aussi un Cloud permettant de partager les prototypes directement dans le navigateur (parfait pour les présentations et livraisons client). Il dispose aussi d’une application “Protopie Player” afin de jouer les prototypes sur les devices (Smartphone / Tablette).

L’interface elle-même est très proche de celle de Figma que nous utilisons pour la conception donc on est presque instantanément opérationnel dessus. Le seul point qui change est le panneau latéral des interactions.

Concrètement Protopie nous fait réfléchir comme en développement. Nous allons définir des déclencheurs (Triggers) qui vont alors provoquer des actions (Responses). À partir de là tout est possible car on peut empiler à volonté les actions sur un même déclencheur. En allant plus loin, on peut même “Conditionner” le déclenchement ou non d’une action. Ça à l’air compliqué comme ça ? C’est finalement ultra-simple, par exemple :

Quand je clique sur le bouton “CTA 1” (Déclencheur)
Alors exécute ces actions (Responses) :

• Le bouton devient vert
• Je change l’opacité de l’icône de 0% à 100% pour le faire apparaitre
• Puis, avec un décalage de 2,5 secondes, je change de page pour aller à l’étape suivante.

C’est donc cette liberté de déclencheurs et d’actions ainsi que la profondeur du catalogue proposé qui nous a immédiatement séduit. Du double tap, au swipe, à la détection de proximité, … Nous venions de découvrir des possibilités que nous n’intégrions pas dans nos maquettes auparavant parce que l’on ne pouvait pas les tester avec de vrais utilisateurs.

Autre élément qui nous a séduit immédiatement : On peut enfin avoir des champs interactifs qui utilisent réellement le clavier du téléphone. On peut même personnaliser si c’est un clavier numérique uniquement ou de mot de passe (affichage automatique des caractères en masqué). Ce détail, en apparence anodin, nous permet désormais de tester par exemple la longueur d’un onboarding réel.

Protopie est donc un logiciel complexe mais qui ouvre le champs des possibles. Conscient de la complexité de l’outil (en tout cas au début) ils ont immédiatement créé des communautés sur Facebook, Slack principalement. Lorsque nous nous confrontions à des sujets complexes, nous avons pu demander de l’aide sur ces canaux. La réponse fût incroyablement rapide (20–30min maximum) et non seulement nous avions une explication à notre problème, mais nous avions aussi accès à la personne qui nous avait fait un fichier Protopie de démonstration ! (Une personne qui ne travaille pas pour Protopie pour information). Cette superbe communauté est le pilier de la réussite de ce logiciel et nous a assistées mainte et mainte fois !

Aujourd’hui tous les prototypes Made in Dernier Cri sont un succès lors des tests utilisateurs avec des rendus toujours plus proches du produit réel. Ces prototypes font aussi office de guidelines pour le rendu front des animations, des comportements et des transitions. Chaque prototype peut être transformé en “Receipe”, un module proposé récemment qui offre une vue décomposée des déclencheurs et des actions ainsi que le temps, la durée et les paramètres de chacun. Le tout consultable directement dans le navigateur (donc pas besoin de licence pour chaque développeur !)

Nous continuons de challenger le logiciel sur nos différents projets au quotidien et nous alimentons des minis projets interne de recherche afin de tester de nouveau comportement et leur fonctionnement. Dernièrement nous avons réussi à créer un simple escape game (une salle de laquelle on doit s’échapper en un temps défini) avec un Smartphone et une Tablette connectée seulement grâce à Protopie ! Vous pouvez voir la vidéo de démo ici :

Si vous souhaitez en discuter et voir nos différents prototypes, n’hésitez pas à nous contacter ! Nous serions ravis de créer le prototype le plus réaliste possible de votre futur produit !

‍