Les graphiques doivent permettre 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 widget graphique utilisé est particulièrement important, car c’est le type de widget qui permet de restituer la donnée de la manière la plus lisible possible pour l’utilisateur.
La liste des widgets disponibles actuellement est disponible ici : ….
| Remarque |
|---|
Cette liste de composant 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’équiper UX et plateforme One, ce qu’il est possible de faire (mise à disposition d’un nouveau composant, évolution d’un composant existant). |
Informations transverses (qui concernent tous les graphiques)
Titre
...
Ne pas mentionner le type de graphique : ex : “camembert”, “graphique”
...
Eviter les abréviation, exceptées les abréviations officielles connues (type HT, TTC, TVA, CRM, ERP, CA, …)
Légende
afficher les libellés et non les codes sauf si afficher les codes est plus pertinent : Code en légende vs libellé ?
Donnée entre parenthèse dans la légende ?
Hover
La valeur doit s’afficher au rollover sur la partie graphique
Donnée temporelle entre parenthèse dans le titre (temporaire)
Donut
Anatomie
...
Usage
Peut être utilisé pour représenter une répartition de données par rapport à un total en pourcentage, en montant ou en nombre par exemple.
Utilser le donut pour tracer une ou plusieurs séries de données.
| Remarque |
|---|
Points d’attention :
|
Exemples :
Répartition des commandes par client
Répartition des factures par statut (payé totalement, partiellement, impayée)
…..
…..
| Avertissement |
|---|
Ne peut pas être utilisé pour représenter :
|
Graphique
A FAIRE
Légende
A FAIRE
...
Pie chart
est-ce qu’on a cette capacité de créer des pie chart ? (voir avec plateforme - Lisa)
On pousse plutôt l’usage du Donut côté UX
PIE CHART VS DONUT ?
le plus des donuts : mettre plusieurs séries /
...
Bar chart
...
Anatomie
IMAGE A METTRE
Usage
Ils peuvent montrer les changements dans le temps, illustrer les valeurs qui ont le plus augmenté et aider à analyser comment les valeurs se comparent entre elles.
Lorsqu’il y a une temporalité, celle-ci peut être paramétrée en fonction du besoin (année civile, 12 mois glissants, semaine courante, 7 jours glissants, etc).
Exemple
Evolution du nombre de commandes sur 12 mois glissants
Evolution du chiffre d’affaires sur une année
Répartition du stock entre les dépôts
Bar chart empilé
...
Line chart
Peut être utilisé pour représenter une évolution d’atteinte d’objectif dans le temps. La temporalité peut être paramétré en fonction du besoin (année civile, 12 mois glissants, semaine courante, 7 jours glissants, etc).
Exemple 1
Exemple 2
...
Line / Bar chart combiné
Peut être utilisé pour représenter une évolution d’atteinte d’objectif dans le temps. La temporalité peut être paramétré en fonction du besoin (année civile, 12 mois glissants, semaine courante, 7 jours glissants, etc).
Permet de voir l’atteinte des résultats par rapport à un objectif, une moyenne, une donnée spécifique (stock disponible par exemple).
Exemple 1
Exemple 2
...
Radar chart
Peut être utilisé pour représenter une atteinte de résultat à un instant T par rapport à plusieurs critères fixé.
L'échelle peut être fixée librement mais doit restée cohérante.
Notes qualité fournisseur ou client
Exemple 2
...
il détermine la qualité de restitution des données. 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 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 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é : Compte comptable : 60600000 - Achats non stockés de matières et fourn.
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 survol sur la partie graphique
Actions au clic
Au clic, possibilité pour l’utilisateur de naviguer vers l'élément pour consulter plus d’informations