Livrables: films d'animation - que faire lorsqu'un filaire cliquable ne suffit pas?
Depuis que j'ai commencé à travailler pour un groupe de réflexion, je suis souvent confronté au problème que mon ensemble standard de livrables ne suffit pas pour décrire une vision. J'ai souvent besoin de mettre en évidence le contexte dans lequel les utilisateurs interagissent avec les appareils. Idéalement, je devrais pouvoir prendre mes wireframes et les montrer dans un style animé avec un peu de contexte où ils sont utilisés. Comme ajouter une scène ou un scénario. Maintenant, je ne suis pas un animateur et je ne deviendrai pas un génie du cinéma, de la 3D ou de l'animation en peu de temps. Mais je me demandais si vous connaissez des outils qui vous permettent de prendre des fichiers graphiques et de les transformer en films d'animation simples. Je connais Adobe CS et Premiere mais pas Flash.
EDIT: merci pour toutes les suggestions jusqu'à présent, mais le logiciel de capture d'écran n'est pas ce que je recherche car il ne se concentre que sur ce qui se passe à l'écran et non sur le contexte dans lequel l'utilisateur utilise l'appareil. La recommandation Hype ressemble à une option intéressante que je vais vérifier.
Vous devriez regarder de plus près Camtasia , car c'est plus qu'une simple capture d'écran.
Il a un montage simple mais puissant et certaines capacités d'animation qui lui sont propres. Voici comment vous pouvez l'utiliser:
- Faites une capture d'une interaction qui vous intéresse (que ce soit un prototype lo-fi, du HTML cliquable, peu importe)
- Dessinez la "scène" dans laquelle l'interaction se déroule - disons, une personne assise sur un banc de parc, à l'aide d'une tablette - et crachez le graphique sous forme de bitmap.
- Importez la scène illustrée dans Camtasia et déposez-la sur la scène Camtasia
- Faites glisser votre capture d'écran directement sur l'écran de la tablette à partir de votre illustration
- Voila, vous avez votre interaction d'écran décrite dans le contexte
Je vous recommande de faire deux plans - commencez par un plan large montrant le paysage et la personne qu'il contient, puis coupez (ou zoomez) pour un plan serré où vous ne pouvez voir que l'appareil et les mains de la personne (ou tout ce qui a du sens) ), mais vous pouvez voir clairement l'interaction avec l'écran.
Vous pouvez également ajouter des annotations (bulles Word, flèches, texte libre, etc.) directement dans Camtasia. C'est essentiellement un iMovie dépouillé avec capture d'écran.
Au lieu d'un film d'animation, vous voudrez peut-être essayer Hype à la place. C'est une application de 30 $ pour mac qui crée des sites Web HTML5 animés et il est très facile de créer des animations. Ils ont des didacticiels vidéo rapides pour accompagner cela et vous pouvez probablement l'apprendre rapidement si vous avez une expérience Web minimale.
Ils offrent également un essai gratuit de deux semaines si vous voulez l'essayer pour voir si cela vous convient.
Si vous souhaitez apporter une interaction dans vos wireframes, Fireworks serait un outil simple à apprendre. Vous connaissez déjà Photoshop, donc la courbe d'apprentissage est minime. Vous pouvez simplement ajouter autant de hotspots que vous le souhaitez pour vos pages, puis lier les pages entre elles. Vous pouvez l'exporter sous forme de fichier html, cliquable PDF ou tout simplement conserver le fichier PNG.
Ensuite, vous pouvez utiliser Jing pour enregistrer votre démonstration de votre prototype. Jing est un excellent outil gratuit. Le fait que Jing vous limite à une démo de 5 minutes est utile pour garder vos démos courtes et succinctes.
iRise est un outil créé exactement à cet effet. C'est cher, mais ça vaut le coup si votre entreprise a de l'argent à investir dans le produit. Vous pouvez télécharger une version d'essai à partir d'un lien sur cette page:
http://www.irise.com/products/irise_pe
Adobe Fireworks est une autre bonne option et sera beaucoup plus rapide que le prototypage avec Flash ou un autre programme d'animation.
J'ai trouvé que le Keynote est étonnamment bon pour illustrer et expliquer les flux d'utilisateurs ou construire des démos.
- Il est facile de faire glisser des éléments Wireframes ou Design à partir d'autres applications, il a une excellente gestion graphique et typographie.
- A le concept d'une diapositive principale, il est donc facile de réutiliser des éléments sur plusieurs diapositives.
- Il y a assez variation des Builds/Animations/Transitions pour que vous puissiez rapidement montrer comment une animation ou une transition fonctionnera.
- Les animations peuvent être déclenchées via Keypress, souris ou sur une minuterie.
- Peut être exporté vers QuickTime afin que les présentations puissent être livrées sans l'application Keynote.
- Un nombre croissant de bibliothèques tierces pour construire rapidement des démos, par exemple keynotopia.com , keynotekungfu.com etc
- Tout le monde peut utiliser Keynote. Designers, Developers, Stakeholders, Project Managers. Pas seulement un outil pour un développeur ou un pro UX.
Je recommanderais de regarder un logiciel de capture d'écran simple . Je vais souvent prendre mes prototypes interactifs (générés en Axure RP ), et cliquer sur différents scénarios tout en racontant les cas d'utilisation attendus. Ensuite, je poste simplement la vidéo résultante sur notre serveur Web et j'envoie un lien vers celle-ci à mon intervenant. Le résultat est, essentiellement, une approche asynchrone du concept.
Mon outil de capture d'écran de choix est Jing (C'est gratuit et facile, mais vous limite à un temps d'enregistrement de 5 minutes) , mais si vous avez besoin de plus de flexibilité, Camtasia est une autre excellente option.
Pour moi, rien ne vaut la capacité de pouvoir parler des scénarios.
Jing est un excellent outil. Si les films sont VRAIMENT simples, vous pouvez toujours utiliser l'animation dans Photoshop CS5 et créer un .gif