How to display a list of potentially filled "categories"

Question

We're trying to provide the user with a potentially large list of elements which can be grouped into categories (one category per element). In addition to provide a quick overview and easy access to the elements the user should also be informed about which categories are still missing elements (some might be required).

Hence our idea is to list all the categories along with some optional data per category and the elements grouped by each category.

However, we're unsure as to how exactly we should go about this.

Here are two ideas we've come up with so far:

• Nested Tables: the categories are rows in the outer table while the actual elements are rows in the nested table (see row "B" for example). Row "C" would be empty in that case).

• Using vertical Tabs: Instead of an outer table we could use a list of tabs and we'd render the table of elements for the selected tab only.

Which of those would you prefer? Or would there be a better approach?

Answer 1

A big advantage of the nested tables is that you can view different categories at the same time when they are expanded. Depends on the task if that is something that is useful for your users. Also it would be easier to add another level of nesting later in the process.

In the vertical Tabs it seems to be easier to spot the status of the categories and to switch from one category to the next. I imagine of I had to switch to category F, I would have to collapse B, then expand F, and possibly also scroll down. In vertical Tabs this is all done by just pressing F.

I think if it is not in the core use case to compare elements from different categories, I would go with the vertical tabs.