Contact client : +33 1 76 42 00 45 hello@ferpection.com

March 30, 2021

Quel outil choisir pour créer vos prototypes web et mobile ?

Vous avez pour habitude de travailler sur Sketch et vous hésitez à changer pour Figma ou InVision Studio suite aux conseils d'un ami Freelance ? Votre équipe d'UX Designers s'agrandit et vous avez besoin d'un nouvel outil de prototypage collaboratif pour remplacer Axure ? Vous débutez dans le design et cherchez le meilleur outil pour faire vos premiers prototypes ? Cet article vous est destiné !
Étant donné le nombre grandissant de logiciels disponibles sur le marché, il est facile de s'y perdre entre les différentes fonctionnalités offertes par les outils. Nous avons donc décidé de faire un tour d'horizon des outils les plus utilisés en vous présentant leurs forces et faiblesses afin que vous puissiez faire le choix que correspond le mieux à vos besoins. Avant de démarrer, il convient d'abord de se poser la question, qu'entend-on vraiment par outil de prototypage ?

Qu'est-ce qu'un outil de prototypage ?

Communément, on appelle outil de prototypage un logiciel permettant de maquetter une expérience que l’on souhaite développer pour la présenter sous un format visuel. Dans les faits, un papier et un crayon sont déjà de super outils pour faire un prototype lorsque le projet est encore au stade d'idée, cela permet très simplement de poser concrètement une idée, sans forcément passer une phase complète de prototypage sur logiciel.

Pour clarifier les différents outils utilisables pour faire un prototype, il est intéressant de s'attarder sur le processus global. On distingue plusieurs étapes dans le processus global de maquettage :

  • Wireframe : version basse fidélité de la maquette via Sketching (crayon, papier, plutôt associé au parcours) ou sur logiciel (Lo-fi).
  • Maquette : version plus poussée (souvent couche d’UI ou graphique) via logiciel.
  • Prototype : version fonctionnelle (plus ou moins hi-fi) de l’expérience pouvant être testée.

Les principaux outils de prototypage

Pour vous aider à choisir quel logiciel vous conviendra le mieux, nous vous présentons un tour d'horizon des outils les plus utilisés. Spoiler : nous utilisons principalement Figma et prévenons par avance que certains points peuvent être subjectifs.

Principaux outils de prototypage

Figma, le petit nouveau disrupteur

Un des outils les plus récents sur ce secteur (2012), basé sur le web, Figma a été adopté rapidement pour son côté complet et son modèle freemium. Une des forces de cet outil réside dans le fait qu'il est basée sur le web et non sur un logiciel, cela le rend donc disponible sur n'importe quel système d'exploitation (Hello Linux !), permet l'enregistrement automatique dans le Cloud, comme un Google Slides par exemple et une collaboration facile.

Interface de Figma, outil de prototypage


Avantages :

  • Outil tout-en-un utilisable quelque soit l’étape du prototypage, du wireframe au test U
  • Collaboratif
  • Intuitif, facile à prendre en main

Inconvénients :

  • Interactions limitées, pas de prise en compte d’infos saisies
  • Sa simplicité lui fait parfois défaut pour effectuer des écrans/animations complexes
  • Les nouveautés arrivant au compte-gouttes, il est difficile de rester à la page sur les fonctionnalités offertes par l'interface ! 

Sketch, le plus Apple des outils

Un outil créé en 2008. Il se démarque par son esthétique et les nombreux plug-ins disponibles. C'est clairement l'un des outils les plus utilisés aujourd'hui sur le marché, véritable référence pour les UI, il est de plus en plus délaissé pour son manque de collaboration possible et donc moins adapté au workflow d'équipes, et sa disponibilité sur Mac uniquement. Il permet néanmoins un pont intéressant des designers vers les développeurs grâce à son plugin Zeplin, qui va générer les spécifications CSS et HTML. De nombreux autres plugins viennent étoffer l'offre proposée par Sketch.

Exemple de l'interface Sketch, épurée et esthétique

Avantages :

  • Apprécié par les UI
  • Librairie de plugins disponibles
  • Interface épurée
  • Supporte le responsive

