Человекоцентричный B2B-экран. Снижение нагрузки на техподдержку и ускорение поиска ошибок

Никита Мищенко

Продуктовый и UX/UI дизайнер

Задача

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

Исходный макет страницы

Ограничения

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

Микроанализ

Перед редизайном разделил пользователей страницы на группы:

• Маркетологи и E-commerce менеджеры

  Важен только верхнеуровневый статус и понятное описание проблемы без кода

• Разработчики

  Нужна техническая детализация, чтобы найти баг в коде

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

Продуктовые гипотезы

• Если сделать акцент на ключевых цифрах (47 483 без ошибок / 1 871 с ошибками) и подкрепить их визуалом, пользователь за секунду считает масштаб проблемы

• Если убрать визуальный шум сырых ссылок, улучшится понимание контекста ошибки и ее места

• Если указывать конкретную строку файла, разработчику не придется вручную искать ее среди 59 тысячи товаров

• Если объяснить, почему кнопка Перепроверить неактивна, снизится количество тикетов в техподдержку

Анализ исходного макета

Решение

Исправленный макет

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

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

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