4

I feel that the sub-items and categories are not distinct enough, so when I test my design I feel it's sometimes unclear which is a category and which is a sub-item, until I force myself to notice the subtle differences.

I want to make it immediately obvious that sub-items are subordinate to categories

I've tried using a darker background color for the sub-items to signify that they are inside the categories, but it seemed to push them outside the categories rather than showing that they are within them.

I've also tried indenting the sub-items, but it sacrificed vital space and looked unpleasant.

Is there any standard solution to this problem? Or is it just sufficient that the category and sub-item labels are different?

Menu Layout Image

2

Adding space to the elements will solve your problems and maybe that is what is missing in the design. Here are some point to consider:

  • Reduce the font-size of the category heading (Sandwiches, KrispyKreme)
  • Add some padding to the categories as well as sub-categories. Basically give some breathing space.
  • Do you really need icons for categories? Give a try removing the icons for categories. This might increase the necessary indentation
  • Add more margin between the icons and name in sub-categories.

Give these points a try and see if this works for you.

  • Thanks, removing the category images was a good solution. Now the sub-items are clearly different because they have images and are indented by those images. The other suggestions helped too – user113202 Mar 17 '18 at 1:50
0

I think you're near the right path, but I'll say it wouldn't be sufficient from a UX perspective. Something needs to distinguish categories and sub-items as separate. I'd suggest a darker color for your categories instead of a darker color for your sub-items—see how that goes.

Another tip I like to use is the border color. Add a color to the top or bottom of your categories. It's a simple and clean way to set categories.

Here's an article that goes into other tips like the previous one I just mentioned: Link to Article

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy