conseil en ergonomie
conseil en design UX
architecture de l'information
icone conception UX design

Le synopsis de site web ou synopsis digital est un incontournable des techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour rédiger le synopsis de votre dispositif digital.
Des modèles de synopsis de projet web et une formation en ligne sont disponibles en accès payant.

Rédiger le synopsis pour résumer votre projet web

Révisé en Mars 2021

Ecrire un synopsis digital et synthétiser les objectifs

synopsis site web

Le synopsis de site web esquisse les objectifs de votre projet digital.

Pourquoi rédiger le synopsis de votre site web ? A quoi peut-il servir ? A qui s'adresse-t-il ? Quelles sont les fonctions du synopsis de dispositif digital ?
Dans cet article, nous allons vous exposer les grandes lignes du synopsis de site web et vous présenter quelques exemples. Ecrire un synopsis demande des compétences en design stratégique, et exige une bonne maîtrise des techniques de conception de façon générale. L'architecte de l'information et l'UX designer sont les bons profils pour la rédaction du synopsis... C'est aussi et surtout, un réel exercice de style de résumer les grands principes de design d'interaction du dispositif, juste à l'écrit, sans schéma...

Le synopsis n'est pas uniquement destiné à décrire les derniers films de Quentin Tarantino sur Allociné :).
En conception, pour un projet digital d'envergure, c'est une bonne pratique que d'introduire les travaux par une description narrative du dispositif. On parle de synopsis de site web ou de synopsis de dispositif digital.
On y explique les intentions du projet, les grands scenarios mis en scène dans le dispositif digital ainsi que le style des interactions proposés. C'est un exercice de style délicat qui appelle une grande compréhension du projet et une capacité de synthèse.

Le synospis de site web présente de grandes vertus pédagogiques : pas besoin d'avoir fait polytechnique pour comprendre le synospis. Enfin un document de conception susceptible de s'adresser à tous les profils :).

En bref, il s'agit d'esquisser les principes du dispositif par l'écrit, sans entrer dans les détails, en se passant de la présentation "par les écrans". C'est une première mise en forme, stratégique, qui précède les travaux d'interface.
On écrit l'histoire du site, ou l'histoire de l'écosystème digital, avant de le concevoir. Comme au cinéma, le synopsis du site web esquisse les grandes lignes du projet.

C'est un document que vous verrez rarement dans un projet digital. En effet, la plupart des concepteurs ne jurent que par les wireframes.
Si vous avez un synopsis de site web dans vos mains, vous travaillez avec de très bons concepteurs. Le synopsis est effectivement stratégique, et son écriture implique un vrai travail de prise de recul et une vision d'ensemble du projet. C'est tout sauf du storytelling de poubelle. C'est un résumé des enjeux du dispositif.

Objectifs des synopsis digitaux

Résumé des orientations du dispositif digital

On utilise le synopsis dans les projets digitaux pour présenter de manière digeste et synthétique, un résumé des grandes orientations du dispositif, pour tout le site, ou par univers :

  • Exposer les grands principes du dispositif.
  • Poser le cadre du design d'interaction.
  • Evoquer les orientations en matière de design émotionnel.

Plus simplement, il s'agit de décrire l'expérience que l'on souhaite instiller dans le dispositif. Au delà de son côté "résumé", le synopsis de site web est souvent utilisé pour sa vocation stratégique en amont du projet.

Ce n'est donc pas tout à fait le même synopsis que sur Allociné... dans notre cas, la (les) fin(s) doit(vent) apparaître, évidemment...

Un synopsis pour communiquer

Le synopsis de site web est aussi un outil de communication. Il permet de communiquer les enjeux du projet à l'externe. Et de diffuser les orientations stratégiques du projet à tous les acteurs du projet, en interne.

Le caractère assez généraliste du synopsis en font un bon allié pour fédérer les équipes. Un synopsis est moins clivant qu'un wireframe. C'est même toute l'inverse. C'est un document qui est souvent très bien reçu et peu discuté. Un synopsis fait l'unanimité, la plupart du temps, et dans la plupart des cas.
En effet, la rédaction d'un synopsis est la preuve que le travail de conception s'inscrit dans une vision stratégique et maîtrisée.

Un outil d'objectivation du projet

Rédiger un synopsis de site web implique un travail dit d'objectivation. De prise de recul. Ce n'est pas un exercice facile. L'écriture du synopsis oblige forcément à considérer tous les paramètres du projet. Au-delà des aspects de façonnage.

Exemples de synopsis

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

synospis d'écosystème digital synospis d'écosystème digital
synopsis Sécurité routière
iafactory - Julien MUCKENSTURM
exemple de synopsis de site web exemple de synopsis de site web
synopsis Total exploration
iafactory - Julien MUCKENSTURM
synopsis de site web synopsis de site web
synopsis Carrefour groupe
iafactory - Julien MUCKENSTURM

