Les badges doivent permettre de mettre en avant visuellement un élément d’une entité ou d’un tiers. L’utilisateur pourra filtrer / créer des vues dédiées à une colonne indiquant un badge.

Les badges doivent permettre de mettre en avant visuellement un élément d’une entité ou d’un tiers. L’utilisateur pourra filtrer / créer des vues dédiées à une colonne indiquant un badge.

Les badges permettent :

• indiquer un statut

• indiquer une fraction (1/2, 1/3, …)

• mettre en avant un état

Différents types de badge

Les types de badge ne doivent pas être mélangés dans un même champ.

Badge feu

Le badge feu a des couleurs prédéfinis (vert, orange, rouge) > Mettre en évidence un danger, une interdiction, un niveau de criticité fort.

Badge classique

Ce badge permet d’utiliser toute la palette de couleur. Il peut être utilisé pour les usages en dehors du danger, interdiction ou criticité. Les couleurs utilisées doivent être consistantes au travers de toute l’application. On utilisera donc les nuances en fonction des sémantiques.

Pour une thématique de badge qui indique le statut d’avancement d’un élément :

• Bleu : en cours, actif, … On parle aussi d’information neutre

• Violet : brouillon, en attente

• Vert : gagné, …

• Gris : terminé, clôturé, … A différencier du gris “par défaut”

• Rouge : en retard, perdu

• Orange: alerte avant de passer au badge rouge

S’il y a beaucoup de différents états de statut, on pourra utiliser des dégradés de nuances.

Exemples :

J’affiche les statuts d’une opportunité, d’une affaire

Open

Badge avec lien interne ou externe

badge lien interne: permet de lié une fiche d’une entité liée à une autre entité.

exemple: intervention liée à une demande

Open

Bonnes pratiques communes

Utilisation des couleurs

Dans l’application, nous avons voulu poussé des pratiques concernant les couleurs :

• la palette de bleu est utilisée pour indiquer une information

• la palette rouge / orange / vert doit uniquement être utilisée pour indiquer un statut, une criticité

De manière générale, garder une cohérence des couleurs dans tous les contextes (entre entités ou en fonction de la vue liste /vue fiche) :

Affichage des badges au niveau de la fiche

Si c’est pertinent, un badge pourra apparaitre dans les infolines du header de l’entité.

Affichage des badges dans une vue liste

Dans une vue liste, on utilisera les badges pour représenter des statuts multiples sur une entité. On limitera le nombre de colonnes avec des badges pour hiérarchiser les informations sur plusieurs niveaux de lecture, pour ce faire certaines informations seront retranscrites sous forme de règles:

• pour les dates dépassées / périmées on utilisera plutôt une règle rouge ou orange suivant la criticité au lieu d’un badge

• pour les statuts forts et unique (vrai ou faux) comme “bloqué” ou “sous surveillance” on utilisera des règles plus ou moins forte visuellement suivant la criticité.

Au clic sur les badges

Le clic sur les badges n’est pas une obligation, s’il y a clic on redirigera vers l’entité concernée par le badge.