Maquettes interactives rapides pour les premiers tests d'utilisabilité
J'ai complètement étoffé mon idée d'une application web mobile. J'ai créé les maquettes dans Sketch , et j'ai la documentation de tous les modèles et actions de contrôleur dont j'ai besoin pour faire fonctionner cette application.
Je veux me concentrer fortement sur UX, donc je voudrais créer rapidement un prototype HTML/CSS avec des interactions complètes afin que je puisse faire des tests d'utilisabilité, Tweak et répétez avant de me plonger trop profondément dans l'esthétique, l'interface utilisateur, les structures de données et tous les autres détails qui entrent dans la création d'une application Web mobile.
J'ai essayé d'utiliser D3.js il y a quelque temps pour créer des maquettes interactives selon cet article . Cependant, il est devenu de plus en plus complexe de configurer chaque interaction.
Je ne veux pas être trop pris dans les détails de la fabrication de modèles, de contrôleurs et de tout cela (car je vais utiliser Rails pour l'application). Alors, quels outils seraient les meilleurs pour faire des maquettes interactives rapides afin que je puisse me concentrer la plupart de mon temps sur les tests d'utilisabilité?
Si vous voulez faire des maquettes rapides, vous ne devriez pas encore vous concentrer sur le développement et la conception visuelle.
1. Prototype papier
Dessiner vos idées avec un stylo et du papier vous permettra d'essayer toutes sortes de mises en page en peu de temps. C'est rapide et cela vous aide à vous concentrer sur la structure de votre conception.
Avec POP , vous pouvez rapidement convertir vos wireframes esquissés en un prototype fonctionnel.
Testez vos wireframes.
Accédez à votre public cible et laissez-le naviguer dans vos wireframes. S'ils ne sont pas clairs à ce stade, vous pouvez revenir à la planche à dessin sans perdre les heures de développement.
2. Conception
Après avoir créé le filaire parfait, vous pouvez commencer à créer un design visuel tueur qui doit améliorer l'expérience utilisateur. Dans cette étape, vous pouvez enfin vous concentrer sur les couleurs, les polices, les animations, les images et le contenu avec Sketch , Photoshop ou d'autres outils de conception (peut-être After Effects pour les conceptions animées).
Testez votre conception.
Allez à nouveau vers votre public cible et testez les conceptions visuelles pour voir si elles l'aiment
3. Développement
Il s'agit de la dernière étape de l'itération. Maintenant que vous savez que votre structure et votre conception sont conviviales et rendent l'utilisateur heureux, vous pouvez étirer vos doigts et commencer à développer.
Conclusion:
Si vous souhaitez tester rapidement certaines idées, utilisez une application (comme POP ) qui rend vos wireframes interactifs. Mais n'oubliez pas que les tests doivent toujours être effectués à la fin de chaque étape.