Matomo 5.10.0 quelles améliorations visuelles ?

Matomo 5.10.0 apporte une refonte visuelle, un Dark Mode et des ajustements UX sans migration majeure de base de données. Je présente les nouveautés, ce qui change dans l’interface et les bonnes pratiques pour mettre à jour et en tirer profit.

Quoi de neuf dans Matomo 5.10.0 ?

Matomo 5.10.0 introduit une refonte visuelle globale, des améliorations d’interface et le support du Dark Mode tout en n’exigeant pas de migration majeure de la base de données.

Cette version se concentre sur l’apparence et l’ergonomie plutôt que sur de nouvelles fonctionnalités profondes, ce qui facilite le déploiement pour les administrateurs et limite les risques liés à la compatibilité.

Voici les principaux changements visuels et les composants touchés :

• Éléments graphiques modifiés : Thème rafraîchi avec palette de couleurs modernisée, contraste augmenté pour une meilleure lisibilité, icônes révisées et espacement ajusté entre les éléments pour réduire l’encombrement visuel.
• Composants impactés : Widgets du tableau de bord mis à jour visuellement, barre supérieure (top bar) simplifiée, menu latéral réorganisé pour une navigation plus claire, sélecteurs (date, segments, filtres) harmonisés pour cohérence d’utilisation.
• Dark Mode : Prise en charge du mode sombre avec basculement manuel et respect des préférences système, éléments graphiques optimisés pour préserver le contraste et réduire la fatigue oculaire dans des environnements peu lumineux.
• Nature des changements : Améliorations principalement esthétiques et ergonomiques, sans rupture fonctionnelle majeure. Aucune migration importante de la base de données n’est nécessaire, ce qui facilite les mises à jour sur des environnements en production.
• Impact attendu : Lecture plus confortable des rapports, cohérence visuelle accrue entre les écrans, et correction de petites anomalies d’affichage. Pour les administrateurs, cela signifie moins de retours utilisateurs liés à l’ergonomie, mais éventuellement quelques ajustements CSS pour les plugins ou thèmes personnalisés.

Source : Matomo 5.10.0 Release Notes.

Quels sont les points forts UX ?

Les points forts UX de Matomo 5.10.0 sont une expérience modernisée, meilleure lisibilité et sélecteurs plus cohérents.

Voici cinq améliorations concrètes pour l’utilisateur :

• Typographie et espacement améliorés : Police plus lisible, interlignage augmenté et tailles de titre harmonisées pour faciliter le scan des rapports.
• Contraste et palette unifiée : Couleurs revues pour respecter les rapports de contraste et améliorer la lisibilité des données (WCAG 2.1 recommande un ratio ≥ 4.5:1 pour le texte normal).
• Sélecteurs et filtres cohérents : Comportement unifié des menus de filtre et des sélecteurs entre tous les tableaux de bord, réduisant les différences de découverte.
• Tables et densité adaptative : Colonnes mieux alignées, icônes de tri claires et option de densité (compact/standard) pour afficher plus ou moins d’informations selon le besoin.
• Micro-interactions et états clairs : Indicateurs visuels pour chargement, sélection activée et erreurs, limitant les clics répétés et les incertitudes.

Pourquoi ces améliorations facilitent l’analyse :

• Lecture plus rapide : Meilleure typographie permet de scanner le contenu plus vite ; selon Nielsen Norman Group, les utilisateurs lisent en moyenne ~20% du texte d’une page, d’où l’importance du scan (Nielsen Norman Group, nngroup.com).
• Moins d’erreurs de clic : Sélecteurs cohérents réduisent les clics inutiles et les mauvaises sélections, ce qui diminue le temps de tâche et les erreurs humaines.
• Accès aux bons filtres : Filtres visibles et persistants accélèrent la segmentation et évitent la perte de contexte lors des analyses complexes.

Conseils pratiques pour vérifier ces améliorations après mise à jour :

• Vérifier la lisibilité : Contrôler tailles de police et interlignage sur desktop et mobile.
• Tester le contraste : Utiliser un outil de contraste (ex. axe DevTools ou WebAIM) pour valider ratio ≥ 4.5:1.
• Contrôles de filtres : Confirmer que les sélecteurs conservent l’état entre vues et que le comportement est identique sur tous les dashboards.
• Parcours utilisateur : Mesurer le nombre de clics et le temps pour accomplir 3 tâches courantes (extraction rapport, filtrage, export).
• Test rapide utilisateur : Faire 5 tests utilisateurs ciblés ; 5 participants détectent ~85% des problèmes d’ergonomie selon Nielsen Norman Group (nngroup.com).

