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. L'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. 

Strumenti di prototipazione basati sulla pagina

Gli strumenti basati sulla pagina selezionati sono  selce , Invision , Nota fondamentale 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.

selce

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.

Ogni volta che apportiamo modifiche a un mock in @Dropbox, verrà aggiornato automaticamente anche in @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.

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.

Questa semplice barra di avanzamento con l'animazione del messaggio di successo richiedeva otto derisioni e sembrava comunque molto instabile

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. In 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. più relier les pages en se basant sur les noms de fichiers n’est pas aussi intuitif que l’identification visuelle des fichiers.

A differenza di Flinto, puoi vedere solo una pagina alla volta e selezionare la pagina di collegamento da un menu a discesa

Nota fondamentale

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.

Tuttavia, condividere i prototipi di Keynote non è così facile come si potrebbe pensare. A differenza di Flinto o Invision, devi esportare il prototipo come PDF e caricarlo sul tuo server, quindi inviare il collegamento agli utenti tester o ai tuoi clienti. Ciò significa che non solo è necessario eseguire un passaggio aggiuntivo nel processo di condivisione, ma non controllare nemmeno come verrà visualizzato sui dispositivi dei destinatari. Se il tuo tester utente ha un dispositivo Android, il PDF può essere visualizzato con diversi livelli di zoom o perdere completamente la sua interattività. Il miglior metodo di distribuzione per mantenere l'esperienza il più fedele possibile è scaricare keynote per iPhone o iPad sui dispositivi dei destinatari. Questo processo di distribuzione non è efficiente come gli altri due strumenti di cui sopra.
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.

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. D'altra parte, come 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!