2

I am developing a dashboard for an ecommerce software which shall give some information about webmasters that deliver customers through their ad campaigns to this ecommerce.

The requirement is to present some 'statistics' data for comparison reasons in one table. I can not split these table into several views.

There are 15 colums of data - which i divided into three layers of detail so it is possible to 'drill down' the table (click to enlarge any of the images):

The first layer is the top overview with webmasters on the left and the data on the right.

enter image description here

With this view it is possible to compare webmasters total data.

The second layer shows the products of the selected webmaster.

enter image description here

It is possible to extend each webmasters row to compare webmasters by product.

The third layer shows some more details about the product, eg. the webmasters campaign and so on.

enter image description here

It is also possible to extend every product row to compare the products details.

I agree with the fact that this table is heavely overloaded with data and it is hard to read. I tried with some color coding but the results where not satisfying me.

I want the user look at this table and understand/see which data belongs to which layer of detail.

Is there any best practice to solve this problem? Maybe with color coding (which colors) or different fonts/sizes?

Improve this question

2 Answers 2

Reset to default
5

In my experience this is one of those places where shadow works great to show deeper layers. A slightly different font weight/color treatment would help as well.

enter image description here

Improve this answer
1
  • 1
    I'd recommend this approach too. You could also use difference in font sizes and/or color (lighter fonts) to further differentiate the higherachy
    – Blue Ocean
    Apr 16, 2015 at 3:43
1

Here is my result that follows your suggestions:

The top overview: enter image description here just some font size and color adjustment.

The second layer: enter image description here Changed background color, font color is darker than in first layer. Added a box shadow to the selected row in first layer and a gradient in the second layer. Also the highlight color is darker.

The third layer: enter image description here Same changes as in second layer, but all colors are darker.

The shadows create a 3d effect that makes the 'look and feel' better and the reading of the data much easier.

Guys, thank you very much for the push into the right direction!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.