UX Tip #13: Sticky buttons and navigation elements on mobile web

Pro tip: Avoid triggering the browser's toolbar by adding some extra spacing to sticky bottom components.

Sticky buttons and navigation elements at the bottom of a mobile interface are nothing new. Tab bars and buttons are some of the most widely used UI elements on mobile apps and mobile web apps.

However, mobile web poses a challenge. Tapping at the bottom of the screen often results in bringing up the browser toolbar, both in Safari and Google Chrome.

iOS Safari’s toolbar getting in the way of using the bottom-positioned ‘New post’ button on Google+’s website: pic.twitter.com/UX0vhFyL3X

— Šime (@simevidas) September 23, 2016

Why does it happen?

There is an invisible tap area of approximately 40px at the bottom of the browser's screen that triggers the toolbar. In theory, this is great as it reduces screen clutter and allows for a better browsing experience.

However, with sticky elements being so popular on mobile web, this creates a very unpleasant and unexpected experience when users try to tap a button or sticky footer only to trigger the browser's toolbar.

How to solve it?

Simply add some extra padding to make sure users don't accidentally tap that invisible area. We recommend 40px of padding to be safe, but anything between 24-40px of padding should make it much easier to avoid accidental taps

Where can I use this?

In any mobile web application or website where you use a sticky/fixed element at the bottom of the screen. For example, you may be using an app-like bottom tab bar, or simply a fixed button at the bottom of the screen.

An alternative: Forcing the bottom bar to always show

There is an alternative to adding safe space at the bottom of the screen, and that's to force the toolbar to always show. This is certainly a good option especially if you are trying to achieve a native app feel.

An example of this behavior can be seen on app.ft.com

⌨️ The implementation of a forced toolbar depends on your front-end framework and structure. We suggest speaking with your front-end engineers to identify the right approach based on the structure of your pages. This write-up by the Eventbrite engineering team is a good place to start.