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

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

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

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

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

У нас были 111 заметок, гуглдок и две недели времени

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

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

Наши вводные перед началом проекта: 111 стикеров на доске в Miro, которые нужно было организовать
Наши вводные перед началом проекта: 111 стикеров на доске в Miro, которые нужно было организовать

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

Когда нам выслали данные, они выглядели так: нужно было отсечь лишнее и выделить главное
Когда нам выслали данные, они выглядели так: нужно было отсечь лишнее и выделить главное

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

Скриншот из отчёта 2022 года. В нём много текста — в новом отчёте такого следовало избежать
Скриншот из отчёта 2022 года. В нём много текста — в новом отчёте такого следовало избежать

Отрисовали 63 экрана с данными

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

Пошли за собственными референсами: посмотрели, как компании оформляют свою статистику, накидали собственных графиков для примера, собрали фотографии из журналов и книг
Пошли за собственными референсами: посмотрели, как компании оформляют свою статистику, накидали собственных графиков для примера, собрали фотографии из журналов и книг

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

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

Зачастую исследования проектируют так, чтобы они выстраивались в историю. Мы позаботились о тех, кто не хочет смотреть сразу всё — для этих пользователей добавили кнопки с разделами
Зачастую исследования проектируют так, чтобы они выстраивались в историю. Мы позаботились о тех, кто не хочет смотреть сразу всё — для этих пользователей добавили кнопки с разделами

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

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

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

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

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

Мы с ProductSense в разных часовых поясах. Чтобы не тормозить работу, я работал ночью, и оценивал всё утром свежим взглядом. Так мы быстро получали и вносили правки — разработка шла безостановочно

Даниил Ильин, продуктовый дизайнер Antro

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

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

Пример нашего правила: на графике выше нужно было отразить вопрос, а снизу — только показать числа
Пример нашего правила: на графике выше нужно было отразить вопрос, а снизу — только показать числа

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

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

Каждый новый экран отличался по цветам от предыдущего — так статистика выглядит динамичнее
Каждый новый экран отличался по цветам от предыдущего — так статистика выглядит динамичнее

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

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

Легко ошибиться, когда переносишь данные в одну таблицу. Куда проще — когда их 12 по одной теме
Легко ошибиться, когда переносишь данные в одну таблицу. Куда проще — когда их 12 по одной теме

Когда мы отрисовали все таблицы, отдел бренд-дизайна переключился на другой проект. В этот момент выяснилось, что инфографика некрасиво растягивается при адаптации под телефоны. Тогда нас выручил наш продуктовый дизайнер Даня Ильин: в доисторические времена он работал графическим дизайнером, поэтому смог отрисовать все иллюстрации под другое разрешение

Яна Севостьянова, лид бренд-дизайнеров Antro

Собрали лендинг исследования за две недели

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

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

Отзыв Юры :)

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

Ещё больше о своей работе мы рассказываем в нашем телеграм-канале. В нём мы пишем про пользовательский опыт и UX, показываем закулисье нашего агентства.

4141
15 комментариев

Дайте ссылку на исследование Product Sense, интересно почитать

Ответить
Автор

Оп, держите: https://productsense.io/research22. Сейчас и в статью вошьём

1
Ответить

У меня бы кукуха отъехала уже на четвёртой таблице, такое не каждый выдержит

Ответить

В какой-то момент и правда казалось, что отъедет 🤪
Если без шуток, процесс интересный, но в одного этим не стоит заниматься. Особенно, когда речь идет о таком объёме)

Ответить

но поверь, есть уникумы которые выдерживают а потом говорят что им это понравилось)

Ответить

А что за паутина в прошлогоднем отчёте? Почему в новой её нет?

Ответить