— легкий, элегантный, динамичный, быстрый и эффективный помощник, направленный на поддержку основной навигации и привлечение пользователей. Будучи всего лишь небольшим круглым элементом, который перемещается вместе с пользователем, независимо парящим над всей дизайн-конструкцией и, как правило, придерживающимся правой стороны, он способен расширить функциональность каждого экрана, а также сделать программу удобнее.

Как предполагают спецификации Google, кнопка должна нести конструктивный тонус и обеспечивать быстрый доступ к важным инструментам. Этот элемент должен быть простым и радовать глаз, содержать интуитивную и понятную графику, живой и яркий дизайн, но при этом избегать деструктивных функций. Мы собрали небольшую коллекцию свежих мобильных концепций пользовательского интерфейса, которые освоили эту новую тенденцию.

Редизайн Instagram Material

Этот дизайн содержит небольшую круглую кнопку с тонкой тенью, окрашенную в соответствующем темно-синем тоне. Она обеспечивает быстрый доступ к фотографиям, а также предоставляет владельцам дополнительный функционал. Сопровождает большинство экранов.

Android & Wear App Ecosystem

Дизайнер Стефан Кастро использует круглую плавающую кнопку, которая благодаря красному тону резко контрастирует с содержанием. Она открывает пять крошечных иконок с подсказками, также имеющих яркую расцветку, располагающихся снизу вверх.

Magnet.me

Здесь используется тот же прием, что и в предыдущем примере. Во-первых, это просто обычная круглая кнопка, прилипающая к нижней части страницы. Когда пользователь нажимает ее, она плавно раскрывает три другие иконки, размещаются вертикально друг за другом.

Coloring UI

Дизайнер Лоис Ян демонстрирует отличную работу по выбору цветовой палитры для данного элемента. Интерфейс сайта довольно тяжелый по содержанию. Яркий сплошной красный фон в сочетании с тонкими тенями отделяет иконку от потока информации, ненавязчиво привлекая внимание.

Drooling by Henrique Ferreira

Здесь плавающая кнопка подкрепляется наложенным элегантным полупрозрачным экраном. Экран необходим для привлечения внимания к иконкам и заголовкам, так как основа приложения заполнена большими сочными изображениями. Крошечное отклонение от траектории добавляет в дизайн изюминку.

Плавающие кнопки Add Media

Кнопка действия O-образной формы присутствует на нижней части страницы и включает в себя четыре CTA, расположенных по кругу. Из-за этого они быстро доступны. Каждая иконка имеет относительно огромный размер, яркий цвет, и острый вразумительный символ.

Daily UI 010

Здесь кнопка связана с большой боковой панелью, которая вытекает из правой стороны и слегка смещает содержание влево. Связанная с социальными медиа, она включает в себя все популярные порталы: Pinterest, Twitter, Facebook, Google и др.

Приложение Алекса Рябушко

Кнопка действия и ее СТА сконструированы в отличном плоском стиле и в одном цвете. Однако hover-статус в жизнерадостном оранжевом цвете по умолчанию меняется на синий. Огромные глифы внутри кругов интуитивно понятны и легко читаются. Элемент предлагает пользователям визуальные подсказки для быстрого достижения целей.

Material design app PSD template (от Даниэля Де Сантиса)

UI создан в лучших традициях современных спецификаций Google. Классическая плавающая кнопка вызывает большую панель, которая занимает почти весь экран и охватывает действия, необходимые для работы в разделе «Входящие».

Mobile UI (от Smiley)

Художник демонстрирует многочисленные функциональные экранные концепции. Как видите, почти каждая страница имеет свою кнопку действия. Последняя вызывает небольшую, но достаточно высокую панель, которая находится слева и занимает около пятнадцати процентов пространства.

Плавающая кнопка действия от Тайлера Берри

Этот вариант отличается от большей части примеров, перечисленных в нашей коллекции. Он не только имеют сочный колорит и прекрасный тени, но и раскрывают иконки в линию в верхней части интерфейса.

Плавающие кнопки действий от Giulio «bart172» Smedile

Хотя большинство кнопок в этом дизайне похожи на другие такие же, они подключены к клавиатуре стерлингов. Автор получает максимальную отдачу от этого крошечного плавающего помощника. Он также обеспечивает плавный переходный эффект между двумя состояниями.

UX Exploration

