Les 7 meilleurs outils de wireframing et de prototypage pour les créateurs d'applications

Dernièrement, j'ai eu beaucoup de discussions sur l'interface utilisateur et l'expérience utilisateur. Personne ne s'est plaint de cela, donc je suppose que nous atteignons un point où toutes les personnes impliquées dans le développement d'applications reconnaissent l'importance de l'interface utilisateur et de l'expérience utilisateur.

Une bonne idée d'application est si facilement ruinée par une interface et une expérience mal pensées. Et avec de nombreux outils désormais disponibles pour le wireframing et le prototypage rapides, il ne devrait y avoir aucune raison de ne pas exécuter une expérience brillante.

Bien que les termes soient souvent utilisés ensemble, il existe une distinction claire entre un wireframe et un prototype.

Un wireframe est une mise en page squelettique et simple de la structure de votre application. Cela se fait généralement sans aucune couleur - noir et blanc simple - et tandis qu'un filaire montre où le texte, les images et les autres éléments de conception iront, il n'inclut pas les images réelles, le texte, etc. Cependant, chacun des éléments filaires est montré à vraie échelle. La raison en est que les wireframes sont destinés à concentrer votre attention sur la structure, pas sur la conception réelle. Tout comme les plans d'une maison ou d'un bâtiment: vous obtenez une idée claire de la structure et de l'emplacement de tout, sans être distrait par le design.

Les prototypes se situent entre les wireframes et une application entièrement fonctionnelle. La partie la plus importante d'un prototype est l'utilisation de l'animation, qui vous permet d'examiner comment votre application répondra à l'interaction de l'utilisateur et aux transitions de page ou d'écran. Les prototypes peuvent également inclure des images réelles, des jeux d'icônes et du texte, mais cela est déterminé par l'objectif du prototype. Si vous ne testez que les interactions et le flux d'écran, vous pouvez créer un prototype qui ne comprend que des animations et peut-être un peu de couleur. Si vous essayez de valider votre idée ou de la présenter à des investisseurs potentiels, vous voulez que votre prototype soit plus poli, en utilisant des images, du texte, etc.

Bien que les outils que j'ai inclus dans ce tour d'horizon facilitent la création de prototypes, y compris plus d'éléments au-delà de l'animation et une touche de couleur signifie que vous avez besoin de plus de temps pour apporter des modifications au prototype.

1. Balsamiq

Si vous souhaitez uniquement créer une structure filaire de votre idée d'application, Balsamiq est l'outil qu'il vous faut. Disponible à la fois en tant qu'application de bureau et Web, Balsamiq existe depuis 2008.

Les wireframes sont censés nécessiter très peu d'efforts et de temps, donc Balsamiq est conçu pour vous aider à créer vos wireframes rapidement. Ajoutez simplement les éléments de base dont vous avez besoin, puis redimensionnez, positionnez et personnalisez selon vos besoins. Les wireframes que vous créez avec Balsamiq auront l'air un peu rugueux, mais c'est intentionnel. L'équipe créative derrière l'outil pense qu'un wireframe qui ressemble plus à un croquis encourage le brainstorming. Ce qui est une grande raison pour le wireframing en premier lieu.

Un contrôle de version simple vous aidera à savoir où vous avez commencé et où vous en êtes maintenant. Et ce n'est pas parce qu'il s'agit d'un wireframe que vous ne pouvez pas obtenir de commentaires d'utilisateurs / clients potentiels. Vous ne pouvez pas créer un prototype entièrement interactif à l'aide de Balsamiq, mais vous pouvez lier les écrans / pages que vous créez pour générer un simple prototype de clic. Pas d'animations ni d'interactions: le but est uniquement de démontrer le flux.

Et si Balsamiq semble un peu trop limité, vous pouvez toujours ajouter l'une des extensions, modèles et packs d'icônes créés par la communauté.

Balsamiq est disponible en tant qu'application de bureau, au prix de 89 $ / utilisateur, une application Web à partir de 12 $ / mois, ou une application liée à Google Drive, au prix de 5 $ / utilisateur / mois. Mais vous pouvez commencer par un essai gratuit pour voir si c'est le bon outil pour vous.

2. WireframePro

Bien qu'une licence MockFlow inclut l'accès à huit applications différentes, c'est WireframePro qui vous intéresserait lorsque vous commencerez à développer votre propre application. Encore une fois, il s'agit d'une application Web, avec une interface glisser-déposer pour créer sans effort un filaire.

Il est livré avec tous les éléments d'interface utilisateur standard, ainsi qu'une multitude d'autres composants dont vous pourriez avoir besoin, y compris une sélection de smartwatches Apple et Android. L'application vous donne également accès au Mock Store, qui propose une large sélection de modèles tiers que vous pouvez utiliser pour vous inspirer ou comme point de départ rapide pour votre propre wireframe.

