Nested dropdowns in mobile view

Question

So i build a website using bootstrap. The problem is that i have nested drop downs. The link below is image for dropdowns that look nice and not cluttered in desktop version.

However this is how it looks in mobile:

They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.

I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.

Question: I'm really not experienced in developing UI. Is my approach sufficient? How should i solve this problem?

Answer 1

There are lots of visual cues you can add to make it more understandable:

• An arrow or +/- sign to indicate expanded state (it's expanded/collapsed state is apparent but an arrow can reinforce that).
• Lines to indicate the hierarchical tree relationship, these can be very subtle, just slightly visible
• Nested boxes to indicate hierarchical relationship, again can be very subtle.
• Colors to reinforce nested boxes, e.g. slightly darker grey background for each deeper nesting level.

Hierarchical nature is suggested by the indentation (and back in the old days that's all there was for this, indentation), but these extra reinforcing cues make it more obvious and clearer. And (again) some of these cues can be very subtle to get there point across. You may find that with these other cues you can reduce the indent and retain clarity.

Answer 2

The indent looks fine, but I would change the highlight color for each level. Also, the grey text is hard to read on the blue. A simple grey/darker grey stretching to the edge of the screen would look good. Put the arrow on the left-hand side, as well for the mobile layout.