Skip to main content
Fixed Menu Banner

To Sticky or Not to Sticky

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.

10 thoughts to “To Sticky or Not to Sticky”

  1. There is one important accessibility problem to avoid with fixed headers (and fixed footers) because it makes navigating the page difficult for keyboard-only users. Developers forget that part of the page is sitting underneath the header (and footer if also fixed). So keyboard users trying to Tab up or down the page land on links and buttons that are hidden. They have to tab several times up the page to bring them into view, then back down again if they want to operate them.

    It also impedes scrolling by all users when part of the page scrolls under the header.

    Solution: give the page container a top margin (and bottom margin if needed) that are exactly the same height as the header and footer. Then the page is always restricted to the visible part of the window. But specify header and footer heights in em units not px units, so they can expand with the text size the user is using.

  2. You could try using icons in conjunction with the labels. That increases user understanding on a large screen. Then on smaller/smallest screens just use the icons. All depends on the icon meaning. Home, print, download etc maybe don’t need further explanation (depending on your audience) but other ones might.

Leave a Reply

Your email address will not be published. Required fields are marked *