Tableau de donnée, téléchargez le modèle sketch gratuitement !

Retrouvez dans cet article le fruit de mes tests et de mes recherches concernant le composant UI Tableau de donnée ou Data table Téléchargez aussi le mon  modèle de tableau 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.

Data tables UI

J’ai opté pour un design UI épuré afin de mettre en évidence les données avant tout.

1. L’entête du tableau ne comporte pas de couleur et les labels ainsi que les champs de filtre sont grisés
2. Les données sont les seules à être en noir ou en couleur, afin de contraster avec les labels de l’en-tête et d’être ainsi mise en avant.
3. La première colonne de donnée est la plus important et sa mise en couleur permet de la mettre évidence.
4. 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. De plus cela évite d’ajouter une bordure de séparation de ligne qui alourdirait le design inutilement.

Dans un tableau il convient d’aligner les données de type numérique à droite, et celles de type chaine de caractère à 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 trouve.

Scroll horizontal

Le scroll horizontal permet de parcourir un tableau qui comporte beaucoup de colonne.

1. 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.
2. 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 : Intéraction – Validation

1. La ligne avec laquelle l’utilisateur intéragit est en surbrillance afin qu’il puisse se repérer lorsqu’il scroll horizontalement . Seules les données pouvant être modifiées se transforment en champs de formulaire.
2. La validation de l’action s’effectue à l’endroit où l’utilisateur l’a déclenchée.

Actions groupées

Lorsque des lignes sont sélectionnées celles ci apparaissent en surbrillance, et les actions groupées possibles sont recensées dans l’entête du tableau (cf zoning) .

Actions groupées – Déplacement de ligne / Drag and drop

Pour créer un système de drag and drop efficace j’ai joué avec les principes d’affordance et j’ai utilisé une couleur orange dédiée uniquement à cette fonctionnalité.

1. Les lignes concernées par le déplacement sont bordées de orange.
2. Une règlette permet de prévisualiser la destination de l’élément que l’on est en train de déplacer.
3. 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.
4. 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 tableau il est préférable de laisser le choix à l’utilisateur de paramétrer son affichage. Ici le nombre de colonne à afficher est géré par des checkbox et un système de drag an 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 le net vous trouverez un bon paquet 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. Dans les exemples suivants ont peut voir que les fonctionnalités de tri sont restreintes voir inexistantes ou pas à leur place. Les paginations sont quant à elles pauvres et ne guident pas suffisamment l’utilisateur. Enfin la mise en avant des données est souvent délaissée au profit de l’en-tête du tableau. En bref, ne partez pas sur un design tout prêt uniquement dans l’espoir d’optimiser votre temps de production. Exemple 1 : Exemple 2 : Exemple 3 : Exemple 4 :

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. Pour vous aider n’hésitez pas à reprendre le modèle de Data table responsive que j’ai créé au format .sketch : Télécharger le modèle de data tables responsive

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