Парящая кнопка действия в UX дизайне

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

В этой статье вы найдете ответы на следующие вопросы:

  • Когда использовать FAB?
  • Каковы лучшие практики применения FAB?
  • Как FAB и анимация способны улучшить пользовательский опыт?

Когда использовать FAB?

Для основных действий

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

Как указатель пути

FAB — это естественная подсказка, говорящая пользователям что делать дальше. Исследование, проведенное Google, показывает, что когда пользователь сталкивается с незнакомым экраном, то обращается к FAB, как к элементу навигации. Таким образом, FAB, очень полезна как указатель.

FAB не нужно размещать на каждом экране

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

Хороший пример плохого применения FAB — приложение Google Photos для Android. После открытия приложения вы попадаете в галерею, в которой FAB реализует функцию поиска. Тут есть две проблемы:

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

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

Лучшие практики применения FAB

Избегайте «странной» навигации.

Под «странной» навигацией подразумеваются кнопки или ссылки без определительных знаков, при этом, чтобы понять, что они делают, пользователю нужно на нах нажать. Далее: http://uxgu.ru/fab-in-ux/

Show your support

Clapping shows how much you appreciated Ux guru’s story.