2

I am currently designing an ecommerce site that has a fixed primary navigation, but further down the page we have a secondary navigation (Product Specifications, Additional Information, User Reviews) that also need to remain in view for the user as they scroll down.

The secondary navigation will bring the user down to the area of the page where that content lives, but the user still needs to see secondary navigation as they travel down the page. However, we also have the primary navigation that will be fixed.

Having searched and found no results, is having a fixed primary navigation and a secondary navigation (that will live as a pit bar) right below bad practice? Is there a better way to execute this?

Multiple fixed navs

Improve this question
13
  • "the user needs to see the navigation tabs as they travel down the page" I question this assertion. Why do they need this?
    – Daniel Beck
    Jun 12, 2017 at 18:25
  • @DanielBeck Other than the main product details, similar products, and the footer, the user will need access to the navigation for the product specifications available via these tabs. They will need access to these specification tabs at least as long as they are scrolling in that area. Once they reach Similar Products, the second fixed nav can disappear. It is important because they are very specific product details. However, if it is a better UX to not have the second fixed nav, I would definitely like to hear the reasoning.
    – Alex Rivera
    Jun 12, 2017 at 18:31
  • I view "reading the content" and "finding content to read" as separate user tasks -- there isn't much crosstalk been those tasks, so no reason to ensure both are onscreen simultaneously. The marginal benefit of saving the user the single tap or mousewheel scroll it would take to go to the top of the page doesn't outweigh the permanent wastage of screen real estate involved. (You could maybe convince me your sub-navigation is closely enough related to the content to deserve instant access. Not your primary nav, though.)
    – Daniel Beck
    Jun 12, 2017 at 18:54
  • But that's unbacked opinion on my part, which is why I'm posting tis as a comment rather than as an answer....
    – Daniel Beck
    Jun 12, 2017 at 18:55
  • Semi-sticky secondary elements are not-exactly unconventional, and if implemented well, can provide usable experience. What is the specific UX problem that your current implementation presents?
    – dennislees
    Jun 12, 2017 at 19:39

3 Answers 3

Reset to default
1

As you say, you couldn't find anything for this. And I guess it is because it looks really weird, since it looks like a sub-nav of the main navigation rather than page specific controls. Playing devil's advocate, same as you couldn't find anything like this and I feel it looks weird, maybe testing will tell otherwise, who knows?

However, I'd recommend to be a bit more conservative and do it just like everybody else. Same as Daniel Beck said in the comments, I'd question the need for this always being visible at all time. But since you say you need it, I'd suggest to put this product specific bar right down the bottom, and also fixed. Since you mention mobile (which is logical), then it makes perfect sense to place this on the bottom. You can read more on UX Design for Mobile: Bottom Navigation. You can see what I mean below:

enter image description here enter image description here

By doing this, there will be a clear separation between your site navigation and your in-page controls, reducing the friction while having those elements visible at all time, just like you say. Of course, you may find you'll need to make some adjustments to make up for mobile and desktop differences, but this is a good start point

Improve this answer
4
  • This looks great, but unfortunately we have about 6 or 7 navigation tabs that we must keep on mobile. Any idea on how to handle something like that? It's an ecommerce site so our key products span 6 different types with an additional More option for our other products
    – Alex Rivera
    Jun 12, 2017 at 22:05
  • top navigation remains on top, just like you have it. on mobile, you'll need to use one of many different techniques (hamburger menu, sidedrawer, dropdown and such)
    – Devin
    Jun 12, 2017 at 23:00
  • Okay sounds good, so a sticky primary nav and pit bar secondary nav will work fine on larger screens? Will just use hamburger menu for primary nav and pit bar for secondary nav on smaller screens
    – Alex Rivera
    Jun 13, 2017 at 13:07
  • yes. But of course, you always have to test with real users
    – Devin
    Jun 13, 2017 at 20:15
0

Here is what i have researched on the fixed navigation bars. Most of the well know product sites like Apple, Mi.com etc., displays only the required navigation as user scrolls down the page to scan the content. It is a standard practice to only display the required (in this case secondary) navigation as user starts getting into details of the selected product or options offered on the site. You will rarely find sites that displays both the navigation headers together. Below are few examples for both:

Apple.com enter image description here enter image description here

Cooper.com

enter image description here

Improve this answer
0

As rightly pointed out by @Devin, a secondary navigation might look like a sub-nav for the main navigation. I don't think both should be constantly visible all the time as it could cause some confusion for the users.

Instead, depending on your situation, you could try one of the below two things,

1. Hide the main navigation and only display it when the user begins to scroll up

A quick search gave me this example. While it does not display two navigations it should give an idea of what I mean. I'll still look for a better example or make a quick mock up in sometime.

This solution makes sense when users are mostly going to scroll up to access the main menu (which they perceive to be at the very top). However, I don't think it's a good solution if the users are going to compare sections within the content and hence scroll up and down often. In such cases, it could get irritating.

2. Move the top menu to the side

As you said that the secondary navigation will bring the user down to the area of the page where that content lives, it might help to move the navigation to the left side of the page. Some what like the navigation pane on msword. This ofcourse would not work incase you already plan to place filters or any other such controls in that area.

Improve this answer

Your Answer

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

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