Introduction

Un tableau de bord, même s’il contient les données les plus pertinentes, ne sera ni lu ni utilisé s’il n’est pas agréable à consulter et simple à comprendre.

L’expérience utilisateur (UX) et l’interface utilisateur (UI) ne sont pas des notions secondaires : ce sont les clés de l’adoption. Elles transforment vos rapports de simples compilations de graphiques en véritables outils décisionnels.

L’objectif est de transformer votre thème visuel en pages lisibles, hiérarchisées et actionnables, grâce à une mise en page rigoureuse, une navigation claire et une logique de lecture intuitive.

Pourquoi l’UX/UI est indispensable dans un tableau de bord ?

Un bon tableau de bord ne se résume pas à une juxtaposition de graphiques. Il doit guider la lecture et faciliter l’action.

C’est ici que l’UX/UI entre en jeu : non pas pour faire joli, mais pour fluidifier la prise de décision. Cette erreur est trop souvent faite, pensez graphisme avant de penser design. Un tableau simple en noir et blanc avec les informations bien positionnées, fonctionnera toujours mieux qu’un tableau de bord trop coloré, avec des formes mal utilisées (cf. chapitre Comprendre les tableaux de bord et la data visualisation).

Un bon tableau de bord attire l’œil sur l’essentiel, hiérarchise les éléments et s’adapte au lecteur. Il est réutilisé sur le long terme et pas abandonné au bout de deux semaines.

L’UX, une logique de parcours

Un rapport bien conçu se parcourt et doit proposer un chemin de lecture naturel avec :

des points d’entrée clairs : en haut de page, les KPI synthétiques, un sélecteur de dates, voire une alerte visuelle. C’est ce que l’œil verra en premier.
des zones de respiration : l’espace blanc est important. Il structure la lecture et repose le cerveau. Trop d’éléments collés induisent une surcharge cognitive.
des séquences...

Préparer le canevas et l’espace de travail : les réglages fondamentaux

Avant de styliser ou de remplir votre tableau de bord, il faut commencer par construire une base visuelle solide. En définissant dès le départ un système de grille et une taille de canevas, vous vous assurez un rendu lisible et facilement maintenable. Cette étape est essentielle pour gagner du temps à long terme et garantir une bonne expérience utilisateur.

Désactiver les guides intelligents

Par défaut, Data Studio active l’alignement automatique avec les objets voisins (guides dits « intelligents »). Or, ces guides se basent sur des heuristiques visuelles souvent peu fiables (espacements approximatifs, alignements imprécis). En effet, l’aimantation à l’œil crée des écarts de 1 à 2 pixels alors que la grille impose un rythme régulier.

Comment désactiver les guides intelligents ?

Allez dans le menu Vue, cliquez sur Aligner sur et choisissez Grille.

Profitez-en pour vous assurer que l’option Afficher la barre de navigation en mode Édition est active (afin de voir le menu du tableau de bord même en mode édition).

Et pour finir, cliquez sur Affichez la grille.

Désactivation des guides intelligents pour un alignement précis sur la grille

Adopter la grille 24 px/48 px

La grille est la fondation invisible de votre rapport. Elle vous aide à aligner les composants de manière cohérente et à créer des espaces réguliers entre eux.

Pourquoi éviter les réglages par défaut ?

Data Studio utilise par défaut une taille de grille de 50 px et des marges à 0 et cela pose plusieurs problèmes. En effet, en design, les espacements et les tailles de composants sont généralement basés sur des multiples de 4 ou 8 pixels (appelés « grille modulaire »). Par exemple : 8, 16, 24, 32, 48, 64, 96 px. La valeur 50 px ne faisant pas partie de ces séries :

les composants deviennent difficiles à aligner entre eux ;
les designs deviennent difficilement compatibles avec les gabarits de prototypage (ex. : Figma) ;
le rendu est souvent irrégulier à l’œil nu.

La grille :...

Structurer le rapport : pages et organisation des objets

Une fois l’espace de travail configuré, il est temps de l’organiser en pages et d’y placer les différents éléments.

Menu Page : gérer la structure

Le menu Page vous permet d’organiser votre rapport en plusieurs vues, chacune pouvant correspondre à un onglet.

Utilisez les options Nouvelle page ou Dupliquer une page du menu Page pour créer de nouvelles sections.

Ajout d’une Nouvelle page dans le menu Page

Une fois que la nouvelle page est créée, dans le menu Page, cliquez sur l’option Paramètres associés à la page actuelle.

Accès aux Paramètres associés à la page actuelle à partir du menu Page

Le panneau Paramètres associés à la page actuelle s’affiche. Il permet de modifier la source, les filtres ou le fond d’une page spécifique.