Comme pour tous les outils listés ici, WireframePro est conçu pour les individus et les équipes, avec des outils de collaboration intégrés. Une belle inclusion est la possibilité de générer automatiquement des spécifications pour chaque élément, donc si vous ne faites pas le travail de conception vous-même, votre concepteur aura un accès facile à tous les détails liés à la conception.

Enfin, lorsque vous partagez l'un de vos projets, vous pouvez attribuer des droits, limitant certaines personnes à ne pouvoir voir et commenter un projet, tandis que d'autres pourraient également le modifier.

WireframePro n'a pas de forfait gratuit, mais vous pouvez l'essayer pendant 30 jours avant de passer à un forfait payant. Les licences commencent à 19 $ / mois pour un utilisateur et à 39 $ / mois pour un maximum de trois membres de l'équipe.

3. UXPin

Comme son nom l'indique, l'équipe derrière UXPin met l'accent sur l'UX. Rien de mal à cela, le wireframing et le prototypage sont destinés à vous aider à affiner l'UX de votre application. Avec UXPin, vous pouvez prendre en charge à la fois le wireframing et le prototypage, donc pas besoin de changer d'outil.

Comme vous vous en doutez, UXPin prend en charge les fichiers source Sketch et les fichiers Photoshop. Mais il dispose également d'un éditeur intégré qui prend en charge les extraits de code CSS, vous permettant de personnaliser tout élément utilisé dans votre wireframe et prototype. Et UXPin facilite le suivi de chaque itération de chaque fichier que vous ajoutez ou créez, vous n'aurez donc pas à cliquer sur des dizaines de fichiers à la recherche de la version originale.

La création de wireframes et de prototypes de base est rapide et facile, avec toutes les interactions de prototype standard disponibles. Naturellement, vous pouvez toujours créer des interactions personnalisées si le besoin s'en fait sentir. Et une fois que votre prototype est prêt, vous pouvez l'envoyer à n'importe qui pour le tester, toutes les interactions étant capturées sur vidéo, avec l'audio des commentaires de chaque testeur.

UXPin prend en charge le wireframing et le prototypage de sites Web, d'applications mobiles et d'applications Web, et est livré avec 14 points d'arrêt prédéfinis, vous permettant de visualiser facilement votre conception sur plusieurs appareils. Le prix commence à 19 $ / mois pour le plan de base et à 29 $ / mois pour débloquer des fonctionnalités avancées.

4. Prott

Bien que Prott soit considéré comme un outil de prototypage, il inclut également une fonction de wireframing. Si votre idée d'application est un peu plus que des croquis grossièrement dessinés, vous pouvez photographier vos croquis et les importer directement dans l'application. Ces esquisses peuvent ensuite être animées ou utilisées comme base pour votre filaire. Faites glisser et déposez des formes prédéfinies et des éléments d'interface utilisateur directement sur votre esquisse pour passer instantanément des lignes tremblantes au filaire lo-fi professionnel.

Prott comprend un grand nombre de kits d'interface utilisateur pour une variété d'appareils, d'iOS à Android et Web. Mais vous pouvez également créer votre propre bibliothèque d'éléments d'interface.

Au lieu de simplement partager votre prototype avec d'autres personnes, vous pouvez même désormais inclure une carte détaillée qui montre clairement la structure de votre application. Et toutes les personnes avec lesquelles vous partagez votre prototype peuvent commenter directement sur chaque écran, ce qui vous permet de comprendre plus facilement à quoi leurs commentaires se rapportent.

Prott propose un essai complet de 30 jours, avec un plan gratuit n'ayant aucune limite autre que le nombre de projets que vous pouvez créer. Si vous avez besoin de créer plus de projets, vous pouvez passer à un forfait Starter ou Pro, au prix de 19 $ / mois.

5. InVision

InVision est exclusivement destiné au prototypage, mais avec un support pour une variété d'utilisations. Avec InVision, vous pouvez rapidement créer des prototypes interactifs de votre site Web, application Web ou application mobile, puis visualiser le prototype sur des appareils réels. Et cela inclut les tablettes et les appareils portables, pas seulement les téléphones portables.

Le processus est aussi simple que:

  • Ajoutez vos éléments de conception (InVision prend en charge les fichiers source GIF, PNG, JPEG, PSD et Sketch) par glisser-déposer ou par synchronisation avec Dropbox.
  • Dessinez des hotspots sur chaque élément et définissez-les pour qu'ils soient liés à d'autres éléments, URL externes ou ancres.
  • Ajoutez de l'interactivité sous forme de gestes (tapotements ou glissements), de zones fixes (barre de menus, etc.) et de transitions.