Méthode pour écrire le synopsis

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

Une vision d'ensemble avec le synopsis

La méthode consiste à esquisser par le texte, le résumé du dispositif digital dans son ensemble, chaque dimension consistante du projet pouvant également faire l'objet d'un résumé spécifique...

Un peu de temps et une bonne compréhension du projet sont les ingrédients de base pour l'écriture du synopsis. Certains concepteurs vont jusqu'à rédiger le synopsis à la fin de la conception fonctionnelle détaillée du projet. C'est un peu de la triche, mais le procédé reste intéressant dans la documentation du projet.

Le concepteur doit disposer d'une vision macro du projet : les enjeux, les scénarios stratégiques adressés, les objectifs du dispositif, les réponses en matière d'interface, l'angle d'attaque sur les plans de l'expérience utilisateur. Cela implique une vrai vision stratégique du projet, et pas juste un regard ergonomique... Il s'agit de saisir les éléments importants du projet, sans négliger les détails de l'ordre du micro pouvant avoir une importance déterminante dans l'expérience utilisateur définitive (par exemple, en détaillant une animation importante dans le design d'interaction proposé).

C'est une approche qui relève plus de l'écriture que de la conception fonctionnelle au sens strict. On parle d'ailleurs d'écriture interactive pour ce type d'exercice.

Comment écrire votre synopsis ?

Pour un dispositif digital ordinaire, le synopsis de site web doit tenir sur une page. Si le projet concerne un dispositif de taille critique, deux pages sont tolérées :). Mais c'est bien de rester dans la synthèse.

Pour préparer la rédaction de votre synopsis, mieux vaut maîtriser :

  • Les enjeux du projet digital.
  • Les objectifs du projet.
  • L'envergure éditoriale du dispositif.
  • L'envergure fonctionnelle du site.
  • Les principaux scénarios à adresser.
  • Les grands profils d'utilisateurs.
  • Les orientations stratégiques de la conception.

Pour vous aider dans l'écriture, essayez d'apporter des réponses aux questions suivantes :

  • Quels sont les scénarios stratégiques auxquels le dispositif doit-il répondre ?
  • Qu'est ce que les utilisateurs vont pouvoir réaliser de plus, de mieux, de différent sur ce site ? Par rapport à d'autres dispositifs équivalents ?
  • En quoi ce site se démarque-t-il dans son environnement concurrentiel et sectoriel ?
  • Quels sont les parcours centraux que les concepteurs vont adresser ?
  • Quelles sont les dominantes du projet : marketing, fonctionnelle, éditoriale, ergonomique, émotionnelle, expérientielle, ludique ?
  • Quelle est la nature de l'expérience proposée ?
  • Quels objectifs cherchez-vous à atteindre sur le plan de l'expérience utilisateur ?

Démarche pour écrire un synopsis de site web

Pour rédiger un synopsis de site web, vous pouvez vous appuyer sur ces grandes étapes :

  • Eplucher la documentation projet.
  • Reprendre les enjeux, les objectifs, et les grandes orientations du dispositif (et si ces informations n'existent pas, à vous de les faire figurer dans la documentation projet.
  • Essayer de résumer les grandes séquences de l'expérience pour chaque partie du dispositif.
  • Réfléchir à la persona(lité) du site web.

C'est un travail souvent stratégique qui se fait naturellement en phase de conception et en amont de la modélisation de l'interface...

Travaux complémentaires à l'écriture du synopsis digital

Le synopsis du dispositif digital préfigure ce que sera le support : à ce stade, il peut être intéressant de travailler la "personnalité de votre dispositif digital", en réalisant une persona de site web.

Le synopsis débouche naturellement sur la conception fonctionnelle du dispositif : wireframing lorsqu'il s'agit d'une interface utilisateur.

On opte pour le prototype fonctionnel lorsque l'on souhaite illustrer un parcours complet.

Le Scénario interactif est recommandé pour toutes les séquences interactives complexes (video interactive, animation longue...).

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour synopsis digital

APPROFONDIR
la conception

Livre : Les éléments de l'expérience utilisateur
Les éléments de l'expérience utilisateur

Aller plus loin pour écrire le synopsis

Formation vidéo à visionner :

Livrables à télécharger :

Études de cas à lire :

Compétences métier pour le synopsis :

Fiche métier :

Autres ressources sur le web :

  • Signalez nous des ressources autour du synopsis de site web via les commentaires !
Plus de techniques de conception
ENVERGURE FONCTIONNELLE
Personnalité générale du site, tonalité éditoriale et registre émotionnel déployés.
persona de site web
ADAPTATION MULTI-ECRAN
Ecriture et scénarisation de films digitaux interactifs, conception et séquençage d'animations interactives.
scenario de film interactif
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
Wireframes
  • réalisé par iafactory
  • livré sous 6J. ouvrés
  • à partir de 3600€ HT