Анимированная кнопка обратного звонка. Floating button — плагин кнопки wordpress

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

Идея кажется весьма перспективной и многообещающей. Материальный дизайн является новейшей попыткой сделать пользовательский опыт (UX) комфортным и эффективным одновременно. Google проделали фантастическую работу в этой области: они используют минимальный набор элементов дизайна, применяют уникальные компоненты, яркие цвета, анимацию и создают дружественную для пользователя среду.

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

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

Что не так с плавающими кнопками целевого действия?

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

FAB могут мешать пользователям

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

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

Чтобы увидеть, что скрыто под кнопкой, пользователю придется прокрутить страницу вниз. Но что если он уже находится в самом низу страницы? Тогда прокрутка окажется невозможной, и пользователю придется добавить какой-либо контент, чтобы сделать скрытую часть фотографии видимой.

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

Их дизайн препятствует полному погружению

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

В качестве примера вновь служит приложение Google’s Photos. Когда человек открывает его, он попадает в галерею пользователя, где он может просто просматривать фотографии. В данной ситуации функция поиска, которая представлена при помощи FAB, может оказаться полезной, однако она не является приоритетной.

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

Они могут оказаться бесполезными

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

Золотое правило дизайна пользовательского опыта сводится к тому, чтобы нужные и часто используемые элементы были на виду, а редко используемые — почти не заметны. Тем не менее, как мы видим на примере приложения Gmail (скриншот выше), разработчики не приняли это правило во внимание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагин кнопки 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»:

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

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

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

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

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

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

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

О том, как настроить контактную форму можно почитать в этих статьях:

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

Будем реализовывать такой функционал: :)

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

Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:

Заказать обратный звонок

Теперь нужно создать контейнер модального окна:

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

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

Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.

А на сегодня — все! Всем пока!

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

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

Как предполагают спецификации 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 демонстрирует стандартный рабочий процесс плавающей кнопки действий. Он силен своими плавными переходами и включает в себя семь элементов элегантной формы, которые появляются один за другим и придерживаются правой стороны.

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

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