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. Оutils 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.
Інструменти прототипування на основі сторінок
Вибрані інструменти на основі сторінок Флінто , Invision , Лейтмотив et Інтерфейс рідини.
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.
Флінто
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.
Щоразу, коли ми вносимо зміни до макету в @Dropbox, він також автоматично оновлюється в @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.
Цей простий індикатор прогресу з анімацією повідомлень про успіх вимагав восьми макетів і все одно виглядав дуже непостійним
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. Dans 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. Більше relier les pages en se basant sur les noms de fichiers n’est pas aussi intuitif que l’identification visuelle des fichiers.
На відміну від Flinto, ви можете переглядати лише одну сторінку за раз і вибрати сторінку посилання зі спадного меню
Лейтмотив
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.
Однак поділитися прототипами Keynote не так просто, як можна було б подумати. На відміну від Flinto або Invision, вам потрібно експортувати прототип у форматі PDF і завантажити його на свій сервер, а потім надіслати посилання тестувальникам користувачів або вашим клієнтам. Це означає, що вам не тільки потрібно зробити додатковий крок у процесі спільного доступу, але ви також не контролюєте, як він буде відображатися на пристроях одержувачів. Якщо ваш тестувальник користувача має пристрій Android, PDF-файл може відображатися з різними рівнями масштабування або повністю втратити інтерактивність. Найкращий спосіб розгортання, щоб забезпечити якомога високу точність роботи, — це завантажити Keynote для iPhone або iPad на пристрої одержувачів. Цей процес розгортання не такий ефективний, як два інші інструменти вище.
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.
Інтерфейс рідини
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. З іншого боку, як 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!
