What design element is this called, and is it a good choice?

Question

I made 2 mockups that I'll explain with some context.

Context

I have elements (or categories) that each may contain any number of sub-categories, and even later, sub-sub-categories. I want the user to be able to :

• Modify the properties of any item of any level easily
• Modify a group of items if the parent is updated (every child element inherits some properties from the parent)
• Be able to navigate a list of Categories, Sub-categories, Sub-sub-categories that each can be an arbitrary size (let's say the maximum is 40 elements per layer).

Menu description

This big element would be directly on a page as the main interaction, not as a dropdown hover, or mega menu like detailed on this StackExchange post, but as a clickable-only surface. When clicking an element from one of the category layers, the form on the right adapts to allow specific modification (first illustration).

,

If the user wants to, he can also modify each category directly, modifying every sub-item automatically (second illustration).

Do this type of menu have a name, and is it a good choice for my context?

Thanks!

Edit: This is a 100% desktop website.

Answer 1

It is a (newer) version of a "cascading menu".

Ryanair has an interesting version of it on their website.

Helpful links: https://codepen.io/MaGiO/pen/YXXzeJ and https://tympanus.net/Blueprints/MultiLevelMenu/

Sources: https://www.htmlgoodies.com/beyond/javascript/cascading-menus.html https://material.io/design/components/menus.html#dropdown-menu (scroll down to cascading menu)

Answer 2

I would refer to it as a master-detail UI scheme with nested hierarchy.

It is not unlike the structure of e-mail clients like Outlook, which presents you (from left to right) with a folder structure, then the feed of e-mails pertinent to the selected folder, then the actual content (i.e. the workspace with editable details - where stuff happens).

This information architecture is absolutely appropriate to many use cases and master-detail is considered highly learnable. You could consider, and this is just an enhancement suggestion, to breadcrumb the title of the edit window, to say any of the following:

• Properties > Category 5 > Sub-Category 3
• Properties of Sub-Category 3 (under Category 5)

Slight preference for the first option, but users may expect that kind of breadcrumb trail to be fully clickable, in which case you have two navigation paradigms that need to play nicely together. This is where affordances come into the picture, in presenting the breadcrumb as a purely passive "you-are-here" assist.

This may seem superfluous but to me that level of information redundancy is a good safeguard - rather than relying on the user's tracking of the selection status of two neighbouring columns (parent and child); easily lost sight of if the edit zone is busy with a lot of controls. Signal to noise ratio (in terms of information presented) is an ever-present thing.

Since the question of mobile design came up: In a responsive version of your UI you could consider presenting the subcategories in a drawer rather than a separate column, so that your Android or iPhone device shows one single stack that does not quite occupy the width of the screen; a common mobile UI pattern. You can still denote hierarchy through visual means alone.

I came across this article: https://medium.com/@lucasurbas/case-study-master-detail-pattern-revisited-86c0ed7fc3e

A quick search on 'Master-Detail' will give you tons of resources, including code related material. Best of luck!

Answer 3

This seems like a good choice for desktop, it would be interesting to see how this works for mobile. It seems quick, easy and clean to use.

You may also run into more trouble if it goes deeper than 2 levels or the category lists start to expand more and get longer.

I cant remember what its called but I have seen it used alot for FAQs and help pages.