Philosophy of the process of visual perception of design objects. Visual perception of the world

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.

The customer did not want to connect such functionality. He just needed a button, after clicking on which, a modal window with an order form would appear. Callback buttons are a very useful thing. Thanks to them, a person can order a call to himself without spending his money, which is important for our person :). In fact, such a button can be made both for returning to the top of the page and for the help button, etc. The main element here will be - animation, pulsating effect.

09/09/2016 A new button has been added, the ripple effect did not work on the old one in the new Chrome.

Installing an animated button on your site is very easy. All animation is done with css, without connecting additional scripts and plugins. Although there is a lot of code, everything is quite simple.

DEAR MASTER! Have a conscience, if you use this button, then at least upload the picture of the handset to your hosting, and do not stupidly copy the link to my site. I will glorify such craftsmen and their sites on the entire Internet 🙂

First you need to add HTML markup. We will have a regular link. IN right place on your site, in the header or footer, we insert such a line.

The button is designed to connect a modal window from another article. If you connect third-party links, then the button itself has an event in its HTML code

onclick="return false"

Now you need to add the styles themselves to the style file css.

#popup__toggle(bottom:25px;right:10px;position:fixed;z-index:999;) .img-circle(background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content -box;) .circlephone(box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px; position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in -out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle- anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition : all .5s; transition: all 0.5s;) .circle-fill(box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px ;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation : circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in -out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz- transition: all .5s;-o-transition: all .5s;transition: all 0.5s;) .img-circle(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px; height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity : .7;) .img-circleblock(box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png); background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration -count: infinite;-webkit-animation-iteration-count: infinite;) .img-circle:hover(opacity: 1;) @keyframes pulse (0% (transform: scale(0.9);opacity: 1;) 50% (transform: scale(1); opacity: 1 ) 100% (transform: scale(0.9);opacity: 1;)) @-webkit-keyframes pulse (0% (-webkit-transform: scale(0.95);opacity: 1;) 50% (-webkit-transform: scale(1);opacity: 1;) 100% (-webkit-transform: scale(0.95);opacity: 1;)) @keyframes tossing ( 0% (transform: rotate(-8deg);) 50% (transform: rotate(8deg);) 100% (transform: rotate(-8deg);)) @-webkit-keyframes tossing ( 0% (-webkit-transform: rotate(-8deg);) 50% (-webkit-transform: rotate (8deg);) 100% (-webkit-transform: rotate(-8deg);)) @-moz-keyframes circle-anim ( 0% (-moz-transform: rotate(0deg) scale(0. 5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;) 30% (-moz-transform: rotate(0deg) scale (0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;) 100% (-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;)) @-webkit-keyframes circle-anim ( 0 % (-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;) 30% (-webkit-transform: rotate(0deg) scale(0.7) skew(1deg); -webkit-opacity: .5;) 100% (-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;)) @-o-keyframes circle-anim ( 0 % (-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;) 30% (-o-transform: rotate(0deg) scale(0.7) skew(1deg); -o-opacity: .5;) 100% (-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;)) @keyframes circle-anim ( 0% (transform : rotate(0deg) scale(0.5) skew(1deg);opacity: .1;) 30% (transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;) 100% (transform: rotate (0deg) scale(1) skew(1deg); opacity: .1;)) @-moz-keyframes circle-fill-anim ( 0% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;) 50% (-moz -transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;) 100% (-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2 ;)) @-webkit-keyframes circle-fill-anim ( 0% (-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; ) 50% (-webkit-transform: rotate (0deg) scale(1) skew(1deg);opacity: .2; ) 100% (-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;)) @-o- keyframes circle-fill-anim ( 0% (-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;) 50% (-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;) 100% (-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;)) @keyframes circle-fill-anim ( 0% ( transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;) 50% (transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;) 100% (transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;))

The first 7 lines are responsible for the appearance of the button, then the animation. In the first line, you can set the location of the button, and in the sixth line, specify the path to the image in the parameter background-image:url(mini.png).

That's all you need to install such a button. If you understand CSS, you can customize the button and, if necessary, completely change it to fit your needs and style of the site.

To bind a modal window to this button, the article will help you -. If you do everything according to the instructions, you will not have problems.

