We are thinking of developing a site with navigation after the main image and not the top of the page is that ok? Is there a best practice on this? Is top nav important or better
4
-
Whichever is better for the user. There is some discussion on this topic already here: ux.stackexchange.com/questions/46529/…– philipCommented Jun 12, 2015 at 14:23
-
Have you queried your customers? If you're doing something that is not part of an expected norm what justification do you have for it?– MayoCommented Jun 12, 2015 at 14:28
-
Many e commerce websites use a navigation on top of the page, and also bottom navigation is a very popular trend now both in iOS and Android applications. It all depends on your usage and the way you wanna present it but using a bottom navigation in desktop view of websites may be a bad practice. After all it's not something users are used to.– Sarah AkhavanCommented Aug 17, 2016 at 10:43
-
For mobile or desktop?– RobbyReindeerCommented Jan 18, 2018 at 8:42
Add a comment
|
4 Answers
Depends. The norm is to have it on top, and in general this is good advise, since it doesn't interfere with the experience yet it's located where the user expects it to be. However, there are some conditions and approaches for these conditions.
Case 1
Visible and notice-able navigation on top
In this case, you want the user to have the navigation present at all times, since navigation plays a big role to access certain areas of teh site.
Example: https://ux.stackexchange.com/
Case 2
Non intrusive static top navigation
This is common in pages where navigation is less important because the main parts of the site are the landing page itself. Usually blended with the background by use of transparency and used in long-page layouts or pages that want the user to concentrate on CTAs above the fold
Example: https://www.agencyascend.com/
Case 3
Non intrusive with "on scroll changing" top navigation
Same as above, but once the user scrolls down the fold, the navigation changes in more or less radical ways, going from converting transparencies in solid backgrounds, changing color of background, changing appearance, layout and many more. In general, these navigation bars are fixed to the top, and are used to provide the user with a clear path to navigate the site once the fold has been scrolled.
Example: http://tritraining.edu.au/
Case 4
Bottom fold navigation
In this case, you place the navigation on the bottom of the fold. This is usually used in full screen layouts and are clearly displayed since they are not in the expected position, yet they're important to the user's experience
Example: http://www.conjurecognac.com/conjure_cognac/conjure/
Case 5
Interstitial navigation In this case, you want the user to concentrate on the top element and add a "cut" in the layout while making the navigation very noticeable by placing it in the middle of the screen. Basically, using the navigation bar both as an information element as well as a content separation element.
Example: http://mozlo.com/chopper/
Considerations: These are NOT the only options you may have. And please keep in mind I'm not advocating for any of the mentioned options, nor the chosen examples to illustrate those options. Whatever path you choose to follow, it's highly recommended that you test it. Navigation bar placement is very easy to change with a couple lines of code, so it's not a big deal, thus there's no excuse not to test it! Just in case, and in order to provide you with some insight, please take a look below:
Additional Reading
In case you're wondering about the above the fold concept and navigation placements, you might be interested in this article, this one and this one
In general, people tend to expect navigation on the top. Or at least above the fold in a column left or right. Your eyes start searching there automatically.
It might be best not to confuse your visitors.
However, I would say it depends on how far down you are planning on displaying the navigation. Is it still right there at first sight, just lower then usual, or do I have to scroll down to it?
The question is why you want to do this, your answer lies in there.
Bottom navigation is used for instance for navigating through pictures, in that sence, it is very acceptable and common.
Considering mobiles the experience can be very different, with more devices with large screens a top nav could be very difficult to reach.
Regarding desktop I like to break standard rules and be more creative with disruptive new experiences.
Very good point regarding an user testing, A/B testing.
Test, don't guess
The question is: will your users find the navigation if it is not in a standard place? The only way to know for sure is to test. A/B testing (of two prototypes) would be ideal for this.
Consistency
Will you have a large image on the top of every single content page? If not, where will your navigation be on those pages?
Is the navbar location forcing you to always have a graphic up top?
Current research shows that users tend to ignore carousels at the top of websites. What if six months from now research finds problems with large images at the top of websites and you want to remove your image? Where will your navbar go then? Sites are often redesigned every two years, but that is expensive. If you only change one element (e.g. remove the image), how will your navigation look in the middle of the page? Will it still be as findable? You may be limiting design options by anchoring your navbar to an image.
