Best Practices for Designing Sticky Headers & Other Fixed Elements
The portfolio site of product designer Daniel Filler features a hero image header that shifts into “view mode” with a semi-transparent background as you scroll down.
This time we’ve decided to dig a little deeper into the best practices for sticky headers and other fixed elements. While they’re pretty ubiquitous and easy to implement, what purpose do they really serve apart from adding some interactivity to the page? We quizzed some leading designers and developers for their advice on the dos and don’ts of fixed elements:
- Focus on which actions or elements add value for the user. Just because you can doesn’t mean you should.
- Consider the most effective placement of the elements at each breakpoint.
- Design elements large enough to tap.
- Use space effectively.
- Ensure plenty of contrast so elements are visually distinct from the content that moves beneath.
- Make it a reasonable height. Not too tall, preferably containing a max of one line of text, because it gets hard to read when there’s not enough screen estate. You want people to focus on your content, not your header.
- Consider hiding the header when people scroll down, especially on mobile. This gives them the space to read. When people scroll up, show the header.
- Don’t elevate unnecessary elements, which use up screen real estate and deliver little benefit for the user.
- Don’t dedicate more than 100px vertical space to static elements on mobile.
- Don’t place continuous, distracting animations or transitions in the user’s constant eye line.
- Don’t design static elements on a desktop that is taller than your average user’s screen, so that they can’t scroll to the bottom of them.
Context is king
According to Daniel Filler, experience design director at Capital One, the most important thing for designers to understand is the customer problem they’re solving for. Second is the context in which customers will encounter said problem, and fixed elements can play an important part here.
“Sticky elements — headers, components, and the like — are tools to surface context to our customers,” says Daniel, whose own site was recently featured in an article on “12 Fixed Sticky Navbars That’ll Grab Your Attention.”
“Think of them as signs on a highway — way finders to ensure we’re continuing to provide relevant information to a corresponding section or aiding customers along their journey via calls to action.”
In addition, Daniel argues, that as the number of devices we design for increases, and the plethora of resolutions and sizes continues to proliferate, sticky elements also allow us to ensure visibility of this contextual information or action, regardless of screen size.
“Of course, with great power comes great responsibility,” he warns. “I’d ensure you’re providing visibility to these blocks in a manner that aligns with your customer’s unique needs, not just that of the business. Sure, it’s important the business meets its goals, but not at the expense of our customer experience — that just propagates dark patterns.”
Are fixed elements mandatory?
“You’ll want to decide whether the fixed element is mandatory,” advises Zell Liew, a freelancer developer and front-end consultant from Singapore. “Most of the time, fixed elements compete with content for space. If it’s largely a content site, then it’s best to not have any fixed elements.”
“But absolutely positioned items can be wonderful. If you have absolutely positioned items, you can create interesting animations. You can find an example on 2015.devfest.asia. Scroll down and you’ll see the event date nag becomes a fixed header, which in this case is mandatory to help navigating.”
Fixed elements on e-commerce and SaaS sites
Sticky UI elements are an excellent way to ensure that users have access to key actions or information wherever they are on the page, as Adam Babajee-Pycroft, managing director of UX agency Natural Interaction, points out:
“In an attempt to differentiate themselves from Amazon, specialist online retailers often compete by providing superior product content,” Adam says. “Depending on the user’s level of expertise and knowledge, they might need different levels of persuasion to purchase. All this extra content often leads to longer pages.”
Again, this is where fixed elements can shine. “Sticky UI elements can provide quick access to select a quantity, add to basket, or check out. This means that the moment a user makes a decision, they can act. Another great use in e-commerce is to filter and sort options on product category and search results pages. It’s often helpful to remind people which options they’ve selected.”
Sticky elements can also be used for web-based software, as its users often need access to certain actions, wherever they are in the application.
“These include ‘Save’ buttons or buttons for creating new ideas or tickets,” Adam says. “For example, Solverboard and Jira allow you to create them by pressing a single, static ‘New/Create’ button which is always available.”
Fixed headers are good for signposting navigation position at a glance. They keep navigation and any other global features, such as search, in reach when scrolling, or after scrolling has occurred.
So, as the length of a page between desktop and mobile varies wildly, it makes sense to implement fixed elements. Users will find familiar features simply easier to use, but there are a few rules to keep in mind. Follow these principles, and you’re on your way to design effective fixed elements. Remember to ask yourself if the design element is mandatory, and always consider your users’ needs, not just the business’s.
- The 3 Golden Rules of Sticky Navigation
- Sticky Headers, Smooth Scroll & Sticky Navigation and CSS Sticky Nav & Smooth Scroll
- 12 Fixed Sticky Navbars That’ll Grab Your Attention
- An Event for CSS position:sticky
- Easier Scrollytelling With Position Sticky
A special thanks to Adam Babajee-Pycroft, Zell Liew, Nick Clarkson, and Daniel Filler for their help on this article.