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

Моя роль
Я присоединилась к команде на этапе перехода продукта с версии 2 на версию 3.
Моя задача как дизайнера интерфейсов — обновить UI и UX визуального конструктора потоков, сохранив привычные сценарии, но улучшив удобство и масштабируемость

Задача

— Необходимо переработать панель добавления агента на холст, так как с увеличением количества агентов панель не сможет отобразить все
— Сохранить способ помещения агентов на холст: drag-n-drop
— Добавить к агентам теги, чтобы было проще искать нужный агент

Проблемы исходного решения

Ограничение по масштабу
Панель открывалась поверх холста и вмещала 16 карточек элементов. Однако планировалось расширение библиотеки до 70–100 элементов (или больше) — в таком формате пользоваться панелью стало бы неудобно.

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

Формат взаимодействия
Возникал вопрос о формате самой панели: будет ли это модалка, поповер, панель?

Анализ конкурентов

Рассмотрела три аналогичных приложения: Zapier, Make, n8n. В каждом из них я смотрела на: расположение элемента добавления агента; внешний вид панели, где находятся агенты; особенности поведения, которые зацепили взгляд.

Выяснилось, что по виду окна добавления агента:
💡 У всех трех разные элементы (модальное окно, боковая панель, поповер)
💡 У всех есть поиск по агентам
💡 Все предлагают в первую очередь агенты сбора данных (подсказки, что флоу должен начинаться именно с этого типа).

По расположению кнопки добавления:
🍉 У всех на пустом холсте присутствует кнопка «Добавить новый шаг»
🍉 У всех есть кнопка «Добавить» (плюсик) рядом с добавленным агентом (непосредственно на агенте или на выходящем коннекторе)
🍉 Фиксированная кнопка добавления на панели есть не у всех (только у n8n и Make).

Выводы

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

🍝 Список агентов по категориям с возможностью drag&drop на холст.

🍝 Теги с пояснениями о работе агента добавить в конце описания, но также добавить очень краткое текстовое описание с самой сжатой основной функцией агента. Ограничить по размеру и текстовое описание, и количество тегов.
🍝 Добавить на пустой холст по центру крупную кнопку добавления агента с некой подписью, агитирующей начать с агента сбора

Проведенная работа

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

Размещение кнопки добавления

Изначально в интерфейсе уже существовала плавающая кнопка добавления в нижнем правом углу холста — примерно на границе с правым рейлингом.
Я предложила перенести её на сам рейлинг, чтобы логически связать с областью, где находятся остальные элементы управления (вкладки «Settings», «Test Runs» и т. д.).

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

- сверху — вкладки для работы внутри панелей;

- снизу — кнопка, открывающая панель, из которой пользователь забирает элементы для работы на холсте.

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

Решение по типам агентов

В процессе обсуждения возникла идея объединить некоторых агентов (например, сбор и доставку данных, если агент имеет две ипостаси) в один, обозначая их тегами обоих типов.
Однако при прототипировании стало ясно, что это создаёт слишком сложную логику взаимодействия — неочевидно, какой именно тип пользователь тянет на холст с помощью drag-and-drop.
Мы решили сохранить отдельные агенты для разных типов операций, чтобы избежать путаницы и сохранить предсказуемость интерфейса.

Альтернативный сценарий: мини-панель добавления

Я также проработала дополнительный сценарий — мини-панель быстрого добавления. Она появляется, если пользователь тянет коннектор от существующего агента и отпускает его в пустом месте. В этом случае открывается компактное окно со строкой поиска (курсор сразу стоит в нем) и списком недавно использованных модулей.
Такой вариант позволяет быстро добавить следующий модуль без открытия основной панели. В этой панели есть только два типа агентов — processor и forwarder, потому что коннектор не может входить в collector.

Итерации и обратная связь

После выкатки прототипа на dev-среду команда интеграторов предложила переместить кнопку открытия панели вверх рейлинга, поскольку при анимации нажатия плюсик превращался в крестик — и это визуально воспринималось как кнопка «Закрыть окно», которая обычно располагается сверху.

Я учла это замечание и перенесла кнопку наверх, при этом изменила расположение соседних элементов:

Кнопку «Revert» (опасное действие без возможности отката) переместила вниз, на плавающую панель управления холстом.

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

Результаты

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

Улучшился поиск нужных элементов, стало проще ориентироваться в расширяющемся наборе агентов.

Концепция «мини-панели» пока находится в разработке, но принята командой как перспектива развития.