Давайте попробуем понять, как место размещения Floating Action Button влияет на пользовательский опыт
Здравствуйте, дамы и господа! Предлагаю вам новую статью из серии Feature Breakdown.
Как следует из заголовка, речь пойдет о плавающих кнопках целевых действий (также называемых FAB) и о том, где мы должны размещать их в наших интерфейсах, а также о причинах их появления. Плавающие кнопки целевых действий стали популярными благодаря Material Design – языком визуального дизайна Google. Согласно Material Design, FAB представляет собой основное действие экрана. Она отображается перед всем контентом экрана, обычно в виде кнопки круглой формы с иконкой в центре.
Ниже приведен пример плавающей кнопки целевого действия.
Пример плавающей кнопки целевого действия (Material Design Guidelines)
Если вы используете смартфон, будь то Android или iOS, есть большая вероятность, что вы видели эту кнопку в некоторых приложениях. FAB, как правило, находится внизу, так что оно не навязчиво и легко доступно для большого пальца, если использовать смартфон одной рукой.
Доступно для большого пальца при использовании одной рукой? Хм, давайте уточним этот момент.
Зона большого пальца
Термин «Зона большого пальца» (Thumb Zone) был придуман Стивеном Хубером в его книге «Проектирование мобильных интерфейсов». Зона большого пальца представляет собой наиболее удобную область для касания одной рукой. На изображении выше показана зона большого пальца для правостороннего использования мобильных телефонов.
Но плавающие кнопки целевого действия обычно располагаются в правом нижнем углу, что выглядит, как труднодоступная область для большого пальца. Принимая во внимание, что левый нижний угол кажется намного удобнее для правши (70–95% людей в мире правши). Это подводит нас к следующему вопросу.
Почему мы не размещаем FAB в левом нижнем углу?
Если бы FAB была размещена внизу слева, в соответствии с зоной большого пальца, к ней было бы легче дотянутся, чем внизу справа. Но мы все еще продолжаем помещать кнопки целевого действия в нижнем правом углу. Почему?
Ответ заключается в том, как мы потребляем большую часть контента. Плавающие кнопки действий являются навязчивыми компонентами, то есть они скрывают расположенный за ними контент. Английский и русский языки читаются слева направо. Размещение FAB в левом нижнем углу скрывает начало предложений, что может сделать оставшуюся часть предложения бессмысленной. Это может сделать расположенный ниже контент совершенно бесполезным.
Однако, если FAB находится в правом нижнем углу, вы все равно сможете прочитать значительную часть предложения, и контент в этой области остается в некоторой степени полезным.
Но, что, если контент визуальный?
Пользователь подсознательно просматривает интерфейс определенным образом. Направление, которое выбирает пользователь при использовании интерфейса, даже для визуального контента, в основном определяется основным языком пользователя. Большинство языков, таких как английский, читаются слева направо, а затем сверху вниз.
Поэтому размещение FAB в левом нижнем углу создаст больше помех естественному способу потребления информации пользователем, чем, если бы она располагалась в правом нижнем углу. Даже в тех случаях, когда контент является визуальным, контент слева от FAB может обеспечить контекст для остальной его части.
Руководство по использованию FAB
Ниже приведен ряд моментов, как наилучшим образом использовать плавающие кнопки целевого действия:
- Выберите цвет, который имеет хороший контраст с фоном. FAB расположена на экране, чтобы позаботиться о первичном действии. Пользователь должен легко его определить. Используйте для FAB сильный цвет.
- Иногда можно использовать две плавающие кнопки целевого действия, если они выполняют разные, но одинаково важные действия. Если вам нужно позаботиться о нескольких похожих основных действиях, вы также можете использовать вложенные FAB.
- Используйте иконки, которые могут соответствующим образом обозначать действие, выполняемое FAB. Если это невозможно, используйте расширенные FAB для размещения меток и иконок.
Вывод
Согласно руководству Material Design, нет строгих правил, декларирующих размещение FAB в правом нижнем углу. Она может быть размещена в центре снизу или даже на краю некоторых компонентов, в зависимости от варианта использования и дизайна интерфейса. Причина, по которой плавающая кнопка целевого действия не размещается в соответствии с правилом большого пальца (т. е. внизу слева), заключается в том, что пользователям будет сложно читать информацию.
Узнайте больше о плавающих кнопках целевых действий в руководстве Material Design.
Надеюсь, эта статья помогла вам узнать немного больше о плавающей кнопке целевого действия. Оставляйте отзывы в комментариях.
Отдельное спасибо
Prerna Pradeep за помощь с контентом.
Перевод статьи medium.muz.li
Топ коментарі (0)