Retrouvez dans cet article des conseils sur la création d’un tableau de donnée ergonomique et intuitif.
Téléchargez aussi le modèle de tableau de donnée responsive au format .sketch (compatible figma) : Télécharger le modèle de data tables responsive
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.
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
Margin et padding
Les marges permettent à l’utilisateur de ne pas étouffer parmi tout ce flot de donnée.
Scroll vertical
En fixant l’entête du tableau, l’utilisateur peut décider d’afficher beaucoup de ligne (cf pagination) sans perdre de vue l’intitulé de la colonne où il se situe.
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.
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 data tables
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.
Attention aux inspirations !
En tapant dashboard template sur google vous trouverez un bon nombre d’inspiration face auxquelles vous je invite à vous montrer vigilant. Ces designs ne sont pas toujours ergonomiques et leur UX design ne correspond pas forcément aux besoins de VOS utilisateurs.
En résumé !
Adaptez le design de vos Data tables en fonction de vos utilisateurs et méfiez vous des inspirations trouvées sur le net.
Ressources
Tableaux : Andrew Coyle « Design better data tables »
Formulaire : Kateryna Romanenchuk « A hunt for the perfect date picker UI » – Stéphanie Walter « Aidez moi à remplir vos formulaires mobiles » – Grace Noh « drag and drop for design système »,
Agencement des données et ergonomie : Livre « UX design ergonomie des interfaces » de Jean-François Nogier et Jules Leclerc
Exemple de template Admin dashboard : wrapbootstrap
