How and Why are Floating Buttons Used on Websites?

How and Why are Floating Buttons Used on Websites?

Have you ever seen those floating buttons, usually hovering off to the side and towards the bottom of a web page, which take you back to the top? Chances are that you have seen them; over the last decade or so, they have become a staple of many websites, particularly mobile versions. If you ask web designers about these buttons, they will invariably tell you that they do not click or tap on these buttons, but they still include them in their projects.

Perhaps web designers and developers are not the right audience to ask about usability of this page scrolling element, but it is certainly interesting to get their opinions. Not surprisingly, most developers swear by the traditional CTRL + Home keyboard shortcut, an old Microsoft Windows feature that virtually all popular web browsers support; the same goes for Linux, and there is a very similar equivalent for macOS. What is surprising, however, is that many designers are not aware of the iOS functionality of tapping on the top-most pixel of the touchscreen to scroll all the way up to the beginning of the web page.

With regard to mobile websites, where these "scroll to the top" buttons are more commonly, there are some reservations because some users tend to accidentally enable the feature with their thumbs or the palms of their hands. Opera Mini takes a smarter approach: When you are scrolling up or down a long page, a ghostly fast-scroll button appears off to the right side. This accidental activation can be minimized by requiring a double tap, but then an explanation would need to be coded as a pop-up label, pro tip, or label.

The problem with these scrolling elements is that they are sometimes coded in a way that makes them intrusive; this often happens with longform text articles, which are good examples for justifying the usability of this feature. On Android devices, at least when using the mobile version of Chrome, there is no handy double-tap shortcut like the one on iOS, so this would justify this feature; nonetheless, a better option would be to code websites with sticky headers. For more information click here

Floating Buttons Web Page Web Designer