I have made a UI for creating recursive groups that can be made up of many items or other groups. I have a UI that looks like the following: Tree UI

It is not more likely one way or the other that the tree will usually consist of more siblings or more deeply nested children.

The items right now start as a select with Item Type placeholder. Once a user chooses an item type the form will turn into one like you see in the bottom of column 2. Then the user has another select where they can choose the specific item.

I was wondering if there was a way that I can reduce the amount of deadspace and if the distinction is clear enough between a group and an item. Maybe I should have the items themselves in a bordered or card view to make that distinction more clear?

Let me know if you have any suggestions. Thank you.

  • 1
    Can you explain the interaction for the 3rd column? i.e How this column appears clicking on what? My other question is - > Does every time selecting item type a form field appears?
    – Swapna
    May 6 '20 at 5:33
  • You start with what is in the very top left representing a single new group. The user then can click on either add item or add group which puts a new row in the column to the right representing the groups children. So blue select = new item, white input with button group = new group. The example I have is a group with two new items which haven't had an item type picked, a new group with its own children, and one item that has its item type already picked. When a user selects a item type in the blue select, then that form is replaced with what you see in the end of column 2.
    – C.Math
    May 6 '20 at 11:46

Your Answer

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

Browse other questions tagged or ask your own question.