1

I'm working on a responsive website, the desktop view has 2 levels of navigation. The sitemap roughly looks like this:

Cat1

  • SubCat1
  • SubCat2
  • SubCat3

Cat2

  • SubCat1
  • SubCat2
  • SubCat3
  • SubCat4

Cat3

  • SubCat1
  • SubCat2

Cat4

  • SubCat1
  • SubCat2
  • SubCat3

I'm wondering what the navigation should look like on a mobile/small tablet. What would be the most efficient pattern?

Thanks for your help :)

  • It really depends on what the nav-links do, how many of them are needed in the mobile site and what your user's expectations are. – Steve Jones Nov 24 '14 at 15:30
  • 1
    @SteveJones Never ever give your mobile customers a less functional website, it only creates frustration. You may want to display them differently, but give them access to all of it rather than treat them as second class citizens! – Thor84no Nov 24 '14 at 15:40
  • 1
    @Thor84no Blanket assertions are less than optimum (including this one). I can think of numerous options that belong on desktop sites that I've created, but not on the mobile equivalents. IMHO, YMMV, of course. – Steve Jones Nov 24 '14 at 17:28
  • @SteveJones If you're talking something like settings or other minor things, then that might make sense. However, in my opinion, it'd be an extremely rare case where actual content should be hidden from the mobile version. There are people that only access the web from mobile devices and they shouldn't miss out on content because of that. I'm interpreting the categories/subcategories mentioned in the OP as suggesting content. – Thor84no Nov 24 '14 at 17:34
  • 1
    @Thor84no As always, it depends upon the specific situation. No blanket assertions. – Steve Jones Nov 24 '14 at 17:47
2

I think with this many menu options the "hamburger menu" would be a good way to go. A lot of users know this approach from big sites and apps like Facebook. It is an easy way to give your users all menu options while saving a lot of screen real estate for your content when your navigation doesn't need to be visible.

If your 1st level categories are just headlines for your subcategories and not links to their own page you could make those reveal their subcategory menu points on tap.

  • I agree this is a good solution, though I believe it's worth considering whether to have subcategories displayed by default or not. If there are a lot of subcategories it might be worth hiding them, but users would appreciate not having to do an extra tap every time they navigate somewhere. A hybrid approach where most frequently used categories show subcategories by default might be useful, though in that case, consider collecting data to really know which are commonly used. – Thor84no Nov 24 '14 at 17:40
  • you have to be careful though to not confuse users when only showing a portion of availiable subcategories. You could show the most important 2 or 3 menu points and offer a "show more". Again, it depends heavily on the site structure and content. – Thomas Nov 24 '14 at 18:02
  • I agree with this solution, too, @Thor84no, and would only add that you could show a default category as open to initiate and suggest user action. For example; take Cat1 and display the subcategories with Cats 2-4 as "closed", and when the user taps a different category, close Cat1 to make room for the tapped category to open and reveal subcategories. – Duskus Nov 24 '14 at 21:27
  • 1
    @Thomas I totally agree. There's quite a lot of nuance here that we can't very well decide for the OP, just thought it was worth mentioning for consideration. – Thor84no Nov 25 '14 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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