Как сделать плавающую кнопку. Плавающие кнопки Add Media
Кнопки социальных сетей или onLine консультации сегодня встречаются практически на каждом Интернет проекте. Некоторые из них размещаются непосредственно в теле страницы, другие же остаются всегда на виду пользователя независимо от прокрутки. Именно такие кнопки, блок попытаемся создать в этом материале на чистом CSS
Чтобы кнопка, блок (далее просто кнопка) не изменяла своего положения независимо от прокрутки страницы – как бы плыла по материалам сайта, ей необходимо задать позицию (position ) и разместить ее, поверх все элементов. Но прежде чем перейдем непосредственно к стилям CSS создадим объект для наших экспериментов. Пускай это будет некая картинка (picture), которая является отправной точкой к какому-то действию
html-код составили, теперь попытаемся ее заставить плавать.
И так, с нам уже известно, что фиксированное позиционирование позволяет элементу сохранять свое положение при прокрутке странице, а чтобы он был всегда на переднем плане – необходимо задать большое числовое значение параметру z-index . Делаем это для нашей кнопки:
.start { position :fixed ; z-index : 99999 ; } .start { left :0 : position:fixed ; top :200 px ; z-index : 99999 ; }Если же нам нужно кнопку разместить справа, то вместо left нужно задать right, а именно:
.start { position :fixed ; right :0 ; top :200 px ; z-index : 99999 ; }Если же нашу кнопку необходимо разместить внизу окна браузера, то top заменяем на bottom.
Это было для кнопки, но а если перед нами стоит задача разместить не кнопку, а целый блок с текстом или целым набором кнопок. Эта задача решается аналогично, только приведенные стили нужно задать блоку:
CSS
.block_start { background : #382d25 ; border : 1 px solid #382d25 ; border-radius : 6 px ; box-shadow : 0 px 0 px 8 px #382d25 ; font-size :14 px ; padding : 5 px 5 px 0 ; position : fixed ; right : 25 px ; text-align : center ; top :25 px ; width : 96 px ; z-index : 99999 ; }Прокомментируем свойства параметров. Положение блока указали при помощи position: fixed; z-index: 99999; и разместили его справа сверху — right: 25px; top:25px. Ширина блока (width) равна 96 пикселей. Оформление его задается параметрами – background, border, border-radius, box-shadow. И в завершение, чтобы наш текст внутри блока размещался посредине и имел поля, был одного размера, записали font-size:14px; padding: 5px 5px 0; text-align: center.
Теория – это хорошо, подумали Вы, но вот как это внедрить в реальность? Для примера, допустим у нас есть два сайта – один CMS Joomla, другой – WordPress. Ну что же, установим для Joomla
Установка на CMS Joomlahtml-код кнопки необходимо разместить в шаблоне сайта – это файл index.php, что находиться вот здесь — ваш_сайт/templates/тема/ Сам код я чаще всего устанавливаю непосредственно перед тегом , но Вы же можете разместить его где считаете нужным, главное, чтобы он был между тегами ….
Теперь переходим к стилям. Копируем их и размещаем в файле настроек шаблона – как правило, это файлы layot.css, template.css или general.css папки CSS или styles
В панели управления сайтом, справа, ищем раздел “Внешний вид”, потом ”Редактор” и открываем файл footer.php и добавляем наш html-код кнопки.
Стиль оформления кнопки, точно так же, помещаем в файл оформления шаблона – файл style.css который размещен wp-content/themes/ваша_тема/style.css или через админ-панель, в разделе “Внешний вид”->”Редактор”, файл style.css.
И в завершение, сделаем так, чтобы наша кнопка стала «Вверх» и исчезала, когда полоса прокрутки находится в самом верху.
“Кнопка Наверх” / “Кнопка Вверх” для сайтаЧтобы при нажатии на нашу кнопку нас перемещало на верх, необходимо в html-код добавить java-скипт
$(function () { $("#toTop" ).scrollToTop(); });Чтобы не получилось путаницы, я специально изменил class на id=»toTop». Содержание файла toTop.js следующее
$(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»)})}});
Данный скрипт прячет нашу кнопку, когда мы вверху сайта и выводит ее – как только мы толкнули полосу прокрутки вниз. Так же он отвечает за скорость прокрутки страницы.
Внимание! На некоторых сайтах, эта кнопка может не срабатывать, а просто к ссылке в окне браузера добавлять символ — #. В таком случае необходимо подключить jQuery. Сделать это можно при помощи следующей строки
Теперь разберемся со стилями. Раз это кнопка «вверх», размещаем ее внизу окна, справа – bottom и right.
#toTop { background : none ; bottom : 20 px ; cursor : pointer ; position : fixed ; right : 2 px ; }Ну на это точно все! Надеюсь Вы теперь знаете что и как нужно сделать, чтобы отправить в плавание свой «кораблик».
Здравствуйте, уважаемые посетители!
Я продолжаю публиковать статьи технической тематики.
И сегодня я затрону интересную тему, в которой мы обсудим кнопку прокрутки вверх страницы на сайте. Мы поговорим о важности данной кнопки, как я люблю это делать. Также покажу наиболее интересные и эффективные реализации этой функции.
Нужна лиЯ думаю, что не стоит показывать, как она выглядит на сайтах, так как почти на каждом ресурсе она есть. Это простая кнопка со стрелкой вверх или со словом, при нажатии на которую вы быстро перемещаетесь в самую верхнюю область сайта.
Данная функция - это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.
Первый самый важный, а может и единственный случай, когда кнопка вверх нужна - это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.
Приходится либо пользоваться полосой прокрутки, чем пользуются малое количество людей. Я по крайней мере ей вообще не пользуюсь, так как это лишние движение мышки, да и не очень удобно. Либо же приходится крутить ролик на мышке, что очень долго и со временем напрягает.
Поэтому, если на вашем сайте действительно большие статьи, то кнопку можно и установить, но сделать ее нужно такой, чтобы на нее было легко нажать и сделать это было проще, чем крутить ролик или воспользоваться полосой прокрутки в браузере. В другом случае, какой от нее будет толк, если она будет равнозначна стандартным действиям?
Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов - это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.
Кнопка вверх, как ВконтактеОтличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.
Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.
Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.
Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.
Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.
Если вы хотите разместить скрипт и не мучиться с загрузкой, то даю вам сам код скрипта.
JavaScript
$(document).ready(function() { $("body").append("^ Наверх"); $ (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 ("^ Наверх" ) ; $ (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" } ) ; ; } ) ; } ) ;
|
В данном коде можно изменить некоторые параметры под себя.
- Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
- В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
- В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.
Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.
Еще более эффективным вариантом является загрузка этого скрипта из отдельного файла. Файл можете скачать по кнопке ниже. Находится он внутри архива.
Затем загружаете данный файл на хостинг. Можно загрузить в папку с темой, а можно и в корень сайта. Я, по традиции, сделать это в папку с шаблоном. Потом стоить в то же место прописать код, который будет грузить данный файл. Для этого воспользуйтесь следующей строчкой.
JavaScript
|
В нем необходимо будет заменить пой путь к файлу на ваш во второй строке. Затем вставить этот код в ту же область перед закрывающим тегом, как показано ниже.
После редактирования файла, если мы делали это на компьютере, загружаем его на хостинг с заменой исходного файла. После этого простая кнопка вверх на вашем сайте будет работать.
Для редактирования параметров в данном файле, его потребуется открыть с помощью редактора Notepad.
Данный вариант очень хорош своей простотой, как в работе, так и в установке на сайта. Более продвинутым вариантом является вариант, когда кроме прокрутки вверх имеется возможность вернуться в то место, с которого осуществилась прокрутка. Именно такой вариант реализован в соц. сети Вконтакте. Как его сделать, смотрим ниже.
Второй способ кнопки наверх от ВконтактеПо данному способу я записал подробный видео-урок.
Такой вариант сейчас и стоит на моем блоге. Я пока не смог проанализировать его полезность. Но, если он стоит на одном из гигантов рунета, то можно смело предположить, что толк от него есть. Конечно при таких масштабах это и ежу понятно. А вот на мелком ресурсе можно хорошенько подумать перед его установкой. Но я смотрю на перспективу, поэтому и поставил такое решение.
Реализация второго способа чуть посложнее, но процесс уже должен быть вам знаком, если делали другие технические моменты на своем ресурсе.
Состоит из 3х этапов:
Для начала мы должны разместить скрипт, который будет делать плавность прокрутки и плавное изменение цвета при наведении, как самой области, так и цвета сова "Наверх" в зависимости от дальности прокручивания страницы вниз.
Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.
Файл скрипта скачайте по кнопке ниже.
Размещаете файл на хостинге и делаете загрузку файл через код в самом низу сайта, как делали это ранее. Файл называется точно также, как и в 1м способе, поэтому можно взять ту же самую строку кода для вывода.
⇓ Назад ⇑ Наверх
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" > ⇓Назад< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" > ⇑Наверх< / span > < / span > < / a > |
Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.
Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.
/* описание контейнера */.leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */.left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */#scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */.active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */.leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */.leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */.bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }
/* описание контейнера */ Leftbar-wrap { position : fixed ; height : 100% ; top : 0 ; width : 99px !important ; left : 0 ; /* описание кнопки «Вверх» */ Left-controlbar { height : 100% ; display : block ; text-decoration : none ; /* описание кнопки «Вернуться» */ #scroll-back { display : block ; height : 100% ; top : 0 ; display : none ; text-align : center ; /* описание столбца фонового цвета для обеих кнопок */ Active-area { width : 100px ; height : 100% ; display : block ; text-align : center ; /* задаем прозрачность фонового цвета при наведении на активную область страницы */ Leftbar-wrap:hover .active-area { background : #E1E7ED !important ; opacity : 0.7 !important ; /* делаем подсветку немного ярче при наведении на надпись */ Leftbar-wrap .active-area:hover { /* центрируем надпись у кнопок */ Bar-desc-niz { top : 26% !important ; position : relative ; display : inline-block ; Bar-desc-top { top : 10% !important ; position : relative ; display : inline-block ; |
В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова "Назад" и "Наверх" от самого верха страницы соответственно
После редактирования всех файлов, можем смело загрузить их на хостинг и этот способ будет работать. Его реализацию можете посмотреть на моем блоге. Делайте на здоровье.
Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.
Третий способ кнопки наверх без плагинаРеализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.
Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /
JavaScript
$(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); }); });< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
В Leadback присутствует большое количество настроек, которые позволяют организовать практически любой алгоритм работы виджета обратного звонка. Первые настройки касаются логики появления виджета на сайте.
Ловить звонки в не рабочее время — введенные номера в не рабочее время будут распределяться между менеджерами в рабочее время. Менеджер получит звонок и автоответчик сообщит ему, что был заказан звонок в не рабочее время и соединит с потенциальным клиентом.
Ловить посетителя на выходе — виджет определяет момент, когда посетитель собирается покинуть Ваш сайт и предлагает ему связаться с менеджером за 27 секунд.
Плавающая кнопка «Телефон» — всегда на сайте в определенном месте видна кнопка, при нажатии на которую можно ввести номер и связаться с отделом продаж. Мы рекомендуем использовать данную функцию.
Настройка окна виджета — Вы можете выбрать 2 варианта показа виджета: Вариант «Окно» и «На весь экран». Так же, выбрать цветовую схему и изменить надпись на виджете. Мы рекомендуем использовать информацию о скидках и акциях, что бы мотивировать клиента оставлять номер для связи.
Виджет обратного звонка «На весь экран»
Настройка плавающей кнопки — раздел, где мы настраиваем внешний вид и цветовую схему кнопки. Доступны следующие варианты: Звонящий телефон, круглая кнопка с трубкой, квадратная кнопка с трубкой и стильная кнопка с трубкой напоминающая эконки популярных «мессаджеров» .
Обращаем Ваше внимание, что цвет кнопки можно подобрать под цветовую схему Вашего сайта, а расположить кнопку можно в любом месте. Для этого есть дополнительные настройки.
Разрешать несколько звонков для клиента — может ли один и тот-же клиент звонить Вам несколько раз? ДА/НЕТ Клиент определяется по браузеру.
Изменить время «Мы перезвоним вам за … сек» — Вы можете изменить время, за которое обещаете позвонить клиенту в большую или меньшую сторону.
Предлагать звонок 1 клиенту не чаще 1 раза за… — если у Вас включена функция «Ловить посетителя на выходе», то можно указать интервал, что бы не раздражать посетителя всплывающим окном каждый раз.
Принимать звонки из СНГ и Европы — Если Вы работаете только на Российском рынке, мы рекомендуем не включать эту функцию. Если Вам нужны клиенты из других стран, то включайте. Для остальных стран (кроме России), за одну минуту разговора будет списываться: Украина — 3 минуты, Казахстан — 2 минуты, Беларусь — 4 минуты, все другие страны — 5 минут.
Имя виджета для отчетов — Если вы используйте несколько виджетов на одном домене.
Появиться сообщение. Обращаем внимание, что код на сайте обновлять не нужно!
Настройка виджета завершена
После завершения настройки в Вашем личном кабинете Leadback в разделе виджеты появиться Ваш первый виджет.
Виджет в личном кабинете
Теперь нужно установить код виджета на Ваш сайт.
К настоящему времени стал открытием для тех, кто работает с приложениями на платформе Android, а также занимается проектированием пользовательских интерфейсов. Он был введен компанией Google несколько лет назад. Целью материального дизайна являлось создание визуального языка, который бы объединял принципы классического дизайна с инновациями.
Идея кажется весьма перспективной и многообещающей. Материальный дизайн является новейшей попыткой сделать пользовательский опыт (UX) комфортным и эффективным одновременно. Google проделали фантастическую работу в этой области: они используют минимальный набор элементов дизайна, применяют уникальные компоненты, яркие цвета, анимацию и создают дружественную для пользователя среду.
Вместе с этим дизайнеры практикуют так называемую плавающую кнопку целевого действия (floating action button, или FAB). Она представляют собой круглую кнопку, внешний вид которой хорошо известен пользователям Android. Она является еще одним отличительным элементом материального дизайна. FAB появляется поверх интерфейса приложения и мотивирует пользователей совершить определенное целевое действие.
По сути, FAB является , так как ее цель заключается в том, чтобы убедить человека сделать что-либо (например, скачать или загрузить определенный контент). Плавающая кнопка целевого действия обычно размещается в правом углу экрана. Ее очень трудно не заметить, так как она имеет яркий и привлекательный дизайн. FAB мотивирует пользователя на совершение самых популярных действий в приложении. Тем не менее, при использовании данных кнопок возникают определенные проблемы.
Что не так с плавающими кнопками целевого действия?FAB представляют собой разумный подход, позволяющий мотивировать пользователя на совершение действия, ведь их трудно не заметить. Однако они могут стать неверным решением для дизайна пользовательского опыта в целом. Ниже представлено несколько причин, по которым плавающие кнопки целевого действия могут оказать негативное влияние на UX.
FAB могут мешать пользователямКак уже было упомянуто выше, плавающие кнопки целевого действия обычно размещаются в правом нижнем углу экрана. В большинстве случаев они располагаются поверх контента приложения, перекрывая какую-то его часть.
Разумеется, размеры FAB действительно небольшие, поэтому они скрывают от глаз пользователя лишь незначительную часть контента. Однако, взгляните на приложение Google Photos (скриншоты ниже), где плавающая кнопка целевого действия перекрывает существенную часть фотографии.
Чтобы увидеть, что скрыто под кнопкой, пользователю придется прокрутить страницу вниз. Но что если он уже находится в самом низу страницы? Тогда прокрутка окажется невозможной, и пользователю придется добавить какой-либо контент, чтобы сделать скрытую часть фотографии видимой.
Очень важно признать тот факт, что плавающая кнопка целевого действия, несмотря на свои незначительные размеры, может скрыть от глаз человека какую-либо часть контента приложения. Это может иметь негативные последствия для пользовательского опыта.
Их дизайн препятствует полному погружениюПлавающие кнопки целевого действия заметно выделяются на общем фоне. Во многих случаях это создает препятствия для реализации важнейшей характеристики пользовательского опыта — полного погружения в атмосферу приложения.
В качестве примера вновь служит приложение Google’s Photos. Когда человек открывает его, он попадает в галерею пользователя, где он может просто просматривать фотографии. В данной ситуации функция поиска, которая представлена при помощи FAB, может оказаться полезной, однако она не является приоритетной.
Плавающая кнопка целевого действия отвлекает его от увлеченного просмотра фотографий, занимая место на экране и блокируя некоторые части изображений. В таких случаях кнопка не должна так сильно выделяться.
Они могут оказаться бесполезнымиКак объясняют сами специалисты Google, плавающая кнопка побуждает пользователя совершить целевое действие. Тем не менее, разработчики иногда забывают о том, насколько часто человек совершает это действие, пользуясь приложением.
Золотое правило дизайна пользовательского опыта сводится к тому, чтобы нужные и часто используемые элементы были на виду, а редко используемые — почти не заметны. Тем не менее, как мы видим на примере приложения Gmail (скриншот выше), разработчики не приняли это правило во внимание.
На экране приложения мы видим кнопку, нажав на которую, пользователь сможет быстро перейти к написанию электронного письма. Тем не менее, по данным последних опросов, около половины пользователей лишь просматривают почту при помощи мобильных устройств. Иными словами, они не слишком части пишут письма, используя смартфоны или планшеты.
Материальный Дизайн - это язык дизайна, введенный 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 процентов уменьшенного изображения – безусловно достаточно чтобы закрыть пару лиц. Это по сути создает необходимость в одной дополнительной прокрутке, на каждое четвертое уменьшенное изображение последнего ряда на экране. И это еще не самое плохое.
FAB блокирует кнопку «Favorites» и дату.
Пользователь 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 далеко не самое в нем лучшее.