Действия в таблицах: рекомендации по проектированию

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

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

В статье мы разберем лучшие практики, которые помогут вам принимать разумные  UX-решения, и посмотрим, как они используются в реальных продуктах.

Действия на уровне строк (применяются к одной строке)

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

Вот несколько вариантов:

1. Иконки действий с правой стороны

Распространенный и удобный паттерн — размещение до трех иконок действий (например, «редактировать», «удалить» и «просмотреть») у правого края каждой строки. Такая компоновка облегчает поиск элементов управления и визуально отделяет их от основного контента.

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

Пример:

В TikTok каждая строка заканчивается иконками «Редактировать», «Просмотреть аналитику», «Просмотреть комментарии» и «Пользовательские действия».

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

Пример:

В Gmail при наведении курсора на строку электронного письма справа появляются иконки «Архивировать», «Удалить», «Отметить как прочитанное» и «Отложить». Такое решение помогает разгрузить интерфейс, одновременно обеспечивая возможность быстрого взаимодействия.

2. Иконки действий в первом столбце

Размещение значков непосредственно рядом с содержимым первой ячейки (например, названием задачи или ID) работает хорошо, когда действия тесно связаны с идентификатором. Такой подход обеспечивает мгновенный контекстный контроль.

Пример:

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

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

Аналогичным образом, YouTube отображает действия в первом столбце той строки, на которую пользователь навел курсор.

3. Действия в верхней панели инструментов

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

Пример:

Такое решение использует Gmail: выбор строки — конкретного письма в почтовом ящике — вызывает появление иконок релевантных действий в верхней части таблицы.

4. Выпадающее меню для дополнительных действий

Если действий больше трех, их предпочтительнее поместить внутрь выпадающего меню «Еще» (иконка с тремя точками), чтобы избежать визуального «шума». Так интерфейс останется гибким, но при этом упорядоченным.

Пример:

ClickUp использует горизонтальное многоточие (…) в качестве иконки дополнительных действий («Добавить в мои», «Переименовать», «Преобразовать в» и т.д.).

В Google Drive меню с дополнительными опциями («Скачать», «Переименовать», «Поделиться» и другими) для каждого файла открывает вертикальное многоточие (⋮).

Массовые действия (применяются к нескольким выбранным строкам)

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

Вот несколько вариантов:

1. Контекстное выпадающее меню

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

Пример:

Когда пользователь выбирает несколько строк в Google Контактах, сверху появляется панель инструментов с иконкой дополнительных действий. Эта иконка открывает выпадающий список с релевантными опциями («Экспортировать», «Удалить» и т.д.).

2. Действия в верхней панели инструментов

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

Пример:

Когда пользователь выбирает несколько писем, Gmail отображает сверху панель с опциями «Удалить», «Архивировать», «Отметить как прочитанное» и т.д.

YouTube Studio показывает сверху панель инструментов с релевантными действиями, когда в таблице выбрано несколько элементов.

3. Плавающая панель инструментов

Все более популярным UX-паттерном являются «плавающие» контекстные панели инструментов. Такая панель обычно появляется непосредственно над выбранными строками или фиксируется в нижней части экрана при выборе нескольких элементов. Этот подход хорошо работает в отзывчивых интерфейсах и на мобильных устройствах. Кроме того, он помогает свести к минимуму перемещение курсора между данными и элементами управления.

Пример:

Когда пользователи выбирают несколько элементов в Jira, снизу появляется плавающая панель с массовыми действиями — «Редактировать», «Копировать в буфер обмена», «Удалить».

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

4. Панель инструментов + выпадающее меню

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

Пример:

Указанный паттерн использует Gmail. При выборе нескольких строк иконки ключевых действий появляются сразу, а остальные размещаются в меню «Еще».

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

Заключение

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

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

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