Storyboarding for the web : Methodology and Tools

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

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

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

> 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

> 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

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

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

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

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

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…

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

8. Les outils online : Gliffy © Eric DI POL - 2007

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

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

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

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

http://superfiction.net	1528
http://www.superfiction.net	1362
http://www.utilisabilite.info	106
http://culturecommunication-nantes.blogspot.fr	96
http://culturecommunication-nantes.blogspot.com	51
http://www.slideshare.net	39
http://seenthis.net	34
http://grupowebcce.blogspot.com	8
http://www.netvibes.com	4
http://www.linkedin.com	4
http://webcache.googleusercontent.com	3
http://209.85.129.104	2
http://209.85.135.104	1
http://207.46.192.232	1

Storyboarding for the web : Methodology and Tools

by Eric DI POL

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 3,239

Statistics

Storyboarding for the web : Methodology and Tools Presentation Transcript