UX to Manage multiple sections and sub sections hierarchy

Question

I have to manage Sections and sub-sections under each sections along with their individual Item lists.

Hierarchy is like:

Section 1:

List of items for section 1

          Sub sections 1

          *List of items for sub section 1*

          Sub section 2

          *List of items for sub section 2* 

and many more..

Section 2:

List of items for section 2

           Sub sections 1

           *List of items for sub section 1*

           Sub section 2

          *List of items for sub section 2* 

and many more..

I have represented it in following design but Its looks too complicated. Can anyone suggest me a simplest UX for this.

Answer 1

These sections look long. For this particular part, I would recommend you to use direct mapping and that can be done by using the side navigation bar.

Bootstrap has a beautiful example here see the right side navigation. You can use implement this system to make something on the right side. But this has one flaw, you cannot put this method in mobile because like in the web we work in breadth, in mobile, we work in depth and this is why we have to nest some elements.

Apart from this if you want a different way to show that then the one thing you need to think upon is, toggle bars should be handled carefully as the secure less space when they are in compressed size, it increases the chances of getting skipped. You have to make theses bars prominent and also, keep a space between each other bars so that they can look segregated.

Answer 2

Keeping in mind that this has to work well on smaller screen devices as well, try to break it up into different pages. While one option is to open each successive section on a different page, you can also have just the 3rd level on a different page; reducing the clutter and the cognitive load.

One more reason to keep the 3rd level on a separate page is that by that time user is already invested in that particular list(or section) and it's probably a good idea to make the user concentrate just on the sub-section he/she chose to click on.

For example, take a look at this structure.