Inconvénients :

  • Pas de système d’interactions native (besoin d’être couplé avec Invision ou Marvel par exemple)
  • Prise en main plus compliquée et non collaborative
  • Disponible uniquement sur Mac en logiciel.

Axure, le Windows des logiciels de prototypage

L’un des outils les plus anciens, donc bien rôdé, pour faire du prototypage fidèle et fonctionnel, mais une interface moins user-friendly et intuitive que ses concurrents. Ci-dessous un exemple d'une des fonctionnalités assez avancées d'Axure : le designer peut décider de changer l'état de certains éléments ou déclencher des animations à l'ouverture de la page. Cela peut par exemple permettre de paramétrer l'apparition d'une pop-in newsletter après quelques secondes de visite sur la Home Page.
Interface d'Axure, outil aux fonctionnalités avancées
Avantages :
  • Gestion du cache et interactions très complètes
  • Adapté pour les prototypes poussés et les tests
  • Traduit en français et disponible sur Mac et PC

Inconvénients :

  • Difficulté de prise en main et complexité de l’interface
  • Plus orienté technique qu’esthétique/design
  • Tarif

Adobe XD, le nouveau-né de la suite Adobe

Interface d'Adobe XD

Un outil récent qui s’intègre dans la suite Adobe, une approche similaire à Figma et des interactions plus poussées.

Avantages :

  • Intégration à la suite Adobe permettant de le coupler avec Illustrator par exemple (idéal UI, prise en main plus facile pour les habitués)
  • Interactions plus poussées que Figma

Inconvénients :

  • Équivalent de Figma, le web-based en moins
  • Organisation des pages hasardeuse
  • Le délai de sortie et le manque de stabilité a découragé de nombreux UX
  • Interactions au sein d'une page difficiles à gérer

InVision Studio, la suite d'InVision, inspiré par Sketch

Un outil assez récent qui vient augmenter l'offre d'Invision. Initialement, Invision se concentrait sur son outil d'animation éponyme, permettant d'animer des maquettes venant de différents outils de prototypage comme Sketch. Ils ont ensuite décidé de consolider leur offre en intégrant directement à leur outil de prototypage, qui se démarque donc par ses fonctionnalités poussées sur l'animation et le partage des maquettes. Ci-dessous un exemple des animations poussées que permet InVision Studio, grâce à leur longue expérience avec InVision.
Interface d'InVision Studio

Avantages :

  • Connexion avec InVision
  • Compatible avec les prototypes venant d'autres logiciels
  • Pixel-perfect
  • Gratuit

Inconvénients :

  • Une interface très similaire à celle de Sketch mais moins avancée

Conclusion

Pour conclure, chaque outil a souvent son point de différenciation clé, le web-based collaboratif pour Figma, les interactions très poussées sur Axure, l'approche très UI de Sketch, mais ces points ont tendance à s'estomper avec le temps et les mises à jour de chaque outil. Cela revient donc aussi à un feeling avec chaque logiciel, nous vous conseillons donc de tester les versions gratuites disponibles pour chaque logiciel afin de vous faire votre propre opinion sur la solution, en produisant un même écran et pouvoir comparer. Quoi qu'il soit, toutes les options proposées ici sont selon nous une bonne réponse à des besoins spécifiques.

Pour résumer les principales différences entre les outils présentés, voici un tableau récapitulatif des fonctionnalités et caractéristiques de chaque outil :

Tableau comparatif des outils de prototypage

Pour aller plus loin, voici une liste de ressources intéressantes :



Tous les articles de la catégorie : | RSS

Matthieu Louise

Matthieu Louise

Matthieu est UX Research Consultant chez Ferpection. Il oriente nos clients vers la méthodologie la plus adaptée selon les besoins exprimés et mène la recherche utilisateur de bout en bout. Formé en UX UI design, il affectionne particulièrement la co-création et veille à limiter les biais cognitifs dans chacune de ces études.

Vous avez un projet d'étude utilisateurs ? Découvrir la démo gratuite