adrianorafael/slides-design-skill

Compétence Design de Diapositives

Vous agissez en tant que directeur artistique de présentations exécutives. Cette compétence est la couche de narration, de choix de graphique et de design ; la mécanique du fichier (pptxgenjs, édition de modèle, validation, rendu) provient de la compétence pptx, qui doit être chargée conjointement. Là où les deux divergent en matière de design, celle-ci prévaut ; les divergences sont marquées avec "(diffère de pptx)".

Carte de la compétence

1. Ce qui est en jeu
2. Flux de travail
3. Titres d'action
4. Comment choisir le graphique (question, données, contexte)
5. Catalogue : 46 formes testées, avec quand les utiliser et quand les éviter
6. Perception : Gestalt, accent, étiquettes et clarté
7. Composition du deck
8. Système visuel
9. Recettes en pptxgenjs
10. Limites connues
11. Contextes de travail en ventes et avant-ventes
12. Critique de designer
13. Base conceptuelle

1. Ce qui est en jeu

Un cadre dirigeant décide en quelques secondes si la diapositive mérite son attention. La diapositive livre la conclusion dans le titre, la preuve dans le graphique et rien de plus. Tout ce qui oblige l'œil à aller et venir (légende séparée, axe à déchiffrer, titre générique) est un coût imposé à celui qui a le moins de temps dans la salle.

Lorsque deux règles de cette compétence sont en conflit, décidez dans cet ordre : 1) vérité des données, 2) clarté du message, 3) marque de l'utilisateur, 4) esthétique. Une diapositive belle qui exagère la donnée fait perdre la vente.

2. Flux de travail

1. Décision. Découvrez le public, la décision attendue et l'utilisation (en direct ou lu seul). Si l'utilisateur ne l'a pas dit et est présent, demandez uniquement la décision. S'il n'est pas présent, supposez "en direct, direction, approuver une prochaine étape" et dites-le dans la livraison.
2. Script avec uniquement des titres d'action. Listez les titres en séquence avant de dessiner. Lus seuls, ils racontent l'histoire et se terminent par une demande. S'ils ne la racontent pas, le problème est de raisonnement, pas de design. Si le contexte est dans la section 11, partez de la séquence suggérée là-bas.
3. Fiche pour chaque diapositive, avant tout code : titre d'action | donnée qui prouve | forme (section 4 et 5) | ce qui reçoit l'accent | annotation | "et alors?" Si vous ne pouvez pas remplir "donnée qui prouve" ou "accent", la diapositive n'a pas encore de message.
4. Système visuel : mode modèle ou mode mini système de design (section 8).
5. Construction avec les recettes de la section 9 ; graphiques natifs chaque fois que la forme existe dans la bibliothèque.
6. Critique et correction : rendez, critiquez avec la section 12 et corrigez. Un cycle de correction est le minimum ; le premier rendu a presque toujours une étiquette qui se chevauche ou un titre qui se brise mal.

Pour réviser un deck existant, commencez par l'étape 2 : extrayez les titres actuels, réécrivez-les et montrez l'avant et l'après à l'utilisateur avant de toucher au visuel. Pour remplacer un graphique existant, dites quelle forme entre et pourquoi, en citant la ligne de la section 5.

3. Titres d'action

Le titre affirme la conclusion ; le corps prouve. Formule : sujet + verbe fort + résultat quantifié.

Au lieu de	Écrivez
Il y a eu une augmentation de 5% des ventes en raison du comportement des clients pendant le Black Friday	Le Black Friday a augmenté les ventes de 5%
Analyse des ventes du 4ème trimestre	Les ventes du T4 ont augmenté de 12%, tirées par le canal numérique
Temps de réponse par application	Le checkout répond 3 fois plus lentement que le reste du parcours
Résultats de la POC	La POC a trouvé la cause racine en 4 min, contre 2 h aujourd'hui

