Sticky Headers: 5 Ways to Make Them Better


Meaning

Sticky headers (or relentless headers) are a typical pattern for keeping the header of a site or app in the exact same put on the screen while the user scrolls down the page. A variation of this pattern is the partly sticky header, which (re)appears at the top of the page as quickly as the user begins scrolling up.

When done properly, sticky headers enable users to rapidly access the navigation, search, and utility-navigation aspects without scrolling as much as the top of the page. They increase the discoverability of the components in the header and the possibility that users will benefit from them.

Accenture’s desktop website utilizes a sticky header consisting of the website search, energy, and navigation navigation. The header remains in location while the user scrolls. When carried out badly, sticky headers are irritating, disruptive, and block page material.

Here are 5 ideas to make sure that your sticky header’s style assists, not prevents, your users.

1. Make The Most Of the Content-to-Chrome Ratio by Keeping It Little

Sticky headers naturally use up area on the screen that might be utilized for material, so it is very important that you utilize that area properly. This aspect is much more essential on mobile phones, offered the little size of the screen. You wish to make sure that the content-to-chrome ratio is taken full advantage of, so that your sticky header takes the tiniest quantity of area that still supplies properly legible text and tappable target sizes.

On touchscreen gadgets, guarantee that all tap targets are a minimum of 1cm × 1 cm, all text is around 16pt (depending upon the x-height and total diversity of the letterforms in the typeface, a suitable minimum might be a little smaller sized or bigger), and after that decrease any extra vertical height beyond those sizes (while still keeping suitable visual factors to consider, obviously).

On desktop, while there is significantly more area to deal with, it’s still not recommended to luxuriate in extreme empty pixels for the header, merely to make the logo design as big as possible. Once again, begin with legible text sizes for your header aspects and reduce the vertical height from there.

Two mobile websites with sticky headers side by side
Left: The New Yorker’s sticky header has a 13:1 content-to-chrome ratio on the iPhone 11 Pro, which is an affordable area tradeoff.( Note: this estimation does not consist of the internet browser’s URL bar or the iOS status bar, both of which consume pixels however are outside the control of the website designer.)
: Lollar Pickups has a parsimonious 2:1 content-to-chrome ratio on the very same gadget, with an exceedingly big clear logo design header that does not supply enough contrast versus the material (so we count it as chrome) and an unneeded duplicative tab bar at the bottom of the page that is likewise sticky.

2. Contrast with Material Is Essential

To select a proper background color for a sticky header, think about whether there suffices visual distinction in between the header and material all over on the page. Because the header will appear on top of every point on the page, it is very important that it has enough visual contrast with the background to be visible, legible, and plainly separated from the material that it is hovering over. Any broadened submenus or dropdowns ought to likewise be plainly separated from the background.

As an outcome, the sticky header should be a nontransparent color, various from the background of primary material locations. Despite the fact that clear sticky headers mean to make more of the page material (partly) noticeable, the low contrast ratios that arise from these headers make the semivisible material difficult to check out and often irritate and sidetrack users.

A sticky header with a visible hover-based submenu that has low contrast with the background
Envision knowing’s primary sticky header (with a black background)has high contrast versus the page material( with a beige background ), however the submenu for the navigation’s 2nd tier utilizes the very same beige as the page background, mixing in. The confusion is magnified by the absence of a border around the submenu.

3. Keep Movement Very Little, Natural, and Responsive

Animation is typically disruptive, sidetracking, and irritating for users, so goal to utilize it just minimally for sticky headers. In basic, it’s finest to not utilize animation at all and just keep the header in location as the user scrolls. There are 2 cases in which animation might be needed: diminishing a big header location, or partly consistent headers (more on this subject in standard # 4 listed below).

While a huge header location is typically not advised, sometimes factors to consider unassociated to UX (and typically rooted in internal organizational politics) mandate a big logo design at the top of the page; the logo design diminishes down as the user scrolls like in the Michigan.gov example listed below. This animation needs to fast, smooth, and instant– the header needs to diminish at approximately common scrolling speed and ought to not vanish, dive, or otherwise shock the user.

Michigan.gov’s sticky header diminishes down as the user scrolls, however does so in an abrupt style, vanishing for a minute and all of a sudden coming back.

Sticky headers likewise need to remain in a repaired area on top or side of the internet browser window, instead of running into position after a hold-up (a pattern referred to as the ‘stalker menu’).

An older style of Top place for Youth had a disruptive stalker menu that followed the user’s scroll position with an overstated animation after a hold-up.

4. Think About Partly Relentless Headers

Partly relentless headers are most often seen on mobile websites and, sometimes, provide the very best of both worlds: a header that is quickly available from anywhere on the page, however remains inconspicuous while you scroll and check out down the page.

This design works reasonably well. Partly consistent headers presume that any scroll up is an indicator that the user wishes to access the header. In lots of scenarios that will hold true, however in some it will not– for instance, the user might merely wish to go over a previous paragraph. In such cases, the animations related to partly consistent header can be sidetracking for the user.

That is why such animations need to be inconspicuous and appear neither prematurely nor too gradually. We suggest that it feel like it’s being by hand scrolled into view by the user, however be really activated by the user scrolling up by a couple of pixels (i.e., if the user stops scrolling up, the header needs to continue to totally stimulate into view). A slide-in animation that is approximately 300– 400ms long will maintain that natural feel, without being disruptive.

CB2 has a partly relentless header. Scrolling down activates the header to stimulate out of view and scrolling up activates the header to stimulate back into view. The speed of the animation resembles a user’s natural scrolling speed, so it is not excessively disruptive or noticeable. The user needs to scroll more than a couple of pixels in either instructions to activate the animation, so it does not feel excessively delicate, nor is it most likely to be unintentionally activated by an unstable hand.

5. Think about Whether a Sticky Header Is Required at All

A last element to think about is whether the sticky header genuinely required. Eventually, by utilizing a sticky header you hand out some screen realty on every page of your website. And, if the sticky header is not valuable to your users, any other optimizations you make to its style are moot. Do an expense– advantage analysis of your sticky headers by addressing the concerns listed below:

  • What kinds of aspects will your header include? Main navigation? Energy navigation? A logo design?
  • Are these aspects most likely to be required typically or at any point throughout a session?

If a login button is in your header, is it most likely that your users will log in on any page of your website? If your primary navigation classifications remain in the header, will users leap from one classification to the next throughout one session or is it most likely that they will remain in a single classification for their whole time?

The responses to such concerns will differ depending upon the kind of website and the jobs and material that it supports.

Summary

Sticky headers can be a favorable addition to a website, however just if they really serve a function for your users. If a sticky header does offer worth to users, then guarantee that it is as little as fairly possible, it has high contrast versus the background, does not utilize unjustified animation, does not unknown material, and does not sidetrack your users.

Leave a Reply

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