Material Design is a design language introduced by google year back, which is the company's bold attempt at creating a unified user experience across all devices and platforms. This is marked by bold colors, a liberal but principled use of shadows to indicate UI levels, and smooth animations that provide quite good experience interactions on Android (and some Google apps on iOS).
However, one thing about Material Design has been bugging me since it was introduced last year: the floating action button.
FABs (Floating action buttons), according to Google, are circular buttons that float above the UI and are "used to promote action." They act as call-to-action buttons designed to perform the action that users take on this screen most often.
And because of Material Design's bold visual style, FAB is pretty hard to ignore - and therein lies the problem. While in practice, under ideal conditions, FAB seems to provide good UX, overuse of FAB will be detrimental to the UX of the application as a whole. Here are a few reasons.
The effect of immersion comes from experience
FABs stand out visually - they are literally on top of any UI element on the screen. Also, the addition of FAB would automatically result in a less immersive UX, especially affecting applications (or screens) whose purpose is to provide an interactive effect.
One example is the new photo app from Google.
The photo app opens as a gallery with a floating search button. But the thing is, when I open the photo app, I just want to… see my photos. Thus, the floating search button distracts the user from immersive viewing of photos, which is the main purpose of the application. Introduced, smart search is a unique feature of the Google photo app. But does this mean that he needs to be given the highest level, permanent FAB in the application? (I think no.)
Oddly enough, Google agrees with me. On the Material Design FABs page, Google explains that "not every screen needs a floating command button."
And then he adds that “the main action is to touch the image in the gallery, in this case the button is not needed.
They stand out and stand in the way.
This may seem like the other side of the coin, but there is another, more important property FAB standing in the way of its usefulness. Taking up screen space FAB actually blocks content.
Oh well, FAB is just a little round button, right? How much content can she block?
If you look at the screenshot of the photo app, you'll realize that FAB search engines block about 50 percent of the thumbnail image - certainly enough to cover a couple of faces. This essentially creates the need for one extra scroll for every fourth thumbnail. last row on the screen. And this is not the worst.
FAB blocks the "Favorites" button and the date. User Dumazy posted a post on the Graphic Design Stack Exchange about an issue he encountered when FAB blocked the "favorites" star as well as his app's screen time. This illustrates the problem with all list view applications, and it becomes especially problematic when the last item in the list cannot scroll any further up. This means that an entire column must be sacrificed (changing the location of the asterisk, etc.) to provide proper screen usability.
Consequently, FAB takes up much more screen real estate than its size suggests.
Promoting action is probably not used that often.
When designing UX, remember the 80/20 rule, which says that users will use 20% of the features 80% of the time. In other words, most of the effort should be put into designing the few elements that users will use. most time.
FAB actually does this - in theory. But what if "Promoting Action" isn't used that often?
Take for example google app gmail.
The app's FAB Gmail is a compose button, which assumes that users' primary action is to compose an email.
But is it?
Multiple studies have shown that at least 50% of emails are read on a mobile device, and almost none say the same about email creation. In other words, as our daily experience would confirm, most mobile device users tend to use their email apps to read emails.
There may be a number of people using mobile devices to reply to emails, but this only happens after the email is opened (note that this means they will bypass FAB). This behavior of users, probably caused by a rather imperfect input mechanism virtual keyboards and auto-replace, meaning that the main action users take is reading (and replying to) emails, not creating new ones.
So what does the FAB "compose email" button do? On rare occasions, it gives pleasure to users when they want to create an email using this application. But the rest of the time, it only takes up space on the screen, blocks the "star" and time, and constantly distracts with a bright red color.
Do we want FAB? Delete the previous one - do we need it at all?
Of course, not all FAB applications detract from the experience of using Material Applications. There are some bright examples FABs that make sense and improve the UX of those apps.
Google Maps this is a great example of a properly applied FAB. The main action users take on Maps is to get directions, so it's a good idea to use FAB for that very purpose.
But keep in mind that Maps are quite a special case, when content users are almost always interested in getting to the center of the screen (where your blue dot is, marking the position). In most applications, however, a grid or list view means that users interact with content located anywhere on the screen, including where FABs would normally be located.
Note also that the screenshots above only tell part of the story: in actual use, FABs stay in place even when the user scrolls (most of the time). As Google has repeatedly emphasized in Material Design, motion design is just as important as UI design.
The lack of movement—emphasis on screen space—in the context of moving content creates more high level distraction, which screenshots can not show in any way.
So, since we have almost no examples of a good FAB implementation, the question arises: are they needed?
When we look at the disadvantages of having FABs in applications, we can boil it down to a simple understanding: users not only perform actions in applications, they also consume content.
The FAB design in Material Design is based on the premise that users perform a certain action most of the time, and therefore should be given elevated status in the form of a top-level button. But in many apps, users also focus on consuming content: in the photo app, users want to view photos; in the Gmail app, users want to read their emails; and in the Facebook app, users want to read their friends' messages.
FAB is thus a design philosophy (or at least design choice) that subordinates optimal consumption of content to action. And we must ask ourselves: is such a compromise necessary? Do we even want to make such a compromise?
When FABs lead to poor UX most of the time, when it's hard to figure out the single most used action within an application, and when you have to find detours (when FAB disappears on scroll or overlaps other elements on swipe) I would say the answer is no.
Google's Material Design is a pretty good unified, principled design language, but FAB isn't the best at it.
By now, it has become a discovery for those who work with applications on the Android platform, and also design user interfaces. He was introduced Google some years ago. The goal of material design was to create a visual language that would combine the principles of classical design with innovation.
The idea seems very promising and promising. Material design is latest attempt make user experience (UX) comfortable and effective at the same time. Google have done fantastic work in this area: they use a minimal set of design elements, apply unique components, bright colors, animation and create a user-friendly environment.
Along with this, designers practice the so-called floating action button (FAB). It is a round button appearance which is well known to Android users. It is another distinctive material design element. FAB appears on top of the application interface and motivates users to take a certain targeted action.
In fact, FAB is, since its purpose is to convince a person to do something (for example, download or upload certain content). The floating target action button is usually placed in the right corner of the screen. It is very difficult not to notice, as it has a bright and attractive design. FAB motivates the user to perform the most popular actions in the application. However, there are some problems when using these buttons.
What's wrong with floating target action buttons?
FABs are a smart approach to motivate the user to take action, because they are hard to miss. However, they can be the wrong solution for user experience design in general. Below are a few reasons why floating action buttons can have a negative impact on UX.
FABs can interfere with users
As mentioned above, floating target action buttons are usually placed in the lower right corner of the screen. In most cases, they are placed on top of the application content, overlapping some part of it.
Of course, FAB sizes are really small, so they hide only a small part of the content from the user's eyes. However, take a look at the Google Photos app (screenshots below), where the floating target action button covers a significant portion of the photo.
To see what is hidden under the button, the user will have to scroll down the page. But what if it's already at the very bottom of the page? Then scrolling will be impossible, and the user will have to add some content to make the hidden part of the photo visible.
It's important to recognize that a floating target action button, despite its small size, can hide some of the application's content from human eyes. It may have Negative consequences for user experience.
Their design prevents total immersion
Floating target action buttons stand out noticeably against the general background. In many cases, this creates obstacles to the implementation the most important characteristic user experience - total immersion into the atmosphere of the application.
Again, Google's Photos app serves as an example. When a person opens it, he enters the user's gallery, where he can simply view the photos. In this situation, the search function, which is represented by FAB, may be useful, but it is not a priority.
The floating target action button distracts him from his intense photo viewing by taking up screen space and blocking out some parts of the images. In such cases, the button should not stand out so much.
They may be useless
As Google experts themselves explain, a floating button prompts the user to take a targeted action. However, developers sometimes forget how often a person performs this action while using the application.
The golden rule of user experience design is to keep important and frequently used elements visible and infrequently used elements almost invisible. However, as we can see in the example Gmail app (screenshot above), the developers didn't take this rule into account.
On the application screen, we see a button, by clicking on which, the user can quickly go to writing email. However, according to recent surveys, about half of users only view mail using mobile devices. In other words, they don't often write letters using smartphones or tablets.
The floating button is new way add a survey, announcement or some other additional content without adding any changes to your website design. The functionality of all this is implemented as a floating button on your site, and after clicking on the button, an additional modal window will open with the necessary content. To improve usability, you can use the administration panel, settings and navigation options, as well as some data for statistics and analytics.
The wordpress button plugin called Floating button will add such a floating button to your site.
Plugin Installation
The plugin is installed in the same way as any other: go to the "Plugins" - "Add New" section. Then, in the search bar, we drive in the Floating button and install it.
Setting
After installation, an additional tab Floating button appears on the right in the management console of your site on WordPress:
Click it and start configuring the floating button:
1. Button state - turn on and off the display of the button;
2. Settings source - this setting is responsible for the further functionality of the plugin. If you select "Local settings", then the functionality will be very limited, so it is recommended to select the second option "Settings from probtn.com";
3. Now you need to register on the site of the plugin developers - this will not take much time, but the functionality of the wordpress button will expand significantly.
Registration on the developer site
Go to the page https://admin.probtn.com/login/new and fill in the address Email, name and password and click the "Create" button:
This completes the registration, we proceed to further settings of the plugin, but already directly on the site on which we have just registered.
After registering and entering the site, we see the following page:
The two buttons at the bottom are responsible for creating a floating button, the second for creating a poll that will appear when you click on the floating button.
Let's start with the creation, so click "Create Floating Button". First, we specify the name of the button:
Note that you can select an icon from your computer or provide a link to an image. For beauty, it is recommended to use a picture with transparent background small size.
At the next stage, we select the platform for displaying the button. We installed the plugin on the site, so we will choose the display option on the domain, which we will specify:
We complete the initial setup by pressing the "Submit" button.
Specify the action after clicking on the floating button and continue setting up the plugin
After creation, our button is displayed in the console on the left:
In the TOOL section, specify the address that will be opened in a pop-up window after clicking on the button:
Or we specify a survey that can be created by clicking on the "Create survey" link:
We save all the changes made at each step. A floating button installed on the site might look like this:
And when you click on it, the following pop-up window appears:
There are many options for using this WordPress plugin: you can create a separate page on which to place an advertisement, a survey, or any information that cannot be fit into the site design. In general, anything!
ps if you need help setting up or installing, write your questions in the comments. Help is free!
