Responsive datatable-min
Partager sur facebook
Partager sur twitter
Partager sur linkedin

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

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

Data table - UI design

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

Data table UI explications

  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 être ainsi mise en avant;
  3. La première colonne comporte les données les plus importantes (identifiant);
  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.

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

Zoning

 

Margin et padding

Data tables - padding margin

Les marges permettent à l’utilisateur de ne pas étouffer parmi tout ce flot de donnée.

Scroll vertical

Srcoll vertical - Data table

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

Scroll horizontal - Data table

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

Quickview - Data table

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

Quickview - expandable row - Data table

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

Modifications inline - Data table

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

data tables - modification inline

  1. 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.
  2. 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

Drag and drop - line

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é.

  1. Les lignes concernées par le déplacement sont bordées de orange,
  2. Une règlette orange 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

configuration data table - UX UI design

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

Laisser un commentaire

Travaillons ensemble !

Vous avez un projet, je suis là pour vous aider, contactez moi.

Ce site utilise des cookies pour vous permettre une meilleure expérience du site. Si vous acceptez l'utilisation des cookies cliquez sur le bouton "Accepter". Consulter la politique de confidentialité du site.