1

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:

enter image description here

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:

enter image description here

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.

  • It’s not clear to me what in the images is supposed to be the Apply Now button. – kslstn Mar 22 '18 at 8:20
  • Oh wait I see it now in the second image. It’s tiny on my mobile. I don’t think vertically aligned text is easily readable. As it’s your main call to action, why not make it very obvious? – kslstn Mar 22 '18 at 8:20
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.

FAB button on Intercom's site.

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.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.