Le document présente un atelier sur la conception de storyboards et l'importance des wireframes dans le développement d'applications, en précisant leurs objectifs, leurs bénéficiaires et les distinctions entre différents types. Il aborde également des conseils pratiques pour aider les clients et propose une revue des outils disponibles, ainsi qu'une bibliographie pour approfondir le sujet. Enfin, il souligne les différences entre les prototypes hi-fi et low-fi.

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

2. Vocabulaire Des wireframes : pourquoi faire ? Des wireframes : pour qui ? Un storyboard, ce n’est pas… Différentes formes / Différentes finalités Hi-fi ? Low-fi ? Petits conseils pour aider le client… Les outils Blogs / Bibliographie / Downloads Plan du workshop © 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

8. Wireframes imprimés Wireframes pour l’écran Possibilité de mettre des annotations, Aucune contrainte technique Aucune interaction, Moins bonne compréhension dans l’enchaînement des pages et des interactions, Ce n’est pas le support final Interaction / démonstration fonctionnelle, Permet de mieux repérer les éventuels problèmes de navigation, Meilleure compréhension par le client Travail à l’échelle possible. Pas d’annotation possible pour le client, Peut devenir très complexe à mettre en œuvre. 5. Différentes formes / finalités © Eric DI POL - 2007

9. High Fidelity Low Fidelity 6. Vous êtes plutôt Hi-fi ou Low-fi ? Ecrans sont à l’échelle 1:1 Pas de surprise quant au placement des éléments et l’ergonomie est définie en amont Permet de s’apercevoir très en amont des problèmes de mise en page / de navigation Le client peut mieux « visualiser » ce que sera son projet Peut « brimer » la créativité des DA (impression d’être un « d’exécutant ») Nécessite beaucoup plus de temps Nécessité d’avoir les textes définitifs Permet de « dégrossir » le travail très en amont Ne nécessite pas forcément de logiciel (papier / crayon…) Laisse le créatif s’exprimer L’ergonomie a été totalement évacuée Incompréhension potentielle du client (« ce n’est pas ce que j’ai validé… ») © Eric DI POL - 2007

10. Utiliser de la couleur pour les liens HTML, Placer l’élément principal de branding : le logo, Essayer de reproduire au mieux les éléments reconnaissables (éléments de formulaires, boutons...) - Placer du texte réaliste (ex : les noms des produits qui sont vendus...) et éviter le « lorem ipsum » © Eric DI POL - 2007 … A mieux se repérer dans les wireframes : 7. Petits conseils pour aider le client…

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

13. Coût dérisoire (20 € / an) Possibilité de partager ses wireframes (travail collaboratif / à distance) Apprentissage rapide 8. Les outils online : Gliffy Difficile de créer des hyperliens entre maquettes Utilisabilité online encore médiocre (ralentissements, bugs…) Zone de travail réduite (car incluse dans la fenêtre navigateur) Nombre d’éléments HTML limités Pas d’export en HTML © 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

17. 9. Blogs / Biblio / Downloads Les exemples présentés ce soir seront disponibles : dans la bibliothèque de livrables des Designers Interactifs (Basecamp) d’ici quelques jours, sur mon blog : http://www.superfiction.net/blog © Eric DI POL - 2007

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