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
L’intérêt du scroll horizontal
- 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
Vous souhaitez revoir l'UX de votre application métier ?
Quickview – Colonne étirable
Actions sur une ligne
Etape 1 : Déclenchement de l’action
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
- 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.