• Phrase avec verbe, voix active, événement ou agent en premier. Supprimez "il y a eu", "on a observé", "en raison du fait de". Une étiquette de sujet ("Revenu") laisse chaque personne tirer une conclusion différente.
• Une ligne est l'objectif ; deux est le maximum. En 28pt sur une diapositive 16:9, environ 58 caractères par ligne tiennent. Si la deuxième ligne se retrouve avec un mot orphelin, réécrivez. Ne réduisez pas la police.
• Un nombre dans le titre, avec le passage-clé dans la couleur d'accent (la même donnée mise en évidence dans le graphique).
• Sans point final, aligné à gauche, toujours dans la même position.
• Le titre promet exactement ce que le graphique montre : même nombre, même unité.

Frein d'honnêteté. Raccourcir n'autorise pas à renforcer. "Le Black Friday a augmenté les ventes de 5%" affirme une cause ; si la donnée montre seulement une coïncidence dans le temps, écrivez "Les ventes ont augmenté de 5% la semaine du Black Friday". Les estimations apparaissent comme estimation ("R$ 2,1 mi, estimation"), hors du titre si possible. Avec peu de points (une dispersion de six catégories), affirmez le cas, pas la règle. "5%" et "5 points de pourcentage" sont des choses différentes.

L'explication longue qui est sortie du titre va dans les notes du présentateur.

4. Comment choisir le graphique

La forme n'est pas une décoration : elle est l'argument visuel du titre. Choisissez en quatre étapes et optez pour la forme la plus simple qui prouve encore le titre.

Étape 1 : le verbe du titre indique la famille

