Sujets d’amélioration des graphiques : déselection des données dans les donuts, est-ce que c’est pertinent ? / étiquette des données dans les graphs)Les graphiques permettent de représenter des données de manière visuelle. Les graphiques permettent de résumer de manière graphiques des données statistiques qualitatives et quantitatives et de mettre en avant les liens entre les données.
Contextes d’utilisation
Les graphiques peuvent être utilisés dans différents contextes :
un CRUD
un widget (une documentation spécifique aux widget est consultable ici : https://divalto.atlassian.net/wiki/x/N4BdkwI)
Types de graphique
Le choix du type de graphique utilisé est important, car il détermine la qualité de restitution des données. Il faut que le type de graphique restitue les infos de la manière la plus pertinente et lisible pour l’utilisateur.
| Remarque |
|---|
La liste de widget graphique n’est pas exaustive. Dans le cas où les capacités disponibles ne répondent pas totalement à vos besoins, il est possible de voir avec l’équipe UX et plateforme One, ce qu’il est possible de faire (mise à disposition d’un nouveau composant, évolution d’un composant existant). |
...
Actuellement, les types de graphiques sont les suivants :
| Pages enfant (affichage des enfants) | ||
|---|---|---|
|
Le type de graphique est défini en fonction de ce qu’on veut montrer à l’utilisateur. :
Usage | Type de graphique | Illustration |
|---|
Pour informer
-
Pour comparer des valeurs indépendantes |
Histogramme |  |
Pour comparer les compositions de plusieurs valeurs |
Histogramme empilé |  |
Pour comparer les valeurs d’un tout (composition, répartition) |
 | |
Pour montrer une évolution continue dans le temps |
 |
Histogramme ou histogramme |
Bonnes pratiques pour tous les graphiques
Titre
Ne pas mentionner le type de graphique : ex : “camembert”, “graphique”
Eviter les abréviations, exceptées les abréviations officielles connues (type HT, TTC, TVA, BL, OF,…)
Lorsque des abréviations sont utilisées, les écrire en majuscule.
Ne pas mettre des abréviations au pluriel (OF
s, BLs)Eviter les titres trop longs (maximum 5/6 mots)
Donnée temporelle entre parenthèse dans le titre (temporaire)
...
empilé | | |
Pour comparer / analyser des données plus complexse (montrer une évolution de valeurs dans le temps et indiquer une moyenne, un min, un max, …) | Graphique combiné (courbe / histogramme) |
FAQ
Quelles sont les bonnes pratiques pour la légende ?
Afficher les libellés plutôt que les codes, sauf s’il est plus pertinent d'afficher les codes.
...
Exemple :
Cas où il est plus pertinent d’indiquer le code + libellé
...
:
...
Exemple Compte comptable : 60600000 - Achats non stockés de matières et fourn.
Données Labels de donnée : ne pas afficher la donnée chiffrée entre parenthèse dans la légende. Laisser cette info au survol du graphique.
Quelles sont les bonnes pratiques concernant les couleurs du graphique ?
...
Utiliser les couleurs de la charte
Garder un maximum de cohérence au niveau des couleurs d’une vue à l’autre.
Exemple :
si je fais un graph sur un chiffre d’affaire sur la fiche client, avoir une couleur identique que celle qui représente le chiffre d’affaire sur l’interface d’accueil)
Tooltip
Au hover, la tooltip indique des informations supplémentaires.
L’intégrateur peut personnaliser les infos qui y figureront. Exemples :
le type de segment / la légende
la donnée chiffrée + son unité
le pourcentage
La valeur doit s’afficher au rollover survol sur la partie graphiqueIntéressant de mettre aussi le contenu de la légende au hover ?
Actions au clic
Au clic, possibilité pour l’utilisateur de naviguer vers l'élément pour consulter plus d’informations