Comment représenter efficacement les animations filaires?
Je suis tombé sur une question sur Quora sur les animations jQuery dans les wireframes , ce qui m'a fait penser aux conventions générales pour représenter toute animation dans des structures filaires statiques. J'ai utilisé des légendes ou de la documentation supplémentaire pour expliquer les éléments animés, mais ceux-ci ne font manifestement pas justice.
Y a-t-il une meilleure façon ou est-ce la "caractéristique" héritée des abstractions?
Les wireframes sont un endroit terrible pour essayer de décrire l'animation. Le plus proche que vous pouvez obtenir est quelque chose d'abstrait comme notation d'esquisse interactive , mais cela nécessite que le spectateur du filaire comprenne le style de notation et qu'il ne peut communiquer que des transitions très limitées.
Utilisez un filaire pour définir la structure d'une page. Traitez-le comme un croquis, même s'il s'agit d'un croquis haute fidélité réalisé par exemple. Maquettes Axure ou Balsamiq.
Utilisez un prototype interactif (de préférence créé dans le même environnement dans lequel le produit final sera créé) pour illustrer tout type d'interactivité, que ce soit l'effet de survol spécifique sur un bouton ou les transitions et animations d'écran réelles.
Si les parties prenantes ont du mal à comprendre une approche d'interaction particulière et que vous n'avez pas le temps ou les ressources pour créer un prototype, un raccourci que j'ai vu consiste à utiliser un exemple d'interaction "dans la nature" si vous en trouvez une . (La conception Web réactive d'Ethan Marcotte, par exemple.) Évidemment, vous devez être clair que ce à quoi vous faites référence est pas la solution du projet, juste un exemple de la façon dont une approche similaire a été mise en œuvre dans d'autres produits. .
À long terme, une grande façon de rendre la représentation interactive plus efficace consiste à modulariser vos éléments d'interface. Par exemple, si vous avez créé un sélecteur de date pour votre dernier projet, enregistrez-le et utilisez-le plus tard dans un prototype. Ne réinventez pas la roue à chaque interaction.
C'est l'une des nombreuses raisons pour lesquelles les wireframes sont inadéquats en tant que documentation d'interaction. La réponse est simplement qu'ils ne le peuvent pas. Vous avez besoin d'un prototype - idéalement dans un code de couche de présentation approprié - pour communiquer correctement les interactions.
Je suis tombé sur cela plusieurs fois, et je peux certainement vous dire ce qu'il ne faut PAS faire - si vous créez un prototype statique ou de spécifications, cela ne vaut généralement pas la peine d'inclure une animation, surtout si le fichier fonctionnera comme base pour développement. Non seulement cela déroutera les programmeurs, mais il sera presque impossible d'utiliser le fichier comme base de documentation (par exemple, écrire des histoires SCRUM).
Une solution que j'ai essayée est de montrer l'animation dans un format storyboard, mais cela ne s'est pas trop bien passé avec les programmeurs, car cela les a encore plus déroutés.
Ce que je suggérerais, c'est de garder les prototypes animés séparés des prototypes statiques et d'ajouter simplement des liens vers un fichier externe dans le champ de description de l'élément. De cette façon, vous pourrez donner un fichier au service marketing ou au chef de produit, et l'autre à votre sympathique gars et programmeurs de spécifications de quartier.
De petites animations sont en fait possibles. J'ai réussi à montrer comment les champs de formulaire doivent se comporter dans une animation qui se trouve à l'intérieur du document filaire. Le document final était un PDF interactif avec la démo flash intégrée.
Les ingénieurs l'ont trouvé extrêmement utile parce que je n'ai pas annoté tous les états ou comportements d'erreur - l'annotation était l'animation.
Cela ne vous oblige pas à être bon en flash ou quoi que ce soit, InDesign propose des panneaux d'animation et de synchronisation personnalisés qui sont utiles chaque fois que je trouve que l'animation expliquera mieux l'interaction.
Inconvénient - un peu plus de temps. Mais ça vaut vraiment le coup.
Keynote permet de présenter des transitions de page simples et des animations plus complexes. Beaucoup d'entre eux s'affichent sur l'application iPad, ce qui fonctionne bien lors de la présentation de matériel aux parties prenantes. Avertissement: l'application iPad Keynote n'affichera que les animations BuildIn et BuildOut.
Des animations simples peuvent également être créées dans l'application de prototypage POP.
Les transitions standard peuvent être annotées dans un document de spécifications fonctionnelles. Par exemple, une liste des transitions et des comportements peut être trouvée sur les sites Web des lignes directrices Android et iOS User Experience.
Dans les wireframes statiques, j'utilise généralement des légendes et j'inclus une icône/un symbole spécifique pour désigner l'animation.
Si l'animation est d'une importance significative, je fournirais un storyboard de l'animation avec le filaire.
J'ai simplement utilisé Microsoft PowerPoint pour créer des animations d'interaction. Il peut créer une histoire ou un ensemble de tâches pour une exigence. Cela prendra un peu de temps, mais c'est amusant, simple et rentable.
Les interactions peuvent être automatisées au lieu d'un véritable clic en tant qu'interaction, ce qui est bon avec PowerPoint.Il aide les parties prenantes et les développeurs à comprendre la logique et peut rapidement aborder les concepts lorsqu'ils ouvrent le pont, et l'automatisation fluide fonctionne efficacement.
Comme l'a dit @Rahul - les wireframes ne sont pas le bon endroit pour les animations représentées. La seule façon serait de combiner la description des mots et des flèches. Chaque étape supplémentaire serait soit détaillée pour un filaire ou non comme souhaité.
J'ai également rencontré ce problème, et généralement pour gagner du temps ... je scénarise l'action en filaire. Si le temps n'était pas un problème, je créerais des actions Hi-Fi dans Fireworks.
Selon la complexité des animations, vous pouvez utiliser Keynote ou Adobe After Effects ou Flash pour faire une démonstration des animations. Vous pouvez également, dans les annotations, faire référence à d'autres sites Web en direct. J'utilise parfois la démo sur Tweenlite pour expliquer les transitions et les animations.