We're in the middle of a site redesign and currently exploring navigation options.
One option is a navigation thats locked to the bottom of a page with sub-menus that fly up.
I don't often find menus like these and I'm trying to figure out why! :)
I know www.vogue.com and www.gamepro.com has a navigation that locks to the top of the page, which are more recent examples. However, haven't really found navigations glued to the bottom.
Would love your thoughts on this.
Thanks in advance!
My first thoughts on why not to do this would be that a user could interpret the bottom nav as a false bottom of the page and not attempt to scroll down to see more. Navigation is also typically at the top of the page so you're going against a common web design pattern which would probably throw off some people. If you feel that your user base is ready to push the boundaries of what's normal then it could work as long as you're content on the pages flows behind the fixed bottom nav in a way that makes it feel like there's more down below.
Thanks for the reply.
Good points. The way the content is structured and laid out, it would be clear that the nav is not at the bottom of the page (unless of course it is at the bottom of the page!). I also do think that people generally scroll so that wasn't my worry.
What I might be concerned about is whether a locked nav poses to be more of a distraction over the convenience it provides. Don't want people to be hyper-aware of a navigation bar when they should be focused on the content.
Wonder if I answered my own question. Oh reflection!
I second Chad.
The only time I've found fixed nav useful for myself is when a certain features/tools/links are always available on the Left side. This does not interfere with my scrolling eyes/mouse and keeps things handy. Readability is a good example: https://www.readability.com/articles/e5uduhil
I liked the example of Readability (started using it thanks to you). Really makes sense in that context. Wondering if it can be used as a primary navigation.....
If you are looking for examples, Alltop and Facebook (chat menu) both use fixed-bottom menus. However, these are both more so secondary tools/actions than main navigation.
Top or side navigation is the norm for web sites and people are more familiar with it as a result but I wouldn't discount your option. If you have a reason to try fixed bottom flyouts try testing the design with your current audience first to see how it performs. After all, bottom navigation isn't completely unfamiliar; Windows and Apple's OS's operate this way and so do other mobile OS's.
It is a matter of Information Archtecture: the most important things are at the top of your screen. Having a toolbar at the bottom interprets as "It's OK if you don't ever see this". If this is your main navigation it's not a good idea to have it there.
Having said that, a set of tools that maybe used at any time during the User's visit (think Social tools, chat et al) can be easily placed there but you have to find a gentle way to point that out to the User - like a dock that comes initialy expanded and it promptly autocollapses or a bubble.
Strongly agree with this. Demoting the most important navigation sounds like a bad idea - with the possible exception that the site has a niche user-base. For example, if people go to a site knowing it's going to be offbeat, putting the main nav at the bottom might fit in with the site and be perfectly usable for the user base.
But if it's a more generalised site - I'm not seeing a user benefit for the change.
http://www.dromoland.ie/ a nice example of where this works..
One of my favorite implementations of this evolving pattern is http://coolhunting.com/. I hesitate to call it "locking", however, as unlike Vogue, it has a very effaced mode for scrolling/viewing, and then an expanded view (with a very classy animation, imo) on hover.
I think this two-state approach is great for a number of reasons:
- adapted to different use cases (read, navigate)
- clever effect is noticeable, easy to learn, and enhances brand
- optimizes real estate (vis-a-vis Vogue)
Facebook's bottom bar is more utilities than nav...
One thing to keep in mind with any top-locked nav is that it's going to constrain, or at least make problematic, the use of any page-wide inlay or overlay notifications.
I agree. The coolhunting navigation is awesome. How do you think they did that.
I've been looking on builtwith.com to see the technology they used, but I'm a novice web developer so I really have no idea what it is I'm looking for. Any thoughts?