Your SlideShare is downloading. ×
test
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

test

646
views

Published on

test

test

Published in: Art & Photos, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
646
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×