test

934 vues

Publié le

test

Publié dans : Art & Photos, Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
934
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

test

  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

×