Responsive website - navigation usability advice

Question

I am developing a site which is to respond to different screen sizes. The site is fairly large and has up to 4 levels deep in terms of page/menu hierarchy. What I am wrestling with now is how to adapt the main menu for mobile devices.

So far, I've converted the menu into a select list and I've retained a search form at the very top of the page. The issue is now how best to deal with access to sub-pages within the site - should the main select list only contain the top level pages, or should i try and show subpages (perhaps indented)? If i show all pages, then the user could potentially have to scroll for a long time to get to the page they want. If I only show top level pages, then this will introduce an extra click (or more, if page the user wants is 4 levels deep for example).

Another option is to dynamically load another select box (underneath the main one) when a top level page is selected which has sub-pages - then allowing the user to choose the sub page they want to access.

A bit of a ramble - but how do/would you guys tackle this type of issue?

Answer 1

It sounds like you're taking a purely information architecture approach to the problem by trying to fit your complex navigational structure into a form factor that won't be able to support it. The reason you're having trouble is because the form factor is pushing back; it's not meant to deal with navigation like this.

Take a step back and look at what you're trying to do: you're designing a responsive website that is supposed to work at multiple form factors, in this case a mobile device. The correct approach with responsive design is to figure out which information should be presented to the user in which context and then determine how to go about doing so. You seem to be skipping the first step.

The best design pattern to follow for responsive design is mobile first, an approach introduced by Luke Wroblewski in his book of the same name. If you start designing for mobile, you'll start with the smallest, simplest screen, and can then add things as the form factor increases in size. Rather than running into trouble trying to fit things in, you'll instead be able to ask yourself what additional information would enrich the experience for users of your site with that form factor.

My interim solution would be to step back and use a user-centred discovery process to determine which navigation is relevant to mobile users and only include those in the navigation. The next step would be to rearchitect the site from a mobile first point of view, which would ultimately smooth out most of the problem you're facing.

Answer 2

4 levels of navigation menus is too much even for a desktop site. If the site has very linear taxonomy/hierarchy you can easily keep just the top 2 levels and users will still be able to get to the pages they need (most government agencies have their sites setup like that).

As for mobile version, you need to take into account several factors: the information that visitors are likely to consume on the go & the screen size on mobile devices. You are likely to find out that some sections shouldn't be linked from the top menu at all (though they can be discovered through other means) and that you can't fit everything to be displayed comfortably on the screen (don't forget that once you introduce the drop-box, it will be displayed in the mobile OS's default style when activated).

Therefore, your best option right now is to keep only the top-level links in the navigation drop-down and make sure that it's easy to navigate to a deeper level (don't worry about going up a level since all mobile browsers have the back button of some kind).

However, you should stick to the mobile first approach in the future as Rahul has suggested.

Answer 3

Both Rahul and dnbrv have great answers and the mobile first pattern is by far the best one, but we dont live in an ideal world right?

I would suggest the following (it might not be perfect but if you are stuck with 4 levels - then it might work)

You could implement a simple javascript menu button that 'floated' on you screen say on the top left side. If the user is scrolling down the page, it follows but doesnt get in the way. When the user is ready to navigate they click they menu button which 'shows' the hidden menu on the page. As the menu is so big it would take over the whole screen but your floating navigation button would now say 'hide menu' and clicking it would 'hide' this menu, shoing the content again.

You could break the navigation into four sections and just list them all roughly like this

MAIN ONE
SUB 1 | SUB 2 
SUB SUB 1 | SUB SUB 2 | etc
SUB SUB 1 | SUB SUB 2 | SUB SUB 2

MAIN TWO
SUB 1 | SUB 2 | SUB 3
SUB SUB 1 | SUB SUB 2 | etc
SUB SUB 1 | SUB SUB 2 | SUB SUB 2

I've written a blog post that will help you understand this idea a bit more. (See solution 3) http://blog.bleepsystems.com/2012/solving-a-responsive-design-navigation-problem/

Hope this helps.