Today I learned
The problem with sticky menus
If you browse the web, you'll notice quickly that sticky menus are used often. Sometimes I'm happy they're on a website, so I can quickly reach call-to-action buttons or other important information. But most of the time, it feels to me that they take up a lot of space away, and I intend to remove them.
Seeing them so much in the wild was a validation to me. If implemented this often, they must be helpful and improve the user experience. But if you think about it: every website uses cookie banners, e-mail sign-up modals, and other kinds of overlays, and we all hate them and know it's terrible UX.
So I was curious when I stumbled over this post by Adam Silver: "The problem with sticky menus and what to do instead." Opens in new tab He states several well explain arguments on why to avoid sticky menus and shares better alternatives.
His key takeaways, why we should replace them are:
- They constantly take up space
- They obscure content
- They break when you zoom in
- They're difficult to access
- Internal page anchors feel broken when clicked twice
- They appear closer than they are
- They obscure links and other focusable elements
While most are obvious and reasonable arguments, numbers six and seven stood out. I wasn't aware that sticky menus not only decrease user experience in general but they're also reducing accessibility by a lot.
Sticky menus make us think that they are always very close to reach. That might be true if you're using a mouse. You just move to it and can click. But, ever tried to navigate to a sticky menu with a keyboard? Oh boy! They are often way out of the normal document flow and very hard to reach using the tab key.
More accessibility problems arise if you're trying to move up the page with your keyboard. Chances are you reach content that's right below the sticky menus. So links and other focusable elements are not visible to you because they get obscured by sticky menus.
Adams's advice on what to do instead is:
- Keep pages short. This removes the need for a sticky menu
- Just let users scroll.
- Scrolling is never a problem, is fast, and everyone does it anyway
- Instead of putting important CTAs into a sticky menu, put them in a context like a CTA at the end of a pricing section
If you think about implementing a sticky menu, I hope this post helps you to think again by summarizing Adams's points here and sharing his alternatives. Because sticky menus can have serious issues!
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.
If you want to support me, you can buy me a coffee. I would be very happy about it!
☕️ Buy me a coffee ☕️I wish you a wonderful day! Marco