Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?
Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?
Excited? I know right.
I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉
A sticky menu is quicker to navigate
https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/
Pro
Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.
Con
However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?
Top 5 Common UX Mistakes
https://www.toptal.com/designers/ux/top-5-common-ux-mistakes
Pros
There are benefits, but only when considered correctly.
Cons
If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.
The Pros and Cos of Fixed Header Bars
http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/
Pros
They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.
Con
If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.
Summary
Users seem to prefer fixed headers, but only if they are implemented correctly.
The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.
When being used on very small devices, headers need to be hidden to provide a larger content space.
The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.
