1

Context

I have data from a source that has categories and sub categories and in some cases, even sub-sub categories.

Requirements

The actions that can be performed on the tree elements are - addition of category/sub-category, renaming, ordering (asc/desc) and bucketing (putting different categories under one new category).

I'm stuck at trying to figure out the best way to represent such a structure. Should I represent it as a graphical tree? or should I let the user choose each element from dropdowns and provide a separate modal for editing the selected element?

2

I had recently come across the same problem. The solution that I came up with is an iterative categorization of information architecture.

In your case we have three levels

CATEGORIES > SUB CATEGORIES > SUB SUB CATEGORIES

In order to smoothly run this interaction we need to maintain a card of catergories within some source. Each category will have some counter against them showing how many sub categories they have. Category with no sub category will have a grey font color and the ones which have sub categories will have blue font color. You can also add category by clicking on the fab button and perform other actions using the menu icon.

enter image description here

After clicking on Category 01, same card will now show subcategories within category 01. Header will act as a breadcrumb now which will maintain your current state

enter image description here

And if you click subcategory 01, you will now be able to see sub-sub-categories and perform certain actions on them. You can always go back by clicking on the links in bread crumb.

enter image description here

1

Everything you've described here can be done by the style of tree representation used by the bog-standard windows file explorer, so why not replicate that representation and interaction for your data set?

How Windows Explorer interactions work:

  • addition of category/sub-category, --> right click for "new folder"

  • option renaming --> right-click for "rename" option ordering

  • (asc/desc) --> sort files by data / name header etc

  • bucketing (putting different categories under one new category) -->
    cut/paste or drag'n'drop in file explorer

It might not look spectacular, but people will be used to it which has its advantages. Alfred Kobsa found the windows explorer style of viewer to be at least as good as more contemporary styles of tree viewer in his experiment --> "User Experiments with Tree Visualization Systems" doi: 10.1109/INFOVIS.2004.70 (currently ieee is failing this doi, but copies of the pdf can be found on the web)

Of course this is based on desktop use, for mobile devices interactions will necessarily be different, but context wasn't specified ;-)

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.