Earlier this year, I demonstrated a simple prototype that changed a static element to stick to the browser on scroll. The stakeholders I presented to weren’t familiar with sticky positioning but were excited by how we could increase the visibility of the element. “What else can we stick to the screen on scroll?” they asked. This wasn’t the response I was hoping for.
Sticky positioning is a commonly used design pattern yet it’s invisible to most users as they expect to see it. It’s so unspeakably common it was created as a CSS position property to help developers stick elements on scroll without any extra logic. If you’ve visited any major news, eCommerce or social media site, you’ve seen it in action as it’s a useful way to ensure site navigation or user account details are easy to access. When you’ve scrolled too far, sticking an element is a convenient way to help a user make their next decision.
It’s also likely you’ve seen websites abuse the pattern by sticking irrelevant content or sticking too many elements that a user’s viewport is impaired.
News websites are major culprits of sticky abuse as they’re desperate to keep readers engaged with their content. A few years ago, I interviewed for a role as a designer for a news website and the practical task was to design additional ways to incorporate paid advertising into the experience. The interviewer even admitted the role was heavily focused on designing ads and popups, which is understandable as this is the primary source of revenue for media sites. Although I’m sympathetic to how the online media industry is changing, I stumbled on a news website recently with a sticky header, sticky sidebar and sticky dismissable promo banner on every page and it was horrific.
Without sounding too melodramatic, I’d like to call overuse of sticky elements sticky gore. Sticky gore is a terrifying, growing trend, especially in mobile experiences where the screen size is already limited.
When there are too many sticky elements in an experience, they become more of a distraction than an assistance if they aren’t relevant to what the user wants to do. Sticky promotional banners are a good example but sticky gore can mutate from any site that overuses this design pattern, regardless of if it’s an advertisement or any other site content. There is the potential for sticky elements to create blindspots in the design as they can mask content that would otherwise be accessible if it wasn’t hidden underneath something sticky.
Designers need to clearly define principles to dictate if an element should be sticky and consider the impact each element has on the overall experience. Does an element warrant a sticky position? Is this the right moment in the experience to stick this element? Is there a better implementation?
Sticky positioning is a powerful design pattern when used sparingly but designers should question its usage before jumping headfirst into a pit of sticky quicksand.