Как сделать инфографику из 111 заметок: кейс ProductSense

Привет, это Antro. Рассказываем, как за две недели разобрались и упаковали данные, которые ProductSense собрал по 700+ специалистам. Делимся советами по инфографике.

В январе к нам обратилась команда ProductSense. Это большая конференция для продакт-менеджеров, а сейчас ещё и полноценное профессиональное сообщество. Ребята проводят мероприятия для продактов, ведут собственное медиа и проводят исследования.

Команда проекта ежегодно публикует исследование о развитии специалистов продуктовых компаний. В этом году Product Sense выпускали его с Яндекс Практикумом. Чтобы собрать, все данные, систематизировать и оформить в инфографику, ребята обратились к нам.

Команда ProductSense хотела выпустить исследование поскорее, чтобы все данные были свежими на момент публикации. Мы работали параллельно: ребята описывали результаты исследования, а мы оформляли его графически.

На старте работы у нас был референс: сайт с исследованием, который нравился команде ProductSense. Ещё нам прислали материалы: 111 заметок по результатам исследования и документ, в котором ребята описывали собранные данные.

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

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

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

Изначально мы предполагали, что у нас получится где-то полтора десятка экранов со статистикой. Запланировали разработчику время на этот объём работы. Сам сайт решили делать в виде слайдов: чтобы каждый новый разворот сменял другой, словно по слайдеру.

Но потом данных стало так много, что концепцию пришлось сменить. Листать 12 слайдах о зарплатах — это издевательство над пользователем, который пришёл за другой статистикой. Сосредоточились на простом лендинге, но в отличие от многих таких отчётов внедрили на нём навигацию.

Мы начали собирать сайт, и разработчик ушёл в другой проект

У задействованного программиста было всего несколько дней, чтобы выполнить задачу. Дальше ему требовалось включиться в другую работу. В эти несколько дней мы не уложились, поэтому пришлось погружать в работу нового специалиста, объяснять ему задание.

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

Мы сталкивались с похожей ситуацией, когда публиковали своё исследование о eCommerce. Нужно сделать всю работу быстро, чтобы сохранить актуальность данных, но при этом информации так много, что приходится её постоянно перераспределять. Чтобы работа не останавливалась, команда должна работать как пожарная бригада — всегда быть наготове.

Вроде бы всё понятно: нужно просто построить графики и диаграммы — что может быть сложного? С этим справляется любой текстовый редактор по нажатию кнопки. Но главная сложность в том, чтобы сделать информацию понятной и интересной: когда в отчёте 63 экрана статистики, внимание пользователя может потеряться. Вот что мы делали, чтобы этого избежать:

Задействовали разные типы инфографики. Так иллюстрации становились разнообразнее. Диаграммы вставляются логично — они требуются там, где важно показать соотношение долей. С вертикальными и горизонтальными графиками сложнее. Поэтому мы применили такое правило: если объём текста позволяет — ставим вертикальный, где текста много — делаем горизонтальный.

Комбинировали цвета. Всего мы задействовали 7 цветов и с десяток оттенков к каждому из них. Подбирать их приходилось очень дотошно: градиенты должны сопровождать информацию. Например, тёмный цвет — это 80%, светлее — 60%, самый светлый — 40%. Нужно было не только растянуть эти цвета, но и сделать так, чтобы они контрастировали с текстом — иначе он будет нечитаемым.

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

Большая проблема — сделать несколько десятков таблиц, при этом ничего не перепутать и не сойти с ума. Данные из аналитики нельзя было импортировать, и мы переносили их вручную. Например, на экране с доходами у нас вышло 12 таблиц, на каждую — по 66 ячеек. Только по одному критерию нужно было заполнить 792 ячейки и нигде не ошибиться.

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

На выходе у нас получился большой отчёт с уймой данных. В него вошли: 32 горизонтальных графика, 30 таблиц, 8 вертикальных графиков и 3 круговых диаграммы. Всего 73 иллюстрации с данными. Посмотрите на несколько разворотов:

Отзыв Юры :)

Ссылка на полную версию исследования