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, 2020 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, 2020 at 11:46

3 Answers 3


A great way to reduce the amount of dead space when creating a tree is to use the tree itself, navigating it on the fly rather than trying to build it in an expanded state on a huge canvass. This is how it's done over at Optimal Workshop, you can sign up for a free plan and play with it (go to Create Study > Treejack). You can place whatever additional controls you need on the row level on hover, to adjust it to your needs.

enter image description here


If I understand correctly, a node in the tree can be either a Group or Item.

But since the top of the tree starts as a Group, it assumes that a Group can contain a Group or an Item, but an Item can't contain a Group.

This should allow you to create a generic top level node as a Group, and subsequent nodes that has one of two options, Group or Item (which then allows you to select its Type). That way you can reduce the amount of text, or even present the nodes visually since it can only be one of two types (and each with their own subtype).


Apart from Vitaly's answer (use a indented-row-based representation for the tree, as is typically being done), my question would be whether the item-vs-group distinction is so important and fixed as your design suggests.

Maybe it will be useful to only have "nodes" which may or may not have children. That'll reduce the options (e.g., "Add Item" and "Add Group") the user has to master.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.