Sélectionner une page

Lors de la conception de parcours utilisateur, vous êtes-vous déjà mis dans la peau d’un utilisateur ? Est-ce que vous êtes-vous déjà demandé à quel moment l’utilisateur va faire appel à votre produit, où et comment, dans quelles conditions, son état d’esprit etc ?

Peut-être le faites-vous de manière inconsciente et ne le formalisez pas forcément par écrit. Pourtant, pour vous aider à visualiser davantage le parcours utilisateur, il est parfois utile de passer par la réalisation d’un storyboard UX. 

Le storyboard est à l’origine utilisé en cinéma et intervient entre le scénario et la réalisation d’un film ou court-métrage. Il permet notamment de donner un aspect visuel du scénario à dérouler. C’est pourquoi cela en fait un très bon support pour la construction de parcours utilisateur.

L’objet de cet article est donc de comprendre pourquoi et comment concevoir un storyboard UX facilite la réalisation de parcours utilisateur.

Définition du storyboard

Le storyboard est un document papier ou numérique qui regroupe à la fois des besoins techniques comme les mouvements de caméra, les effets spéciaux etc. que des besoins artistiques comme la description des décors, l’utilisation d’objets précis etc.

Par sa forme, le storyboard est souvent assimilé au dessin puisqu’il est représenté et construit comme une bande dessinée. Chaque vignette/planche représente donc un plan. Le storyboard n’est pas une étape de création. Il doit décrire de façon précise les différents plans. Un storyboard peut-être réalisé par tout le monde car le but n’est pas de démontrer ses talents de dessinateur. Beaucoup de storyboard comportent des annotations qui facilitent la compréhension de la planche.

A noter que le storyboard a été inventé par un scénariste et dessinateur de Disney, Webb Smith, dans les années 1930 ! Cela permettait aux équipes d’ajuster les scènes même si cela prenait beaucoup de temps. Mais dans l’animation, il est plus facile d’ajuster un dessin qu’une animation entière !

 

 Storyboard de Jurassic Park (par David Lowery)
Storyboard - Zombie Party (source Open Classrooms)

Pourquoi réaliser un storyboard ?

De manière générale, un scénario est une suite de texte et de dialogue, il ne présente aucun visuel pour illustrer l’histoire. Lors d’un projet, vous avez plein d’idées en tête mais lorsqu’il faut le décrire à une équipe ou à un client cela devient plus compliqué. En effet, vous seul avez cet aspect « visuel » du projet.

Le storyboard permet de lister les indications nécessaires pour que chacun comprenne les différents plans du projet. Un storyboard (en audiovisuel) comporte entre autre :

  • Le nom de la scène,
  • Le numéro de plan,
  • Le lieu de l’histoire,
  • La situation (jour/nuit, intérieur/extérieur),
  • Une description de l’action,
  • Toutes autres annotations techniques ou nécessaires.

Un storyboard doit être réalisé avant tout pour vous. En effet, il apporte une grande aide dans la composition de votre projet. Il permet d’avoir les idées claires sur ce qu’il est attendu à chaque moment du déroulé. Ensuite, pour l’équipe, car il doit être utilisé comme un outil de communication ! Le storyboard peut servir, comme à l’instar des maquettes en UX Design, à donner des indications techniques aux développeurs par exemple. Enfin, il permet au client de se projeter car cela peut-être plus parlant de visualiser un projet par des images plutôt que par des mots.

Storyboard et Storyboard UX, quelle différence ?

L’objectif d’un storyboard UX est de visualiser des séquences d’états plutôt que des visuels. Il va donc montrer la manière et la situation dans laquelle un utilisateur va interagir avec un produit et/ou un service. Ce qui est pris en compte dans le storyboard UX se sont les actions et émotions. Cela permet de vérifier :

  • Que le concept fonctionne bien, 
  • De décrire et vérifier toutes les interactions requises, 
  • Que l’expérience est partagée par tous,
  • D’identifier les erreurs, incohérences ou incompréhensions,
  • D’économiser du temps.

ATTENTION : le storyboard UX n’est pas non plus du maquettage d’interfaces ! Il est véritablement centré sur l’utilisateur et les conditions d’utilisation du produit.

Le storyboard UX intervient en général entre le moment de l’idéation et le wireframing. Il est une étape intermédiaire et indispensable avant de passer à la conception de vos interfaces. Il est une aide pour transformer des descriptions conceptuelles en des récits détaillés et comprendre tout de suite les problèmes et les éventuels points de blocage.

