Summarising grouped data in a data table

Question

I'm working on a financial app and we're getting mixed feedback from users as to how we've displayed the summary for groups in data tables. We've data tables which are, say for example, shopping lists of types of things so

The summary rows are vegetables and fruits in the example table and are collapsible (with a twisty control) so the item rows are hidden when collapsed. Accounting conventions typically display totals (here for the Amount column) at the bottom but we're keen to reduce extra rows and columns so put the subtotals in the summary rows, coupled with the collapsible nature, this works well. So the question is 2 fold,
1. Can you provide a few examples where data tables summarises groups or categories upwards to allow collapsing
2. Is it clear that the subtotals are on the top? Obviously ignoring UI aspects.

Answer 1

Until I read your question, I hadn't even noticed the totals at the top. That alone indicated to me that the subtotals on the top are not clear.

Additionally, here are some reasons why your totals should be placed at the bottom:

• Users read table data from top-to-bottom.
• Totals are an equation. Relating to the previous point, the user will best interpret a total if they see the components first. A total before the data is like writing out all equations with the answer first, such as: 4 = 2 + 2. Although this is readable, we can process 2 + 2 = 4 easier.
• "Vegetables" and "Fruit" act as summarizing labels when the data is expanded out, and thus, doubling their use as amount totals might confuse the user.

However, there are some scenarios when you might consider leaving the totals up top:

• Lots of data. If you have hundreds of rows, being able to quickly identify the total before all the entries might be useful.
• When collapsed. Because "Vegetables" and "Fruit" act as summarizing labels, it makes sense to place those totals where they are.

Here are some simple interface changes I came up with as a compromise:

Expanded

• The totals are placed at the bottom, and can be identified more easily. You could even place a "Totals" label on this row, possible under the Type header.
• To make this interface even more clear, consider placing the Amount column on the far-right, that way users read the data as Quantity x Rate = Amount. The total would then be placed at the bottom-right of each type, increasing readability further.

Collapsed

• Assuming the following interface is similar to yours when the rows are collapsed, this interface still allows for the user to see the totals on the type.

Hopefully the above suggestions help!