UI Design
Дизайн карточек
Web
Aimylogic
Редизайн каналов
в Aimylogic
ПРОДУКТ
Aimylogic
ПЛАТФОРМА
Web · 1280–1920
РОЛЬ
Lead UX/UI
ГОД
2020
ЗАПРОС
В продуктовую команду Just AI поступил запрос от пользователей: «Ребята, на экране уже много каналов, искать сложно. Бардачок-с». Услышали, приняли обратную связь и приступили к действию.
Список каналов текущего UI Aimylogic
ПЕРВЫЕ ЧЕРНОВИКИ
Пока уберем блок и посмотрим, что получится. Проводим несложные манипуляции через Inspector браузера. Стало лучше, однако до идеала далеко.
Вместо нейтрального «Подключить» хочется обратиться к пользователю напрямую. Меняем текст на «Подключите».
Вместо нейтрального «Подключить» хочется обратиться к пользователю напрямую. Меняем текст на «Подключите».
В продукте меняется навигация. Aimylogic умеет собирать не только чат-ботов, но и телефонных — с входящими и исходящими звонками. Эти каналы телефонии теперь будут доступны только в карточке телефонного бота. У чат-бота, который мы здесь редизайним, вкладки Обращение к боту и Обзвоны больше не нужны — их можно убрать.
Есть желание призвать пользователя к действию, чтобы подключить канал. Блок У вас нет подключенных каналов — это состояние системы и слабый call-to-action. Пробуем переработать, но все равно что-то не то.
Есть желание призвать пользователя к действию, чтобы подключить канал. Блок У вас нет подключенных каналов — это состояние системы и слабый call-to-action. Пробуем переработать, но все равно что-то не то.
Черновик в Figma
Черновик сделан через Inspector Google Chrome
ГРУППИРОВКА КАНАЛОВ
Переходим к отображению каналов для подключений. Группируем каналы по типу: Голосовые ассистенты, Мессенджеры и соцсети, Интеграции с бизнес-системами, API-интеграции. Работаем только с группировкой, дизайном плашек займемся позже.
Кажется, можно упростить, объединив Интеграции с бизнес-системами и API-интеграции. Оставляем три группы: Голосовые ассистенты, Мессенджеры и соцсети, API & Бизнес-системы.
Группировка каналов по типу
ПЕРЕБОР ВАРИАНТОВ
Приступаем к дизайну плашек. Хочется сделать дизайн простым, чистым и компактным. Перебираем варианты.
Экспериментируем
Совсем не туда
Ближе, но еще не то
Близко, но все еще не то
Что-то в этом есть. Развиваем эту идею
ФИНАЛЬНОЕ РЕШЕНИЕ
Убираем подложки, меняем заголовок на Подключите канал. Чатвиджет — это не мессенджер, поэтому название группы становится Чаты и соцсети. Включаем 12-колоночную сетку и пробуем скомпоновать список в 10 колонок.
Макет с наложением 12-колоночной сетки
Есть ощущение, что название каналов — это ссылки и по клику произойдет переход. Возвращаем каждому каналу фон и для усиления эффекта добавляем кнопку Подключить. Коллеги подсказали сделать ссылку в подписи Доступно на других тарифах.
Вот так хорошо!
АДАПТИВНОСТЬ
Делаем коридорку, получаем позитивную обратную связь. Ок, едем дальше. Придумываем поведение верстки на разрешении 1920×1080.
Макет для разрешения 1920×1080
ГАЙД ДЛЯ РАЗРАБОТЧИКОВ
Составляем руководство для разработчиков. По шагам описываем построение экрана в целом и каждой секции. Отдельно разбираем стандартные и широкие форматы.
Руководство для разработчиков в Figma
У карточки есть неочевидные состояния и поведение. Название канала может быть в одну или несколько строк, канал заблокирован для подключения, пользователь навел курсор на карточку. Поэтому карточка канала описывается подробно.
Состояния карточки канала
Финальный макет для разрешений от 1280×720
Макеты готовы, передаем их в разработку
Прошло шесть лет.
Дизайн каналов остался прежним
Это лучшее доказательство, что решение оказалось состоятельным. За шесть лет интерфейс подключения каналов в Aimylogic не вызывал критических нареканий — значит, тогда мы нашли формулировки и компоновку, которые закрыли
задачу надолго.
задачу надолго.