В этом дизайне плавающая кнопка демонстрирует набор СТА, расположенных в ряд. Это занимает всю нижнюю часть экрана. Двухцветная окраска, твердые монохромные полотна, отточенные с пиксельной точностью глифы и тени создают классную эстетику.

Пользовательский интерфейс для большого пальца (от Йохема ван дер Вира)

Концепция этого дизайна – использование плавающей кнопки действий, похожей на большинство. Она придерживается правой стороны, имеет простой вид и сразу бросается в глаза. В некоторых случаях, кнопка идет рука об руку с миниатюрной версией логотипа.

Floating Magic Button

Эти плавающие кнопки минималистские в отношении функциональности. Они используются только для предоставления пользователям быстрого доступа к рабочему пространству, где можно создавать свои книги. Дизайн соответствует стандартам и отвечает настроению приложения.

theScore Android

Здесь кнопка с СТА выглядит элегантно, сложно и утонченно. Линейный стиль в паре с красивой двухцветной гаммой, где синий преобладает, создает выдающуюся эстетику, а также преобразует действия в точки фокуса.

FAB for User Engagement

Разработчик использует кнопку действия, дизайн которой мягко перекликается с верхней панелью навигации. Она направлена на то, чтобы заинтересовать пользователей и помочь им чувствовать себя комфортно в рамках всего проекта. Кнопка перекликается со всплывающим окном в правом нижнем углу и захватывает весь экран.

Alternacare

Автор данного дизайн скрывает под плавающей кнопкой действия фильтры, позволяющие пользователям разобраться в избыточной информации и достигнуть цели в течение нескольких секунд. Благодаря смелому виду и яркому цвету, кнопка не сочетается с содержанием и сразу бросается в глаза.

Swipii App

Концепция Swipii App основывается на нескольких свежих решениях. Плавающая кнопка является одним из них. Она хорошо служит своей цели, что облегчает жизнь пользователю. Кнопка располагается в углу каждой страницы и вызывает всплывающую страницу с QR-кодом.

Перетекающая кнопка действий дизайнера Шу Макино

В этом дизайне короткий анимированный GIF демонстрирует стандартный рабочий процесс плавающей кнопки действий. Он силен своими плавными переходами и включает в себя семь элементов элегантной формы, которые появляются один за другим и придерживаются правой стороны.

И в заключение…

Плавающие кнопки действий могут легко превратиться в необходимые элементы интерфейса. Это элегантный и довольно простой способ улучшить его. Обеспечивая пользователям быстрого доступа к жизненно важным функциям мобильных приложений, они попадают прямо в точку, и способны сделать использование приложения быстрым, эффективным и продуктивным.

Плавающая кнопка — это новый способ добавить опрос, объявление или какой-либо другой дополнительный контент без добавления каких-либо изменений в дизайн вашего сайта. Функциональность всего этого реализуется в виде плавающей кнопки на вашем сайте, и после нажатия на кнопку будет открыто дополнительное модальное окно с необходимым содержимым. Для улучшения юзабилити, можно использовать панель администрирования, настройки и опции навигации, а также некоторые данные для учёта статистики и проведения аналитики.

Плагин кнопки wordpress, который называется Floating button добавит на ваш сайт такую плавающую кнопку.

Установка плагина

Плагин устанавливается также как и любой другой: переходим в раздел «Плагины» — «Добавить новый». Затем, в строку поиска вбиваем Floating button и устанавливаем его.

Настройка

После установки, справа в консоле управления вашим сайтом на вордпресс появляется дополнительная вкладка Floating button:

Нажимаем её и начинаем настраивать плавающую кнопку:

1. Button state — включение и выключение отображения кнопки;

2. Settings source — эта настройка отвечает за дальнейший функционал плагина. Если выбрать «Local settings», то функционал будет весьма ограничен, поэтому рекомендуется выбрать второй вариант «Settings from probtn.com»;

3. Теперь нужно зарегистрироваться на сайте разработчиков плагина — это не займёт много времени, зато функционал кнопки wordpress значительно расширится.

Регистрация на сайте разработчиков

Переходим на страницу https://admin.probtn.com/login/new и заполняем адрес электронной почты, имя и пароль и нажимаем кнопку «Create»:

На этом регистрация завершена, переходим к дальнейшей настройки плагина, но уже непосредственно на сайте, на котором мы только что зарегистрировались.

После регистрации и входа на сайт мы видим следующую страницу:

