Je vais vous présenter une manière de faire vos story board pour votre site internet en répondant à quelques questions simples :

  • Quels outils peuvent être utiles pour réaliser ce storyboard ?
  • Qui participe à la réalisation ?
  • Quel niveau de détails afficher ?

Les outils

Les outils de base nécessaire à la création des storyboards ne sont pas bien complexe, en réalité du papier et un stylo peuvent largement suffire dans les cas simple, mais une version électronique de ces documents est bien plus aisé en ce qui concerne leurs partage ou leurs modification.

Pour commencer, il est intéressant de disposer d’une banque d’icônes pour représenter toute sorte d’éléments qui devront être présent. Vous pouvez utiliser une banque d’images en ligne (iconfinder.net par exemple) ou des bases d’icone libre (crystal pour kde reste ma préférée). Cela permet de schématiser rapidement tout nos éléments.

Ensuite, il faut prévoir des outils de capture d’image afin de rendre vivant le fond de notre storyboard. Vous pouvez utiliser soit les outils systèmes (impression écran sous windows, ⌘+MAJ+3 sous mac ou ⌘+MAJ+4 pour juste une partie de l’écran), soit utiliser différents logiciels, certains étant même gratuit.

Une fois les ressources graphiques acquises, vous pouvez utiliser différents outils pour mettre en place vos storyboards :

  • Visio
  • PowerPoint : il a l’avantage d’être installé sur de nombreux pc professionnels
  • Axure : il n’est pas donnée et je n’ai pas trouvé une contrepartie suffisante à son prix, mais il paraît qu’ils ont beaucoup de clients …
  • Pencil (gratuit, module de FireFox ou application autonome) : mon préféré, je peux regroupe plusieurs planche de storyboard dans le même fichier
  • OmniGraffle : malheureusement seulement sur mac, une excellent alternative à visio

Les acteurs

En fonction du contexte, il convient de choisir les intervenants qui interviendront sur le storyboard.

Les sites internet

Le but d’un site web étant fréquemment réalisé soit dans un but commercial, soit dans un but marketing, il faut faire collaborer ces deux services. La partie éditoriale doit également être décrite afin de définir les modalités du contenu. Pour finir, il vaut mieux faire valider le storyboard par les utilisateurs afin de s’assurer qu’il répond bien aux besoins, puis par les services techniques afin de s’assurer des limitations technologiques que le site peut présenter.

Les applications métiers

Le premier associé dans une application métier est bien évidemment la maîtrise d’ouvrage (MOA) car elle connait tout les besoins métiers. Nous utilisons également la maîtrise d’ouvrage pour faire ressortir les besoins des utilisateurs et les objectifs de l’application, tant au niveaux fonctionnalités, qu’efficacité, apprentissage, ….

Dans un second temps, il faut avoir identifier les utilisateurs clé (KPI) afin de les confronter à notre modèle et valider les différents concepts que nous aurons mis en place avec la MOA.

Pour finir, nous allons chercher l’aval de la maîtrise d’œuvre afin de s’assurer de la faisabilité technique de notre projet.

La granulométrie

Nous pouvons être tenté par détaillé tout les éléments de notre storyboard pour limiter les écarts entre le produits finis et le projet initial, mais cela demanderai une phase de préparation beaucoup trop importante. A l’inverse, il ne faut pas être trop synthétique pour obtenir le produit fini souhaité. Personnellement, je représente au moins 5 points qui me semble essentiels :

  1. l’arborescence du site, avec au moins le premier niveau complet
  2. l’insertion des noms des zones du storyboard avec l’insertion de contenu final afin de valider la partie éditoriale sur une partie de ce dernier
  3. les objets graphiques afin de bien se représenter les grands ensembles (logo, images, icônes, …)
  4. des notes explicative sur les placement d’éléments
  5. des notes sur les réactions des zones réactives du storyboard afin d’intégrer une synthèse des spécifications fonctionnelles

Exemple

Pour finir, je vais vous présenter un exemple réalisé dans le cadre d’une application métier pour la gestion des utilisateurs. Cette exemple a été réalisé à l’aide du logiciel Omnigraffle.

Gestion utilisateur // Méthode de recherche

Gestion utilisateur // Affichage des résultats d'une recherche
Gestion utilisateur // Modification ou création d'un utilisateur
Réalisation du storyboard pour un site Web
Taggé sur :        

Une réflexion sur “Réalisation du storyboard pour un site Web

  • 18 mai 2013 à 6:38
    Permalink

    I read this paragraph completely concerning the resemblance of newest
    and previous technologies, it’s amazing article.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.