web-dev-qa-db-fra.com

Comment présenter différentes couches de détails de données dans une seule table

Je développe un tableau de bord pour un logiciel de commerce électronique qui fournira des informations sur les webmasters qui livrent des clients via leurs campagnes publicitaires à ce commerce électronique.

L'obligation est de présenter certaines données "statistiques" pour des raisons de comparaison dans un seul tableau. Je ne peux pas diviser ces tableaux en plusieurs vues.

Il y a 15 colonnes de données - que j'ai divisées en trois couches de détails de sorte qu'il est possible de `` descendre '' le tableau ( cliquez pour agrandir l'une des images ):

La première couche est l'aperçu supérieur avec les webmasters à gauche et les données à droite.

enter image description here

Avec cette vue, il est possible de comparer les données totales des webmasters.

La deuxième couche montre les produits du webmaster sélectionné.

enter image description here

Il est possible d'étendre chaque ligne de webmasters pour comparer les webmasters par produit.

La troisième couche montre quelques détails supplémentaires sur le produit, par exemple. la campagne des webmasters et ainsi de suite.

enter image description here

Il est également possible d'étendre chaque ligne de produits pour comparer les détails des produits.

Je suis d'accord avec le fait que ce tableau est fortement surchargé de données et qu'il est difficile à lire. J'ai essayé avec un codage couleur mais les résultats ne me satisfaisaient pas.

Je veux que l'utilisateur regarde ce tableau et comprenne/voit quelles données appartiennent à quelle couche de détails.

Existe-t-il une meilleure pratique pour résoudre ce problème? Peut-être avec un codage couleur (quelles couleurs) ou avec des polices/tailles différentes?

2
Mischa

D'après mon expérience, c'est l'un de ces endroits où l'ombre fonctionne très bien pour montrer des couches plus profondes. Un traitement légèrement différent du poids/de la couleur de la police serait également utile.

enter image description here

5
d4rek

Voici mon résultat qui suit vos suggestions:

La vue d'ensemble supérieure: enter image description here juste une taille de police et un ajustement de couleur.

La deuxième couche: enter image description here Couleur d'arrière-plan modifiée, la couleur de la police est plus sombre que dans la première couche. Ajout d'une ombre de boîte à la ligne sélectionnée dans le premier calque et d'un dégradé dans le deuxième calque. De plus, la couleur de surbrillance est plus sombre.

La troisième couche: enter image description here Mêmes modifications que dans le deuxième calque, mais toutes les couleurs sont plus sombres.

Les ombres créent un effet 3D qui rend le "look and feel" meilleur et la lecture des données beaucoup plus facile.

Les gars, merci beaucoup pour la poussée dans la bonne direction!

1
Mischa