Панель массовых действий

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

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

Панель состоит из трех типов кнопок:

• кнопок действий,
• кнопки «Ещё»
• и кнопки отмены.

Кнопкам действий можно задать любое название и иконку.

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

Показывает количество выбранных пунктов и позволяет сбросить выбор.

Панель массовых действий появляется, как только пользователь выберет хотя бы один объект из списка.

Чтобы скрыть панель массовых действий, нужно снять выбор с объектов или нажать на кнопку отмены на панели действий.

Панель появляется с отступом 24px от нижней границы экрана, с равными отступами слева и справа.

Панель также может позиционироваться по центру определенной контент-области, сайдпейджа или модалки.

Панель позиционируется по центру контент-области, а не экрана

Ширина панели зависит от контента — количества кнопок и длины текста, но ограничена шириной экрана или шириной определённой контент-области.

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

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

Рекомендуемая ширина панели — до 90% той ширины экрана, которая является самой популярной среди пользователей вашего сервиса.

Если ширина экрана позволяет, на панели будут показаны все действия. Если действий слишком много для определенной ширина экрана или блока, те, что не войдут, будут скрываться за кнопкой «Ещё» автоматически.

Ставьте самые важные и частые действия в начало.

Если при определенных условиях какое-то действие нельзя применить к выбранным объектам — скрывайте кнопку или блокируйте её.

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

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

После выполнения действия с выбранными объектами сообщите пользователю о результате выполнения с помощью тоста.

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

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

После выполнения действий с объектами из списка фокус вернется в начало страницы. Если ваши пользователи часто работают с сервисом, используя клавиатуру, подумайте о том, куда будет возвращаться фокус после выполнения действий.

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

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

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

1. Скрывать с анимацией залипающую плашку экрана, модалки или сайдпейджа при появлении в них панели массовых действий.
2. Смещать панель массовых действий выше и показывать её над плашкой.

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

Смещайте или скрывайте виджет поддержки, если панель может занимать место кнопки виджета.

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