7

I am having trouble to find a good way to present the user some kind of secondary navigation on smaller screens. On Large screens, it looks something like this:

enter image description here (This one is taken from http://www.shopify.com/examples)

But on smaller screens, things get really tricky. I have experimented with stacking the buttons or with multiple columns, but that always seems to a) break the connection between selection and content (the user selects something and 8 buttons aka about 1,5 swipes down the screen something changes) and b) really gets messy and swamps the user I think - there is just a big block of links.

I also tried to use a accordion which resulted in a small disaster - there is just not enough screen to fully see any changes and animations so things got, again, really messy.

At the moment I am thinking of displaying a small cog icons, which then opens an overlay menu where the user can choose from. Regarding space this seems like a good solution, although I am not sure if its a good idea the introduce an second hidden menu in addition to the main menu (I am using a "Hambuger" pattern for the main menu).

Another idea would be to boldly display "You are currently viewing our Featured Items" and then transition to the menu when the user taps that, but again, I am not sure if this is ideal.

Are there any patterns you know that solve this problem? Do my ideas break with some known principles?

Improve this question
2
  • Can you add a screenshot of what it currently looks like on smaller screens or narrow browser windows? Have you tried a responsive pattern like this: foundation.zurb.com/docs/components/top-bar.html
    – Danny Varod
    Commented Oct 21, 2013 at 7:09
  • I would suggest looking at Brad Frost's patterns for navigation. They are useful. It depends how large your menu will be to pick the one that best suits your site, so have a look and try them out. bradfrostweb.com/blog/web/…
    – Rosie
    Commented Oct 21, 2013 at 12:27

2 Answers 2

Reset to default
7

Great question. You'll have a couple of options and I've sketched out 3 variations for your.

enter image description here

Version 1 – The drop down menu

Uses a simple drop down menu that contains your secondary navigation.

Pros:

  • Close to the content
  • Takes up very little space

Cons

  • Not everyone understand what filter means or understand why they'll need it.

Version 2 – The hamburger menu

The hamburger menu contains both the secondary navigation and all other site links.

Pros

  • Everything that´s related to navigation is neatly tucked into one space on the site that let the page really focused on the content.

Cons:

  • Not obvious that you could manipulate the content

Version 3 – The scrolling cog

As seen in Apple Podcast app the scrolling cog exposes several menu options directly without stealing too much of the screen.

Pros

  • Displays some of the secondary navigation links which makes the user aware of the options.

Cons

  • Current implementations in mobile browsers I have stumbled upon don't respond that quickly but the solution could possibly be tested and optimized.
Improve this answer
5
  • Version 3 also has a con that it relies on the device being touch-driven. Imagine trying to use a scrolling cog thing with a Blackberry joystick thing, or the thumnsticks of a portable gaming system for example? Urgh, no thanks.
    – JonW ♦
    Commented Oct 21, 2013 at 15:12
  • You are right. Could possibly be fixed with a two arrow buttons or something but it still feels a little ugly.
    – Tony Bolero
    Commented Oct 21, 2013 at 15:36
  • I think there are far too many cons with that approach than pros to be honest. No visibility of the number of options present, hard to navigate, performance issues... Yes, it saves space, but that's all it has to offer in my opinion (and I don't have an iPhone to go and have a play myself, sadly. I may be mistaken and it's a dream to use, but my brain is telling me no).
    – JonW ♦
    Commented Oct 21, 2013 at 15:42
  • @JonW Even its a dream to use on the iPhone it has to work on as many devices as possible if its a website ;-) Tony Bolero, really great answer so far! May I ask what tool you used for the grey boxing?
    – Sven
    Commented Oct 21, 2013 at 16:14
  • @Sven Thanks. I'm using the lovely new app Sketch from Bohemian coding. It's wonderful for visual design and prototyping.
    – Tony Bolero
    Commented Oct 21, 2013 at 20:40
2

Can you represent the context using some form of breadcrumb? So not the full sub-nav just the item selected.

Otherwise another icon and an expanable sub-menu in the context could work. In this post (The Hamburger Icon - menu or drag affordance?) there are some examples of the hamburger use with other icons

eg: The humburger is clearly on the main nav and in the secondary nav there is another icon to show contextual navigation:

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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