Nested list, need advice for contextual menu in parent and children

Question

I am working on an app where I have to display a nested list of parent and child items.

The principal target is mobile.

Every parent element has a contextual menu and children.

Now my design looks like the image; the hamburger icon is for parent contextual menu, the tree dots icon is for the children.

The parent contextual menu has 3 actions, and the children 4.

It is very easy to use and understand but, from my point of view it is awkward to the eyes.

Is there any UI pattern to achieve this in a more eye-friendly way?

Answer 1

A couple ideas to consider:

If you labeled your icons here (generally good practice but not always an option), would the menu icons have different labels? If not, I'd be very careful about using two symbols to represent the same thing. You're establishing a language here, and you don't want people to be confused about which words you're using.

To me, kebab menus (...) symbolize optionality or "more" (kind of how an ellipses is used in writing) compared to hamburger menus, which generally symbolize global navigation. If you're going to use a single icon, the kebab seems like the more appropriate choice in the context you described.

One reason for the awkwardness you mentioned is that the child items feel heavier than the parent because the icons are filled. They naturally draw the eye more than the parent icon. Do they directly contribute to the usability of this menu? If not, I would trim them (I'd say the same for all icons, actually).

Don't be afraid to use opacity to increase differentiation between elements. In this case, you may be able to lighten your menu icons to help things feel a bit "lighter." Be sure your contrast is high enough to be accessible.

Taking all this ☝️ into account:

Answer 2

One option is to remove the icon all together.

What you could do

1. Start a highlight on the entire item when the user touches the list
2. Do not select ANY item yet
3. Allow the highlight to freely (ahem, asynchronously for the coders) brighten on any list element, fading back to the original color on a 1 or 2 second timer
4. Scroll the list in the direction that would center the most recently highlighted item, effectively allowing the user to treat the list as a scroll bar. (optional step)
5. Finally, only launch the context menu when the user continuously holds the highlight on one item for a set amount of time.

Instead of differentiating the icons, just make the context menu itself a little different for parent and child. Perhaps a border color with matching title bar that makes parent and child distinct.

Finally, and this is just a note of personal preference, I find context menus a little awkward on mobile. I prefer to put them into small, screen centered modals that must be either clicked or dismissed. Since there is no sense of "hovering" on mobile, standard context menus sometimes disappear when you accidentally touch something else.

Answer 3

Thanks @dmiloch, keeping in mind your advice, I made some changes. Definitely hamburger icons are for global navigation.

I find it hard to remove child icon, so change for the outlined variant, also remove the horizontal dividers.

Now looks more lightweight