7

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 node tree

List Tree list tree

Miller Columns miller cols

Everything exposed in the body everything in body

  • What theme is this? It look really nice. – I'll-Be-Back Feb 2 '15 at 23:30
  • 1
    Thanks, it's not a theme though. It's my designs that I have been creating in Sketch. – Jason Frade Feb 2 '15 at 23:40
  • Ah ok, what software did you use to create in Sketch? – I'll-Be-Back Feb 2 '15 at 23:42
  • No Sketch is the software. bohemiancoding.com/sketch – Jason Frade Feb 2 '15 at 23:44
  • Oh, that is awesome! – I'll-Be-Back Feb 2 '15 at 23:44
7

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.

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.