Панель массовых действий в таблице: счётчик, команды и отмена

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

Панель массовых действий — временная зона управления, которая появляется после выбора одной или нескольких записей. Она связывает выделение с командами вроде «Архивировать», «Назначить исполнителя» или «Удалить». Если показать только набор кнопок, человек не поймёт, к каким данным они относятся. Если показать лишь «Выбрано: 4», останется неясным, что произойдёт дальше.

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

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

Самая важная часть — значение слова «все». Чекбокс в заголовке таблицы может выбрать все строки текущей страницы, все отфильтрованные записи или вообще весь набор результатов. Эти варианты требуют разных текстовых подписей. Не оставляйте масштаб выбора на догадку по одному значку.

Зафиксируйте поведение в спецификации до подбора размеров и веса шрифта:

Счётчик «Выбрано 50» без уточнения масштаба вводит в заблуждение, если операция затронет больше страниц. Текст вида «50 на этой странице» или «1 248 результатов поиска» сообщает границу действия. Если выбранные строки остаются отмеченными после фильтра, покажите общий счётчик и при необходимости кратко обозначьте скрытую часть выбора: «Выбрано 8, ещё 3 скрыты фильтром».

Не приравнивайте выбор строк к выбору видимых элементов интерфейса. Удаление отметки у одного флажка может снять только эту запись, тогда как ссылка «Снять выделение» должна очищать весь набор. Такие формулировки становятся особенно важными при сохранении выбора между страницами.

В строке панели поставьте счётчик в начале: «Выбрано 4». Число можно выделить полужирным начертанием или отдельной небольшой меткой, а слово оставить обычным. Не превращайте число в огромный заголовок: оно меняется при каждом клике и должно оставаться частью рабочей панели.

Если количество важно для интерпретации, рядом укажите контекст: «4 строки на странице», «4 из 27 результатов». Не дублируйте значение в трёх местах. Для длинного сценария с выбором всех результатов покажите один главный счётчик и один короткий поясняющий статус, а не повторите число в панели, кнопке и всплывающем уведомлении.

Проверьте формы слов при изменении числа: «Выбрана 1 запись», «Выбраны 2 записи», «Выбрано 5 записей». В динамических сообщениях локаль может потребовать отдельной функции склонения, а не простого добавления окончания к одному шаблону. Для нулевого выбора панель обычно скрыта; если нужно объяснить недоступность команды, лучше показать причину рядом с самой командой.

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

Начните с наиболее частого безопасного действия: например, «Назначить», «Переместить» или «Экспортировать». Редкое действие можно перенести в меню «Ещё». Удаление и другие разрушительные команды отделите от повседневных — расстоянием, разделителем или размещением в меню. Красная кнопка не заменяет ясный глагол и не должна быть единственным способом показать риск.

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

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

После команды недостаточно показать только «Готово». Сообщите, что изменилось: «Архивировано 4 записи»; если часть операции не удалась — «3 записи архивированы, 1 не изменена». Для частичного результата назовите следующий шаг, например ссылку для повтора неудачной операции или открытие подробностей.

Если изменение обратимо, предложите отмену рядом с подтверждением. Ссылка «Отменить» должна быть доступной клавиатурой, достаточно заметной и оставаться на экране, пока действие можно вернуть. Не обещайте отмену, если сервер уже выполнил необратимую операцию. Перед окончательным удалением полезно назвать количество и объект: «Удалить 4 выбранные записи?»; пустое «Вы уверены?» не добавляет контекста.

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

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

Заранее выберите, что происходит при длинном выборе, длинной локализации и увеличении масштаба страницы. Не уменьшайте шрифт до нечитаемого размера и не превращайте кнопки в ряд одинаковых значков. Текст должен иметь возможность переноса; если места всё равно не хватает, используйте меню с понятной подписью. Размер области нажатия проверяют отдельно от кегля букв: компактная типографика не означает, что цель должна стать тесной.

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

Для обычной таблицы данных предпочтителен нативный HTML-элемент `<table>` с заголовками и обычными управляющими элементами внутри ячеек. W3C WAI отмечает, что table pattern описывает статическую структуру, а каждый интерактивный элемент внутри неё остаётся отдельной остановкой в последовательности клавиатурной навигации. Роль grid предназначена для другого поведения — интерактивной сетки с управлением перемещением по ячейкам. Выбор сложной ARIA-семантики ради внешнего сходства с таблицей может усложнить взаимодействие.

Каждый флажок строки должен иметь доступную подпись, позволяющую отличить записи друг от друга, например «Выбрать заказ № 2048». В шапке таблицы задайте понятное имя действия, например «Выбрать строки на этой странице». Для смешанного состояния «часть строк выбрана» используйте корректное состояние флажка, а не нарисованный декоративный квадрат. WAI-ARIA APG описывает три состояния группового checkbox и действие пробела для изменения состояния.

Когда количество изменилось, экранный диктор должен получить короткое объявление обновлённого статуса. Его не нужно проговаривать при каждом лишнем внутреннем обновлении таблицы. Проверьте поведение с клавиатурой: переход к флажкам и кнопкам, отметка пробелом, чтение названия команды и доступное снятие выделения. Для визуального выбора не полагайтесь только на цвет; сочетайте фон, флажок и, где нужно, текстовую метку. Дополнительные советы W3C о семантике и сценариях таблиц собраны в Table Pattern.

Представьте список обращений с фильтром «Решено». На странице показано 50 строк из 1 248 результатов. Человек отмечает три обращения и видит панель: «Выбрано 3 из 50 на странице», кнопки «Назначить» и «Архивировать», а справа — «Снять выделение». Число «1 248» относится к результатам фильтра, но не к текущему выбору.

Если он нажмёт чекбокс в заголовке страницы, подпись меняется на «Выбрано 50 на этой странице». Под таблицей появляется ненавязчивая ссылка «Выбрать все 1 248 обращений». После её нажатия панель сообщает масштаб целого результата. Команда архивирования показывает уведомление «Архивировано 1 248 обращений» и ссылку «Отменить». Если у одного обращения операция не прошла, уведомление не прячет исключение: «Архивировано 1 247; 1 не изменено — повторить».

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

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

Да, если счётчик видим постоянно и значение может быть равно единице. Подготовьте корректные формы для 1, 2–4 и 5 и более записей, а также для нуля, если интерфейс его показывает. Простое добавление буквы к слову «строка» часто даёт грамматически неверный текст.

Решение зависит от последствий и наличия восстановления. Если удаление окончательное или затрагивает важные данные, повторите число и объект в диалоге. Если действие можно безопасно отменить, уведомление с рабочей командой «Отменить» может сохранить контекст без лишнего шага.

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

Сообщите отдельно число успешных и неуспешных операций. Предложите повторить только те записи, которые не изменились, или открыть подробности ошибки. Общее сообщение «Готово» скрывает частичный результат и затрудняет проверку данных.

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

Панель массовых действий работает хорошо, когда связывает число строк, границы выбора и названия команд в одном месте. Короткий счётчик, конкретные глаголы, ясный масштаб операций и заметная отмена помогают человеку действовать без повторной проверки каждой строки. Для собственного проекта можно составить контрольный макет, а затем проверить подписи и начертания в Fontgenerator: <a href="https://fontgenerator.ru">создайте свой рукописный шрифт</a> и протестируйте, подходит ли он для коротких элементов интерфейса.