What are peoples experience of sticky actions on the bottom of the browser and is visibility an issue?

Question

I've been tasked with a project that is a careers site and there is some speculation on the need for a large button saying 'Apply now' sticky on the bottom of the browser like the attached image:

I thought it would be fine to do this at a vertical axis and smaller so it's not competing with other elements on the page e.g:

The problem is my colleagues think a big button is more prominent and obvious.

My question is what are peoples experience of sticky actions on the bottom of the browser and is visibility even the issue? As my colleagues suggest.

Answer 1

Google's Material Design Framework has popularized a design pattern for a sticky button on the bottom of the screen known as the FAB, or Floating Action Button.

Google has specific guidelines for the appearance and behaviour of this button, for example:

• The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

• The floating action button changes color on focus and lifts upon being selected.

• A floating action button represents the primary action in an application.

• Only one floating action button is recommended per screen to increase its prominence. It should represent only the most common action.

• Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore

However, since you are not using the Material Design framework specifically, you do not have to following all of these guidelines exactly.

Instead, concentrate more on the user's expectations and familiarity with the pattern -- if users see a FAB-type button, would they understand how it works? What are the kinds of behaviors they would expect?

For example, other sites such as https://www.intercom.com/ do not use the Material Design framework, but still use a FAB-type button.

Finally, one issue you may encounter is that the FAB button typically does not use text labels. So you may struggle to find an icon that suggests 'Apply'. Or you may have to break convention slightly here and employ a text label.