L’UX design est à la mode, et avec lui ses outils permettant aux utilisateurs de tester et faire leurs retours avant (ou en parallèle) du lancement en production par les développeurs.
Aujourd’hui pas loin d’une trentaine de ces logiciels ou solutions sont disponibles, et il faut bien l’avouer, si certains font des choix par défaut, ceux qui commencent à mettre leur nez dedans se retrouvent vite perdu. Du clic par clic de dessins d’écran gribouillés sur un bout de table aux prototypes codés directement en JS, tous ne répondent pas aux mêmes besoins, et au-delà des arguments marketings de leurs jolis sites, aucun ne représente une solution parfaite.
Je vous propose donc de les passer en revue non pas un par un, mais selon les besoins que vous pouvez rencontrer sur un projet numérique :
Poser un parcours très rapidement, en même temps que j’échange avec les membres de l’équipe projet.
Transformer des écrans statiques en un parcours cliquable facilement, et les faire tester.
Pouvoir animer de façon poussée des écrans spécifiques.
Réaliser un prototype avec des parcours complexes, à choix multiples et des champs de saisie.
Faire du prototype par code, pour être au plus proche des contraintes techniques et du rendu final.
Compléter un outil de prototypage, dont il manque des fonctionnalités importantes (collaboration, tests, intégration).
Pour ceux qui voudraient une liste plus exhaustive, j’ai produit un tableau récapitulatif de la majorité des outils avec leurs fonctionnalités et coûts (en perpétuel travail).
Je veux avoir un parcours très rapide en même temps que j’échange avec les membres de l’équipe projet : le papier.
Circa la grotte de Lascaux.
Sérieusement, pour l’instant on n’a rien trouvé de mieux. Alors certes, POP, application créée en 2012 et rachetée par Marvel en 2016, permet de prendre en photo ses gribouillis et de les animer directement depuis son smartphone. Mais le plus rapide et simple reste quand même le bon vieux papier/crayon. Ou tableau blanc. Ou un Google Jamboard pour les « richous ».
Quand utiliser cette solution ?
En début de projet, lorsque les intervenants n’ont pas encore d’idées trop précises en tête. Mais aussi en cours de projet, pour proposer rapidement d’autres idées ou débloquer une solution.
Avantages :
Le plus rapide : Fail Fast/Learn Fast.
Gratuit ou presque.
Collaboratif : permet d’avoir des retours et de modifier en direct.
Inconvénients :
Statique (quoi que avec des ciseaux et un peu de pliage…).
Low-fidelity : Plus difficile de se projeter pour certaines personnes.
Tue des arbres.
Voir aussi (mais en fait non) :
Balsamiq : fut un temps l’outil préféré des UX, ses bibliothèques d’éléments ne permettent pas de dépasser le stade du wireframe, et reste plus long à produire qu’un bon vieux papier/crayon.
Moqups : idem, mais a eu la bonne idée de se recentrer sur les diagrammes.
Pour approfondir :
Je veux transformer des écrans statiques réalisés via Sketch, Photoshop ou autre en un parcours cliquable facilement : la bataille InVision / Marvel.
L’outil idéal pour faire des parcours à la chaîne
Ces deux dernières années, lorsque l’on parle d’outil de prototypage, la plupart des designers (comme des clients) pensent à eux en premier. Ce sont les rois, en particulier InVision avec sa pléthore d’initiatives marketing et fonctionnelles. S’ils ont de nombreux concurrents moins réputés, leur pénétration du marché les rends incontournable.
Quand les utiliser ?
Une fois les premières maquettes lancées. Ils permettent de lier les écrans entre eux avec des transitions animées en clic par clic (clic-through) très rapidement (5–10 minutes), ainsi que de recueillir les précieux retours clients, qu’ils soient esthétiques ou fonctionnels, directement sur les écrans concernés. Ils peuvent être associés à des outils de test (voir plus bas) pour enregistrer les sessions, mais en revanche, ils ne permettent pas de simuler des comportements complexes avec des saisies de champ texte, des choix multiples de parcours ou des animations élaborées.
Avantages :
Les deux : très rapides, permettent de recueillir les avis des clients pour itérer rapidement.
InVision : très complet (presque trop), avec des outils de gestion de projet Kanban, Freehand (simule un tableau blanc), et d’intégration dev. Aussi leur plugin Craft est un précieux compagnon pour Sketch.
Marvel : très abordable (11€/mois/personne), a su rester simple, possède un outil de design basique pour créer les écrans sans passer par un logiciel de design dédié. Des fonctionnalités d’intégration dev doivent arriver.
Inconvénients :
Les deux : pas de saisie de champ texte, de choix multiples de parcours ou d’animations élaborées.
InVision : cher (33€/mois par personne), nécessite un logiciel de design externe pour les wireframes.
Marvel : pas d’outil d’intégration pour le moment (arrive prochainement).
Voir aussi :
CanvasFlip : Un outil similaire, mais qui propose cette fois des outils d’enregistrement des tests, de carte de chaleur, d’analytics, en plus de l’intégration dev (environ 20€/mois/personne).
Adobe XD : la contre-offensive d’Adobe se veut le concurrent de Sketch (dont il copie l’interface sans vergogne), ET de InVision/Marvel. Encore en beta, l’outil ne permet pas un design aussi poussé que Sketch, et l’export du prototype pour le partage est encore limité.
Flinto Lite : le petit frère de Flinto perd en précision d’animation, mais se révèle une alternative honnête, à un prix intermédiaire (20€/mois/personne).
Je veux pouvoir animer de façon poussée des écrans :
la bataille Principle / Flinto.
Les micro-interactions renforcent l’expérience et permettent de se différencier.
Dans un passé pas si lointain, Flash permettait de tout faire ou presque, et a eu le mérite d’ouvrir beaucoup de portes pour l’animation. Flash mort et enterré, beaucoup de designers ont rebasculé sur After Effect, qui reste un logiciel de référence. Mais celui-ci restant onéreux (licence Adobe) et complexe à appréhender, de petits nouveaux s’engouffrent dans la brèche. Là aussi, la concurrence est rude, mais Flinto et Principle commencent à se détacher.
Quand les utiliser ?
Une fois que le parcours d’écran commence à être posé, et que le besoin d’avoir une application ou un site plus “vivant” commence à se faire sentir. Permet de montrer aux décideurs du projet la volonté graphique de façon poussée, et aux développeurs les mécanismes d’animation précis (micro-interactions) à intégrer. S’ils permettent de réaliser plusieurs écrans, ils ne sont pas destinés à proposer un parcours complet, et ne proposent pas de gérer de la saisie de texte ou des variables de comportement.
Avantages :
Les deux : permettent de réaliser des animations complexes et de les faire tester, relativement rapidement. Import des layers Sketch et outil de design basique.
Flinto : moins cher (92€ la license), plus rapide (animations par variables).
Principle : animations plus précises avec une timeline de type After Effect, export des animations en .gif ou .mov.
Inconvénients :
Les deux : mac uniquement, fastidieux de faire un parcours de test complet, pas de saisie de texte ou d’outil de design poussé (type plume vectorielle).
Flinto : pas de timeline ni d’export gif/mov, partage uniquement possible via appli dédiée Mac ou iOS.
Principle : plus cher (120€ la licence), un peu plus long à produire.
Voir aussi :
Atomic : sorti comme une sorte de After Effect en ligne, sa version 2 apportant variables d’interaction, intégration dev et composants, le fait rentrer directement en concurrence avec Axure (16 ou 32€/mois/personne).
Kite : avec une timeline similaire à Principle, il ajoute une bibliothèque de composants iOS prêts à être utilisés, et la gestion du code Swift pour économiser du temps de développement. En échange d’une plus grande complexité (92€ la license).
Je veux réaliser un prototype avec des champs de saisie et des parcours à choix multiples : Axure face à sa concurrence.
Une belle mécanique certes, mais délicate à appréhender et entretenir.
Si les outils de prototypage rapides permettent de couvrir bon nombre de projets, certains parcours de test vont nécessiter des interactions plus poussées avec les utilisateurs. Axure, sorti à l’aube des années 2000, est le vétéran du créneau. Longtemps considéré par certains comme une usine à gaz vétuste, sa version 8 a apporté des améliorations importantes comme une plume, la gestion du svg, ainsi qu’une simplification de l’interface. Et il était temps, la concurrence de Proto.io ou Atomic se faisant de plus en plus pressante.
Quand les utiliser ?
Lorsque le prototype doit proposer des embranchements de décisions aux utilisateurs, enregistrer des informations comme l’adresse rentrée sur l’écran précédent pour la livraison ou la devise choisie. Le tout sans avoir à designer mille variantes d’écran ou avoir à passer par de la production de code.
Avantages :
Tous : très polyvalents, permettent de faire un prototype des premiers wireframes jusqu’aux phases de test complexes avec styles graphiques, animations, recueil de retours clients, de mettre en mémoire les saisies de texte, de gérer des variables de comportement voir d’importer des données.
Axure : une application PC & Mac, mature & complète avec collaboration (AxShare), production de diagrammes, spécifications, de maquettes adaptatives et maintenant de design poussé grâce à l’outil plume. Payement au mois (27€/mois) ou par licence (460€).
Atomic : outil en ligne d’animation par timeline très complet, gestion du code front (CSS), un peu plus rapide à prototyper que ses concurrents, reste abordable (16 ou 32€/mois).
Proto.io : propose d’office les bibliothèques de composant iOS, Android et Windows, animation par timeline, permet d’exporter les assets et intègre Lookback pour les tests utilisateurs.
Inconvénients :
Tous : le temps de production d’un prototype est souvent long, à cause des très nombreux paramètres, et les itérations peuvent être fastidieuses.
Axure : malgré beaucoup d’efforts, l’interface demande un temps d’adaptation, pas d’import Sketch ou Photoshop, reste un peu cher.
Atomic : uniquement disponible en ligne, et seulement sur Chrome.
Proto.io : mac uniquement, prototype d’applications mobiles uniquement.
Voir aussi :
ProtoPie : mobile uniquement comme Proto.io, permet d’utiliser les capteurs des smartphones (mouvement, son, etc…) et de les faire interagir entre eux pour gérer des cas de figure inédits (license de 83€).
Webflow : entièrement basé sur le CSS/JS, permet de faire des prototypes responsive, de construire des composants réutilisables par l’équipe et même de servir de CMS pour créer de vrais sites (15 ou 29€/mois).
UXpin : conçu comme une alternative en ligne à Axure, il intègre des bibliothèques de composants prêts à être utilisés et un outil d’intégration CSS/gestion de styles. Un des plus cher (29€/mois/personne).
Je veux faire du prototype par code pour être au plus proche des contraintes techniques : Framer & co.
Laborieux au début, mais de grosses économies de développement à terme.
Auparavant, pour avoir un prototype respectant pleinement les contraintes techniques, il fallait directement passer par l’éditeur de texte et coder en CSS/HTML, ou utiliser ce veau boursouflé et lent de Dreamweaver (pardon Macromedia ?). Framer, arrivé en 2014, a apporté une vraie alternative avec un équilibre entre design et code, où les deux interagissent simultanément. Origami, et Ionic ont suivi, avec des caractères très spécifiques.
Quand les utiliser ?
Une fois les premières maquettes HD produites, pour vérifier la faisabilité technique du projet, prévisualiser les animations et le comportement de l’interface en situation réelle.
Avantages :
Tous : tout ce qui est produit avec peut être réalisé, et directement transmit aux équipes de développement. Les tests effectués avec sont également plus pertinents, les utilisateurs réagissant à une version très proche du produit final.
Framer : possible de construire les écrans via un outil de design ou en code, l’interface est très simple et représente une introduction idéale au monde du code.
Origami : gratuit, lancé par Facebook en 2016. Aucun code à écrire, toutes les animations et comportements (incluant capteurs et notifications) sont gérés via une cascade de conditions, export de vidéos.
Ionic Creator : avec une interface simple à appréhender proche de Proto.io, il permet de partir d’une bibliothèque d’éléments pour concevoir des applications mobiles visuellement, éditer le code produit, et même les publier sur iTunes Store et GooglePlay.
Inconvénients :
Tous : si des connaissances en code ne sont pas forcément nécessaires, elles aident à ne pas se retrouver bloquer. La nécessité de prévoir tous les comportements, si elle évite les écueils, est aussi très chronophages.
Framer : indispensable de passer par du code, donc long.
Origami : si aucun code n’est à rédiger, le système de cascade de conditions n’est pas forcément plus simple à appréhender, l’interface un peu trop épurée n’aidant pas à s’y retrouver.
Ionic Creator : pas d’import Sketch/Photoshop et des outils de design limités, pour iOS/Android uniquement.
Voir aussi :
Fuse : proche de Framer Studio, avec moins d’outils de design, mais plus intégré aux autres outils de dev comme Android Studio ou Xcode.
Form : l’équivalent de Origami par Google, basé sur leur Material Design. Même avantages, même inconvénients.
J’ai déjà un outil de prototypage, mais il me manque des fonctionnalités importantes (collaboration, tests, intégration).
De quoi faire sa propre sauce.
Il est aussi probable que vous ayez déjà des outils de prototypage à disposition auquel vous êtes habitués et/ou avec lesquels vous êtes déjà engagés financièrement. Plutôt que de vous en séparer, voici quelques compléments qui peuvent être utiles.
Je veux pouvoir faire collaborer mon équipe efficacement :
Trello : le Kanban en ligne pur et simple. Un tableau d’avancement des différentes tâches d’un projet avec des cartes à glisser d’un état à l’autre (à faire/en cours/fait/etc…). Certains s’en servent même pour organiser leurs voyages
Slack : des salons IRC comme au bon vieux temps pour les équipes décentralisées, avec tout un tas d’intégration de solutions tierces, comme GitHub, Google Drive, Jira… Et même Paypal ou Uber.
Je veux que les designers puissent transmettre leurs écrans aux développeurs de la manière la plus fluide et transparente possible :
Zeplin : l’outil idéal pour transmettre des maquettes aux développeurs, un plugin Sketch ou Photoshop qui exporte en un bouton, et des spécifications prêtes à l’emploi, styleguides et code front générés (CSS pour le web, XML pour Android ou Swift pour iOS). Plus des commentaires ajoutés directement sur les écrans. On fait difficilement plus simple.
Advocode : Tout pareil, mais plus proche du côté Photoshop de la Force.
Je veux pouvoir enregistrer des sessions de test :
LookBack : permet de réaliser des tests qualitatifs sur place ou à distance, d’enregistrer l’écran, l’utilisateur, sa voix, les “touchés” d’écran, des commentaires écrits, de partager des vidéos ou segments de vidéos, de les commenter, etc… Seul inconvénient : pas disponible sur PC et ne permet pas de tests quantitatifs.
User Testing : son principal concurrent, permet lui des tests qualitatifs ET quantitatifs, enregistre l’écran, l’utilisateur, sa voix (mais pas les touchés d’écran), permet de partager les vidéos (mais pas des segments), est disponible sur PC mais pas disponible sur Mac.
Voilà, c’est fini.
Ce billet n’a pas la prétention de faire le tour de toutes les solutions, mais j’espère qu’il vous a permis d’y voir plus clair dans la jungle impitoyable des logiciels de prototypage que votre collègue/client/patron a sûrement tenté de vous refourguer.
Pour la petite histoire chez Axance, une des premières (circa 1999) agences françaises à s’être lancée dans l’UX en France, nous utilisons les outils suivants :
Sketch : après être longtemps restés fidèles à la suite Adobe, nous avons pleinement embrassé la révolution Sketch, désormais unanimement adopté par l’ensemble du pôle design. Avec un gros gain de productivité à la clé.
Axure : pour des raisons historiques nous avons un certain nombre de licences, et en avons développé une connaissance poussée. Même s’il est vieillissant il reste l’un des plus polyvalent, et indispensable pour certains projets à parcours complexes de nos gros clients.
Marvel : la lenteur d’Axure pour des projets plus simple nécessitait un outil complémentaire. Après avoir longuement hésité entre InVision et Marvel, nous nous sommes arrêtés sur ce dernier, séduits par sa simplicité… Et par son coût 3 fois inférieur 🙂 Avec une vingtaine de projets réalisés dessus en quelques mois il répond complètement à notre attente.
Zeplin : ce petit outil nous a fait passer un vrai cap dans la transmission des assets aux développeurs clients. Fini pour eux les ouvertures de PSD ! 100% ont été conquis, et nous avec. L’arrivée de “Hand Off” sur Marvel devrait cependant le remplacer.
Slack : très peu utilisé en interne, l’efficacité de cet outil a explosé avec l’arrivée de notre filiale Axance People, permettant aux designers envoyés chez le client de partager leur veille et de se dépanner.
Et vous qu’utilisez-vous ? Avez-vous un outil favori qui ne serait pas présent dans cette liste ?
Article rédigé par Thibault Cabanas, Senior UX Designer chez Axance.
Medium – Twitter – Linkedin