Qu’est‑ce qui change dans l’interface et les widgets ?

L’interface voit des retouches sur les widgets, la barre supérieure, la navigation latérale et les sélecteurs pour sites, segments et tableaux de bord afin d’assurer une expérience plus cohérente.
Cette mise à jour vise à homogénéiser l’apparence et la hiérarchie visuelle pour réduire la friction lors des analyses quotidiennes.

Voici les éléments modifiés et ce que cela apporte concrètement.

• Widgets : Les cartes affichant les métriques ont reçu un style unifié, des marges et un espacement réguliers, ainsi qu’une typographie qui rend les chiffres plus lisibles. Les métriques clés sont hiérarchisées (titre, valeur, évolution) pour faciliter la lecture rapide.
• Barre supérieure : La lisibilité a été améliorée par un meilleur contraste et un regroupement des actions (export, partage, période) afin que les actions fréquentes soient accessibles en un clic.
• Menu latéral : Le ré-ordonnancement favorise les sections les plus utiles, avec des séparateurs visuels pour mieux distinguer les groupes. Les intitulés sont plus visibles et les sous-sections se déplient avec un débit plus fluide.
• Sélecteurs (sites, segments, tableaux de bord) : Les listes longues sont désormais paginées ou filtrables, l’affichage est homogène (placeholder, recherche intégrée), et la sélection multiple est plus claire. Sélecteur = élément d’interface qui permet de choisir un site, un segment ou un tableau de bord.

Les impacts utilisateur sont directs : moins de scroll pour retrouver une métrique, filtres et segments accessibles dès le premier niveau, moins d’erreurs de clic grâce à l’espacement amélioré. On gagne du temps lors des revues hebdomadaires et la lecture des tendances devient plus rapide.

<div class="widget">
  <h4>Visites</h4><span class="value">12 450</span>
</div>

Comment activer le Dark Mode ?

Le Dark Mode de Matomo 5.10.0 se active depuis les paramètres personnels et n’altère pas les fonctionnalités, seulement l’apparence.

Pour l’activer, ouvrez votre avatar ou menu utilisateur en haut à droite, puis choisissez Paramètres personnels (ou Preferences selon la langue).

Dans la section Apparence ou Thème, basculez le commutateur vers Sombre ; le réglage est enregistré comme préférence utilisateur et s’applique uniquement à votre compte sans modifier les réglages globaux de l’administration.

Les éléments visuels modifiés comprennent le fond des pages (de clair à foncé), le contraste des cartes et widgets, les couleurs des graphiques et des icônes, ainsi que les bordures et zones de mise en évidence.

Le Dark Mode améliore le confort visuel en faible luminosité en réduisant l’éblouissement et la fatigue oculaire pour des sessions prolongées.

Pour garantir l’accessibilité, vérifier le contraste reste essentiel : le standard W3C WCAG 2.1 recommande un ratio de contraste d’au moins 4,5:1 pour le texte normal et 3:1 pour le texte large.

Recommandations pratiques avant et après activation :

• Tester l’affichage sur plusieurs pages clés (tableaux de bord, rapports, formulaires) pour détecter des éléments illisibles.
• Vérifier le contraste des textes critiques et des boutons avec un outil de contrôle de contraste (par exemple WebAIM Contrast Checker) conformément à WCAG 2.1.
• Conserver une option de basculement pour l’équipe afin que chacun puisse choisir selon son environnement (écrans, préférences personnelles, conditions d’éclairage).
• Contrôler les exports PDF/PNG si vous générez des rapports visuels ; certains thèmes sombres peuvent nécessiter une version claire pour l’impression.

En rappel, le Dark Mode est une préférence utilisateur qui n’impose rien aux autres et ne remplace pas les réglages globaux ni les politiques d’accessibilité de votre organisation.

Comment mettre à jour et que faire après ?

La mise à jour vers Matomo 5.10.0 implique des étapes simples (sauvegarde, test, déploiement) et il n’y a pas de migration majeure de base de données à prévoir.
La procédure suivante permet de limiter les risques et de vérifier visuellement les nouvelles améliorations (UI, widgets, sélecteurs, Dark Mode).

• Préparer une sauvegarde complète (fichiers + base). Sauvegarder l’ensemble du dossier Matomo et effectuer un dump de la base de données (DB = base de données). Exemple de commande MySQL :

  mysqldump -u utilisateur -p matomo_database > matomo_backup.sql