Possibilité de changer la source de données au niveau de la page

Il permet aussi de modifier le style principal de la page et la taille du canevas

Attention toutefois à ne pas modifier la largeur. Vous pouvez modifier la hauteur si vous estimez que cela est nécessaire et que le défilement vertical ne va pas impacter l’expérience utilisateur.

Lorsque vous aurez créé plusieurs pages, vous pourrez les gérer.

Dans le menu Page, cliquez sur Gérer les pages.

Option pour ouvrir le panneau Pages du rapport

Dans cette section, si vous n’avez pas encore renommé vos pages, par défaut, elles se nomment : Page sans titre.

Aperçu des pages de votre rapport

Double cliquez sur Page sans titre ou cliquez sur le bouton images/IC-01.png qui s’affiche au passage de la souris puis cliquez sur Renommer.

Bouton pour renommer les pages

Voici quelques règles pour le bon nommage des pages :

Il faut rester simple, court et explicite. Utilisez entre 1 et 3 mots avec maximum 25/30 caractères).
L’idéal serait d’écrire en minuscules avec une majuscule au début du mot.
Chaque titre doit être unique.
Utilisez des mots que l’utilisateur comprend. Pas de jargon interne.
Gardez la même langue.
Utilisez des séparateurs type « - » et « . ».

Par exemple : Direction...

Intention et structure des pages (lecture et composition)

Un bon tableau de bord, quel que soit le niveau d’expertise du lecteur, doit guider la lecture. Il répond à une intention précise et organise l’information pour que l’utilisateur trouve ce qu’il cherche (ou ce qu’il doit voir) en quelques secondes.

Schémas de lecture F et Z

La plupart des cultures occidentales lisent (balayent) de haut en bas et de gauche à droite. Il s’agit d’un réflexe naturel qui peut être exploité grâce à deux schémas de lecture :

le F-pattern, adapté aux pages d’analyse denses,
et le Z-pattern, idéal pour les pages analyse-rapide à objectif unique (souvent consultées sur mobile).

Illustration du F et du Z pattern

Le F-pattern repose sur une lecture séquentielle verticale (ligne par ligne, de haut en bas), en forme de F. Il convient aux tableaux de bord riches, organisés en blocs superposés.

Ils sont généralement organisés de la façon suivante :

Ligne 1 : les KPI principaux (3 à 6), alignés à gauche pour capter l’attention dès l’arrivée.
Ligne 2 : les visuels d’explication (série temporelle, graphique combiné) qui révèlent les tendances.
Ligne 3 : les détails et explorations (Top N, tableau croisé, drill).
Barre de filtres : placée en haut à gauche, au point d’entrée du regard.

Ce schéma guide l’utilisateur de la synthèse vers l’analyse en profondeur, dans un parcours logique.

Le Z-pattern lui suit un balayage visuel en diagonale, très efficace pour une lecture rapide. C’est le schéma naturel sur les petits écrans (responsive, mobile). En général l’organisation est la suivante :

en haut à gauche : le KPI principal (celui à surveiller) ;
en haut à droite : les filtres clés ou la période ;
en bas : un graphique principal (exemple : barre ou sparkline) et, si besoin, un ou deux visuels complémentaires.

Ce schéma est particulièrement adapté au mode Responsive de Data Studio, où les éléments s’empilent naturellement dans...

Configurer la Navigation, en-tête et barre de filtres

La navigation oriente l’utilisateur, l’en-tête structure ses repères, et la barre de filtres lui donne le contrôle. Lorsqu’ils sont bien conçus, ces trois éléments réduisent la charge cognitive et accélèrent l’analyse.

Avant de modifier les réglages, clarifions ce qu’une bonne navigation doit permettre à l’utilisateur.

Conseils UX pour une navigation efficace

Rendez la navigation évidente :

La structure doit sauter aux yeux dès l’ouverture.
Affichez toujours la page active (couleur, soulignement, gras).
Ajoutez deux actions clés sur chaque page d’analyse : Voir détails (vers une page dédiée) et Réinitialiser les filtres.

Utilisez des titres simples :

moins de 20-24 caractères, 1 à 3 mots ;
pas de jargon ni de noms techniques ;
même style partout (même casse, même ponctuation).

Hiérarchisez les pages :

Respectez l’ordre des pages suivant : Synthèse → Thèmes → Détails.
Si le rapport fait plus de six pages créez des sections claires.

Représentation de la classe active (page sur laquelle l’utilisateur se trouve) sur la navigation

Gardez des repères constants :

