How can I make the distinction between category and sub-item more clear?

Question

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?

Answer 1

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.

Answer 2

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