Две кнопочки внизу отвечают одна за создание плавающей кнопки, вторая — за создание опроса, который будет появляться при нажатии на плавающую кнопку.

Начнём с создания, поэтому нажимаем «Create Floating Button». Сначала указываем название кнопки:

Обратите внимание, что можно выбрать значок на своём компьютере или указать ссылку на изображение. Для красоты рекомендуется использовать картинку с прозрачным фоном небольшого размера.

На следующем этапе выбираем платформу для отображения кнопки. Мы установили плагин на сайт, поэтому и будем выбирать вариант отображения на домене, который укажем:

Завершаем первоначальную настройку нажатием кнопки «Submit».

Указываем действие, после нажатие на плавающую кнопку и продолжаем настройку плагина

После создания, наша кнопочка отображается в консоле слева:

В разделе TOOL указываем адрес, который будет открыт в всплывающем окне после нажатия на кнопочку:

Или указываем опрос, который можно создать по клику на ссылку «Create survey»:

Сохраняем все сделанные изменения на каждом шаге. Установленная на сайте плавающая кнопка может выглядеть так:

А при нажатии на неё появляется следующее всплывающее окно:

Вариантов использования этого плагина для вордпресс — множество: можно создать отдельную страницу, на которой разместить рекламу, опрос или какую-либо информацию, которая не может быть вписана в дизайн сайта. В общем, всё что угодно!

п.с. если вам нужна помощь по настройке или установке — пишите свои вопросы в комментарии. Помощь бесплатна!

В Leadback присутствует большое количество настроек, которые позволяют организовать практически любой алгоритм работы виджета обратного звонка. Первые настройки касаются логики появления виджета на сайте.

Ловить звонки в не рабочее время — введенные номера в не рабочее время будут распределяться между менеджерами в рабочее время. Менеджер получит звонок и автоответчик сообщит ему, что был заказан звонок в не рабочее время и соединит с потенциальным клиентом.

Ловить посетителя на выходе — виджет определяет момент, когда посетитель собирается покинуть Ваш сайт и предлагает ему связаться с менеджером за 27 секунд.

Плавающая кнопка «Телефон» — всегда на сайте в определенном месте видна кнопка, при нажатии на которую можно ввести номер и связаться с отделом продаж. Мы рекомендуем использовать данную функцию.

Настройка окна виджета — Вы можете выбрать 2 варианта показа виджета: Вариант «Окно» и «На весь экран». Так же, выбрать цветовую схему и изменить надпись на виджете. Мы рекомендуем использовать информацию о скидках и акциях, что бы мотивировать клиента оставлять номер для связи.

Виджет обратного звонка «На весь экран»

Настройка плавающей кнопки — раздел, где мы настраиваем внешний вид и цветовую схему кнопки. Доступны следующие варианты: Звонящий телефон, круглая кнопка с трубкой, квадратная кнопка с трубкой и стильная кнопка с трубкой напоминающая эконки популярных «мессаджеров» .

Обращаем Ваше внимание, что цвет кнопки можно подобрать под цветовую схему Вашего сайта, а расположить кнопку можно в любом месте. Для этого есть дополнительные настройки.

Разрешать несколько звонков для клиента — может ли один и тот-же клиент звонить Вам несколько раз? ДА/НЕТ Клиент определяется по браузеру.

Изменить время «Мы перезвоним вам за … сек» — Вы можете изменить время, за которое обещаете позвонить клиенту в большую или меньшую сторону.

Предлагать звонок 1 клиенту не чаще 1 раза за… — если у Вас включена функция «Ловить посетителя на выходе», то можно указать интервал, что бы не раздражать посетителя всплывающим окном каждый раз.

Принимать звонки из СНГ и Европы — Если Вы работаете только на Российском рынке, мы рекомендуем не включать эту функцию. Если Вам нужны клиенты из других стран, то включайте. Для остальных стран (кроме России), за одну минуту разговора будет списываться: Украина — 3 минуты, Казахстан — 2 минуты, Беларусь — 4 минуты, все другие страны — 5 минут.

Имя виджета для отчетов — Если вы используйте несколько виджетов на одном домене.

Появиться сообщение. Обращаем внимание, что код на сайте обновлять не нужно!

Настройка виджета завершена

После завершения настройки в Вашем личном кабинете Leadback в разделе виджеты появиться Ваш первый виджет.

Виджет в личном кабинете

