Best UI to create complex data structures; Node Tree, List Tree, Miller Columns, or something else?

Question

I have a challenging task with redesigning a crucial part of my companies web app that is sold to external customers. The general idea behind the feature is that companies want a way to create complex items that will be made available for purchase to their internal employees.

Here is the available structure that a customer is able to create. I know it's a bit crazy and unfortunately this has to remain the way it is for now due to some customers having already bad data.

• Option Set
  • Option 1
  • Option 2
  • Option 3
    • Property 1
    • Property 2
    • Option Set
      • Option 1
      • Option 2
        • Property 1
        • Property 2
        • Option Set
          • Option 1
          • Option 2
            • Property 1
            • Property 2

Every customer has different needs and goals with this feature but a lot of them are creating items so complex that there are more than 200 parent level option sets.

Each item listed in the tree has specific fields that are associated with them (i.e. name, image, description, value, etc...). Which means there is a need to select an item and edit the data. I have tried a few different directions (node tree, list tree, miller columns, and having all the sections and input fields in the content area of the body), but I was hoping someone out there had some experience with this or could provide some feedback.

Node Tree

List Tree

Miller Columns

Everything exposed in the body

Answer 1

When designing for presentation of information, it is important to try and fit the interface as closely to the underlying data structure and the relationships between the different sets of data as possible. In general the aim is to make the relationships as simple as possible, and it might mean also using a combination of data structures if it makes sense to do so.

But based on the information you have provided only, if you find that the data structure resembles a web/map with multiple possible connections and branches at each point, then the node tree is probably a good strategy. In the case of Miller columns, you would be looking at a broad list of top level items that probably won't drill down too deeply. And the list tree provides you with flexibility at the expense of not being optimal for any particular type of structure. Another consideration is whether presenting the full structure/hierarchy helps the users to make any particular decision, or if it is just a means of navigating to the content.

If you find it more difficult to make the decision from a purely design point of view, perhaps it is also possible to simulate the amount of navigation required for users to perform typical operations and see which way of organising the information lends itself to the least amount of clicking and locating most of the items or moving between screens.

It also seems like this is an interim solution while a new way of designing the data structure will provide a simpler solution to presenting the information. Therefore, you probably also need to consider the cost and effort to do this and whether it is worth devoting a lot of attention to this solution.