AI Server, который настраивают без внедренца

Ситуация

AI Server ставят на внутренние серверы клиента. Он позволяет использовать нейросети внутри контура компании: загрузил датасет своих документов, разметил поля, обучил модель, и потом используешь её в Primo RPA Studio или в любом клиентском продукте с доступом по REST API. Качество распознавания вырастает сильно, а документы не покидают периметр компании. Позже сервис научился дообучать любую базовую модель под задачи бизнеса: файнтюнинг и скиллы на суммаризацию, извлечение, генерацию.

К моменту, когда меня позвали, продукт уже тестировали реальные клиенты. Собирали его разработчики своими силами, на Ant Design под React со стилизацией под Hope UI: у компании было несколько веб-продуктов и стояла задача унифицировать их вид.

Обратная связь от клиентов сходилась в одном: настройка проекта занимает слишком много шагов. Их три типа, и каждый настраивался по-своему. Между созданием проекта и его реальным использованием проходили недели, почти всегда с участием специалиста компании. Запутанная навигация и дублирующийся функционал тормозили отдел внедрения и не давали масштабировать продукт на широкую аудиторию.

Задача

Меня пригласили как UX/UI-дизайнера: проект делали одни разработчики, дизайнера в нём не было. Бизнес ждал, что настройку клиент сможет пройти сам, без постоянной помощи поддержки и внедрения. Моя задача звучала так: снизить порог входа, чтобы работать с сервисом могли люди без специальных знаний в ИИ и OCR.

Остановить разработку и перерисовать всё целиком было нельзя, продукт уже в эксплуатации. Значит, менять придётся по частям, вкладываясь в текущие релизы.

Действия

Погружение и разбор сценариев

Начал с команды: кто отвечает за продукт, кто за внедрение, как всё устроено сейчас. Разговаривал с экспертами по настройке, отделял ключевые сценарии от вспомогательных и собирал визуализацию того, как пользователь реально ходит по интерфейсу. Опыт в ИИ и в похожих веб-платформах помогал быстро понимать, о чём речь, и говорить с разработкой на одном языке.

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

Навигация: главная и внутри проекта

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

Главная навигация стала компактной и осталась привычной. У проектов появилась своя, отдельная, которая не перекрывает главную.

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

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

Редактор разметки датасета

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

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

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

Карточки настройки обучения

После разметки модель можно дообучить. Сценарий разобрали с командой так же, как остальные, и сделали несколько вариантов компоновки страницы. Выбрали ленту из карточек: она оказалась самой читаемой.

В начале ленты стоит карточка с настройкой: через неё видно результат разметки активного датасета, задают параметры и запускают обучение. Отдельный блок оценки качества разметки получился одновременно наглядным и компактным.

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

Настройка параметров полей

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

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

Долгие процессы на отдельном экране

Часть задач в сервисе выполняется долго, и пользователю нужно параллельно делать что-то ещё. Для таких случаев сделали отдельную страницу с модальным окном процесса.

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

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

Результат

Настройка перестала быть набором разрозненных шагов, которые собирает специалист. Интерфейс теперь ведёт пользователя по этапам, но не ломает старые сценарии: вернуться назад и поправить результат можно в любой момент.

Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию взяли нового дизайнера, я вёл её в курс дела и курировал результат по задачам. После адаптации работа над сервисом полностью перешла к ней.

Что сделал бы иначе

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