Таблицы

Рутина В2В, профессиональных и специализированных интерфейсов: самое большое количество задач приходится именно на таблицы (и формы).

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

Короткие кейсы

1. Впихнуть невпихуемое

Админка управления выданными лицензиями от производителя ПО покупателям. Появилась давно и стилистических изменений в ней не планировалось (даже шрифт). Что делало задачу несколько сложнее =)

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

Поэтому я решила объединить информацию по расходам уников, выделив главное и второстепенное относительно этого блока и таблицы в целом. Фичи пошли дополнительным рядом снизу. Так же оптимизировала некоторые столбцы, например, объединив тип тарификации (текстовый и/или телефонный каналы) в одну колонку.
Короткий затест на наших админах (они же пользователи) показал хороший результат + отдельную благодарность, что таблица практически не разрослась и все сценарии на месте.

Задача

2. Динамические элементы

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

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

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

Вместо того, чтобы делать отдельный интерфейс для запусков тестов, приняла решение использовать саму таблицу. "Шапка" при запуске теста меняет состояние, отображая текущие данные по процессу тестирования, включая небольшой прогресс-бар по низу. Получается компактно и наглядно. Только когда завершится тестирование система сможет сгенерировать следующую строчку в списке запусков.

Задача

3. Облегчить по максимуму

Есть база клиентов бота. Используется, чтобы отслеживать различные динамики, запускать рассылки, оставлять комментарии сотрудникам, объединять с базами в других системах, etc. У каждого клиента есть свои характеристики (атрибуты): часть системная (например, мессенджер, в котором проходил диалог), часть создана самим пользователем и бот пытается распознать значения атрибутов в процессе общения.

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

Была сложность выбора: цветные или однотонные значения атрибутов, но на тесте победили цветные: в них быстрее ориентировались и выполняли задачи.

Задача

4. Минутка дизайн-системы

В Just AI долгое время не было единого компонента Таблицы в дизайн-системе.
Разрабатывала единый компонент под все таблицы: собрала примеры со всех разделов, нашла попробовала несколько концепций, выбрала главную, проверила на таблицах из продукта, проверила на дизайнерах согласовала с разработкой и описала.

В продукте используется множество таблиц с большой вариацией контента: он может идти в 3 строки, каждая строка содержать текст + иконку + бейдж + etc, строки могут быть сворачиваемые и иметь второй уровень, etc. Все это разнообразие, засунутое в 1 вариацию давало сильную нагрузку на память и на некоторых компьютерах отрисовка таблицы или вызов другого варианта вызывало дикие задержки, что, конечно, очень сильно раздражало пользователей. Нужно было искать другой вариант

Вторым важным для меня пунктом была настройка ширины колонок в таблице и шапке.

Таким образом, к чему я пришла:

Пример content-ячейки, которая может находится в начале, середине или конце таблицы, иметь до 3-х строк, в каждой из которых до 6 блоков контента и несколько вариантов типов контента. Все настройки вложенных компонентов доступны сразу с первого уровня (ячейки).
Получается небольшое количество компонентов, гибкая настройка и малое потребление памяти.

Дизайнерам зашло, а разработчики сказали, что им норм 😊

Задача

Положение ячейки с количеством строк

Контент

Настройка ячейки

Количество контента в строке