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

1. WORKSHOP CONCEPTION DE STORYBOARDS Mardi 30 oct. 2007 © Eric DI POL - 2007

3. 1. Vocabulaire wireframe layout zoning détaillé blueprint maquette fonctionnelle prototype storyboard © Eric DI POL - 2007

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. > 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. 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. 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

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. 8. Les outils online : Gliffy © Eric DI POL - 2007

14. 8. Les autres outils : démos Démos de : MS-Powerpoint MS-Visio Axure RP Pro © Eric DI POL - 2007

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. 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

18. MERCI ! Plus d’infos : http://www.superfiction.net/blog © Eric DI POL - 2007