That's all, thanks for your attention. 🙂

P.S.
I decided to create a plugin that will help you get the desired result without any problems. You can go and see:

Buttons social networks or onLine consultations today are found in almost every Internet project. Some of them are placed directly in the body of the page, while others remain always in the user's mind, regardless of scrolling. It is these buttons, the block we will try to create in this material on pure CSS

In order for the button, block (hereinafter simply the button) not to change its position regardless of the scrolling of the page - as if floating through the materials of the site, it needs to set a position ( position) and place it on top of all elements. But before we go directly to CSS styles, let's create an object for our experiments. Let it be a certain picture (picture), which is the starting point for some kind of action

<a class=”start” href=”#” ><img src="picture">a >

The html code has been compiled, now let's try to make it float.

And so, we already know that fixed positioning allows the element to maintain its position when scrolling the page, and in order for it to always be in the foreground, you need to set a large numerical value to the parameter z-index. We do this for our button:

.start( position :fixed ; z-index : 99999 ; } .start( left : 0 : position:fixed; top : 200px; z-index : 99999 ; }

If we need to place the button on the right, then instead of left we need to set right, namely:

.start( position :fixed ; right : 0 ; top : 200px; z-index : 99999 ; }

If our button needs to be placed at the bottom of the browser window, then we replace top with bottom.
This was for a button, but what if we are faced with the task of placing not a button, but a whole block with text or a whole set of buttons. This task is solved in a similar way, only the above styles need to be set to the block:

<div class="block_start"> Block contentdiv >

css

.block_start( background : #382d25; border : 1 px solid #382d25; border-radius : 6px; box-shadow : 0px 0px 8px #382d25; font-size : 14px; padding: 5px5px0; position : fixed ; right : 25px; text-align : center ; top : 25px; width : 96px; z-index : 99999 ; }

Let's comment on the properties of the parameters. The position of the block was specified using position: fixed; z-index: 99999; and placed it on the top right - right: 25px; top:25px. The block width (width) is 96 pixels. Its design is set by the parameters - background, border, border-radius, box-shadow. And finally, in order for our text inside the block to be placed in the middle and have margins, be the same size, we wrote font-size: 14px; padding: 5px 5px 0 text-align: center.

Theory is good, you thought, but how to implement it into reality? For example, let's say we have two sites - one CMS Joomla, the other - WordPress. Well, let's install for Joomla

Installation on CMS Joomla

the html code of the button must be placed in the site template - this is the index.php file, which is located here - your_site / templates / theme / I most often set the code itself immediately before the tag

, but you can place it where you see fit, as long as it is between the tags …

.
Now let's move on to styles. We copy them and place them in the template settings file - as a rule, these are the layot.css, template.css or general.css files of the CSS or styles folder

Installation on CMS WordPress

In the site control panel, on the right, we are looking for the section “ Appearance”, then ”Editor” and open the footer.php file and add our button html code.
The button design style, in the same way, is placed in the template design file - the style.css file which is located wp-content/themes/your_theme/style.css or through the admin panel, in the “Appearance”->”Editor” section, the file style.css

And finally, let's make our button become "Up" and disappear when the scrollbar is at the very top.

“Up Button” / “Up Button” for a website

In order to move us to the top when we click on our button, we need to add a java script to the html code

<a href="#" id="toTop" ><img src =http: //our_site/images /up1.png border ="0" align ="absmiddle" />a > <script src= "/your_site/js/toTop.js" type="text/javascript" >script> <script type="text/javascript" > $(function()($("#toTop" ).scrollToTop(); ));script>

To avoid confusion, I specifically changed the class to id="toTop". The contents of the toTop.js file are as follows

$(function()($.fn.scrollToTop=function()($(this).hide().removeAttr("href");if($(window).scrollTop()!="0″)($ (this).fadeIn("slow"))var scrollDiv=$(this);$(window).scroll(function()(if($(window).scrollTop()=="0″)($(scrollDiv ).fadeOut("slow"))else($(scrollDiv).fadeIn("slow"))));$(this).click(function()($("html, body").animate((scrollTop :0),"slow"))))));

