Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

However this is how it looks in mobile:

enter image description here

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?

share|improve this question
    
If it's possible for you to have your drop downs replaced by a multilevel navigation menu, you can try this approach -- Multilevel navigation menus for mobile devices –  SNag Apr 21 '13 at 19:54
1  
I've decided to use this: tympanus.net/Development/ResponsiveMultiLevelMenu –  max Apr 21 '13 at 21:41

2 Answers 2

up vote 4 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.