Теперь нужно установить код виджета на Ваш сайт.

Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка - это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека:). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет - анимация, пульсирующий эффект.

09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.

Установить анимированную кнопку себе на сайт очень легко. Вся анимация выполнена с помощью CSS , без подключения дополнительных скриптов и плагинов. Хоть кода и много, но все довольно просто.

УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂

Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку.

Кнопка рассчитана на подключение модального окна из другой статьи. Если подключаете сторонние ссылки, то у самой кнопки в ее HTML коде есть событие

Onclick="return false;"

Теперь в файл стилей надо добавить сами стили 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;}}

Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png) .

Вот и все что нужно для установки такой кнопки. Если Вы разбираетесь в CSS, то сможете настроить кнопку и по нужде полностью ее изменить под свои нужды и стиль сайта.

Чтобы привязать к этой кнопке модальное окно, Вам поможет статья - . Если все сделаете согласно инструкции, проблем у Вас не возникнет.

На этом все, спасибо за внимание. 🙂

P.S.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:

Материальный Дизайн - это язык дизайна, введенный Google год назад, представляющий из себя смелую попытку компании создания объединенного пользовательского опыта на всех устройствах и платформах. Это отмечено смелыми цветами, либеральным, но принципиальным использованием теней для обозначения уровней UI и плавную анимацию, которая обеспечивает довольно хороший опыт взаимодействия в Android (и некоторых приложениях Google на iOS).

Однако одна вещь в Материальном Дизайне, напрягает меня с тех пор, как в прошлом году она была введена: Плавающая кнопка действия.

FABs (Floating action button), согласно Google, это круглые кнопки, которые парят над UI и «используются для способствования действию». Они выступают в качестве кнопки призыва к действию, предназначенных для выполнения того действия, которое пользователи производят на этом экране чаще всего.

И из-за смелого визуального стиля Материального Дизайна, FAB довольно трудно игнорировать – и в этом заключается проблема. В то время как на практике, в идеальных условиях, FAB кажется, обеспечивает хороший UX, — злоупотребление FAB будет вредно для UX приложения в целом. Вот несколько тому причин.

Эффект погружения исходит из опыта

FAB выделяются визуально   - они буквально сверху любого элемента UI на экране. Также, добавление FAB автоматически привело бы к менее иммерсивному UX, особенно влияя на приложения (или экраны) целями которых является обеспечить интерактивный эффект.

Один пример – новое фото приложение от Google.

Фото приложение открывается в виде галереи с плавающей кнопкой поиска. Но дело в том, что когда я открываю фото приложение, я просто хочу… посмотреть свои фотографии. Таким образом, плавающая кнопка поиска отвлекает пользователя от погружения в просмотр фотографий, который является основной целью приложения. Представленный, умный поиск – уникальная функция фото приложения Google. Но значит ли это что ему нужно дать высший уровень, постоянного FAB в приложении? (Я думаю нет.)
Как ни странно, Google со мной согласен. На странице Материального Дизайна посвященной FABs Google объясняет, что «не каждый экран нуждается в плавающей командной кнопке».
И затем добавляет, что “основное действие это коснуться изображения в галерее, в этом случае кнопка не нужна.

Они выделяются, и стоят на пути.

Это может показаться другой стороной медали, но есть другое, более важное свойство FАB стоящее на пути его полезности. Занимая место на экране, FAB фактически блокирует контент.

Ну да ладно, FAB же это просто маленькая круглая кнопочка, да? Сколько контента она может заблокировать?
Если вы посмотрите на скриншот фото приложения, то поймете, что поисковая FAB блокируют приблизительно 50 процентов уменьшенного изображения – безусловно достаточно чтобы закрыть пару лиц. Это по сути создает необходимость в одной дополнительной прокрутке, на каждое четвертое уменьшенное изображение последнего ряда на экране. И это еще не самое плохое.

Пользователь Dumazy разместил пост на Graphic Design Stack Exchange о проблеме, с которой он столкнулся, когда FAB заблокировал звездочку «избранного», а также время на экране его приложения. Это иллюстрирует проблему всех приложений со списковым представлением, и это становится особенно проблематичным, когда последний пункт в списке не может прокручиваться дальше вверх. Это означает, что целая колонка, должна быть принесена в жертву (меняя местоположение звездочки, и т.д.), чтобы предоставить надлежащее удобство использования экрана.

Следовательно, FAB занимает намного больше пространства на экране, чем предлагает его размер.

