I have a card that contains a large table.

The table is made up of six different categories or groupings of data, and I am having trouble displaying it all in a simple and clean manner.

Here are the guidlines:

  • I need to display a percentage score for each category that is calculated based on the category totals.
  • I also need to show a final percentage score that is based off ALL the data (not just a single category).
  • It should be clear to the user how each of these scores is calculated.

If I didn't need to show the category scores and category totals I could just put it into one big table broken up by section headings for each category, but that does not work once I start including the category score calculations.

Below is a quick mock-up of what I have so far. It's just an example, the values do not add up correctly, but it illustrates what I am dealing with.

Also I cropped out some of the rows and categories to make it a smaller sized image. The real table has 6 categories plus about twice as many rows.

enter image description here

  • Is it necessary to always show items of a category and their details? You can hide them and just display the categories with their prices inside a card. You can always view the details by clicking on the category row. Sort of an accordion.
    – Sheraz
    Jul 6 '18 at 8:54
  • @Shaz I like the idea, but I already have something that is expanding. When you click each of those rows in the image they expand out to show more details. So I'm reluctant to have something that you have to click, and then click again to see all details.
    – TinyTiger
    Jul 6 '18 at 9:04
  • @Shaz I suppose I could explore something with tabs maybe. But then I still have the problem of showing how the overall total score is calculated, because once things are hidden behind tabs/accordions it's hard to show where those numbers are coming from.
    – TinyTiger
    Jul 6 '18 at 9:09
  • Proper handling of information architecture can help in this case. I'll share my solution in a while
    – Sheraz
    Jul 6 '18 at 10:04

Instead of showing all the categories vertically in a long card, you can just create sub sections.

Information Hierarchy in your case is:


Following the information architecture, you need to show individual scores parallel to selected category. And the individual score can be further be explored. You can use accordions in that case.

Here is a quick mockup of the concept

enter image description here

  • This is a nice solution, but I also have to show a percentage final score that is based off ALL data rows (not just a single category) and breaking it up like this makes it hard to show how that figure is calculated and where it is coming from. In one big table I can put it at the bottom of the table and users can easily scan down and tell it was calculated from all the above combined data, but once I start breaking up the data into category tabs it isn't clear that the final score is calculated by combining all the data into a percentage.
    – TinyTiger
    Jul 6 '18 at 23:59
  • @TinyTiger You stated that it isn't clear that the final score is calculated by combining all the data but for table with column Score it's enough to name field Total score and not needed to have it inside the table.
    – Serg
    Jul 7 '18 at 7:04

The first question is how user explores your data.

I suppose that first of all he is interested in whole system totals to make decision what should he explore in more details. Suppose he sees that Total is lower than it should be, so he need to see what category makes this negative impact - the better way is to present data as graphics and not in absolute values but as relative to some 'normal' or average value. It makes possible to estimate what should be done even after a quick view on data representation.

Next he needs to dig in details for the category he is interested in. He selects category and it is represented as a table you depicted in your question. I think he need not to explore more than one category at a time. So you may organize one table display somewhere near diagram with totals.

If in fact your user behavior is different you may implement different data visualization workflow. The only thing I want to say - we need to begin not from means we have - table in this case - but we need to begin from use cases - what for user needs the data, how he can interpret it in most optimal way to achieve his goals.

  • Other cards above this table already show a circle percentage graph for each category. For most users, those will be enough. Then this table is included underneath to show how those circle graph scores were calculated and why a category got the score it did. So this table is like the "detail" version of the data visualization I have above, and it's used for transparency so the user can see exactly how that score was calculated.
    – TinyTiger
    Jul 6 '18 at 23:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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