Partie d'un storyboard pour un service de stationnement fictif pour étudiants – Source uxdesign.cc

Comment réaliser un Storyboard UX ?

Même si la réalisation d’un storyboard UX n’est pas soumis à des règles de mises en œuvre strictes, voici mon conseil étape par étape pour construire votre storyboard UX : 

Comprendre l’idée

Avant tout, il faut que vous compreniez parfaitement qu’elle est l’idée du scénario que vous allez dérouler. Si vous n’êtes pas inclus dans la phase d’idéation, n’hésitez pas à demander à en faire partie. Dans le cas où ce n’est pas possible, essayez de demander le plus d’informations qui seront ressortis de cette phase. Vous aurez ainsi des indications sur les contraintes et autres détails. Rien ne doit vous échapper du scénario !

Déterminer vos histoires 

Prenons l’exemple d’une application de location de voitures : les histoires principales à dérouler seront l’inscription, trouver une voiture, rendre la voiture. N’oubliez pas les scénarios négatifs du type « aucunes voitures disponibles », « pas de disponibilité à vos dates », « la voiture sélectionnée n’est pas dans votre fourchette de prix » etc.

Construisez votre histoire

Pour construire votre histoire nous vous conseillons de suivre le processus suivant, il vous aidera à ne rien oublier et à réaliser des storyboard UX cohérents et pragmatiques :

  • Prenez une feuille et déposez un premier post-it (point de départ de l’histoire) en haut à gauche. Dans l’exemple vu précédemment, on pourrait se dire que l’utilisateur est à son bureau et que cela se passe deux heures avant de rentrer.
  • Ensuite on introduit le personnage et sa problématique sur un deuxième post-it. Ici, Valérie a dû laisser sa voiture au garage le midi même car elle a crevé. Elle doit donc trouver une voiture pour rentrer car elle n’a pas de transport en commun à proximité et pas de collègues pour effectuer un co-voiturage. N’hésitez pas à ajouter le ressenti de votre personnage. Valérie doit certainement être stressée par exemple.
  • Ajouter votre post-it de fin ! Dans notre exemple, Valérie est arrivée chez elle sans encombre et est heureuse. Placez ce post-it tout à la fin de votre feuille, en général en bas à droite.
  • A partir de ce dernier post-it, remonter l’histoire à l’envers ! Même si cela paraît insolite, remonter le temps de cette façon (sens contraire) est plus accessible pour le cerveau humain. Ajoutez alors un post-it pour chaque action jusqu’à atteindre les deux premiers post-it.
  • Relisez votre histoire dans le bon sens ce coup-ci et ajustez-les ! Parfois vous devrez jeter des post-it et/ou en ajoutés. 
  • Enfin, mettez votre histoire au propre. Cette étape est cruciale car votre contenu doit être explicite et gardez bien en tête qu’il ne faut absolument aucun détail sur l’interface ! Les illustrations de téléphone sont interdites à moins que ce soit pour illustrer un personnage tenant un téléphone dans la main ! Vous pouvez passer des post-it à un vrai dessin, c’est comme vous le souhaitez !
  • N’hésitez pas à partager votre storyboard UX et faites-le relire !

Conclusion

Vous avez désormais toutes les cartes en main pour réaliser de superbes storyboard UX. N’oubliez pas que cette méthode est un outil très efficace et pragmatique pour la réalisation de vos parcours utilisateur. 

Voici les points importants à retenir lors de l’élaboration d’un storyboard UX : 

  • On dessine à la main et au crayon, de préférence assez épais pour réaliser de gros traits et vous éviter de partir dans des détails inutiles. Si vous êtes plus à l’aise ou avez besoin de travailler en ligne à plusieurs, il existe des outils de dessin en ligne tels que Sketchpad, DeviantArt Muro, Auto Draw
  • Utilisez entre 5 à 8 planches max, 6 étant l’idéal ! Si vous avez besoin de plus de planches c’est certainement que votre scénario doit être divisé en plusieurs étapes.
  • Utilisez des post-its dans un premier temps puis lorsque vous serez familiarisés avec la méthode, dessinez directement sur la feuille.
  • Ayez confiance en vous et ne craignez pas le dessin ! Les bonhommes bâton sont tout aussi efficaces, pensez que vous pouvez annoter vos planches en donnant des détails.
  • N’oubliez pas de partager votre storyboard à toute l’équipe et consultez le régulièrement ! Affichez-le c’est encore mieux

Vous voilà fin prêt, alors, à vos crayons !

Sources :