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.

Improve this question
3
  • 1
    @harshikerfuffle this is a ux issue, it's a hierarchy of up to 7 levels, this is a UX issue.
    – Kitanga Nday
    Jul 17 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 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 at 19:15

2 Answers 2

Reset to default
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

Improve this answer
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

Improve this answer
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.
    – Kitanga Nday
    Jul 17 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.
    – Vitaly Mijiritsky
    Jul 18 at 6:46
  • Yes, so 7 levels deep of cascading list wild
    – Kitanga Nday
    Jul 18 at 9:24

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