• Tester la mise à jour sur un environnement de pré-production. Recréer l’environnement avec votre sauvegarde, exécuter la mise à jour et vérifier les rapports clés. Cet environnement doit refléter la version PHP et les extensions du serveur de production.
• Vérifier les plugins et compatibilités. Contrôler que les plugins tiers supportent Matomo 5.10.0. Désactiver temporairement les plugins non maintenus. Consulter les notes de version et la page des plugins pour éviter les régressions.
• Procéder au déploiement durant une fenêtre planifiée. Mettre le site en mode maintenance, exécuter la mise à jour (remplacer les fichiers, lancer les scripts de mise à jour via l’interface ou la console), puis désactiver le mode maintenance.
• Vérifier l’UI, les widgets, les sélecteurs et le Dark Mode après mise à jour. Contrôler l’affichage sur différents navigateurs et tailles d’écran, tester les widgets personnalisés, et vérifier les sélecteurs (filtres) pour détecter des ruptures d’UX.

Ressources d’aide : consulter le guide officiel de mise à jour (https://matomo.org/docs/update/) et la page de support/entreprise (https://matomo.org/support/ ou https://matomo.org/pricing/). Le support payant propose assistance et SLA (accord de niveau de service).

Actions post-update : solliciter la communauté sur le forum Matomo pour signaler bugs, contribuer aux traductions via https://translate.matomo.org/, et envisager Matomo Cloud ou les fonctionnalités premium si besoin d’échelle ou de support garanti.

Prêt à passer à Matomo 5.10.0 et en profiter ?

Matomo 5.10.0 modernise l’interface sans bouleverser vos données : thème rafraîchi, Dark Mode, widgets et sélecteurs améliorés pour une expérience plus cohérente. La mise à jour reste légère côté base de données mais mérite des vérifications (sauvegarde, tests, compatibilité plugins). En suivant les étapes recommandées, vous gagnez en confort d’utilisation et en lisibilité, ce qui facilite l’analyse et la prise de décision pour votre activité.

FAQ

• Quelles sont les principales nouveautés de Matomo 5.10.0 ?
  La version 5.10.0 apporte une refonte visuelle (thème rafraîchi), des ajustements d’interface (widgets, barre supérieure, menu latéral, sélecteurs) et l’introduction du Dark Mode. Il s’agit principalement d’améliorations UX et de correctifs UI.
• Le Dark Mode change-t-il le fonctionnement des rapports ?
  Non, le Dark Mode modifie uniquement l’apparence (couleurs, contrastes) pour le confort visuel. Les données, rapports et fonctionnalités restent inchangés.
• Faut-il migrer la base de données pour passer à 5.10.0 ?
  La mise à jour 5.10.0 n’inclut pas de migration majeure de base de données. Toutefois, il est recommandé de réaliser une sauvegarde complète avant toute mise à jour.
• Quelles sont les bonnes pratiques pour la mise à jour ?
  Sauvegarde fichiers et base, tester en pré-production, vérifier la compatibilité des plugins, planifier une fenêtre de déploiement et valider l’UI (widgets, sélecteurs, Dark Mode) après mise à jour.
• Où trouver de l’aide si j’ai des problèmes après la mise à jour ?
  Consultez le guide de mise à jour officiel, les forums communautaires Matomo, ou optez pour un support payant. Participer aux communautés permet aussi de contribuer aux traductions et retours.

A propos de l’auteur

Franck Scandolera — expert & formateur en tracking avancé server-side, Analytics Engineering, automatisation No/Low Code (n8n), intégration de l’IA en entreprise et SEO/GEO. Responsable de l’agence webAnalyste et de l’organisme Formations Analytics. Références : Logis Hôtel, Yelloh Village, BazarChic, Fédération Française de Football, Texdecor. Disponible pour aider les entreprises à migrer et optimiser leurs analytics => contactez moi.

Franck Scandolera

⭐ Analytics engineer, Data Analyst et Automatisation IA ⭐

• Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…

Mon terrain de jeu :

• Data Analyst & Analytics engineering : tracking avancé (GA4, Matomo, Piano, GTM server, Tealium, Commander Act, e-commerce, CAPI, RGPD), entrepôt de données (BigQuery, Snowflake, PostgreSQL, ClickHouse), modèles (Airflow, dbt, Dataform), dashboards décisionnels (Looker, Power BI, Metabase, SQL, Python).
• Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, App Script, scraping) connectés aux API de vos outils et LLM (OpenAI, Mistral, Claude…).
• Engineering IA pour créer des applications et agent IA sur mesure : intégration de LLM (OpenAI, Mistral…), RAG, assistants métier, génération de documents complexes, APIs, backends Node.js/Python.