The problem with sticky menus and what to do instead

This content originally appeared on Adam Silver and was authored by Adam Silver

Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages.

But this fancy pattern hurts UX far more than it improves it.

Here’s why:

Problem #1: They constantly take up space

They get in the way of the actual content. And it’s worse on small screens where space is more limited.

Problem #2: They obscure content

For example, Material Design’s floating action button always gets in the way of the content behind it.

Problem #3: They break when you zoom in

When zooming in, the size of the sticky menu can increase to a point where there’s little space for the content.

On mobile, sticky menus may disappear upwards. They may also become misaligned or slightly cropped.

Problem #4: They’re difficult to access

If a sticky menu is taller than the content and viewport, users will be unable to access the bottom of the menu (in some browsers).

Even if the content is taller than the menu, users still have to scroll to the bottom of the content to see the menu which is long winded.

You could add an inner scroll bar to the menu. But multiple scroll bars are hard to use.

Problem #5: Internal page anchors feel broken when clicked twice

Some sticky menus contain links that take users to content down the page.

When the user clicks the same link for a second time nothing happens, which makes the interface feel broken.

Problem #6: They appear closer than they are

Sticky menus are always visually accessible, but in reality are far away for keyboard users navigating with the tab key.

Problem #7: They obscure links and other focusable elements

Users who navigate back up the page by keyboard may end up focusing on a link that’s obscured by the sticky menu.

What to do instead

1. Keep pages short: Sticky menus are a symptom of long pages so fix the root cause.
2. Just let users scroll: It’s a myth that scrolling is a problem. Even on mobile, the top of the page is a flick or 2 away mostly.
3. Put relevant links in context: For example, add a subscribe form to the end of a post or add a CTA to a pricing section.
4. Use a back-to-top link: They’re relatively unobtrusive (but only do this once you exhaust the other options).

This content originally appeared on Adam Silver and was authored by Adam Silver

Print Share Comment Cite Upload Translate Updates

APA

Adam Silver | Sciencx (2023-05-07T00:00:00+00:00) The problem with sticky menus and what to do instead. Retrieved from https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/

MLA

" » The problem with sticky menus and what to do instead." Adam Silver | Sciencx - Sunday May 7, 2023, https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/

HARVARD

Adam Silver | Sciencx Sunday May 7, 2023 » The problem with sticky menus and what to do instead., viewed ,<https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/>

VANCOUVER

Adam Silver | Sciencx - » The problem with sticky menus and what to do instead. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/

CHICAGO

" » The problem with sticky menus and what to do instead." Adam Silver | Sciencx - Accessed . https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/

IEEE

" » The problem with sticky menus and what to do instead." Adam Silver | Sciencx [Online]. Available: https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/. [Accessed: ]

rf:citation

» The problem with sticky menus and what to do instead | Adam Silver | Sciencx | https://www.scien.cx/2023/05/07/the-problem-with-sticky-menus-and-what-to-do-instead/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.