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:
The dos
- 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.
- Elements of design 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.
The don’ts
- 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.”
DevFest.Asia website uses fixed header for its date navigation.
Image by DevFest.AsiaFixed 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:
E-commerce
“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.”
SaaS
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 navigation
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.
Conclusion
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.
Further reading
A special thanks to Adam Babajee-Pycroft, Zell Liew, Nick Clarkson, and Daniel Filler for their help on this article.