Souvent utilisé dans les projets d’application métier, ERP, CRM, le tableau de donnée se doit d’être ergonomique et intuitif au risque de rendre une solution contre productive.
A l’issu d’un projet de refonte d’application métier destinée à la gestion agroalimentaire je vous livre le fruit de mes recherches.
Téléchargez gratuitement le modèle de tableau de donnée responsive compatible avec sketch et figma
Construction des marges internes et externes
Les marges permettent à l’utilisateur de ne pas étouffer parmi tout ce flot de donnée.
En fixant l’entête du tableau en haut, l’utilisateur peut décider d’afficher beaucoup de ligne de donnée sans pour autant perdre de vue l’intitulé de la colonne.
Le scroll horizontal permet de parcourir un tableau qui comporte beaucoup de colonne.
Lorsque le tableau ne peut pas fournir l’ensemble des informations nécessaires, un déploiement de la ligne en accordéon permet une lecture rapide des données.
Les problématiques rencontrées
- Beaucoup de données à placer dans les tableaux;
- Multiplication de pattern de tableau selon les catégories de la solution;
- Refondre une UI lourde qui pique les yeux;
- Utilisation sur tablette et desktop.
Modèle de base
Un design minimaliste qui met en avant les données
- L’entête du tableau ne comporte pas de couleur et les labels ainsi que les champs de filtre sont grisés;
- Les données sont les seules à être en noir ou en couleur, afin de contraster avec les labels de l’en-tête et être ainsi mise en avant;
- La première colonne comporte les données les plus importantes (identifiant);
- L’utilisation d’un zebra (alternance de ligne grise et blanche), est un fil conducteur qui permet de rappeler à l’utilisateur sur quelle ligne il se situe.
Dans un tableau il convient d’aligner les données de type numérique à droite, et celles de type texte à gauche.En plus d’une convention j’ai profité de cette Loi de proximité afin de ne pas ajouter de lignes de séparation de colonne toujours dans le but d’alléger le template.
Zoning
Construction des marges internes et externes
Les marges permettent à l’utilisateur de ne pas étouffer parmi tout ce flot de donnée.
L’intérêt du scroll vertical
En fixant l’entête du tableau en haut, l’utilisateur peut décider d’afficher beaucoup de ligne de donnée sans pour autant perdre de vue l’intitulé de la colonne.
L’intérêt du scroll horizontal
Le scroll horizontal permet de parcourir un tableau qui comporte beaucoup de colonne.
- La première colonne reste fixe afin de visualiser l’intitulé de la ligne où l’on se trouve. S’agissant d’un exemple utilisable également sur tablette, cliquer sur toute la longueur d’une ligne afin de la consulter rendrait l’utilisation du scroll impossible. C’est pourquoi la consultation d’une ligne est actionnable uniquement dans le lien de la première colonne.
- La colonne des actions reste également fixe afin de permettre à l’utilisateur d’interagir sur une ligne sans avoir à scroller jusqu’à la fin du tableau.
Quickview – Ligne déployée en accordéon
Lorsque le tableau ne peut pas fournir l’ensemble des informations nécessaires, un déploiement de la ligne en accordéon permet une lecture rapide des données.Vous souhaitez revoir l'UX de votre application métier ?
Quickview – Colonne étirable
Permettre à l’utilisateur d’étirer les colonnes du tableau lui facilitera la lecture d’une donnée dont « le texte est très très long ».
Actions sur une ligne
Etape 1 : Déclenchement de l’action
Un menu dropdown offre la possibilité de loger plus de 2 actions.
Si en revanche il n’y a que 2 actions on peut se contenter d’intégrer des icones explicites.
Etape 2 et 3 : Interaction – Validation
- La ligne avec laquelle l’utilisateur interagit est en sur-brillance afin qu’il puisse se repérer lorsqu’il parcours le tableau horizontalement . Seules les données pouvant être modifiées se transforment en champs de formulaire.
- La validation de l’action s’effectue à l’endroit où l’utilisateur l’a déclenchée.
Actions groupées – Déplacement de ligne / Drag and drop
Pour créer un système de drag and drop efficace j’ai utilisé le principe de l’affordance et j’ai utilisé une couleur orange dédiée uniquement à cette fonctionnalité.
- Les lignes concernées par le déplacement sont bordées de orange,
- Une règlette orange permet de prévisualiser la destination de l’élément que l’on est en train de déplacer,
- La position de départ de l’élément est opacifiée afin de garder en mémoire le placement initial de l’élément,
- Une ombre portée permet de matérialiser le soulèvement et le déplacement de l’élément.
Configuration du tableau de donnée
Lorsque la solution développée comporte beaucoup de colonne il est préférable de laisser le choix à l’utilisateur de paramétrer leur affichage.
Ici le nombre de colonne à afficher est géré par des checkbox, et un système de drag and drop permet à l’utilisateur de réorganiser les colonnes de son tableau.
L’utilisateur peut également décider de définir cette configuration « par défaut » afin de lui éviter de répéter l’action de configuration.