1 5 800x440 - Где и как размещать Floating Action Buttons в мобильных приложениях

Давайте попробуем понять, как место размещения Floating Action Button влияет на пользовательский опыт

Здравствуйте, дамы и господа! Предлагаю вам новую статью из серии Feature Breakdown.

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

Ниже приведен пример плавающей кнопки целевого действия.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Где и как размещать Floating Action Buttons в мобильных приложениях
Пример плавающей кнопки целевого действия (Material Design Guidelines)

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

Доступно для большого пальца при использовании одной рукой? Хм, давайте уточним этот момент.

Зона большого пальца

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Где и как размещать Floating Action Buttons в мобильных приложениях
Зона большого пальца

Термин «Зона большого пальца» (Thumb Zone) был придуман Стивеном Хубером в его книге «Проектирование мобильных интерфейсов». Зона большого пальца представляет собой наиболее удобную область для касания одной рукой. На изображении выше показана зона большого пальца для правостороннего использования мобильных телефонов.

Но плавающие кнопки целевого действия обычно располагаются в правом нижнем углу, что выглядит, как труднодоступная область для большого пальца. Принимая во внимание, что левый нижний угол кажется намного удобнее для правши (70–95% людей в мире правши). Это подводит нас к следующему вопросу.

Почему мы не размещаем FAB в левом нижнем углу?

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

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

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

Но, что, если контент визуальный?

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

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

Руководство по использованию FAB

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

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

Вывод

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

Узнайте больше о плавающих кнопках целевых действий в руководстве Material Design.

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

Отдельное спасибо

Prerna Pradeep за помощь с контентом.

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: medium.muz.li

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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