Concept de Site Web Axé sur la Narration
Objectif
Transformer un problème métier suffisamment compris en concepts de site web distincts construits autour du sens, de la transformation, de la narration et des preuves, plutôt qu'une séquence de fonctionnalités génériques et de sections d'interface.
Cette compétence travaille principalement avec les mots avant les éléments visuels.
Elle détermine :
- ce que le site web doit fondamentalement communiquer
- quelle histoire ou lentille narrative peut le communiquer
- comment la compréhension du visiteur doit progresser
- quelles preuves soutiennent cette progression
- comment le concept doit influencer le contenu, la voix, l'imagerie, la mise en page, le mouvement et l'interaction à un niveau directionnel
- comment la narration soutient la prochaine action de l'utilisateur
Le résultat est un ensemble de directions de concepts prêtes pour l'évaluation et le développement ultérieur du système visuel.
Cette compétence ne produit pas de copie finale, de mises en page finales, de wireframes détaillés, de système de conception ou de code d'implémentation.
Principe fondamental
Un concept de site web solide relie :
problème métier
→ besoin de l'audience
→ transformation significative
→ idée centrale
→ progression narrative
→ preuves à l'appui
→ action de l'utilisateur
Les décisions visuelles doivent ensuite renforcer cette chaîne.
Éviter :
esthétique intéressante
→ titre accrocheur
→ sections arbitraires
→ interactions décoratives
Le concept doit expliquer pourquoi l'expérience existe avant d'expliquer à quoi elle ressemble.
La narration n'est pas une décoration
"Axé sur la narration" ne signifie pas que chaque site web a besoin :
- d'un protagoniste dramatique
- d'une séquence de défilement cinématographique
- d'une biographie du fondateur
- d'un témoignage émotionnel
- d'un scénario avec début-milieu-fin
- d'un récit fictif
La narration peut simplement signifier que l'information est délibérément structurée pour que le visiteur passe d'un état de compréhension significatif à un autre.
Les exemples de structures narratives valides incluent :
problème
→ conséquence
→ solution
→ preuve
→ action
matière première
→ processus
→ résultat fini
→ capacité
ancienne méthode
→ tension
→ nouvelle méthode
→ preuve
situation du client
→ défi
→ expérience
→ résultat
mission
→ obstacle
→ méthode
→ impact
question
→ investigation
→ révélation
→ implication
L'intensité narrative appropriée dépend du projet.
Quand utiliser cette compétence
Utilisez cette compétence quand :
- Un brief de site web a déjà été suffisamment compris.
- L'utilisateur demande un concept de site web, une direction créative, une idée centrale, une direction narrative, une structure de narration ou une page d'atterrissage axée sur la narration.
- Une page ressemble actuellement à une brochure numérique ou à une séquence de sections de fonctionnalités déconnectées.
- Une page d'accueil contient des informations mais manque d'une progression claire ou d'un point de vue.
- Plusieurs messages sont en compétition pour la priorité et doivent être organisés autour d'un sens central.
- Une marque possède un fort matériel fondateur, client, processus, produit, mission ou de transformation qui pourrait structurer l'expérience.
- Des recherches d'univers graphique existent et doivent être reliées à une idée de site web réelle.
- L'utilisateur souhaite plusieurs concepts créatifs vraiment différents avant de choisir une direction visuelle.
- Un produit doit démontrer sa valeur par l'utilisation, la transformation ou la preuve plutôt que simplement énumérer ses capacités.
- L'équipe de conception passe à l'exécution visuelle avant de se mettre d'accord sur ce que le site web essaie réellement de dire.
- Un concept doit relier les titres, l'imagerie, la structure du contenu, les appels à l'action et l'interaction éventuelle en une seule direction cohérente.
N'utilisez pas cette compétence quand :
- Le problème métier ou l'audience est encore flou.
- L'utilisateur a seulement besoin d'inspiration visuelle ou de recherche graphique.
- L'utilisateur a des concepts matures et a seulement besoin de choisir entre eux.
- La tâche est la rédaction finale.
- La tâche est l'architecture de l'information détaillée pour une application complexe.
- La tâche est la conception de composants d'interface utilisateur.
- La tâche est la composition de la mise en page finale.
- La tâche est la spécification d'un système de conception.
- La tâche est l'implémentation ou le code.
- L'interface est principalement un utilitaire ou un outil opérationnel où un cadrage narratif ajouterait une friction inutile.
Si le projet n'est pas suffisamment compris, lancez d'abord un workflow de cadrage du problème.
Entrées à inspecter
Inspectez autant des éléments suivants que disponibles.
Matériel stratégique
- Problème métier
- Brief du projet
- Objectifs métier
- Audience
- Tâches à accomplir (Jobs to be done)
- Besoins utilisateur
- Actions souhaitées
- Positionnement
- Proposition de valeur
- Éléments différenciateurs
- Contexte concurrentiel
- Contraintes
Preuves de transformation
- Résultats client
- États avant-après
- Problèmes résolus
- Temps gagné
- Risque réduit
- Compétences acquises
- Expérience améliorée
- Résultats émotionnels
- Améliorations opérationnelles
- Impact social ou culturel
Matériel narratif
- Histoire du fondateur
- Origine de l'entreprise
- Histoires de clients
- Témoignages
- Études de cas
- Exemples d'utilisation du produit
- Coulisses
- Processus de fabrication ou de service
- Jalons historiques
- Mission
- Recherche
- Données
- Résultats
- Création du produit
Matériel de marque
- Stratégie de marque
- Ton de voix
- Messages existants
- Langage de campagne
- Naming
- Terminologie
- Identité visuelle existante
- Photographie
- Archives
Matériel de contenu
- Copie de page existante
- Plan du site
- Inventaire des sections
- Descriptions de produits
- Services
- FAQ
- Avis
- Statistiques
- Appels à l'action
Recherche de conception amont
Lorsqu'ils sont disponibles, inspectez les résultats de :
design-problem-framergraphic-universe-builder
Les entrées utiles de l'univers graphique incluent :
- vocabulaire du projet
- clusters de recherche
- opportunités appartenant au projet
- atomes visuels
- métaphores candidates
- univers graphiques candidats
- clichés de catégorie
N'exigez pas de recherche d'univers graphique si le projet contient déjà un matériel conceptuel solide.
Préconditions
Avant la génération du concept, déterminez si ces questions peuvent être répondues :
Qu'est-ce que l'organisation propose ?
Qui est l'audience principale ?
De quoi cette audience a-t-elle besoin, veut, craint ou lutte-t-elle ?
Quel changement significatif l'offre crée-t-elle ?
Pourquoi cette organisation devrait-elle être crue ?
Que doit comprendre le visiteur ?
Que doit ressentir le visiteur, si l'émotion est pertinente ?
Que doit faire le visiteur ?
Qu'est-ce qui rend ce projet différent des alternatives évidentes ?
Si plusieurs réponses sont inconnues, marquez-les comme questions ouvertes.
N'inventez pas de faits stratégiques pour donner l'impression qu'un concept est complet.
Workflow
1. Reformuler le problème de conception
Condensez le brief en une déclaration prête pour le concept.
Utilisez :
Le site web doit aider <l'audience>
à comprendre/croire/vivre <le sens>
afin qu'ils puissent <l'action ou le résultat souhaité>,
tout en surmontant <l'obstacle clé>.
Exemple de structure :
Le site web doit aider les acheteurs techniques à comprendre que l'entreprise
ne se contente pas de fabriquer des composants : elle contrôle le processus complet
depuis la matière première jusqu'à la pièce de précision finie, afin que les acheteurs
lui fassent confiance pour des travaux de production à haut risque.
Ne commencez pas le concept avant que le problème puisse être exprimé clairement.
2. Définir le sens essentiel
Demandez :
Si le visiteur ne se souvient que d'une seule idée de cette expérience, quelle devrait-elle être ?
Écrivez une phrase.
Ce n'est pas :
- un slogan
- un titre
- une liste de fonctionnalités
- un style visuel
C'est le sens que le concept doit communiquer.
Exemple :
Cette entreprise transforme un processus industriel imprévisible en quelque chose
de précis, visible et fiable.
Testez la déclaration :
- Est-elle significative pour l'audience ?
- Est-elle pertinente pour l'entreprise ?
- Est-elle plus spécifique que « nous sommes innovants » ?
- Des preuves disponibles peuvent-elles la soutenir ?
- Pourrait-elle guider les décisions de contenu ?
3. Définir la transformation de l'audience
Décrivez le changement souhaité.
Utilisez :
Avant :
Le visiteur pense/ressent/croit...
Après :
Le visiteur pense/ressent/croit...
Action :
Le visiteur est maintenant prêt à...
Les transformations possibles incluent :
incertain → confiant
inconscient → informé
sceptique → convaincu
débordé → clair
curieux → investi
détaché → connecté émotionnellement
conscient du problème → conscient de la solution
axé sur les fonctionnalités → axé sur les résultats
perception générique → perception distinctive
Ne fabriquez pas de transformation émotionnelle là où un changement pratique de compréhension est suffisant.
4. Constituer l'inventaire des preuves
Séparez le matériel narratif disponible des hypothèses.
Utilisez :
| Preuve | Type | Ce qu'elle prouve | Force |
|---|---|---|---|
| ... | client / fondateur / processus / données / produit / historique | ... | élevée / moyenne / faible |
Classez le matériel comme :
Vérifié
Directement soutenu par le matériel fourni.
Inféré
Une interprétation plausible qui nécessite encore une validation.
Manquant
Des preuves utiles qui n'existent pas actuellement.
Un concept ne doit pas dépendre de témoignages inventés, d'histoires fabriquées, de résultats clients hypothétiques présentés comme des faits, ou de matériel de production inexistant.
5. Identifier les lentilles narratives possibles
Évaluez quelle lentille expose naturellement le sens du projet.
Les lentilles possibles incluent :
Transformation
Montrez le changement significatif créé pour le client.
avant
→ intervention
→ après
Idéal quand le résultat est le différenciateur le plus fort.
Produit en usage
Montrez l'offre à travers des situations réelles plutôt que des fonctionnalités isolées.
contexte
→ utilisation
→ résultat
Idéal quand voir le produit performer crée la confiance.
Processus
Révélez comment quelque chose est créé, livré, transformé ou résolu.
entrée
→ étapes
→ sortie
Idéal quand le processus, le savoir-faire, la transparence ou l'expertise différencie l'organisation.
Fondateur ou origine
Utilisez la raison pour laquelle l'organisation existe comme récit organisateur.
frustration
→ décision
→ nouvelle approche
→ mission actuelle
Idéal quand l'origine explique significativement le produit ou la marque.
N'utilisez pas le récit fondateur simplement parce que le matériel fondateur existe.
Histoire client
Laissez la situation d'un vrai client démontrer la pertinence.
situation
→ problème
→ expérience
→ résultat
Idéal quand la preuve sociale et l'expérience vécue sont plus fortes que les affirmations sur le produit.
Mission et impact
Structurez l'expérience autour du changement que l'organisation veut produire.
situation actuelle
→ défi
→ intervention
→ preuve d'impact
Utile pour les associations caritatives, les institutions culturelles, les organisations axées sur une mission, et le travail d'intérêt public.
Contraste
Définissez l'offre en exposant la faiblesse de l'alternative conventionnelle.
ancienne hypothèse
→ contradiction
→ meilleur modèle
Utile quand la catégorie a un défaut bien ancré.
Voyage
Emmenez le visiteur à travers une séquence significative.
étape 1
→ étape 2
→ étape 3
→ destination
Utile quand la progression elle-même a de l'importance.
Système
Révélez comment des pièces apparemment séparées fonctionnent ensemble.
parties
→ relations
→ système
→ résultat
Utile pour les plateformes, infrastructures, services complexes et écosystèmes.
Investigation
Commencez par une question et révélez la réponse progressivement.
question
→ preuve
→ découverte
→ conclusion
Utile pour les expériences éditoriales, de recherche, culturelles ou explicatives.
Démonstration
Structurez le site web autour de la preuve d'une affirmation.
affirmation
→ démonstration
→ preuve
→ invitation
Utile quand la confiance doit être gagnée rapidement.
Plusieurs lentilles peuvent coexister, mais chaque concept doit avoir un mécanisme narratif dominant.
6. Choisir l'intensité narrative appropriée
Tous les projets ne doivent pas devenir une expérience narrative immersive.
Classez les concepts candidats comme :
Narration légère
La narration affecte principalement :
- l'ordre des messages
- la progression des sections
- les titres
- le placement des preuves
L'interface reste conventionnelle et efficace.
Bon pour :
- SaaS
- services professionnels
- B2B
- pages produit
- sites axés sur la conversion
Narration intégrée
La narration influence :
- la progression des pages
- le rythme du contenu
- l'imagerie
- le langage répété
- les interactions sélectionnées
- les transitions de sections
Bon pour :
- sites de marque
- portfolios
- lancements
- entreprises de services différenciées
- commerce éditorial
Narration immersive
L'expérience elle-même se comporte comme une histoire.
La narration peut influencer :
- la progression du défilement
- le séquencement des médias
- les changements de scène
- l'interaction
- la structure des chapitres
- les mouvements riches
Bon pour :
- campagnes
- expériences culturelles
- lancements de produits
- projets de narration
- sites de marque expérientielle
L'immersion ne doit être proposée que lorsque :
- le contenu la soutient
- la valeur la justifie
- le budget de production peut plausiblement la soutenir
- la narration reste compréhensible sans nécessiter une interaction fragile
7. Générer des territoires verbaux avant les territoires visuels
Commencez l'exploration du concept par le langage.
Générez des mots et des phrases liés à :
- transformation
- langage client
- vocabulaire du projet
- processus
- objets
- terminologie du domaine
- contrastes
- résultats
- associations culturelles
- résultats de l'univers graphique
Les méthodes d'idéation possibles incluent :
Combinaisons de phrases
Combinez le langage du projet de manière inattendue mais défendable.
Idiomes
Explorez les idiomes pertinents comme étincelles.
Ne forcez pas les idiomes dans les concepts finaux.
Rejetez ceux qui sont :
- clichés
- déroutants
- culturellement inappropriés
- trop intelligents
- sans rapport avec l'activité réelle
Langage du domaine
Réinterprétez la terminologie déjà utilisée par l'audience.
Double sens
Explorez les mots ayant à la fois des significations fonctionnelles et émotionnelles.
Déclarations de contraste
Exemples :
Pas X. Y.
De X à Y.
Au-delà de X.
Et si X était Y ?
Langage de transformation
Utilisez des verbes décrivant le mouvement ou le changement.
Questions
Utilisez une question significative non résolue pour créer une tension.
Phrases appartenant au projet
Préférez la terminologie ou le langage que les concurrents ne peuvent pas facilement revendiquer.
N'écrivez pas la copie finale du site web à ce stade.
Le but est la génération de concepts.
8. Divergez avant de converger
Générez plusieurs