One of the most memorable album covers of all time was the one for Sticky Fingers by the Rolling Stones. It featured a man wearing jeans with a zipper that actually worked. Very cool, except that the zipper damaged the vinyl underneath. Oops.
There are lessons here that can be applied to sticky headers, those helpful(ish) navigation bars that sit atop or on the side of a website as users scroll through. Since they can take up a good amount of valuable screen real estate, you have to make doubly sure that you’re not doing more harm than good. A cool idea can quickly become annoying or even damaging if you don’t keep certain parameters in mind.
The easy way out is to not have a sticky header. But sticky headers have been proven to amplify conversion rates. Can’t live with them, and can’t live without them.
So what’s the Brown Sugar for sticky headers? Wild horses can’t keep us away.
The Golden Ratio
All art lovers know that the golden ratio is a crucial concept for creating harmony and beauty, and when it comes to a sticky header, the ratio to obey is “content-to-chrome.” A rough translation is that you need to find the sweet spot where your sticky header is not too big so that it overwhelms your content (a ratio of 2:1 would be horrible) and not too small so that users can’t even tell what it is (20:1 would be miniscule).
So this is pure Goldilocks, and maybe not very precise because unlike the golden ratio, the content-to-chrome ratio doesn’t have a formula. It’s more based on feel or intuition, made even more complicated because what works on a desktop doesn’t necessarily carry over to the mobile ecosystem.
The touch targets that users have to press down on need to be at least 1 cm x 1 cm, more or less in line with the width of an average finger. This is basically the only research-based metric to guide you to find the right ratio for your brand. “Go big or go home” isn’t the best advice in this situation, and neither is “small is beautiful.” The text in your header needs to be readable, but users don’t want their screens consumed with a logo.
Contrast Is Key
When it comes to a sticky header, avoid gray goo, the sci-fi catastrophe where nanobots eat all living things. You don’t want the background of a sticky header to merge with the colors of your content (creating gray goo), where users can’t differentiate between the two. This includes any submenus or other dropdowns.
Some sticky headers become translucent so that users can see more of the screen, but the main issue here is that the colors involved are low contrast and can confuse users because the content can be hard to read. If users get confused, they will be more likely to bounce from your site. Translucency is a cool idea, like a working zipper on an album cover, but one that can create problems if done improperly.
Objects in Motion
Animation is all the rage in contemporary web design, but when it comes to sticky headers, objects at rest should remain at rest. Sticky headers should not be roaming around your website, popping here and there like uninvited guests. When users scroll through your website, the sticky header needs to stay put. And if they don’t, you might run into some trouble.
There’s even a very unfortunate term that describes a header that becomes unmoored from its position, disappears for a while, and then pops up in a new place: that’s called a “stalker menu” and based on the negative connotation alone, you’ll want to avoid it. The last thing you want is for your brand to become some sort of non-example for a well-designed website.
Every blue moon or so, you might run into a scenario in which a header has an enlarged logo embedded in it, put there to satisfy somebody’s ego, somebody who has more power than taste. In that case, the logo might shrink when a user scrolls, and this animation should happen as smoothly as possible, at roughly the same rate as the user is scrolling, without any sudden movements. The last thing you want to do from a UX standpoint is to create confusion or sow fear.
Partial Persistence Pays
The mobile landscape has many challenges in the realm of web design, and one headache is how sticky headers can be thorny on a small screen. It should be there when a user wants it to navigate and should disappear when a user just wants to read your content.
Presto, there’s the logic behind “partially persistent headers.” Now the term itself seems like an oxymoron–how can persistence be anything less than total?–but on mobile devices, the idea is that a header appears whenever a user scrolls up but then disappears when users scroll down. There are times when users scroll up and don’t want the header to appear, which is why the rollout needs to feel natural and triggered by the user, not auto generated (which it is, of course). Avoiding distraction is paramount here.
Really?
When it comes to sticky headers, the question you have to ask yourself is this: really? As in, do you really need one? There are some in web design that eschew sticky headers because of the valuable space you’re forfeiting, unless you’re absolutely sure why you’re using one.
A call-to-action that involves CALL US or BOOK NOW should probably remain in a user’s field of vision because studies show that users don’t go looking for CTAs. They bounce instead to the next site. But users might not be clicking on a navigation bar or care very much about seeing your logo. A log-in button probably doesn’t need to follow users around beyond the landing page. Performing A/B testing on sticky headers is a great idea, so you know what’s working best.
To sticky header or not to sticky header? A vexing question, no doubt, but if you use one, try to determine what exactly you need one for. Then let the chips fall where they may, without distracting animations or working zippers.
YOU MAY ALSO ENJOY
