Никита Мищенко
Продуктовый и UX/UI дизайнер
Задача
Переверстать экран проверки товарных фидов в Яндекс Директе. Нужно ускорить считывание статусной информации и структурировать технические данные так, чтобы они были одинаково понятны и маркетологам, и разработчикам.
Исходный макет страницы
Ограничения
Нельзя удалять информацию, не менять верхний блок и не разделять рекомендации и ошибки по разным вкладкам или колонкам (это единый массив данных с бэкенда).
Микроанализ
Перед редизайном разделил пользователей страницы на группы:
Маркетологи и E-commerce менеджеры
Важен только верхнеуровневый статус и понятное описание проблемы без кода
Разработчики
Нужна техническая детализация, чтобы найти баг в коде
Обе группы хотят мгновенно узнать статус рекламы, оценить критичность ошибок, понять их причину и место без обращения в техподдержку
Продуктовые гипотезы
Если сделать акцент на ключевых цифрах (47 483 без ошибок / 1 871 с ошибками) и подкрепить их визуалом, пользователь за секунду считает масштаб проблемы
Если убрать визуальный шум сырых ссылок, улучшится понимание контекста ошибки и ее места
Если указывать конкретную строку файла, разработчику не придется вручную искать ее среди 59 тысячи товаров
Если объяснить, почему кнопка Перепроверить неактивна, снизится количество тикетов в техподдержку
Анализ исходного макета
Решение
Исправленный макет
В исходнике ключевые метрики, ради которых и проводили проверку, выглядели как второстепенный текст. В редизайне цифры подкрепил линейным баром. Теперь пользователь сразу понимает статус каталога.
Главная проблема исходника была не в нечитаемом коде, а в том, что название категории воспринималось как текст ошибки (я и сам так думал, пока не прочел документацию Директа). В итоге мы ставили пользователя перед фактом существования ошибок, но искать их он должен самостоятельно (хотя бэкенд уже знает их расположение и причину).
В моем решении категории сгруппированы в аккордеоны с счетчиками затрагиваемых товаров. Внутри каждого аккордеона добавлен IDE блок вывода кода с указанием номера строки и местом сбоя. Маркетолог получает понятную суть проблемы, а разработчику передают кусок кода с возможностью скопировать его или перейти к строчке в файле 👁️.
