3

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.

image of UI mockup

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?

1

A couple ideas to consider:

enter image description here

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.

enter image description here

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.

enter image description here

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).

enter image description here

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:

enter image description here

1

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.

0

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.

enter image description here

Now looks more lightweight

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.