Le titre affirme que…	Famille	Premiers choix (détails dans la section 5)
un nombre parle de lui-même	Indicateurs	grand nombre ; nombres + mini-barres ; tableaux d'indicateurs
quelque chose est plus grand, plus petit, a gagné, a perdu, est au-dessus ou en dessous	Comparaison	barres ordonnées ; colonnes groupées ; pente ; haltères ; sucette ; divergentes ; bullet ; radar ; tableau avec mini-graphiques
quelque chose a augmenté, diminué, a changé ou s'est produit à un moment donné	Temps	colonnes (peu de périodes) ; ligne avec région ou avec objectif (beaucoup de points) ; zone cumulée avec objectif ; calendrier ; petits multiples ; classement dans le temps
une partie domine, se divise ou explique le total	Partie du tout	anneau (jusqu'à 3 parties) ; barres 100% ; gaufrier ; treemap ; Pareto ; cascade ; zone 100%
la majorité se situe dans une plage, varie plus, se concentre	Distribution	histogramme ; diagramme en boîte ; carte de chaleur ; tableau de cohorte
une mesure évolue avec une autre	Relation	dispersion (2 mesures) ; bulles (3 mesures)
les personnes ou le trafic vont de A à B, se perdent à une étape	Flux	entonnoir ; Sankey
un lieu se démarque	Géographie	carte en grille
un système s'est dégradé, un incident s'est produit, une limite a été atteinte	Observabilité	tableaux ; jauge ; bande d'anomalie ; frise chronologique des états ; carte de services ; traçage ; ruche ; anneaux ; budget d'erreurs ; chronologie des événements
nous allons faire X jusqu'à Y	Plan	fiches d'action ; chronogramme (Gantt)

Étape 2 : le format des données filtre

• 1 nombre → grand nombre, sans graphique.
• 2 à 3 parties d'un tout → anneau ou barres 100%. 4 à 12 parties → barres ordonnées. Hiérarchie (catégorie > sous-catégorie) → treemap. Centaines d'éléments avec concentration → Pareto.
• 2 moments × plusieurs éléments → pente (le changement) ou haltères (la distance entre référence et réel). 3 à 7 périodes → colonnes. 8+ points → ligne. Jour × heure → carte de chaleur. Jours d'un mois → calendrier.
• Plusieurs séries du même format → petits multiples, jamais une ligne avec six couleurs. Positions qui changent dans le temps → classement (bump).
• 2 mesures par élément → dispersion ; 3 mesures → bulles.
• Beaucoup de valeurs d'une mesure → histogramme ; comparer la dispersion de groupes → diagramme en boîte.
• Valeurs positives et négatives par élément → barres divergentes.
• Flux entre deux ensembles → Sankey ; étapes séquentielles avec perte → entonnoir.
• 5 à 8 dimensions pour 2 entités → radar, seulement si le message est "perd (ou gagne) dans une".
• État de plusieurs composants dans le temps → frise chronologique des états. Dépendances → carte de services. Durée des étapes imbriquées → traçage en cascade. Beaucoup d'éléments identiques avec statut → ruche.
• Une valeur sur une échelle avec des plages → jauge ; plusieurs valeurs par rapport à l'objectif → bullet. Série avec plage attendue → bande d'anomalie. Solde qui se consomme → budget d'erreurs (burn-down). Cumul par rapport à l'objectif → zone cumulée (burn-up).

Étape 3 : le contexte détermine le degré de sophistication

• Cadre en direct : formes familières (barres, colonnes, ligne, grand nombre, anneau). Utilisez une forme spéciale (Sankey, radar, boîte, ruche, cohorte) seulement si le message n'existe pas sans elle, et écrivez dans le sous-titre comment la lire ("boîte = moitié centrale des livraisons").
• Pré-lecture : peut avoir plus de densité (tableau avec mini-graphiques, cohorte, petits multiples), avec "et alors?" sur chaque diapositive.
• Public technique (IT, SRE, architecture) : les formes d'observabilité sont la langue maternelle ; néanmoins, titre d'action et un accent par diapositive.
• Dans le même deck : variez la forme d'une diapositive à l'autre ; trois diapositives consécutives avec la même forme fatiguent et cachent le changement de sujet.

Étape 4 : testez avant de construire

• Peut-on pointer dans le graphique le nombre du titre ?
• L'accent tombe-t-il sur un seul élément ?
• Fonctionne-t-il sans légende ?
• Une forme plus simple prouverait-elle aussi ? Si oui, utilisez la plus simple.

Échanges qui améliorent presque toujours

Au lieu de	Utilisez
Camembert avec 6 parts	Barres ordonnées
Lignes avec 6 couleurs	Petits multiples, ou 1 ligne en surbrillance et le reste en gris
Colonnes groupées avec 2 ans pour 8 catégories	Pente ou haltères
Tableau de chiffres bruts	Carte de chaleur, cohorte ou tableau avec barres et mini-graphiques
Deux axes de valeurs	Deux diapositives, ou indice (base 100)
Plusieurs jauges côte à côte	Bullet (objectif x réalisé)
Empilées avec de nombreuses couches	Petits multiples, ou 100% avec jusqu'à 3 couches
Carte géographique où les grands États dominent la lecture	Carte en grille

5. Catalogue : 46 formes testées

Chaque forme comprend : Utilisez (question et données), Évitez (et quoi utiliser à la place), Titre-modèle (testé sur un deck de 47 diapositives), Accent et Construire (résumé ; code dans la section 9). "Natif" = graphique modifiable de PowerPoint ; "formes" = dessiné avec des formes, géométrie exacte mais sans feuille de données.

Indicateurs

• Grand nombre. Utilisez : un nombre seul prouve le titre (résultat de POC, économie, délai). Évitez : nombre qui a besoin de comparaison pour avoir un sens (nombres + mini-barres). Titre-modèle : "La POC a trouvé la cause racine en 4 min, contre 2 h aujourd'hui". Accent : le nombre. Construire : texte 60–72pt seul ou 44–50pt en colonnes, une ligne de contexte en dessous.
• Grands nombres + mini-barres. Utilisez : 2 à 4 KPI avec la période précédente. Évitez : plus de 4 KPI (cela devient un tableau). Titre-modèle : "Le Black Friday a rapporté 48,2 M R$ sur le e-commerce, soit 32% de plus". Accent : le KPI du titre. Construire : formes : valeur 44–50pt ; en dessous, deux fines barres proportionnelles (actuelle et précédente) avec étiquette directe ("2025 +32%", "2024 36,5 M R$").
• Tableaux d'indicateurs (stat). Utilisez : 3 à 5 métriques opérationnelles qui se sont détériorées ou améliorées ensemble ; ouvre bien une section technique. Évitez : public uniquement métier sans la traduction dans le "et alors?". Titre-modèle : "Le checkout est resté en dessous du SLO : 99,58% de disponibilité". Accent : le tableau du titre. Construire : formes sur diapositive sombre : cartes darkCard, valeur 42pt, ligne de contexte avec la limite ("SLO : 99,9%"), mini-graphique poly avec la limite en pointillés et "16h … 24h" aux extrémités.

Comparaison

• Barres horizontales ordonnées. Utilisez : classement ou part de 4 à 12 éléments, noms longs. Évitez : temps (colonnes ou ligne). Titre-modèle : "L'électronique a généré 46% du chiffre d'affaires de la semaine". Accent : la barre citée. Construire : natif BAR barDir:"bar", catAxisOrientation:"maxMin", données ordonnées, valeur au bout, une couleur par point.
• Colonnes groupées. Utilisez : 2 périodes ou groupes × 2 à 4 catégories, lorsque la valeur absolue importe. Évitez : plus de 4 catégories (pente ou haltères). Titre-modèle : "Le panier moyen a augmenté dans tous les canaux, plus sur l'app : +11%". Accent : la colonne citée. Construire : formes, car la bibliothèque ne colore pas un seul point d'une série multiple : précédent mute, actuel mid, cité accent ; valeur sur chaque colonne, variation au-dessus de la paire, année en dessous, groupe en dessous de l'année.
• Pente (slope). Utilisez : variation entre 2 moments pour 3 à 8 éléments. Évitez : 3 moments ou plus (ligne). Titre-modèle : "Seule l'application a mieux converti que l'année dernière". Accent : la ligne qui a le plus changé. Construire : natif LINE avec 2 catégories et marqueurs ; nom + valeur à gauche, valeur à droite ; l'axe peut commencer au-dessus de zéro.
• Haltères (dumbbell). Utilisez : distance entre 2 valeurs par élément (objectif × réel, promis × réalisé, avant × après une POC). Évitez : lorsque la direction dans le temps est le message (pente). Titre-modèle : "Dans le Nord-Est, la livraison a eu 3,1 jours de retard en moyenne". Accent : la paire la plus éloignée. Construire : formes : point vide (référence) et plein (réel) reliés par seg de 3pt ; éléments ordonnés par la distance ; différence "(+3,1)" à droite ; grille verticale hair.
• Sucette (lollipop). Utilisez : classement par rapport à une limite de référence (temps de page, SLA). Évitez : sans limite, les barres suffisent. Titre-modèle : "Sur mobile, la page produit a mis 4,1 s à charger". Accent : l'élément hors limite. Construire : formes : seg de zéro à la valeur + dot ; plage tint sur le bon intervalle avec étiquette ("Bon : jusqu'à 2,5 s").
• Barres divergentes. Utilisez : solde positif × négatif par élément (NPS par étape, approbation, variation ±). Évitez : uniquement des valeurs positives (barres). Titre-modèle : "Seule la livraison a eu plus de détracteurs que de promoteurs". Accent : le côté négatif de l'élément cité. Construire : natif BAR empilé avec les négatifs à gauche, catAxisLabelPos:"low", série supplémentaire uniquement avec l'élément mis en évidence ; valeurs absolues superposées ; "← Détracteurs" et "Promoteurs →" en haut et ligne du zéro.
• Objectif x réalisé (bullet). Utilisez : plusieurs indicateurs par rapport à l'objectif. Évitez : un seul indicateur (grand nombre ou jauge). Titre-modèle : "La livraison à temps a été le seul objectif non atteint". Accent : ce qui a échoué. Construire : formes : rail tint, barre du réalisé, ligne verticale à 100%, échelle de 0 à 120%.
• Radar. Utilisez : 5 à 8 dimensions pour 2 entités, lorsque le message est "perd (ou gagne) dans une". Évitez : 3+ entités ou lecture de valeur précise (haltères ou barres). Titre-modèle : "ACME ne perd face à la concurrence que sur le délai de livraison". Accent : l'écart dans la dimension. Construire : formes pour