I've got an application using Material Design, and I'm having trouble laying out information in an easy to understand way.
On the top level, I'm happy with how things are (even if the bars are a bit confusing at first glance, I don't think I can simplify them without loosing functionality, though they need a bit of cleaning up visually).
There's a list of items, and I show a "summary" bar view for each, grouped under a heading on each 'card':
The user can press the "plus" button to expand for more information. And this is where I've just got a mass of info without much direction:
I've slowly added more and more things on here. I'll try break it down:
as in the above, the circular button allows the user to change a setting that produces sub settings with a little drop-down menu:
And finally, the last expanders show lists of related items you can hide/show in the list like this:
Which probably wouldn't be often used.
I've been shuffling things around for months trying to settle on something sensible, but I've run out of effective ways to divide the content into sensible groups. It's in separate cards, and in a list divided by separators - further use of separators just seems to muddy things up.
Yet if I increase the separation between items in the list - it just doesn't work when this information is hidden.
I'm looking for some general advice for improvements, maybe a fundamentally different way of displaying this kind of contextual content for the list item?
For context, I'm hesitant to use any kind of side-bar and selection system - as the page sits in the application like this: