Таблицы
Профессиональные и специализированные интерфейсы, где таблица — не элемент на экране, а весь рабочий день пользователя. 4 задачи разного масштаба: от точечного решения до компонента дизайн-системы.
В2В SaaS
Дизайн-системы
Роль:
Senior Product Designer
Визуал:
Дизайн-система Just AI
1. Впихнуть невпихуемое
Enterprise
Расширение функционала
Задача на ограничение
Дизай-система внутренних сервисов Just AI
Контекст
Внутренняя админпанель управления лицензиями ПО. Продукту понадобилось добавить 6 новых колонок и отобразить доступные функции — при этом таблица уже была плотной.
Ограничение
Ширина таблицы уже превышала разумные пределы, каждый параметр занимал отдельную колонку. Расширить больше — жестокость: пользователи работают на стандартных мониторах, горизонтальный скролл ломает рабочий процесс.
Что я сделала
Вместо добавления колонок — реструктуризация. Данные о расходах сгруппированы по уровню приоритета, избыточные колонки исчезли. Несколько типов биллинга объединены в одну с визуальным различением. Доступные функции вынесены в дополнительную строку под каждой записью — появляются только когда нужны.
Пользовательское тестирование подтвердило: таблица почти не выросла, но вместила всё необходимое.
2. Динамические элементы
В2В SaaS
Новый функционал
Real-time данные
Дизайн-система Just AI JAICP
Контекст
Система автотестирования ботов. Интерфейс показывает несколько тестов одновременно — у каждого своя история запусков и статистика. Во время выполнения теста данные меняются в реальном времени.
Ограничение
Компонент строится поверх дизайн-системы Just AI — работаем с тем, что есть.
Что я сделала
Двухуровневая структура: заголовок теста с ключевыми данными + таблица запусков под ним. В момент выполнения заголовок трансформируется — появляется прогресс-бар и живые счётчики. Остальная часть интерфейса не дёргается: пользователь видит прогресс, не теряя контекст.
3. Облегчить по максимуму
В2В SaaS
Расширение функционала
Дизайн-система Just AI JAICP
Контекст
Таблица базы клиентов без атрибутов — голый список. Пользователи не могли сегментировать, фильтровать и вообще работать с данными так, как им нужно. Таблица была малополезна.
Ограничение
Атрибуты — новая и мощная функция. Добавить её так, чтобы таблица не превратилась в перегруженный интерфейс, которого пользователи будут избегать.
Что я сделала
Атрибуты появились в таблице, но не захватили её. Значения оформлены цветовыми метками — таблица читается взглядом, а не построчно. Новый атрибут добавляется прямо в строке через «+», без модальных окон. Чекбоксы и кнопки действий скрыты и появляются при наведении: пространство отдано данным, инструменты — под рукой.
Тестирование показало улучшение показателей выполнения задач.
4. Минутка дизайн-системы
В2В SaaS
Дизайн-система
Компонентная архитектура
Контекст
Универсальный компонент таблицы для дизайн-системы Just AI: один на все случаи, от простых списков до плотных enterprise-панелей.
Ограничение
Монолитный суперкомпонент с сотней параметров убьёт производительность и станет неуправляемым при масштабировании.
Что я сделала
Модульный подход: нет компонента столбца или строки, таблица собирается из "кирпичиков" — ячеек. Ячейки делятся на 3 типа: зона действий слева, контентная ячейка (может быть в любом месте строки), зона действий справа. Лимиты выбраны под продукты компании на момент разработки: не более 3 строк текста и не более 6 контент-блоков в ячейке. Компонент легко редактируется, предсказуем и быстр при любых данных.
Made on
Tilda