As design elements can now be set to a fixed position in the latest update for Adobe XD, 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 the desktop that are 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 continue 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 to navigate.”