1

I am willing to add a back-to-top button at the bottom right corner of a webpage containing a lot of content. Having UX in mind, I am planning to align the design of my back-to-top button with the guidelines provided in a NN/g blog post.

However, there is no mention on this blog post of where the back-to-top button should be placed when the webpage has a footer.

  • Should this button overlap on the footer?
  • Or should this button stay in the bottom right corner until the footer gets visible (in that case the button would stop above the footer), as investigated by others in Stackoverflow posts (e.g. related post 1, related post 2)?

I'd like to have the inputs of UX designers/experts on that matter.

Thanks!

Jane
  • 13
  • 4

1 Answers1

2

I believe that there are no clear guidelines because this should follow from the overall design of your page. But you can certainly identify such good practices:

  1. The button becomes visible only when the user scrolled the page further than the second screen, because until that moment this button is useless.
  2. The button should not overlap the content and interfere with reading, for this it should be located in the lower left corner. Usually this is not a problem because the screen reading area is higher than the button can be located. What really needs to be taken care of is that the button does not overlap the footer area in the mobile view.
  3. The button should always be visible, otherwise it may be strange behavior for the user. The user may not understand why the button disappeared at the end of the page, because he needs it there.

enter image description here

  1. It is better to place the button in the lower left corner, because this will prevent accidental clicking for mobile devices when scroll. And when the user wants to press the button, he will not have to bend his thumb to tap on the button.

enter image description here

  1. To prevent the button from overlapping footer content, you can add an indent from the bottom equal to the height of the button.

enter image description here

nektobit
  • 773
  • 5
  • 11