Fixed elements enable you to set design objects to a fixed position on an art board. They’re a popular choice for sticky headers and sticky navigation.
Designers and developers have mixed feelings about fixing elements, however, which — if done badly — can cause scroll jank and annoy users. There are various user experience (UX) considerations you need to take into account, and we’ve laid them out in our article on best practices for designing fixed elements. We wanted to dig a little deeper, so we invited four UX, user interface (UI), and accessibility experts to give us their opinions on the use of fixed elements. Take their advice to heart and you’ll be on your way to implementing fixed elements that help your users, rather than frustrating them.
Proceed with caution
Chris How.Fixed elements demand a user’s attention. You need to know if the distraction is a help or a hindrance to the goal of your visitor.
People do two things online — they are either navigating to content, or they are consuming content. In the latter mode you should be mindful to remove any distractions that compete for the user’s attention.
I had a salient design lesson a few years ago. I’d created an elegant IA [information architecture] for a content-rich website. Being proud of the work, I designed both the header and footer to be sticky. On my super-size monitor these elements didn’t impact the reading experience. Once launched I got to see a user trying to read the content on a mini laptop. The navigation took up a third of the screen and made reading through a slither of a viewport a painful experience.
Sticky elements can provide a persistent and useful trigger to supplementary information. When done well, they allow for immersive experiences with further details available when needed. However, I often see sticky elements used as a desperate crutch to promote a business objective rather than supporting a user goal. Shouting about your latest offer, nagging about email subscriptions, and giving constant reminders that you can “buy now” all add noise, not awareness.
Just because you can make an element sticky doesn’t mean you should. Before rushing in, check that your use isn’t a sticky plaster for an injured design.
– Chris How, principal UX consultant, Clearleft
Don’t box in the user
Jane Portman.In web applications, which are the primary focus of my consulting practice, fixed elements mean much more than merely sticky headers or privacy popups. Fixed elements are typically menus, and they create the skeleton for the entire interface.
In simple products, things usually don’t go beyond a single fixed element, be it a left-side panel menu or a fixed top navigation menu. But when things get complex — like in page builders or editors — it’s so easy to get carried away.
The main rule here is to avoid placing menus on all four sides of the screen. This can look miserable on smaller screens, and the user will likely feel “boxed in” without any breathing space. If you absolutely must employ all four sides, then make the bottom bar super narrow and lightweight (by placing breadcrumbs or status information there). The right-hand panel is typically reserved for properties — just think of any popular graphic editor.
Another tip: when handling a vertical menu area, don’t place too many items on both the top and the bottom of the area. There should be generous white space between them, which is not always achievable in real life.
– Jane Portman, founder of UI Breakfast and Userlist.io
Consider a variety of uses
Alastair CampbellThere are a lot of different screen sizes and ratios, so when it comes to implementing fixed elements, it’s worth taking a progressive-enhancement approach.
Design tools such as Adobe XD are great for optimizing how fixed elements will appear on key devices, but there are more things to consider. For example, when someone on a laptop zooms in due to poor eyesight, they are in a landscape orientation. A fixed header or footer will expand when zooming, so it can easily take up most of the screen.
Whenever you fix an element or prevent scrolling when an overlay is displayed, work out what dimensions are needed for it to work, and only activate it when that is fulfilled. For example, if you use CSS and create a fixed header that is 100 pixels high, then the screen height should be at least 400 pixels before that takes effect. The CSS to fix the header could be put in a media query, so that if there isn’t sufficient height, it’s not fixed.
Also consider keyboard users. If you have a floating element (e.g., a back-to-top link), where should that be in the keyboard focus order? Don’t leave it to chance, make sure it’s considered, and put in the source order appropriately.
– Alastair Campbell, director of accessibility and co-founder at Nomensa
Save the user’s time
Aga NaplochaWhen I think about fixed elements, I immediately see a fixed navigation on the top of the website. I find it especially useful on pages which present massive content, such as news pages or bigger services and portals.
In such cases, I tend to use the fixed nav a lot in order to explore different sections and subpages. Thanks to the sticky navigation it’s much easier for me to navigate on the site, and it saves my time — I don’t need to scroll all the way back to the top.
Another example of fixed elements can be panels with social media buttons. As they’re in the same place, a user doesn’t waste time to scroll down to find them.
However, fixed elements can also be annoying, so it’s always important to ask yourself what is the function of the element and if it is necessary to have it exposed all the time in the same place.
– Aga Naplocha, coding designer at Adobe and co-founder of The Awwwesomes