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. Den 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. 

'Page-baséiert' Prototyping Tools

D'Säit-baséiert Tools ausgewielt sinn  Flint , Invision , Ki et Flësseg UI.
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.

Flint

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.

Wa mir Ännerunge fir e Spott an @Dropbox maachen, gëtt se och automatesch an @flinto aktualiséiert

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.

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.

Dës einfach Fortschrëtt Bar mat Erfolleg Message Animatioun verlaangt aacht Spott an huet nach wierklech choppy wossten

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.

La seule raison pour laquelle nous n’avons pas retenu Invision est qu’il est pas aussi simple pour manipuler les pages. an 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. Méi relier les pages en se basant sur les noms de fichiers n’est pas aussi intuitif que l’identification visuelle des fichiers.

Am Géigesaz zu Flinto kënnt Dir nëmmen eng Säit gläichzäiteg gesinn a wielt Link Säit aus engem Dropdown-Menü

Ki

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.

Wéi och ëmmer, Keynote Prototypen deelen ass net sou einfach wéi ee mengt. Am Géigesaz zu Flinto oder Invision, musst Dir de Prototyp als PDF exportéieren an op Äre Server eroplueden, da schéckt de Link un d'Benotzer Tester oder Är Clienten. Dëst bedeit datt Dir net nëmmen en zousätzleche Schrëtt am Deeleprozess maache musst, awer Dir kontrolléiert och net wéi et op den Apparater vun den Empfänger ugewise gëtt. Wann Äre Benotzertester en Android Apparat huet, kann de PDF a ville verschiddene Zoomniveauen ugewise ginn oder seng Interaktivitéit ganz verléieren. Déi bescht Method fir d'Deployment fir d'Erfahrung esou héich Vertrauen wéi méiglech ze halen ass Keynote fir iPhone oder iPad op den Apparater vun den Empfänger erofzelueden. Dësen Deploymentprozess ass net sou effizient wéi déi aner zwee Tools hei uewen.
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.

Flësseg UI

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.

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. Op der anerer Säit, wéi 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!