This script hides our button when we are at the top of the site and brings it up as soon as we push the scrollbar down. He is also responsible for the speed of scrolling the page.
Attention! On some sites, this button may not work, but simply add the # symbol to the link in the browser window. In this case, you need to include jQuery. You can do this with the following line

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> script>

Now let's deal with styles. Since this is the “up” button, we place it at the bottom of the window, on the right - bottom and right.

#totop( background : none bottom : 20px; cursor : pointer ; position : fixed ; right : 2px; }

Well, that's all for sure! I hope you now know what and how to do in order to set sail your "boat".

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!

Let's say we need a booklet about castles in Germany. The information for one page of the booklet was prepared in Word and looks like this:

Elements on the page can be grouped differently: a heading, two subheadings, two blocks of text, two pictures:

This grouping is based on one of the principles visual perception — similarity principle: Elements with the same shape, size, shape, or color are treated as related.

Similarity similarity, but the meaning is lost. This is a sin of many novice designers who, when arranging layouts, create beautiful, but meaningless solutions in their own way.

Create a booklet page

Instead of placing photos and texts on the page in a natural way, the designer decided to be original:

Hm. Somehow it usually worked out.

Maybe so? No, it's not, it's boring.

Oh, I figured it out!

On the first two “normal and boring” layouts, images and text are unambiguously correlated, there is no ambiguity. Let's take a look at the "original design solution" now. The description of Neuschwanstein Castle is in its rightful place under the photo, but Linderhof was unlucky - the text is located above the image. Our designer naively believes that this knowledge will automatically appear in the head of a person looking through the booklet. Naturally, this is not so.

Try to answer the question: which of the descriptions corresponds to the top left photo? To the right of it or below? “The top photo is Linderhof!” - say the vast majority of readers. Their answer will be determined by our habitual eye movement, although it is, in essence, erroneous.

Show or hide eye movement.

The designer misled us by creating a meaningless design. It turns out that the original design can not be done? Should everyone be the same? Of course not. Create interesting design possible and necessary, but not to the detriment of meaning. Let's see, without which it is impossible to create an interesting and meaningful design.

Principles of visual perception

First of all, I would like to draw attention to the fact that our initial composition is integral and further manipulations should not violate this integrity.

For starters apply closeness principle- objects located closer friend to a friend, are perceived together. Let's bring the photos together with the corresponding descriptions and move the left and right halves of the layout apart to enhance the effect.

It immediately became clear what was related to what, however, the integrity was violated, the composition fell apart into two separate columns.

Let's try differently. Let's draw vertical line, which will divide the page plane into two separate regions. In doing so, we use common area principle- elements that are in the same area are perceived together.

The line leaves no other option than to correlate the image and text that are on the same side. However, it again spoils the integrity, it looks foreign. Is it possible to do without it? Yes.

The common zone can be set as a background. Let's remove the line and create a color background in the right half of the layout. This is a visual demonstration connection principle- Graphically connected (for example, lines or dice) elements are perceived as related.

In this case, Linderhof will be highlighted, which again violates the integrity.

Still relying on connection principle, draw pointer arrows.

To strengthen the connection, we use the previously described similarity principle according to the visual "mass" between the subheadings (names of locks) and arrows - let's turn the latter into triangles. In addition to the fact that they themselves act as pointers, the void between the photo and the description is filled and additionally works for us closeness principle.

Notice how two seemingly insignificant "spots" with the right shape and located in the right place change the meaning.

Dies, lines, color, mutual arrangement of individual elements are not just graphic techniques. When used correctly, they convey the desired meaning, and, conversely, their inept use can lead to the creation of a very beautiful, but absolutely meaningless work. The next time you create or evaluate a design, keep this in mind.

Separation of objects

Until the last paragraph, the discussion was about communication, the unification of objects. And if you want to separate objects from each other? Obviously, they need to be made different in shape, size, color, location. Let's see how this is implemented in practice using the example of a teaser for this article.

Teaser (Wikipedia) - an advertising message that contains some information about the product, but the product itself is not shown.

What do you see first? The words "heat" and "loft". Please note that neither the background nor the letters of different colors can interfere with our usual eye movement from left to right and from top to bottom. Only then do we see the words "sting" and "raft" on multi-colored plates. opposite color letters are used here to enhance the separation effect.