Whats the best, most functional but also aesthetic way to display nested list data?

Question

I'm looking for a technique for showing nested object data/additional data in a list view. As a policy, only one list view tile will be expanded to show additional data at a time, so that it doesn't get any crazier.

There may be considerable data nested, looking at two options. Display lots of nested data or display very little nested data and go for a long-tap popup to show all data. Either way there is still the need for the nested data.

So far I've explored using indentation but this wont work because I'm already dealing with constricted space on a mobile screen in portrait only. I thought of using slightly lighter alternating tile background colors but this gets confusing to look at.

Wanted to check here if anyone has any professional input before this gets butchered.

Answer 1

The biggest problem is that the nested items maintain the same pattern of alternating colors as the parent items and this makes perception difficult.

You should find an alternative pattern for nested elements, associated with that of the parent elements, as well as minimal left indentation.

In the example below, a darker tone for the items that mark the beginning of the nesting. Colors darker than the one used always give a sensation of depth, favoring interpretation.

Reduce the font size by one pixel if necessary.

The bottom padding after the last nested item creates a wrap sensation, favoring the interpretation of nesting.