1

I have to create a UI interface to create a category hierarchy up to 7 levels, such as:

Shoes > Boots > Brand names > etc.

I also need to add functionality to edit the created category hierarchy, which I will create with MarkoJS. I mainly need help in UX design for this pattern. Any references would be helpful.

3
  • 1
    @harshikerfuffle this is a ux issue, it's a hierarchy of up to 7 levels, this is a UX issue. Jul 17, 2023 at 22:32
  • 1
    Can you explain the exact use case where you would use a 7-level deep hierarchy? While I admit there might be some use case for this, so far I have never seen such a use case. Every time someone mentions it, it's usually due to a faulty information architecture. For example, in your provided instance, the only elements left are variable tags, and they don't use different pages since they usually act as filters.
    – Devin
    Jul 20, 2023 at 18:36
  • Agreeing with Devin. Hierarchical design might be appropriate to use up to a certain level, but I suspect that the pattern you might want to explore is called faceting or faceted search. algolia.com/blog/ux/faceted-search-an-overview
    – Izquierdo
    Jul 20, 2023 at 19:15

2 Answers 2

1

You could stack up your categories like so:

enter image description here

Now, with this system you can add as many items as you want, it will just keep going to the right.

The triple dots (ellipsis), is how you'll be able to edit the category's name and such.

For reference, Google Analytics uses a similar system for it's Admin section:

google analytics admin

Also, Firebase, which is what I based the designs above on, it's data viewer for Firebase Firestore and Realtime Database, uses the same system since it's hierarchies can go on forever if the developer wishes it.

enter image description here

Note the breadcrumb nav at the top in that image

0

It sounds like you're searching for the UI of a tree builder. I would suggest you go to Optimal Workshop, sign up for free, create a Tree Testing study, and then go to the Setup tab. You will see something looking like this, and you can play with it. It's pretty convenient and straightforward.

enter image description here

3
  • 1
    I was thinking of the same, this was my original draft for the answer, but this will get wild on the 7th level not gonna lie. Most sites I know with a very deep hierarchy chain tend to use horizontal layouts. Jul 17, 2023 at 22:34
  • @KitangaNday As far as I understand the OP isn't trying to create the hierarchy, but to design a tool for the creation of hierarchies by the user. Jul 18, 2023 at 6:46
  • Yes, so 7 levels deep of cascading list wild Jul 18, 2023 at 9:24

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