1

I sometimes come across websites where some clickable design element is floating on top of a scrollable element. This can be buttons, or banners or whatever. For me, they're always (always!) annoying.

Here's an example where the button covers other buttons. Granted, the area of the screen that is covered is very small, but still.

The button in this case opens a box which only ever contains some variation of "please upgrade your plan and pay us more money".

Is this just a dark design pattern to get users to do something, or is there a case where this is good practice? If there's text behind it, it might as well be a banner that covers the entire screen width, because I cannot read whatever is behind it anyway.

1

It's a specific design pattern, as found in Google Material Design:

Floating Action Button

A floating action button is used for a promoted action.

Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.

...

Not every screen needs a floating action button. A floating action button represents the primary action in an application.

enter image description here

As to whether or not it is useful / annoying; that's probably going to depend on the situation that it's being used in, and the page content itself. Similar things are used for persistent 'Share this page' or 'send us feedback' which can cover up content, and are likely included less for the users benefit and more for the site / marketing purposes, but when used properly they can be beneficial as it will stop the user from having to hunt the page to find the call-to-action, and allows more page real-estate to be used for the actual page content, rather than sticking buttons everwhere.

However, Material Design is primarily a design-led pattern, rather than a User Experience one.

But as with all patterns, make sure the use case is actually valid before applying it.

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.