Des tableaux de bord lisibles d’un coup d’œil

    La plupart des tableaux de bord répondent à « quelles données avons-nous ? ». Personne ne les ouvre pour cela : on les ouvre pour savoir si quelque chose ne va pas, puis on les referme.

    La plupart des tableaux de bord répondent à la question « quelles données avons-nous ? ». Presque personne ne les ouvre pour cela. On les ouvre pour demander « est-ce que quelque chose ne va pas, et dois-je agir aujourd’hui ? » — puis on les referme en moins d’une minute.

    L’écart entre ces deux questions explique l’essentiel de ce qui rate dans la conception d’un tableau de bord. Un écran construit à partir des données disponibles sera complet, exact et inutile d’un coup d’œil. Un écran construit à partir de la question laissera des choses de côté, et c’est la partie qui demande du courage.

    Ce qu’un coup d’œil peut réellement contenir

    Un coup d’œil, c’est environ trois secondes et quatre ou cinq informations. Voilà le budget. Tout ce qui dépasse relève d’une deuxième visite, et une deuxième visite n’a lieu que si la première l’a méritée.

    Le haut d’un tableau de bord n’est donc pas un résumé de tout. C’est la réponse honnête la plus courte à « est-ce normal ? » — et le reste de la page existe pour expliquer cette réponse quand elle est non. Inverser cela, ce qui est le réflexe par défaut, produit un mur de tuiles de poids égal où rien n’est trouvable parce que rien n’est subordonné.

    Si tous les chiffres à l’écran sont importants, l’écran n’a pas encore été conçu.

    Un chiffre seul n’est pas une information

    « 1 284 commandes » ne veut rien dire. Cela prend du sens uniquement par rapport à quelque chose : la semaine dernière, la même semaine l’an passé, un objectif, le reste du parc, ce que l’on attendrait à cette saison.

    C’est la décision au plus fort effet de levier dans un tableau de bord, et on la laisse d’ordinaire au lecteur. Celui-ci fait alors la comparaison mal, de mémoire, ou pas du tout. Un chiffre présenté avec sa propre référence — un écart, une courbe miniature, une plage de normalité — transforme une consultation en jugement, ce que la personne était venue chercher.

    Corollaire : la période affichée par défaut est une décision de conception, pas un réglage par défaut. Quelle qu’elle soit, c’est elle que la plupart des gens liront, toujours, parce que presque personne ne la change.

    Les états qui décident si on lui fait confiance

    Un tableau de bord se lit vite et déclenche des actions : les façons dont il peut avoir subtilement tort comptent donc plus qu’ailleurs.

    • Périmé. Les chiffres étaient justes il y a quatre heures. Si l’écran ne dit pas quand il a été mis à jour, chaque chiffre est une affirmation invérifiable.
    • Partiel. Une source a échoué, les autres ont chargé. Un total qui exclut silencieusement une région est pire qu’aucun total, parce qu’il a l’air complet.
    • Vide. Un compte neuf, ou un filtre sans résultat. Cela ressemble à zéro, or zéro est une information : « pas de données » et « une valeur nulle » ne doivent pas s’afficher pareil.
    • Trop petit pour signifier quelque chose. Un taux de conversion calculé sur neuf visites variera énormément et appellera une décision qu’il ne peut pas soutenir. Afficher le dénominateur suffit souvent à l’éviter.

    La couleur est une phrase, pas une décoration

    Dans un tableau de bord, la couleur fait partie du peu de choses lues de façon pré-attentive — avant que le lecteur ait consciemment commencé à lire. Cela la rend coûteuse à dépenser en décoration.

    La règle utile : la couleur doit coder une seule chose, de façon cohérente dans tout le produit, et le candidat évident est l’attention — ceci vous demande quelque chose, cela non. Dès que le rouge signifie aussi « chiffre d’affaires » dans un graphique et « erreur » dans un autre, il cesse d’être lisible d’un coup d’œil et devient quelque chose à décoder widget par widget.

    Même chose pour le choix du type de graphique. Une courbe pour l’évolution dans le temps, des barres pour comparer des choses, un nombre pour un fait unique. Un anneau n’est presque jamais la bonne réponse, et la raison est mécanique plutôt qu’esthétique : les angles se comparent mal et les étiquettes finissent hors de la forme de toute façon.

    La densité n’est pas l’ennemie

    Il existe un réflexe à vouloir aérer les tableaux de bord, et pour une page marketing c’est juste. Pour un écran utilisé tous les jours, souvent non : un blanc qui repousse la deuxième rangée sous la ligne de flottaison coûte un défilement à chaque visite, indéfiniment.

    Les outils professionnels sont généralement denses, et ce n’est pas un échec de goût — un opérateur, un régulateur ou un concessionnaire qui gère son stock veut plus à l’écran, pas moins. Ce qui rend la densité lisible n’est pas l’espace, c’est la hiérarchie : alignements cohérents, peu de tailles de texte, et subordination impitoyable de ce qui n’est pas la réponse.

    Lowkar, une place de marché automobile développée avec React et Next.js, comporte des surfaces de ce type : des parcours de mise en ligne où quelqu’un gère un stock réel plutôt que de consulter un résumé une fois par semaine, et où l’écran utile est un écran de travail plutôt qu’un écran aéré.

    Chaque chiffre doit mener quelque part

    Le coup d’œil signale que quelque chose ne va pas. La question suivante est « pourquoi », et un tableau de bord incapable d’y répondre renvoie la personne vers un export tableur — à ce moment-là, il est devenu une notification et le vrai travail se fait ailleurs.

    La règle est donc que chaque chiffre de tête doit être cliquable vers les lignes qui le composent, filtre déjà appliqué. Pas une section de rapports séparée, avec ses propres filtres à reconstruire : la même question, un niveau plus bas, reportée telle quelle.

    Ce qu’il faut vérifier sur le vôtre

    1. Ouvrez-le et chronométrez-vous. Si vous ne pouvez pas répondre à « est-ce que quelque chose ne va pas ? » en trois secondes, le haut de la page fait le mauvais travail.
    2. Masquez la première rangée. Si rien n’est perdu, c’est de la décoration.
    3. Trouvez un chiffre sans comparaison et ajoutez-en une, ou retirez-le.
    4. Regardez ce qu’il affiche pour un compte neuf, sans aucune donnée.
    5. Débranchez une source et voyez si la page l’admet ou annonce discrètement un total plus petit.
    6. Cliquez sur un chiffre de tête. S’il ne se passe rien, l’étape suivante est un tableur.

    Si vous avez un tableau de bord que les gens consultent avant d’aller travailler ailleurs, dites-nous ce que vous construisez.