Navigation on websites and the speed with which this can be done are fundamentals which contribute significantly to user-friendliness. So-called "sticky navigation" is a good tool for making the navigation of the website effective and fast. We explain how it works and the pros and cons.
What is sticky navigation?
The navigation bar and the elements of a webpage are static by default: that is, they disappear when scrolling. In contrast, sticky menus remain visible and allow constant navigation of the website. Thus scrolling has no effect on menu navigation.
Source: www.facebook.com/thehundreds?fref=ts
Facebook is a good example of sticky navigation - the top menu bar is always visible!
Other functions can include permanent visible integration of social media buttons in the sidebar or the footer. This can be adjusted as needed for the design.
Sticky menus have many advantages over static menus, but they are not the right solution for any website. When is "sticky" navigation best used?
Benefits of sticky navigation
During the use of a website, permanently available navigation is an obvious advantage. With Facebook, Twitter etc, the advantage is particularly large. Despite the endless scrolling newsfeed, it is always possible to revert to chat, messages, and other features. This saves a lot of time.
Elements such as a sidebar can also be "sticky". Thus, the user can have specific content permanently in front of his eyes. Whether social media buttons or the sidebar should be displayed while scrolling can be decided according to need. If the elements scrolling side-by-side are intrusive, they distract from the actual content - more about this in the cons.
Source: www.jbiwebdesign.co.uk
James Blake integrates social media buttons with a fixed sidebar.
A study by Hyrum Denney, an expert in web design and development, shows that sticky navigation leads to a 22% gain in speed of use. This sounds at first less important than it is. Given the large amount of time spent on the Internet, about 22% rapidly adds up to one or more hours per day. The subjects of the study unanimously found fixed menus more pleasant than static ones.
Cons of sticky navigation
Where there is light, shadows also arise. Sticky navigation sounds at first like a win-win, but there is also a downside. The menus always hide part of the content, depending on how large the particular navigation bar is. An important question, therefore, must always be: are the menus more important than the content of the page?
A compromise may be a reduction in size of associated menus. With a reduction in size, the elements should remain clearly visible. A smaller menu bar still hides content.
Source: www.techcrunch.com
TechCrunch reduced the size of the logo when scrolling.
The elements which scroll side-by-side quickly distract and can have an intrusive effect. Logos, colours and images are perceived by the human eye as benchmarks and draw attention to themselves. But that is the opposite of what should be achieved. The main focus should be on the content of the page and not on the menu. At worst elements are perceived as irritating and thus reflect poorly on the website - regardless of the quality of the content.
Conclusion
The most important point for the use of sticky navigation is the utility for the individual user. On Twitter or Facebook, the menus make sense, because the user wants to use various elements. In the case of a web page with brief contents, the effort of scrolling is minimal. Therefore permanently visible menus bring little benefit.
If sticky menus are used, they must be kept as small as possible - otherwise they obscure important content! The point to be considered here is how narrow the menu bar can be so as to include all the important functions and display them in a pleasant manner.
There is no general rule for navigation. If specific functions or a menu bar always have relevance and should be visible, sticky navigation is the right choice. If the contents are in the foreground, it is better to forget about anything that is sticky.