Найти нужный канал было квестом я сгруппировала их и упростила карточки

Запрос

В продуктовую команду Just AI поступил запрос от пользователей: «Ребята, на экране уже много каналов, искать сложно. Бардачок-с».

Первые черновики

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

Есть желание призвать пользователя к действию, чтобы подключить канал. Блок «У вас нет подключенных каналов» — это состояние системы и слабый call-to-action. Пробую переработать, но всё равно что-то не то.

Через Inspector браузера временно убираю блок «У вас нет подключенных каналов», чтобы посмотреть на макет без него. Стало лучше, но кнопка подключения канала ещё не финальна.

Вместо нейтрального «Подключить» хочется обратиться к пользователю напрямую. В финальном варианте поменяю текст на «Подключите».

Группировка каналов

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

Кажется, можно упростить, объединив интеграции с бизнес-системами и API-интеграции. Оставляю три группы: голосовые ассистенты, мессенджеры и соцсети, API & бизнес-системы.

Перебор вариантов

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

Финальный вариант

Убираю подложки, меняю заголовок на «Подключите канал». Чатвиджет — это не мессенджер, поэтому название группы становится «Чаты и соцсети». Включаю 12-колоночную сетку и пробую скомпоновать список в 10 колонок.

Есть ощущение, что название каналов — это ссылки и по клику произойдёт переход. Возвращаю каждому каналу фон и для усиления эффекта добавляю кнопку «Подключить». Коллеги подсказали сделать ссылку в подписи «Доступно на других тарифах».

Адаптивность

Делаю коридорное тестирование. Респонденты говорят: «Стало лучше! Теперь понятно, что где искать». Придумываю поведение вёрстки на разрешении 1920×1080.

Гайд для разработчиков

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

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

Было — стало

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

Прошло шесть лет. Дизайн каналов остался прежним

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