0

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).

Nested Tables

  • 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.

Tabs

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

  • Can we filter by status? – invot May 1 '18 at 14:46
  • @invot yes, we'd like to provide that on both levels. – Thomas May 3 '18 at 7:04
2

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.

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.