Способствование действию скорее всего так часто не используется.

Проэктируя UX, нужно помнить правило 80/20, которое говорит о том, что пользователи будут использовать 20% особенностей 80% времени. Другими словами, большая часть усилий должна быть применена к проектированию того небольшого количества элементов, которые пользователи будут использовать большую часть времени.

FAB фактически это и делает – в теории. Но что, если «Способствование действию» не используется так часто?

Возьмите, например, приложение Google Gmail.

FAB Gmail приложения - это кнопка создания, которая предполагает, что основное действие пользователей - это создание письма.

Но так ли это?

Многократные исследования показали, что по крайне мере 50 % писем читаются на мобильном устройстве, и почти ни одно не говорит такого о создании электронных писем. Другими словами, как подтвердил бы наш ежедневный опыт, большинство пользователей мобильных устройств склонны использовать свои почтовые приложения чтобы читать электронные письма.

Возможно, какое-то количество людей использует мобильные устройства что бы отвечать на письма, но это происходит только после открытия письма (обратите внимание на то, что это означает, что они обойдут FAB). Такое поведение пользователей, вероятно вызванное довольно несовершенным механизмом ввода виртуальных клавиатур и авто заменой, означает, что основное действие которое выполняют пользователи, это чтение (и ответ) электронных писем, а не создание новых.

Итак, что делает FAB кнопка «создать письмо»? В редких случаях, она доставляет удовольствие пользователям, когда они хотят создать письмо, при помощи этого приложения. Но в остальное время, она только занимает место на экране, блокирует «звездочку» и время, и постоянно отвлекает ярким красным цветом.

Хотим ли мы FAB? Вычеркнуть предыдущее – нужен ли он нам вообще?

Конечно, не все применения FAB ухудшают опыт использования Материальных приложений. Есть некоторые яркие примеры FABs, которые имеют смысл, и которые улучшают UX этих приложений.

Карты Google это отличный пример правильно примененного FAB. Главное действие, выполняемое пользователями на Картах, это получение направлений, таким образом, очень правильно использовать FAB именно для этой цели.

Но учтите, что Карты довольно особый случай, когда пользователи контента заинтересованы почти всегда в попадании в центр экрана (где и находится Ваша синяя точка, отмечающая положение). В большинстве приложений, однако, сетка или списковое представление означают, что пользователи взаимодействуют с содержанием, расположенным везде на экране, включая те места, где обычно расположены FAB.

Учтите также, что скриншоты выше рассказывают только часть истории: при фактическом использовании, FABs остаются на месте, даже когда пользователь использует прокрутку (большую часть времени). Как Google неоднократно подчеркивал в Материальном Дизайне, — дизайн движения так же важен как дизайн UI.

Отсутствие движения – акцентирование на экранном пространстве – в контексте движущегося содержания создает более высокий уровень отвлечения, которое скриншотами никак не показать.

Итак, поскольку у нас почти нет примеров хорошей реализации FAB, то напрашивается вопрос: нужны ли они?

Когда мы смотрим на недостатки наличия FABs в приложениях, мы можем свести это к простому пониманию: пользователи не только выполняют действия в приложениях, они также потребляют содержание.

Дизайн FAB в Материальном дизайне основывается на предпосылке, что пользователи большую часть времени выполняют определенное действие, и, следовательно, ему должен быть предоставлен повышенный статус в виде главной, высокоуровневой кнопки. Но во многих приложениях, пользователи также сосредоточены на потреблении содержания: в фото приложении пользователи хотят рассмотреть фотографии; в приложении Gmail пользователи хотят прочитать свои электронные письма; и в приложении Facebook, пользователи хотят прочитать сообщения своих друзей.

FAB, таким образом, философия дизайна (или по крайней мере выбор дизайна), которая подчиняет оптимальное потребление содержания совершению действия. И мы должны спросить себя: необходим ли такой компромисс? Хотим ли мы вообще идти на такой компромисс?

Когда FABs большую часть времени приводит к ухудшению UX, когда трудно выяснить единственное наиболее используемое действие в рамках приложения, и когда приходится находить окольные пути (когда FAB исчезает при прокрутке или накладывается на другие элементы при пролистывании) я сказал бы, что ответ — нет.

Материальный Дизайн Google, довольно хороший объединенный, принципиальный язык дизайна, но FAB далеко не самое в нем лучшее.