Une fois terminé, vous pouvez visualiser le projet sur votre téléphone, tablette ou ordinateur, ou même envoyer par SMS ou par e-mail un lien à vos amis et collègues. Cela vous permet d'impliquer plus facilement d'autres personnes dans le processus de conception, avec toute personne à qui vous envoyez un lien pour commenter chaque conception.

Le prix d'InVision commence sans frais pour un prototype, 25 $ / mois pour un nombre illimité de prototypes et 99 $ / mois pour des équipes de 5 membres maximum.

6. Émerveillez-vous

Comme InVision, l'application Marvel est destinée au prototypage. Il inclut la prise en charge standard des fichiers Sketch et Photoshop, ou vous pouvez utiliser leur outil de conception Canvas intégré. Marvel dispose également d'une application iOS et Android qui vous permet de photographier vos propres griffonnages et dessins, et de les télécharger directement dans votre bibliothèque Marvel.

Il est facile de créer des points chauds sur vos conceptions, avec des dizaines d'interactions et de transitions d'écran disponibles pour donner vie à votre prototype. Et vous pouvez tester votre prototype sur une multitude d'écrans, dont Apple Watch.

Bien sûr, aucun outil de prototypage ne vaut la peine d'être discuté s'il n'inclut pas la collaboration. Et avec Marvel, vous pouvez annoter votre prototype pour mettre en évidence des domaines spécifiques sur lesquels vous souhaitez que les gens commentent. Toute personne à qui vous envoyez votre prototype peut faire des commentaires, sans qu'il soit nécessaire qu'elle crée d'abord un compte Marvel.

Le prix sur Marvel commence à 0 $ / mois pour un utilisateur et jusqu'à deux projets, mais avec des fonctionnalités limitées. Pour 14 $ / mois, vous obtenez un nombre illimité de projets et toutes les fonctionnalités, avec des prix distincts pour les équipes et les entreprises clientes.

7. Proto.io

Proto.io est un outil de prototypage populaire qui a reçu une mise à jour massive en 2016. Proto.io inclut toutes les fonctionnalités requises dans un outil de prototypage, mais la mise à jour a également apporté une multitude de fonctionnalités simplifiées.

En plus d'une interface utilisateur repensée qui rend toutes les fonctionnalités de base plus accessibles, Proto.io a également mis l'accent sur l'animation. Le mouvement est une fonctionnalité importante des applications mobiles, et la fonction de transitions d'état de Proto.io permet à quiconque de créer et de personnaliser facilement des animations dans son prototype.

Proto.io a également introduit une bibliothèque de modèles de conception d'interaction, rendant l'ajout d'interactions sans effort. Ces modèles incluent des interactions telles que des menus déroulants et une extraction pour actualiser. Tout ce que vous avez à faire est d'ajouter une interaction à votre projet et de la personnaliser.

La nouvelle version de Proto.io étend votre capacité à demander aux utilisateurs de tester et de commenter votre prototype. Il s'intègre aux plates-formes de test utilisateur telles que Validately et UserTesting, vous donnant accès à un plus grand nombre d'utilisateurs réels. Et avec l'intégration Lookback, vous obtenez des enregistrements illimités - sur iOS uniquement, pour le moment - vous montrant comment les utilisateurs interagissent et naviguent dans votre application.

Proto.io propose un essai complet de 15 jours, après quoi vous pouvez passer à un compte gratuit très limité. Les forfaits payants commencent à 29 $ / mois, selon la taille de votre équipe.

Conclusion

Lorsque vous commencez tout juste le développement d'applications, vous souhaiterez peut-être créer à la fois des wireframes et des prototypes de votre idée d'application. Mais à mesure que vous vous sentez plus à l'aise avec le processus de développement, vous pouvez envisager de faire l'un ou l'autre.

Parce que les wireframes sont si basiques dans leur conception, ils vous obligent à vous concentrer sur le bon flux et l'expérience utilisateur. Les prototypes peuvent vous aider à affiner à la fois le flux et l'UX, mettre en évidence les défauts de conception et, plus important encore, avoir une meilleure apparence que les wireframes si vous avez besoin de présenter à des clients ou des investisseurs. Et s'il peut être tentant de se contenter d'un outil combinant à la fois le wireframing et le prototypage, le facteur décisif doit toujours être de savoir quel outil comprend toutes les fonctionnalités dont vous avez réellement besoin et qui est le plus confortable à utiliser. Et puisque chacun des outils énumérés ici offre un plan ou un essai gratuit, pourquoi ne pas passer une journée à tous les tester avant de prendre une décision?