Effectively displaying complex "expanded/extra" information in a list

Question

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:

To:

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:

Answer 1

The main issues in your context if I understand your question correctly would be reducing information-load by only displaying relevant data and functionality whilst giving further information for a more experienced user.

I generally learn and understand things better by asking myself some questions regarding the system and its users to better understand my reasoning for a certain implementation.

The question(s) I would like to ask is if you think your approach is intuitive? Do you think users would intuitively know what to do and how to use your system to do it? If not, how do you encourage learning? Is it through exploratory learning (are changes the user make easy to undo) or are they encouraged to KNOW more about the system before using it?

It's important to know about the users before you start implementing highly complex systems. What tasks will they be performing / how are the tasks performed?

Does limiting the data to reduce information-load help the users whilst performing the tasks that I know they will be performing?

Having answered those questions you should have a better idea of what needs to be displayed. The next question I'd like for you to ask yourself is if you can display more detailed information of the 'advanced' functionality somewhere else than on the grid (like on a different page?) or if you can use tool tips to help the users perform their tasks.

I hope that helped! :)

Answer 2

I am fascinated by data visualization designs, and would love to know some of the details about the data but I guess it is not directly relevant to the question. However, I do believe that the visual emphasis and the way those charts are designed is adding to the distraction in some way.

However, I think you could make some subtle changes to help improve the visual hierarchy of the existing design without dramatically altering too many elements.

• Card styling: I would suggest actually not using all the horizontal lines at the top level of your card layout design, because horizontal lines work well when you have lots of items and you need to help improve scanning and reading for the users. It seems like you have perhaps 1-5 items at the top level, and each individual items has a '+' toggle that acts as a bullet point, so to simplify the visual design you can actually remove the horizontal lines, create a top level heading style and it will look much cleaner.
• Colours: not sure about the meaning of the colours used in the interface, but colour is always good for establishing visual weight and therefore hierarchy. It seems like the list of the items at the top level are ordered in a logical way, so I don't see why you need the blue and yellow highlights. Instead of using colours at the top level, you can perhaps try to introduce them at lower levels where there are potentially more items that you need to distinguish. For the subsettings dropdown menu I would also suggest a more vibrant colour than the grey (which is used for inactive states) as is the usual convention.
• Title label and indent: a very simple way to create extra hierarchy is in the variation of your font styling. You can create a visual hierarchy between the second and third level items by varying the font size or style (not sure why you put the lower level labels in bold), or indent the lower level headings (may not be good if you need the width of the screen).

Would be good to see how you go with some of these suggestions, and I am curious about the way the graphs are designed but we can leave that discussion for another question.