Stop using sticky navigation bar for mobile devices
Stop using sticky web elements on mobile devices. This creates a terrible experience for your users, and looks disgusting from an interface point of view.
Summary
Don t make the navigation bar on mobile devices (or any other component) “sticky”. They create a bad experience for your users and take away valuable screen space.
What is meant by the word “sticky”?
Concept sticky Elements includes (but is not limited to) the following elements:
- Navigation elements that follow users when scrolling
- Chatbot bubbles eating up half of the bottom of the screen
- Banners or modals urging the user to “register, accept cookies,” etc.
These are bad and you shouldn t use them. Layout and layout are an important part of a product s design and greatly affect the user experience. Stop using ugly sticky elements.
First, let s take a look at sticky navigation and why it s awful. We ll also look at some simple guidelines to help you avoid making such bad design decisions.
When you decide to “eat”> 50px of space at the top of the page under your site navigation, you are hurting your users. You are also wasting their time interacting with your website.
“Wait!” I hear the advocates of sticky navigation exclaim, “This panel makes it easy for the user to interact with the pages on the site!”
Complete nonsense. The user should see the site navigation only when you need to use it.
Let s take a look at the problem:
To know when to show the navigation bar you just need to understand the user context at a particular point in time. See below:
This is where the navigation bar moves up with the rest of the page as the user scrolls through the main content. Don t worry, the user knows the navigation is still at the top of the page because they saw her disappear from view when scrolling… This option is best combined with appropriate footer navigation. This way, when the user reaches the end of a particular view, he can change pages right in the footer. No need to scroll back to the top of the page.
Alternative option
Maybe you want to hide the navigation without losing flexibility so that it is always available at the top of the page? This is possible, although I find it still slightly intrusive to the user. A simple way to achieve this is to display the navigation when users perform a specific action, for example:
- Long or multiple up swipes
- Opening a dropdown menu from the top (easily shown to the user)
I wish navs were the only sticky issue in mobile interfaces – but they are not. Other problematic components include:
- Chatbot or Support Bubbles
- Cookie Policy Notice
- Modal windows that pop up after a specific time
Every time you implement one of these components, a puppy dies somewhere in the world. Seriously – don t be part of the problem and don t add components like this. Don t trust “market research” or team leads telling you this shit works. You are making the mobile web worse for everyone and setting a terrible precedent for future developers.
Stay static, my friends!