13 tips pour concevoir le tableau parfait

Pourquoi concevoir des tableaux efficaces ?

Pour piloter des activités complexes, le tableau est nécessaire pour analyser, trier et manipuler toute sorte d’information. L’expérience utilisateur doit être soignée car une donnée illisible est inutile. Et la data est bien sûr un sujet clé dans de nombreuses entreprises, la visualisation de ces informations étant au cœur du pilotage de leurs activités.  

1.Figer les headers

 

Source : https://material.io

Au-delà d’un certain nombre de lignes, lorsque l’utilisateur va scroller dans la page, les en-têtes des colonnes ne lui seront plus visibles. Fixer l’en-tête permet de palier facilement à cette problématique.  

2.Figer les colonnes

 

Source : https://material.io

Certaines données sont discriminantes pour une bonne analyse. Figer une ou plusieurs colonnes permet de parcourir facilement toutes les colonnes possibles tout en gardant sous les yeux les informations essentielles.  

3.Abréger le texte et gérer la taille des colonnes

La densité de l’information est telle qu’il est parfois nécessaire d’abréger tout ou partie du texte inclus dans le tableau. Dans ce cas, pouvoir redimensionner la taille des colonnes est nécessaire pour pouvoir voir l’intégralité du contenu ou permettre la visualisation complète du contenu au passage de la souris.  

4.Distinguer facilement les lignes

 

En intervertissant les lignes à fond blanc et à fond gris, la lecture est facilitée ligne par ligne.  

5.Contrôler la densité d’affichage

Tout comme il est parfois nécessaire de redimensionner les colonnes, gérer la hauteur des lignes peut être une bonne astuce pour visualiser une grande quantité d’information.  

6.Paginer

 

Lorsque le nombre de lignes à afficher est trop important, paginer permet de contrôler la quantité des résultats à afficher sans nuire aux performances de l’application.  

7.Afficher les actions au survol

Pour éviter de polluer le tableau avec les mêmes icônes visibles sur chaque ligne, on ne les affiche qu’au survol sur la ligne.

 

 

8.Créer des rangées extensibles

 

Source : https://material.io

Si vous avez besoin de rajouter plus d’information mais que l’espace vous manque, pensez aux lignes extensibles ou à ouvrir une modale, ou un volet au clic sur la ligne.

9.Trier et filtrer les colonnes

 

Source : https://material.io

Indispensables pour trouver une donnée spécifique : les options de filtres et de tris du tableau. Les filtres peuvent être aussi spécifique à une colonne en particulier.  

10.Ajouter ou supprimer des colonnes

Cette fonctionnalité est très utile pour conserver l’essentiel des données dans le tableau et rajouter/supprimer au besoin une information supplémentaire.  

11.Enregistrer les préférences de l’utilisateur (Créer des styles)

Si l’utilisateur commence à ajouter des colonnes, à filtrer ses résultats et régler sa pagination, il est utile de lui proposer d’enregistrer ses préférences. Il peut alors se créer sa bibliothèque de styles et choisir les vues qui lui conviennent en fonction de ses besoins.  

12.Editer les informations dans le tableau

Une fonction très utile pour éviter d’afficher une page détaillée pour modifier les informations du tableau.  

13.Utiliser les badges pour faire ressortir les éléments clés

 

Créer des badges pour valoriser un état, un statut, un chiffre spécifique permet d’attirer l’œil sur les données clés du tableau.  

Pour conclure… Ce qui caractérise une bonne interface c’est sa capacité à prendre en compte le besoin de l’utilisateur pour lui permettre de réaliser ses objectifs. Bien concevoir un tableau, c’est non seulement permettre une lecture synthétique de l’information mais aussi à aider à la prise de décision.