Comparação de 4 ferramentas interativas de prototipagem

(Artigo original de Bona Kim. Fonte Revista UX. Traduzido por Sébastien Berten (ux-republic.com))

J’ai récemment eu l’occasion de rechercher des outils de prototypage pour mon entreprise. Nous faisons un tas d’applications mobiles de musique qui permettent aux utilisateurs de créer leur propre contenu. Lorsque la société était encore petite, les concepteurs de produits prototypaient avec les ingénieurs, assis côte-à-côte, et exploraient ensemble de nouvelles possibilités. Maintenant, la société met en place des fonctionnalités plus ambitieuses, laissant aux concepteurs et aux ingénieurs de moins de temps pour le prototypage.
Voilà pourquoi j’ai eu pour mission de trouver un outil de prototypage parfait qui répond aux besoins de tous les concepteurs des produits de mon entreprise. Les critères les plus importants sont: convivialité, partage facile, courbe d’apprentissage rapide, mobile et hautement intéractif.
Les outils que je vais vous présenter sont ceux que j’ai trouvé le plus souvent discutés sur les groupes UX en ligne et ceux que de nombreux experts pensaient les mieux adaptés à nos besoins.

Types d’outils de prototypage

Après de longues recherches, j’ai divisé les outils de prototypage en trois catégories : page-based, layer-based, and coding-based. Outils dans chaque catégorie partagent des caractéristiques distinctes ainsi que des avantages et des inconvénients. Cet article se concentre sur deux outils de prototypage basés sur des pages car ils offrent la meilleure adoption des trois catégories. 

Ferramentas de prototipagem baseadas em página

prototipagem baseada em camadas
As ferramentas baseadas em página selecionadas são  pederneira , Invision , Principal et UI fluida.
Grâce à ces outils, vous pouvez créer plusieurs pages ou importer vos mochup statiques, puis créer facilement points pour relier la page suivante avec des transitions.
Ces outils sont utilisés au mieux pour mettre en valeur l’ensemble du parcours d’une grande fonctionnalité (user story) ou une application entière.
Comme tous supportent le glisser-déposer avec une navigation intuitive, il n’y a pratiquement aucune courbe d’apprentissage. Toutefois, ces outils ne permettent pas un fine-tuning des animations ou le contrôle un seul composant dans la page.

pederneira

Après mûre réflexion, nous avons décidé d’utiliser Flinto place d’autres outils dans cette catégorie. Flinto fonctionne le mieux pour nous pour plusieurs raisons. Tout d’abord, la plupart de nos applications sont à un stade stable. Avec chaque version, nous construisons une caractéristique intéressante pour une application existante plutôt que de construire en repartant de rien. Nous avons les éléments d’UI, le guide de style, et des captures d’écran prêts à l’emploi.

Sempre que fizermos alterações em uma simulação no @Dropbox, ela também será atualizada automaticamente no @flinto

Nous trouvons également la fonction de synchronisation Dropbox dans Flinto exceptionnellement utile, car nous sommes en mesure de sauver nos mockup dans Dropbox. Cela signifie que chaque fois que nous apportons des modifications à un mockup dans Dropbox, il sera automatiquement mis à jour dans Flinto. Flinto est extrêmement facile à utiliser, et vous pouvez construire un prototype en quelques minutes.
pederneira
Tout comme les autres outils de cette catégorie, Flinto ne propose pas d’animation fluide sur une page. Par exemple, l’animation d’une barre de progression doit être divisée en plusieurs images plutôt que comme une animation fluide.
pederneira

Esta barra de progresso simples com animação de mensagem de sucesso exigia oito simulações e ainda parecia muito instável

Invision

