Storyboarding for the web : Methodology and Tools

WORKSHOPCONCEPTION DE STORYBOARDS

Mardi 30 oct. 2007© Eric DI POL - 2007

1. Vocabulaire2. Des wireframes : pourquoi faire ?3. Des wireframes : pour qui ?4. Un storyboard, ce n’est pas…5. Différentes formes / Différentes finalités6. Hi-fi ? Low-fi ?7. Petits conseils pour aider le client…8. Les outils9. Blogs / Bibliographie / Downloads

Plan du workshop

2© Eric DI POL - 2007

1. Vocabulaire

3

wireframewireframe

layoutlayout

zoning détaillézoning détaillé

blueprintblueprint

maquettefonctionnelle

maquettefonctionnelle

prototypeprototype

storyboardstoryboard

© 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 ?

4© 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 ?

5© Eric DI POL - 2007

4. Un storyboard, ce n’est pas…

6

ZONEIDENTITE 2

ZONEIDENTITE 3

MENUEditorial

Zone dePUSHProduit

MENU Fonctionnel

FOOTER

CONTENU PRINCIPAL

ZONE IDENTITE 1

LOGO

Zone dePUSH :Actu / Service / Magasin

Chemin \ de \ navigation… un zoning

Le zoning est l’étape quiprécède la mise en place desstoryboards / wireframes qui sont,eux, beaucoup plus précis.

Zone de RECHERCHE

© Eric DI POL - 2007

4. Un storyboard, ce n’est pas…

7

… une maquette

Dans le storyboard, on s’attacheprincipalement au contenuPrésent sur la page, à l’aspectFonctionnel 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

8© Eric DI POL - 2007

High Fidelity Low Fidelity

6. Vous êtes plutôt Hi-fi ou Low-fi ?

9

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

8. Les outils : comparatif

11

Axure Visio PowerPoint Omnigraffle Flash Dream

weaverPhotoshopIllustrator Acrobat Gliffy *

Création de wireframe **** **** *** ** *** * * ***

Prototypage rapide *** *** **** ** ** * * **

Export HTML **** **** ** ** **** * * *

Interactivité **** *** ** *** **** ** ** *

Priseen main / Utilisation

** ** **** ** * * *** ***

Adaptéà l’écran **** **** *** **** **** * ** **

Adaptéau print **** **** **** * * *** ** **

NOTEFINALE 16/20 15/20 14/20 /20 11/20 12/20 9/20 8/20 12/20

* Outils online

© Eric DI POL - 2007

8. Les outils online : Gliffy

12© 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

8. Les autres outils : démos

14

Démos de : MS-Powerpoint

MS-Visio

Axure RP Pro

© Eric DI POL - 2007

Blogs Biblio

9. Blogs / Biblio / Downloads

15

www.boxandarrows.comwww.guuui.comwww.uie.com/brainsparkswww.digital-web.comwww.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

16

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

17

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

MERCI !

Plus d’infos :http://www.superfiction.net/blog

© Eric DI POL - 2007