même en-tête sur chaque page (hauteur, couleurs, typo) ;
filtres toujours dans le même ordre : Date - Pays - Canal, etc ;
limitez le nombre de contrôles visibles par page entre 3 et 5.

Utilisez les icônes avec sobriété :

même famille d’icônes ;
gardez des couleurs neutres.

Adaptez sans dupliquer :

Évitez les clones de pages si un paramètre suffit.

Erreurs fréquentes à éviter :

trop de pages sans hiérarchie ;
titres longs ou ambigus ;
page active non visible ;
filtres qui changent d’une page à l’autre ;
trop de boutons ou filtres empilés.

Maintenant que vous connaissez les réflexes à avoir, vous pouvez commencer à configurer votre menu. Sachez que pour que la navigation apparaisse, il faut qu’il y ait au minimum une page créée dans le tableau de bord. Une fois que les pages sont créées, vous pouvez commencer la configuration....

Validation utilisateur : au-delà de la théorie

Vous venez de passer des heures à peaufiner votre tableau de bord. Il est beau, cohérent, techniquement irréprochable. Mais voilà la question cruciale : est-ce que les utilisateurs vont le comprendre ?

Le test de la réalité

Le meilleur test ne prend que cinq minutes et vous évitera des mois de frustration. Appelez un collègue qui ne connaît pas votre rapport (idéalement quelqu’un du même niveau que vos futurs utilisateurs). Montrez-lui la page d’accueil pendant trente secondes, puis fermez l’écran.

Posez-lui la question suivante : d’après toi, se portent les résultats de l’entreprise ?

Si votre cobaye hésite, reformule ou vous demande des précisions, c’est que votre message principal n’est pas clair. Vous pensiez que vos trois KPI en haut parlaient d’eux-mêmes ? Apparemment non.

Ensuite, donnez-lui une mission concrète, par exemple trouver le chiffre d’affaires de septembre par région. Observez sans intervenir. S’il clique au mauvais endroit, cherche plus de deux minutes, ou vous demande de l’aide, c’est que votre navigation a un problème.

Les réactions spontanées vous en apprendront plus que tous les manuels UX :

"Je ne comprends pas cette...

Éviter les pièges classiques

Après avoir accompagné des dizaines d’équipes, je vois toujours les mêmes erreurs. Autant vous éviter de les reproduire.

Le syndrome du rapport fantôme

Vous avez passé trois semaines à créer le tableau de bord parfait. Puis plus personne ne le regarde au bout d’un mois. Cela vous dit quelque chose ?

Le problème n’est généralement pas technique mais d’usage. Votre rapport ne répond pas aux vraies questions des utilisateurs, ou alors il est trop complexe pour leurs besoins réels.

Dans tel cas, organisez quinze minutes de démonstration avec trois scénarios concrets que vos utilisateurs vivent vraiment. Ne faites pas un tour complet des fonctionnalités, mais des cas d’usage précis. "Voici comment vous voyez si les ventes du mois sont dans les objectifs", "Voici comment vous identifiez quel produit pose problème".

Les petits détails qui tuent… la performance

Votre rapport rame et vous ne comprenez pas pourquoi ? Quelques pièges classiques :

Dix graphiques sur une page, c’est dix requêtes vers vos données.

Si votre source est lente (BigQuery avec des millions de lignes), cela se ressent immédiatement. Parfois, un seul tableau avec du filtrage croisé remplace trois graphiques séparés....

Boîte à outils pour parfaire votre UX

Entre la théorie et la pratique, il y a souvent un fossé : comment tester concrètement si les couleurs sont lisibles ? Comment valider que la navigation est intuitive ? Comment s’inspirer sans copier ?

Cette boîte à outils regroupe des ressources pour passer d’un rapport qui vous semble bien à un rapport validé par de vrais utilisateurs. Certains outils sont gratuits, d’autres coûtent quelques euros par mois, mais tous vous feront gagner des heures de corrections après coup.

Cette liste n’est pas exhaustive, vous pouvez bien sûr en trouver d’autres qui vous conviennent mieux.

Tester l’accessibilité et les contrastes

WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker) - Gratuit : c’est l’outil de référence pour vérifier que les couleurs respectent les normes WCAG. Son interface est simple : entrez les couleurs de texte et de fond, il vous dit si c’est conforme. Cet outil est utilisé par la majorité des designers.

Accessible Colors (accessible-colors.com) - Gratuit : quand votre couleur échoue au test de contraste, cet outil propose automatiquement les nuances conformes les plus proches. Très pratique pour ajuster rapidement une palette.

Wireframes et prototypage rapide

Excalidraw (excalidraw.com) - Gratuit : c’est une interface de dessin collaboratif...

UX/UI : mise en page et navigation dans Data Studio