Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Storyboarding for the web : Methodology and Tools

13,849 views

Published on

Powerpoint presentation of a workshop on "storyboarding for the web".
Done on 2007 Oct. 30th by Eric DI POL and the "Designers Interactifs" (France)

Published in: Technology

Storyboarding for the web : Methodology and Tools

  1. 1. WORKSHOP CONCEPTION DE STORYBOARDS Mardi 30 oct. 2007 © Eric DI POL - 2007
  2. 2. <ul><li>Vocabulaire </li></ul><ul><li>Des wireframes : pourquoi faire ? </li></ul><ul><li>Des wireframes : pour qui ? </li></ul><ul><li>Un storyboard, ce n’est pas… </li></ul><ul><li>Différentes formes / Différentes finalités </li></ul><ul><li>Hi-fi ? Low-fi ? </li></ul><ul><li>Petits conseils pour aider le client… </li></ul><ul><li>Les outils </li></ul><ul><li>Blogs / Bibliographie / Downloads </li></ul>Plan du workshop © Eric DI POL - 2007
  3. 3. 1. Vocabulaire wireframe layout zoning détaillé blueprint maquette fonctionnelle prototype storyboard © Eric DI POL - 2007
  4. 4. > Surtout pour : - Définir le contenu de chaque écran, mais aussi la structure, le fonctionnement et les process liés à l’application, - Faire valider au client les pages, leur contenu, leur structure et la navigation qui les lie entre-elles, - Servir de base aux spécifications, - Des tests utilisateur > Mais aussi pour : - Faciliter le travail des créatifs lors de la phase de production, - Anticiper d’éventuels développements lourds, … 2. Des wireframes : pourquoi faire ? © Eric DI POL - 2007
  5. 5. > En Agence : L’équipe projet : Ergonome, Concepteur, Chef de Projet, DA, Développeur… > Lors des tests utilisateurs : Un panel de l’audience finale (fonction du projet) > Chez le Client : Responsable e-Business, Communication, Marketing… Toute personne chargée de valider la partie fonctionnelle du projet. 3. Des wireframes : pour qui ? © Eric DI POL - 2007
  6. 6. 4. Un storyboard, ce n’est pas… ZONE IDENTITE 2 ZONE IDENTITE 3 MENU Editorial Zone de PUSH Produit MENU Fonctionnel FOOTER CONTENU PRINCIPAL ZONE IDENTITE 1 LOGO Zone de PUSH : Actu / Service / Magasin Chemin de navigation … un zoning Le zoning est l’étape qui précède la mise en place des storyboards / wireframes qui sont, eux, beaucoup plus précis. Zone de RECHERCHE © Eric DI POL - 2007
  7. 7. 4. Un storyboard, ce n’est pas… … une maquette Dans le storyboard, on s’attache principalement au contenu Présent sur la page, à l’aspect Fonctionnel et ergonomique. L’aspect graphique doit être « évacué », « ce n’est pas ce que j’ai validé, ce bouton n’était pas placé ici… » © Eric DI POL - 2007
  8. 8. Wireframes imprimés Wireframes pour l’écran <ul><li>Possibilité de mettre des annotations, </li></ul><ul><li>Aucune contrainte technique </li></ul><ul><li>Aucune interaction, </li></ul><ul><li>Moins bonne compréhension dans l’enchaînement des pages et des interactions, </li></ul><ul><li>Ce n’est pas le support final </li></ul><ul><li>Interaction / démonstration fonctionnelle, </li></ul><ul><li>Permet de mieux repérer les éventuels problèmes de navigation, </li></ul><ul><li>Meilleure compréhension par le client </li></ul><ul><li>Travail à l’échelle possible. </li></ul><ul><li>Pas d’annotation possible pour le client, </li></ul><ul><li>Peut devenir très complexe à mettre en œuvre. </li></ul>5. Différentes formes / finalités © Eric DI POL - 2007
  9. 9. High Fidelity Low Fidelity 6. Vous êtes plutôt Hi-fi ou Low-fi ? <ul><li>Ecrans sont à l’échelle 1:1 </li></ul><ul><li>Pas de surprise quant au placement des éléments et l’ergonomie est définie en amont </li></ul><ul><li>Permet de s’apercevoir très en amont des problèmes de mise en page / de navigation </li></ul><ul><li>Le client peut mieux « visualiser » ce que sera son projet </li></ul><ul><li>Peut « brimer » la créativité des DA (impression d’être un « d’exécutant ») </li></ul><ul><li>Nécessite beaucoup plus de temps </li></ul><ul><li>Nécessité d’avoir les textes définitifs </li></ul><ul><li>Permet de « dégrossir » le travail très en amont </li></ul><ul><li>Ne nécessite pas forcément de logiciel (papier / crayon…) </li></ul><ul><li>Laisse le créatif s’exprimer </li></ul><ul><li>L’ergonomie a été totalement évacuée </li></ul><ul><li>Incompréhension potentielle du client (« ce n’est pas ce que j’ai validé… ») </li></ul>© Eric DI POL - 2007
  10. 10. <ul><li>Utiliser de la couleur pour les liens HTML, </li></ul><ul><li>Placer l’élément principal de branding : le logo, </li></ul><ul><li>Essayer de reproduire au mieux les éléments reconnaissables (éléments de formulaires, boutons...) </li></ul><ul><li>- Placer du texte réaliste (ex : les noms des produits qui sont vendus...) et éviter le « lorem ipsum » </li></ul>© Eric DI POL - 2007 … A mieux se repérer dans les wireframes : 7. Petits conseils pour aider le client…
  11. 11. 8. Les outils : comparatif * Outils online © Eric DI POL - 2007 NOTE FINALE Adapté au print Adapté à l’écran Prise en main / Utilisation Interactivité Export HTML Prototypage rapide Création de wireframe 12/20 8/20 9/20 12/20 11/20 /20 14/20 15/20 16/20 ** ** *** * * **** **** **** ** ** * **** **** *** **** **** *** *** * * ** **** ** ** * ** ** **** *** ** *** **** * * * **** ** ** **** **** ** * * ** ** **** *** *** *** * * *** ** *** **** **** Gliffy * Acrobat Photoshop Illustrator Dream weaver Flash Omni graffle PowerPoint Visio Axure
  12. 12. 8. Les outils online : Gliffy © Eric DI POL - 2007
  13. 13. <ul><li>Coût dérisoire (20 € / an) </li></ul><ul><li>Possibilité de partager ses wireframes (travail collaboratif / à distance) </li></ul><ul><li>Apprentissage rapide </li></ul>8. Les outils online : Gliffy <ul><li>Difficile de créer des hyperliens entre maquettes </li></ul><ul><li>Utilisabilité online encore médiocre (ralentissements, bugs…) </li></ul><ul><li>Zone de travail réduite (car incluse dans la fenêtre navigateur) </li></ul><ul><li>Nombre d’éléments HTML limités </li></ul><ul><li>Pas d’export en HTML </li></ul>© Eric DI POL - 2007
  14. 14. 8. Les autres outils : démos Démos de : MS-Powerpoint MS-Visio Axure RP Pro © Eric DI POL - 2007
  15. 15. Blogs Biblio 9. Blogs / Biblio / Downloads www.boxandarrows.com www.guuui.com www.uie.com/brainsparks www.digital-web.com www.uxmatters.com « Communicating Design » (Dan M. Brown – 2006) « Effective prototyping for software makers » (J. Arnowitz, M. Arent & N. Berger – 2007) « Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces » (C. Snyder – 2007) © Eric DI POL - 2007
  16. 16. 9. Blogs / Biblio / Downloads Pour Omnigraffle : - URL GreyHot : - Garrett Dimon : - IA Institute Pour Visio : - Web prototyping tool - Wireframe stencil 2003 (Garrett Dimon) - IA Institute Pour Powerpoint : - IA Institute (dont le wireframe de F. Cavazza) http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette http://v1.garrettdimon.com/resources/templates-stencils-for-visio-monigraffle http://www.iainstitute.org/en/learn/tools.php Downloads http://www.iainstitute.org/en/learn/tools.php http://www.iainstitute.org/en/learn/tools.php http://www.guuui.com/downloads/GUUUI%20Web%20Prototyping%20Tool%203.zip http://v1.garrettdimon.com/files/resources/ia_tools/Visio_2003.zip © Eric DI POL - 2007
  17. 17. 9. Blogs / Biblio / Downloads <ul><li>Les exemples présentés ce soir seront disponibles : </li></ul><ul><li>dans la bibliothèque de livrables des Designers Interactifs (Basecamp) d’ici quelques jours, </li></ul><ul><li>sur mon blog : http://www.superfiction.net/blog </li></ul>© Eric DI POL - 2007
  18. 18. MERCI ! Plus d’infos : http://www.superfiction.net/blog © Eric DI POL - 2007

×