Les tableaux de bord analytiques doivent présenter des informations complexes rapidement. Ces patterns assurent la cohérence dans notre produit tout en optimisant la compréhension rapide et la prise de décision.

Cartes de métriques

Les cartes KPI sont la principale façon dont les utilisateurs consomment les métriques de haut niveau :

Chiffre principal : Une typographie large et en gras (32-48 px) attire immédiatement l'œil vers la valeur clé.
Indicateur de comparaison : Flèche verte vers le haut ou rouge vers le bas avec le pourcentage de changement par rapport à la période précédente.
Sparkline optionnel : Un petit graphique en ligne montrant la tendance sur 7 jours fournit le contexte sans surcharger.
Clarté des étiquettes : Les noms des métriques sont courts (2-3 mots max) avec une icône d'information pour une explication détaillée.

Sélecteurs de plage temporelle

Contrôles temporels cohérents dans toutes les vues du tableau de bord :

Options prédéfinies : Aujourd'hui, Hier, 7 derniers jours, 30 derniers jours, 90 derniers jours, 12 derniers mois.
Plage personnalisée : Sélecteur de date avec calendrier visuel pour une sélection précise.
Bascule de comparaison : Activation en un clic pour superposer les données de la période précédente sur les graphiques.
Persistance dans l'URL : La plage sélectionnée est stockée dans les paramètres d'URL pour des états de tableau de bord partageables.

Patterns de filtres

Les filtres affinent les données sans quitter la vue actuelle :

Barre de filtres : Rangée horizontale de filtres déroulants pour les dimensions courantes (pays, appareil, source).
Pills de filtres actifs : Les filtres sélectionnés apparaissent sous forme de pills supprimables montrant l'état actuel.
Constructeur de segments : Mode avancé pour les conditions complexes avec logique ET/OU.
Segments sauvegardés : Les utilisateurs peuvent sauvegarder et nommer des combinaisons de filtres pour une réutilisation rapide.

Indicateurs en temps réel

Les données en direct nécessitent des signaux visuels clairs :

Point pulsant : Un point vert animé indique une connexion active au flux de données en temps réel.
Dernière mise à jour : Horodatage affichant « Mis à jour il y a 3 s » avec rafraîchissement automatique.
Mise en évidence des nouvelles données : Mise en évidence brève des lignes ou métriques qui viennent de changer (flash jaune subtil).
État de la connexion : Notification toast si la connexion en temps réel est interrompue avec tentative de reconnexion.

États vides

Ce que les utilisateurs voient quand il n'y a pas encore de données :

Illustration utile : Graphique convivial correspondant au contexte (graphique sans points de données, liste vide).
Explication claire : Pourquoi il n'y a pas de données — « Aucun visiteur dans cette plage temporelle » vs « Script de suivi pas encore installé ».
Invitation à l'action : Bouton ou lien pour résoudre l'état vide (installer le script, changer la plage de dates).
Option de données d'exemple : Pour les nouveaux utilisateurs, proposer d'afficher des données de démonstration pour comprendre l'interface.

États de chargement

La performance perçue compte autant que la vitesse réelle :

Écrans squelettes : Des formes de substitution grises correspondant à la mise en page attendue réduisent le temps de chargement perçu.
Chargement progressif : Afficher les données en cache immédiatement, les mettre à jour avec les nouvelles données quand disponibles.
Animation décalée : Les éléments squelettes s'animent en séquence pour indiquer l'activité.
Gestion du délai d'attente : Après 10 secondes, afficher une option de nouvelle tentative plutôt qu'un chargement infini.

Patterns de tableaux

Tableaux de données pour une exploration détaillée :

Colonnes triables : Cliquer sur les en-têtes pour trier, avec des indicateurs clairs ascendant/descendant.
En-tête fixe : Les en-têtes de colonnes restent visibles lors du défilement des longs tableaux.
Actions au survol : Les actions de ligne (afficher, modifier, supprimer) apparaissent au survol, cachées par défaut.
Pagination vs défilement infini : Utiliser la pagination pour l'exploration des données, le défilement infini pour les flux en temps réel.

Navigation par exploration

Passer de la vue d'ensemble au détail :

Clic pour filtrer : Cliquer sur un segment de graphique filtre l'ensemble du tableau de bord selon cette dimension.
Fil d'Ariane : Affiche le chemin d'exploration actuel avec des liens pour revenir aux niveaux supérieurs.
Panneau latéral de détail : Cliquer sur une ligne ouvre un panneau coulissant avec tous les détails sans perdre le contexte.
Navigation arrière : Le bouton Précédent du navigateur fonctionne correctement à travers les états d'exploration.

Patterns de tableau de bord