Invision est une solution proche de Flinto, et a de nombreuses caractéristiques que nous aimons dans Flinto. Il est facilement partageable, hautement collaboratif, est optimisé pour le mobile, offre la synchronisation, et dispose de la version de contrôle des fichiers PSD. Tout comme Flinto, vous pouvez faire glisser-déposer plusieurs images et créer une zone sensible pour faire un prototype interactif en quelques minutes.
Invision
La seule raison pour laquelle nous n’avons pas retenu Invision est qu’il est pas aussi simple pour manipuler les pages. Em Invision, vous ne voyez qu’une seule page dans le navigateur puis sélectionnez le nom du fichier que vous souhaitez lier dans un menu déroulant. Cela offre peu de visibilité de l’ensemble de  mockups que nous avons importé, souvent plus de 50 images. mais relier les pages en se basant sur les noms de fichiers n’est pas aussi intuitif que l’identification visuelle des fichiers.
Invision

Ao contrário do Flinto, você só pode ver uma página de cada vez e selecionar a página de link em um menu suspenso

Principal

Si vous avez seulement utilisé Keynote pour des présentations, vous n’avez pas découvert ses puissantes fonctionnalités pour le prototypage. Keynote propose des transitions animées entre les diapositives, le contrôle gestuel, des capacités d’alignement, la distribution automatique, et les guides intelligents.
Les animations proposées dans Keynote sont assez bien mises en correspondance avec animations standard que vous obtenez en développement iOS. La chose principal est votre familiarité probable avec le programme. Il est l’outil le plus intuitif et auto-explicatif de cette catégorie, car la courbe d’apprentissage est (probablement) de zéro.
Principal
No entanto, compartilhar protótipos do Keynote não é tão fácil quanto se pensa. Ao contrário do Flinto ou do Invision, você precisa exportar o protótipo como PDF e carregá-lo em seu servidor e, em seguida, enviar o link para os testadores do usuário ou seus clientes. Isso significa que você não apenas precisa dar um passo adicional no processo de compartilhamento, mas também não controla como ele será exibido nos dispositivos dos destinatários. Se o seu testador de usuário tiver um dispositivo Android, o PDF poderá ser exibido em vários níveis de zoom diferentes ou perder totalmente sua interatividade. O melhor método de implantação para manter a experiência com a maior fidelidade possível é baixar o keynote para iPhone ou iPad nos dispositivos dos destinatários. Esse processo de implantação não é tão eficiente quanto as outras duas ferramentas acima.
Toutefois, le partage des prototypes Keynote est pas aussi facile qu’on pourrait le croire.Contrairement Flinto ou Invision, vous devez exporter le prototype en PDF et le télécharger sur votre serveur, puis envoyer le lien aux testeurs d’utilisateur ou vos clients. Cela signifie que non seulement vous avez besoin de franchir une étape supplémentaire dans le processus de partage mais vous ne contrôlez pas comment il sera affiché sur les périphériques des destinataires. Si votre testeur utilisateur dispose d’un appareil Android, le PDF peut être affiché en plusieurs niveaux de zoom différents ou perdre son interactivité entièrement. La meilleure méthode de déploiement de garder l’expérience en tant que haute fidélité possible est de télécharger d’honneur pour iPhone ou iPad sur les appareils des destinataires. Ce processus de déploiement ne sont pas aussi efficaces que les deux autres outils ci-dessus.

UI fluida

Fluid UI est un excellent outil si vous commencez le prototype à partir de zéro. Il est livré avec plus de 2000 wireframe prêts à l’emploi pour téléphone et tablette, à la fois pour iOS et Android . Vous pouvez également exporter la totalité de la vue et l’utiliser comme un document flow.
UI fluida
Vous pouvez également télécharger vos mockups de haute fidélité et créer des zones sensibles, tout comme Invision et Flinto. Cependant, je dois dire que l’interface de Fluid UI est le mieux adapté pour les prototypes fabriqués à partir de zéro. Por outro lado, como le téléchargement de plusieurs images est pas pris en charge, vous devez télécharger un par un vos mockups. En outre, le manque de capacité de lier votre dossier Dropbox signifie que vous devrez changer de mockups chaque fois que vous apportez des modifications à votre conception.
Dans le prochain article, je passerai en revue les avantages et les inconvénients de outils ‘code-based’ et ‘layer-based’.
Merci pour la lecture et restez à l’écoute!