How to make a side button to top. Floating button - WordPress button plugin. Do we want FAB? Cross out the previous one - do we need it at all?
A floating button is new way add a survey, announcement or any other additional content without adding any changes to your website design. The functionality of all this is implemented in the form of a floating button on your site, and after clicking on the button, an additional modal window with the necessary content. To improve usability, you can use the administration panel, settings and navigation options, as well as some data for recording statistics and conducting analytics.
Plugin wordpress buttons, which is called Floating button will add such a floating button to your site.
The plugin is installed just like any other: go to the “Plugins” section - “Add new”. Then, enter the Floating button into the search bar and install it.
SettingsAfter installation, an additional Floating button tab appears on the right in the management console of your WordPress site:
Click it and start setting up the floating button:
1. Button state - turn on and off the display of the button;
2. Settings source - this setting is responsible for further functionality of the plugin. If you select “Local settings”, 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 plugin developers’ website - it won’t take much time, but the functionality of the WordPress button will expand significantly.
Registration on the developers websiteGo to the page https://admin.probtn.com/login/new and fill in the address Email, name and password and click the “Create” button:
With this registration completed, we move on to further configuration of the plugin, but directly on the site where we just registered.
After registering and logging into the site, we see the following page:
The two buttons below are responsible for creating a floating button, the second for creating a survey that will appear when you click on the floating button.
Let's start with creation, so click "Create Floating Button". First we indicate the name of the button:
Please note that you can select an icon on 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 to display the button. We installed the plugin on the site, so we will select the display option on the domain that we specify:
Let's finish initial setup by clicking the “Submit” button.
Specify the action, then click on the floating button and continue configuring the pluginAfter creation, our button is displayed in the console on the left:
In the TOOL section we indicate the address that will be opened in a pop-up window after clicking the button:
Or we indicate a survey that can be created by clicking on the “Create survey” link:
We save all changes made at every step. A floating button installed on a website might look like this:
And when you click on it, the following pop-up window appears:
There are many options for using this plugin for WordPress: you can create separate page, on which to place an advertisement, survey or any information that cannot be included in the site design. In general, anything!
p.s. If you need help setting up or installing, write your questions in the comments. Help is free!
Material Design is a design language introduced Google year ago, representing the company's bold attempt to create a unified user experience on all devices and platforms. This is marked by bold colors, liberal but principled use of shadows to indicate UI layers, and smooth animation, which provides quite good experience interactions in Android (and some Google apps on iOS).
However, there is one thing about Material Design that has been bugging me since it was introduced last year: the floating action button.
FABs (Floating action buttons), according to Google, are round 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 perform most often on that screen.
And because of Material Design's bold visual style, FAB is pretty hard to ignore—and therein lies the problem. While in practice, in ideal conditions FAB seems to provide good UX - overusing FAB will be detrimental to the overall UX of the application. Here are some reasons for this.
Immersion comes from experience
FABs stand out visually — they are literally on top of any UI element on the screen. Also, adding FAB would automatically result in a less immersive UX, especially affecting apps (or screens) whose purpose is to provide an interactive experience.
One example is Google's new photo app.
The photo app opens as a gallery with a floating search button. But the thing is, when I open a photo app, I just want to... see my photos. Thus, the floating search button distracts the user from immersing themselves in browsing photos, which is the main purpose of the application. Submitted by smart search – unique feature Google app photo. 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 page on FABs, 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 which case the button is not needed.
This may seem like the other side of the coin, but there is something more important property FAB standing in the way of its usefulness. By taking up space on the screen, FAB effectively blocks content.
Well, okay, FAB is just a little round button, right? How much content can it block?
If you look at the photo app's screenshot, you'll realize that the search FAB is blocking about 50 percent of the thumbnail image—certainly enough to obscure a couple of faces. This essentially creates the need for one additional scroll for every fourth thumbnail image. last row on the screen. And that's not the worst part.
FAB blocks the “Favorites” button and the date. User Dumazy posted on the Graphic Design Stack Exchange about an issue he encountered when FAB blocked the "favorites" star as well as the time on his app's screen. This illustrates a problem with all list view apps, and it becomes especially problematic when the last item in the list can't scroll 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 much more space on the screen than its size suggests.
Promoting action is likely not used that often.When designing UX, you need to remember the 80/20 rule, which says that users will use 20% of features 80% of the time. In other words, most of the effort should be put into designing those few elements that users will use most of the time.
FAB actually does this - in theory. But what if Promoting Action isn't used as often?
Take for example Google app Gmail.
The Gmail app's FAB is a compose button that 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 that about email creation. In other words, as our daily experience would confirm, most users mobile devices tend to use their email applications to read emails.
There may be a number of people using mobile devices to respond to emails, but this only happens after the email is opened (note that this means they will bypass the FAB). This user behavior is probably caused by a rather imperfect input mechanism virtual keyboards and auto-replacement means that the main action users perform is reading (and replying) 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 a letter 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? Cross out the previous one - do we need it at all?Of course, not all FAB uses degrade the experience of using Material apps. There are some great examples of FABs that make sense and that improve the UX of these apps.
Google Maps this is a great example of FAB done right. The main action users perform on Maps is getting directions, so it is very appropriate to use FAB for this very purpose.
But keep in mind that the 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 located, marking the position). In most applications, however, a grid or list view means that users interact with content located everywhere on the screen, including where FABs are typically located.
Please also note that the screenshots above only tell part of the story: in actual use, the FABs stay in place even when the user is scrolling (most of the time). As Google has emphasized many times in Material Design, motion design is just as important as UI design.
The absence of movement - the emphasis on screen space - in the context of moving content creates more high level a distraction that screenshots can’t show.
So, since we have almost no examples of good FAB implementations, this begs the question: are they needed?
When we look at the disadvantages of having FABs in applications, we can boil it down to simple understanding: Users not only perform actions in apps, they also consume content.
FAB design in Material Design is based on the premise that users spend most of their time doing specific action, and therefore should be given elevated status in the form of a main, high-level button. But in many apps, users are also focused on consuming content: in a photo app, users want to look at photos; in the application Gmail users want to read their emails; and in Facebook application, users want to read their friends' messages.
FAB is thus a design philosophy (or at least a design choice) that subordinates the optimal consumption of content to the performance of action. And we must ask ourselves: is such a compromise necessary? Do we even want to make such a compromise?
When FABs result in poor UX most of the time, when it's hard to figure out the single most used action within an app, and when you have to find roundabout ways (where the FAB disappears on scroll or overlaps with other elements when swiping), I'd say the answer is no.
Material Google design, a pretty good unified, principled design language, but FAB isn't the best thing about it.
Good day to all. Today we will talk about modal windows, and using their example we will implement the “Order” button back call". You've probably seen such a button on many landing pages; when you click it, a contact form appears with the overall background darkened. This is exactly the functionality we are implementing today.
Usually the “request a call back” button is located on the right top corner. You can experiment with the location, but remember that people are already accustomed to seeing this element there, although this applies more to business and service websites.
Of course, in most cases, modal windows are made using javascript, but today we will try to get by only using css, and we will not load our landing page extra script.
And finally, I’ll say that I didn’t bother with the design of the contact form, I just wanted to convey the essence of how such an effect is implemented, so please don’t push too hard. I’ll just describe the main points, and then you can correct them as you please.
About how to set up contact form You can read these articles:
To ensure that the article does not turn out to be very long, I will provide only the html markup, and you can see the rest by downloading the source.
We will implement this functionality: :)
Once again, this is just a small template that you can then adjust to suit your design. This will all be called by pressing a button.
The first thing to do is to include the style sheet (less) provided in the source. I described it in great detail with comments, take a look and make edits.
HTML structure is very simple. We place this link in the right place on the site. Where you plan to display the “request a call back” button:
Request a call back
Now you need to create a modal window container:
modal window content
Leave your phone number
and our consultant will contact you
I didn’t publish the style sheet, you can download the source here:
And with html markup- All. So it's simple. The advantages of this method are that the modal window can be called several times on the page and that scripts are not used.
As you may have noticed, I wrote that I used less. Look at the structure. I haven’t used even 5% of the preprocessor’s capabilities (only nesting), since I just started learning it, but I plan to use it more often in the future. I wanted to ask you what’s best. Would you mind if the code examples are not in CSS but in less? I have Google chrome and Yandex browser refused to compile less to css without opening the file through Denver or OpenServer. On Mazil and IE - swallowed. So, most likely, I will post regular CSS styles.
And that’s all for today! Bye everyone!
If you don’t want to create such a button yourself, I recommend paying attention to, which allow you to implement this function and have many other additional features.
Hello, dear visitors!
I continue to publish technical articles.
And today I will touch upon interesting topic, in which we will discuss the scroll button to the top of the page on the site. We'll talk about the importance of this button, which is how I like to do it. I will also show you the most interesting and effective implementations of this function.
Is it necessaryI think it’s not worth showing what it looks like on websites, since almost every resource has it. This is a simple button with an up arrow or a word that, when clicked, quickly takes you to the very top area of the site.
This function is an element that, in certain cases, improves the usability of the site. These are the cases in which we will now discuss with you.
The first most important, and maybe the only case when the up button is needed is the presence huge amount content on the page. If the page is long, then it is quite difficult to scroll to the very top.
You either have to use the scroll bar, which few people use. At least I don’t use it at all, since it’s an extra mouse movement and not very convenient. Or you have to spin the video on the mouse, which takes a very long time and becomes annoying over time.
Therefore, if your site has really large articles, then you can install a button, but you need to make it so that it is easy to click on it and it is easier to do this than spinning a video or using the scroll bar in the browser. Otherwise, what good will it be if it is equivalent to standard actions?
Based on this, there are the most common and most effective scroll up buttons that really work effectively. One such option is the up button, as in social network In contact with. We move on to implementing this method.
Up button like VKontakteA distinctive feature of this button is its ease of use. It looks like a scroll bar on the left side of the site, which occupies the entire height of the resource.
This option has already proven itself, since there are practically no users who do not use it on social media. VKontakte network. Convenient this implementation because you don’t have to aim the mouse cursor at any button. Simply click on the left area of the site and the page will scroll to the very top. There is no need to even watch the cursor; you can simply move the mouse to the very edge of the screen and click once.
It will not be possible to make the exact same implementation as VKontakte, but an approximate version is easy.
To implement it, you just need to place the script on the site.
To load the script, you can place the code itself between tags or before the closing tag in the footer.php file. Or you can simply upload a file with a script to your hosting, and then simply upload the file on the site.
If you want to place the script and not have to worry about loading it, then I’ll give you the script code itself.
JavaScript
$(document).ready(function() ( $("body").append("^ Back to Top"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click(function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this).animate (( "opacity":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")), function())( $(this).animate (( "opacity":"0.7" )).css(("background":"none","color":"#45688E"); ));
$(document). ready(function()( $("body"). append("^Back to Top"); $(window). scroll(function()( if ($(this).scrollTop() > 300)( $(".button-up"). fadeIn(); ) else ( $(".button-up"). fadeOut(); } ) ; $(".button-up"). click(function()( $("body,html") . animate (( scrollTop: 0 } , 100 ) ; return false ; } ) ; $(".button-up"). hover(function()( $(this). animate (( "opacity" : "1" , ) ) . css (( "background-color" : "#E1E7ED" , "color" : "#45688E" ) ) ; ) , function () ( $(this). animate (( "opacity" : "0.7" ) ) . css (( "background" : "none" , "color" : "#45688E" ) ) ; ; } ) ; } ) ;
|
In this code, you can change some parameters to suit your needs.
- Line 4 is responsible for displaying the page scrolling area itself. It contains the basic styles for displaying the button. in principle, these parameters should suit almost everyone. But you may need to edit them to suit yourself;
- In line 7 in brackets there is a number 300, which is responsible for the moment the button appears. That is, the button will appear only after scrolling 300 pixels down. I recommend choosing a value here so that scrolling is possible only when the main site menu or some other important elements in the navigation disappear from view;
- In line 17, the value 100 is the scroll speed. The lower the value, the faster the return to the top of the page.
This code can be placed between tags at the top of the site. If the site is on WordPress then this area is located in the header.php template file. You can also place it before the closing tag at the very bottom of the site (footer.php file). I recommend the last option, as it will speed up the loading of the site. It will look like this.
Even more effective option is loading this script from separate file. You can download the file using the button below. It is located inside the archive.
Then upload this file to your hosting. You can upload it to the theme folder, or to the root of the site. I, according to tradition, do this in the template folder. Then you should write the code that will load this file in the same place. To do this, use the following line.
JavaScript
|
In it you will need to replace the full path to the file with yours in the second line. Then paste this code in the same area before the closing tag as shown below.
After editing the file, if we did it on a computer, we upload it to the hosting with replacement source file. After this, a simple up button on your site will work.
To edit parameters in this file, you will need to open it using the Notepad editor.
This option very good for its simplicity, both in operation and in installation on the site. A more advanced option is when, in addition to scrolling up, you have the opportunity to return to the place from which you scrolled. This is exactly the option implemented in social media. VKontakte network. How to do it, see below.
The second way to button up from VKontakteBy this method I recorded a detailed video tutorial.
This option is now on my blog. I have not yet been able to analyze its usefulness. But, if it is on one of the giants of the Runet, then we can safely assume that it is of some use. Of course, on such a scale it’s a no brainer. But on a small resource, you can think carefully before installing it. But I look at the future, that’s why I made this decision.
The implementation of the second method is a little more complicated, but the process should already be familiar to you if others have done it technical points on your resource.
Consists of 3 stages:
First, we need to place a script that will make scrolling smooth and color change smoothly when hovering, both the area itself and the color of the owl “To Top”, depending on the distance the page is scrolled down.
You can go in 2 ways, as in the first case. Either place the script itself in the desired area (see point above) or download the script via a file. Next, we will do everything through the second method so that it is effective.
Download the script file using the button below.
Place the file on the hosting and upload the file through the code at the very bottom of the site, as you did before. The file is named exactly the same as in method 1, so you can take the same line of code for output.
⇓ Back ⇑ Up
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" >⇓Back< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" >⇑Top< / span > < / span > < / a > |
You can place it at the very bottom of the site, before the closing tag in the footer.php file.
Then we write the design styles in our style file (style.css) and upload all the changed files to the hosting. Here are the styles themselves.
/* description of the container */.leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; ) /* description of the “Top” button */.left-controlbar ( height : 100%; display: block; text-decoration: none; ) /* description of the “Back” button */#scroll-back ( display: block; height: 100%; top: 0; display: none; text-align: center; ) /* column description background color for both buttons */.active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* set the transparency of the background color when hovering over the active area of the page */.leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* make the backlight a little brighter when hovering over the inscription */.leftbar-wrap .active-area:hover ( ) /* center the inscription at the buttons * /.bar-desc-niz ( top: 26% !important; position: relative; display: inline-block; ) .bar-desc-top ( top: 10% !important; position: relative; display: inline-block; )
/* container description */ Leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; /* description of the “Up” button */ Left-controlbar( height: 100%; display: block; text-decoration: none; /* description of the “Back” button */ #scroll-back ( display: block; height: 100%; top: 0; display: none; text-align: center; /* Description of the background color column for both buttons */ Active-area ( width: 100px; height: 100%; display: block; text-align: center; /* set the transparency of the background color when hovering over the active area of the page */ Leftbar-wrap:hover.active-area ( background : #E1E7ED !important ; opacity: 0.7 !important; /* make the highlight a little brighter when hovering over the inscription */ Leftbar-wrap .active-area:hover ( /* center the label on the buttons */ Bar-desc-niz ( top : 26% !important ; position: relative; display: inline-block; Bar-desc-top ( top : 10% !important ; position: relative; display: inline-block; |
Depending on the design and structure of your resource, you will need to slightly change some parameters in these styles. For example, in lines 47 and 53, change the indentation parameter for the words “Back” and “Top” from the very top of the page, respectively
After editing all the files, we can safely upload them to the hosting and this method will work. You can see its implementation on my blog. Do it for your health.
We move on to next method. This option will already contain simple button in the lower right area of the screen, clicking on it will move to the top of the page.
The third method for a back to top button without a pluginThe button implementation is also very simple and works 100% on a WordPress site. I can’t say about the HTML site or another engine. Test it.
You need to copy the following code with the script to the very bottom of the site before the closing tag /
JavaScript
$(document).ready(function())( $("#back-top").hide(); $(function () ( $(window).scroll(function () ( if ($(this).scrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )); ).click(function () ( $("body,html").animate(( scrollTop: 0 ), 400); return false; ));< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
By now it has become a revelation for those who work with applications on Android platform and also designs user interfaces. It was introduced by Google a few years ago. Purpose material design was the creation visual language, which would unite the principles classic design with innovation.
The idea seems very promising and promising. Material design is the latest attempt to make user experience (UX) comfortable and efficient at the same time. Google have done a fantastic job in this area: they use minimum set design elements, use unique components, bright colors, animation and create a user-friendly environment.
At the same time, designers practice the so-called floating action button (FAB). It is a round button appearance which is well known Android users. It is another distinctive element of material design. FAB appears on top of the application interface and motivates users to take a specific targeted action.
Essentially, FAB is because its purpose is to convince a person to do something (such as download or upload certain content). A 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?FAB represent reasonable approach, which allows you to motivate the user to take action, because they are difficult not to notice. However, they can be the wrong solution for user experience design as a whole. Below are a few reasons why floating action buttons can have a negative impact on UX.
FABs can interfere with usersAs mentioned above, floating target action buttons are usually placed in the bottom right corner of the screen. In most cases, they are located on top of the application content, covering some part of it.
Of course, FABs are really small in size, so they only hide a small part of the content from the user's eyes. However, take a look at the application Google Photos(screenshots below) where the floating target action button covers a significant part 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 hidden part photographs visible.
It is very important to recognize the fact that a floating target action button, despite its small size, can hide some part of the application’s content from the human eye. This can have negative consequences on the user experience.
Their design prevents complete immersionFloating target action buttons stand out noticeably against the general background. In many cases this creates obstacles to implementation the most important characteristic user experience - total immersion into the atmosphere of the application.
The example again is Google's Photos app. When a person opens it, he is taken to the user's gallery where he can simply view photos. In this situation, the search function provided by FAB may be useful, but it is not a priority.
The floating target button distracts him from his engrossed viewing of photos by taking up space on the screen and blocking some parts of the images. In such cases, the button should not stand out so much.
They may be uselessAs Google experts themselves explain, a floating button encourages 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 make necessary and frequently used elements visible, and rarely used elements almost invisible. However, as we see in the example Gmail apps(screenshot above), the developers did not take this rule into account.
On the application screen we see a button, by clicking on which the user can quickly proceed to writing email. However, according to recent surveys, about half of users only view email using mobile devices. In other words, they don't often write letters using smartphones or tablets.
