Stimuler vos interfaces avec ProtoPie

par Grégory Fichère le 3 janvier 2022

S’il peut paraître surprenant de ne pas trouver l’anglais comme premier choix dans le menu langue de Protopie, c’est que l’application dont nous allons vous parler nous vient directement d’Asie et plus précisément de Corée. Son CEO et fondateur, Tony Kim a travaillé 20 ans dans le design d’interaction et l’expérience utilisateur entre autres chez Google China puis Korea.

Pourquoi une application de plus ?

Cette application n’est pas un nouvel ersatz graphique qui cherche à remplacer Sketch, Figma ou XD. ProtoPie s’oriente plutôt dans ce qu’il est impossible de définir dans ces derniers : les comportements. La plupart des applications font très bien l’organisation de contenus par vues ou écran avec la possibilité de réutiliser tel ou tel élément, couleurs, variables, composants. Mais chacune a ses limites. Sketch est magistral en design system pour « designer » finement et décliner des contenus mais peine pour la partie prototype. Figma et XD sont plus légers en design et création graphique de composants mais se rattrapent sur le cheminement des écrans, la conception et le partage du prototype. Mais aucun des trois ne se positionne vraiment sur la dynamique des objets ou la scénarisation des actions dans l’interface.

Oui, il est possible de simuler des transitions basiques d’une page à l’autre mais pour l’animation complexe d’éléments c’est à coups de plug-in (parfois payants) ou de bricolages impropres qu’il est difficile à mettre en place sans brider sa créativité tant les limites sont rapidement atteintes. Il sera impossible de manipuler des contenus, il faudra obligatoirement aller jusqu’au développement code et perdre un temps précieux.

Parlons de ProtoPie !

On y retrouve tout ce qui est nécessaire pour créer des interactions réalistes et simuler l’éventail des comportements rencontrés dans les interfaces modernes. Que ce soit pour conceptualiser l’animation d’un écran d’accueil, ou prototyper défilement et transition de contenus. Mais pas que.

Des comportements complexes

Swipe de triggers, slide multidirectionnel, parallax hover, éclosion de « pop-in » ou explosion de « pop-up »… On peut aussi piloter le scroll grâce à l’accéléromètre… ou créer du skeuomorphisme d’interaction en construisant un potentiomètre de type volume. Le tout testable directement dans votre smartphone via le client mobile.

Mais bon, tout n’est pas livré tel quel. Il faut construire ses composants. De nombreux exemples préfabriqués pour l’ensemble des actions se retrouvent sur le site https://www.protopie.io. Leur support vous envoie par mail le lien vers des tutos, webinaires et autres événements ProtoPie. Les vidéos de démo présentent sur le site sont simples et dans un anglais accessible. La documentation ne demande pas d’être un expert JavaScript ni d’avoir un master en story-board.

Une interface orientée action !

Pour les outils mis à disposition, on rencontre la scène (représentation des différentes vues de l’interface) où figurent les objets (acteurs de votre scène), les composants, une timeline pour la gestion des actions dans le temps et enfin des triggers. C’est là que se trouve le moteur de la machine à voyager dans le prototype. Des actions liées au « touch »
ou au survol de la souris, des conditions qui détectent le remplissage d’un champ ou la position d’un objet dans la scène, la frappe claviers. Mais aussi l’insert de valeur ou le focus d’un « input » (champ de formulaire) qui déploie automatiquement le clavier virtuel en prototype mobile. Car oui dans les primitives figure un vrai champ de formulaire et son florilège d’états. Composant qui manque cruellement chez les autres.

Une interface orientée action !

Graphiquement limité

On regrettera juste ses limitations graphiques. Les attributs visuels sont basiques, pas de dégradés ni de styles. Pour l’édition d’objets, vous ne trouverez ni plume, ni triangles et autres primitives fantaisistes mais juste quelques objets (rectangles, ellipses, polygones…) ainsi que des textes et les champs de formulaire. Ici, aucun objet ne peut subtilement être designé mais comme expliqué plus haut, ce n’est pas la voie choisie par ce logiciel. En revanche, l’import depuis Sketch, Figma ou XD est assez facile sauf pour quelques objets qui doivent rester éditables et qui demanderont quelques adaptations. L’application continue d’évoluer et il est facile de proposer des évolutions par le biais des feedbacks suggérés par leur créateur et d’une équipe très réactive.

À tester au Cepegra

En juillet 2017, nous avions manqué l’opportunité de nous lancer sur ce nouvel outil. D’autres modules étaient déjà en développement comme l’atelier Sketch et ses « nested symbols » pour le design UX/UI mais aussi côté code pour Flexbox avancé et Grid avancé. Nous avions aussi d’autres difficultés pour débloquer l’une ou l’autre licence nous obligeant à reporter nos tests. Cette attente aura sans doute permis à leur solution d’atteindre une plus grande maturité et nous permettra de proposer un module plus construit pour les mois qui arrivent. Ne manquez pas de jeter un coup d’œil au planning sur : https://www.formation-cepegra.be.