Compétence Conception de Dashboards — Design, UX, KPIs & Patterns
Vue d'ensemble
Un dashboard est une interface visuelle qui condense les indicateurs clés d'une activité sur un seul écran, permettant une prise de décision rapide et éclairée. Contrairement à un rapport, un dashboard est conçu pour être lu en un coup d'œil (scan), pas pour être lu comme un document.
Les 3 types de dashboards :
Type
Cadence
Audience
Contenu
Opérationnel
Temps réel / Horaire
Opérateurs, managers terrain
KPIs actuels, alertes, flux
Stratégique
Hebdo / Mensuel
Direction, executives
Tendances, objectifs, santé globale
Analytique
À la demande
Analystes, data scientists
Exploration, drill-down, corrélations
Quand l'utiliser
Activez cette compétence lorsque l'utilisateur :
Conçoit ou critique un tableau de bord (quel que soit l'outil).
Veut structurer des KPIs par priorité et pertinence.
Cherche les bonnes pratiques de layout, couleurs et typographie.
Souhaite rendre ses dashboards accessibles et non-ambigus.
A besoin de choisir le bon type de visualisation pour chaque KPI.
Veut appliquer les principes de la charge cognitive et de la hiérarchie visuelle.
1. Fondamentaux du Design de Dashboard
1.1 Les 5 Principes Fondamentaux
Clarté avant tout — Un dashboard ne doit pas nécessiter d'explications. 5 secondes suffisent pour comprendre le message principal.
Hiérarchie visuelle — L'œil doit être guidé : KPI principal → sous-KPIs → détails → données brutes.
Contexte pertinent — Un chiffre sans contexte n'est pas interprétable (période précédente, objectif, seuil).
Un écran, un objectif — Si vous avez besoin de scroller, créez un second dashboard.
Performance — Un dashboard qui met 10 secondes à charger échoue (max 3s).
Trend arrows:↑↗→↘↓:tendancesansgraphiquepourlesKPIssimples→Vertstable,orangealerte,rougecritiqueSparklines:Mini-graphiquedansunecelluledetableauMontrelatendancesur30jourssansprendredeplaceBullet chart:AlternativecompacteauxjaugesAffiche :valeuractuelle|objectif|plages(bon/acceptable/mauvais)Heatmap:TableauavecintensitédecouleurParfait pour :jour×heure,produit×région
4. Layout et Structure
4.1 Grille et Alignement
Grillerecommandée:-Mobile:4colonnes(stack)-Desktop:12ou16colonnes-Gouttière:16-24pxentreleséléments-Padding:24-32pxautourdudashboardTailles de cartes:-KPI principal:1/3ou1/2delalargeur-KPI secondaires:1/4ou1/6-Graphiques principaux:2/3oupleinelargeur-Tableaudedétail:pleinelargeurZones prioritaires (Pattern F ou Z):Coinsupérieurgauche→KPIleplusimportantLesyeuxbalayentenF(occi-dental)ouZ(selonculture)
Police:-Sans-serif(Inter,Roboto,OpenSans,Lato)—meilleurelisibilitéécran-Éviterlespolicesserifpourlestitresetchiffres-Policeàchassefixepourlesnombres(tableaux)Hiérarchie:-Titre dashboard:28-36px,Bold-Titre de carte:16-20px,Semi-bold-Valeur KPI:36-48px,Bold-ÉtiquetteKPI:12-14px,Regular-Donnéestableau:11-13px-Axes/légendes:11-12pxEspacement:-Hauteur de ligne:1.4-1.6xlatailledepolice-Espace entre sections:24-32px-Padding interne des cartes:16-24px
Effet de supériorité du pictural — Un graphique est compris plus vite qu'un tableau de chiffres.
Loi de l'économie gestalt — L'œil organise visuellement les éléments proches en groupes logiques.
Principe de prégnance — La forme la plus simple est perçue en premier.
Effet de récence — Les éléments placés en fin de lecture sont mieux mémorisés (dernier KPI).
7.2 Réduire la Charge Cognitive
ÀFAIRE:-Unmessageprincipalpardashboard-Couleurscohérentes(rouge=problèmepartout)-Annotationssurlespointsclés(flèches,textes)-Pré-calculeretafficherlesinsights(pasjustelesdonnées)-Utiliserdestitresquirésument(ex:"Les ventes sont en hausse de 15%")ÀÉVITER:-Changerd'échelleentredeuxgraphiquescomparables-Utiliserdeslégendesquandleslabelsdirectssuffisent-Affichertouteslesdécimales-Mettreplusieursobjectifssurlemêmedashboard
8. Tests et Validation
8.1 Protocole de Test
Test du 5-secondes:1.Montrerledashboard5secondes2. Demander :quelestlemessageprincipal?3.Silaréponsen'estpasimmédiate→redesignTest du hall de gare:1.Unepersonnequipassedanslecouloirvoit-ellel'infoessentielle?2.LeKPIprincipaldoitêtrevisibledeloinChecklistd'audit:
[ ] Letitreestexplicite("VentesQ12024" pas "Dashboard")
[ ] L'unitédechaquemesureestvisible
[ ] Lapériodeestindiquée
[ ] Lescouleursontunesignificationcohérente
[ ] Lesgraphiquesontuntitre
[ ] Lesaxessontétiquetés
[ ] Lescomparaisonssontcontextualisées(vsN-1,vsbudget)
[ ] Ledashboardfonctionnesansdéfilement(abovethefold)
[ ] Lestooltipssontutiles(pasderépétitiondutitre)
[ ] Lesvaleursaberrantesouseuilscritiquessontannotés
Pièges Courants (Pitfalls)
Dashboard fourre-tout.
Erreur : Mettre tous les KPIs disponibles sur un seul écran par peur d'en oublier.
Correction : Un dashboard = un objectif. Les KPIs non essentiels vont dans un rapport dédié.
Absence de hiérarchie visuelle.
Erreur : Tous les éléments ont la même taille et la même couleur.
Correction : Le KPI principal doit être 2-3x plus grand que les secondaires.