Советы для создания потрясающей интерактивной инфографики. Как создать интерактивный график
Testix публикует перевод статьи Робби Ричардса . Оригинал: How to Make an Interactive Infographic (a 6-Point Guide)
Одна из самых больших проблем, с которой сталкиваются сегодня маркетологи, - это борьба за создание вовлекающего контента.
Алгоритмы поиска постоянно изменяются в попытках отфильтровать контент низкого качества. С учетом вышеперечисленного это приводит к масштабным изменениям в стратегиях создания контента.
Некоторые брэнды перешли на лонгриды…
…или тот тип контента, который Брайен Дин продвигает при помощи своей «техники Небоскрёба» .
Результат - взрыв контента, заполнившего Интернет. Сегодня только в блогах каждый день публикуется более 2 миллионов статей.
Этот уровень насыщенности контента вызвал резкую смену стратегий компаний.
В последние годы, многие работали над тем, чтобы разнообразить свой контент, добавляя другие форматы - например, инфографику . Факт: инфографика в течение 2016 года пережила бурный рост: 58% маркетологов отметили ее среди главных тактик, которые они используют для вовлечения аудитории.
Например, некоторые маркетологи считают, что создание инфографики требует определённых профессиональных навыков или дорогостоящего графического дизайнера. Но это не так.
Вам не нужна специальная команда разработчиков, если у вас есть платформы *, предлагающие набор инструментов, ускоряющих и упрощающих процесс создания интерактивного контента.
В этой статье Вы увидите, что интерактивную инфографику не только легко создавать - она еще более эффективна для вовлечения аудитории, чем статичная инфографика, и превращает ваших читателей в потенциальных клиентов.
Почему интерактивная инфографика побеждает своего статичного двойника.
Концепция инфографики проста: вложи как можно больше ценного для читателей в часть контента и визуализируй, чтобы лучше вовлечь их.
Именно для этого и создана интерактивная инфографика.
Дизайн графики идеально сочетается как с сюжетом истории, так и с набором данных. Вы обнаруживаете себя путешествующим со скоростью 3000 километров в час, летящим мимо Международной космической станции на самую вершину ленты, составленной из 21,9 миллиарда фотографий, выложенных в Инстаграм за год.
Вот что нужно держать в уме, когда вы выбираете визуальную тему для интерактивной инфографики:
- Помогают ли изображения и интерактивные элементы помогают оживить данные?
- Насколько хорошо изображения, анимация и элементы дизайна отражают ваш бренд, равно как и любые другие бренды, которые выступили в роли партнеров при создании контента?
- Где будет жить интерактивная графика? Если она будет размещена на вашем веб-сайте, возможно вы захотите, чтобы дизайн соответствовал теме или шаблонам вашего сайта.
- Убедитесь, что идея визуализации соответствует интересам вашей аудитории, индустрии и истории в целом. Инфографика о курортном отдыхе будет иметь совершенно иной визуальный стиль, чем промо мероприятия для топ-менеджеров.
Еще один замечательный пример - это инфографика Joho Bean :
Она увлекает пользователя в необычное мультимедийное приключение, используя сочные кадры, рассказывает о путешествии кофейного зерна от места созревания к потребителю.
Действия пользователя должны создавать ответную реакцию
Интерактивная инфографика должна быть интерактивной, но это не значит, что она должна быть ограничена отдельными кликабельными элементами.
Каждое действие пользователя должно создавать какой-то отклик внутри контента, чтобы все в целом создавало по-настоящему персональный опыт - даже если это всего лишь обычная прокрутка страницы.
Скрытый контент не только заставляет читателя активно участвовать в изучении контента , он поощряет любопытство, а также позволяет читателям пропустить разделы, которые им мало интересны.
Персонализируйте контент при помощи информации от пользователя
Вы можете гарантировать гораздо более сильное вовлечение, если предложите пользователям данные на основе введенной ими информации. Это соответствует желаниям пользователей: они хотят больше интерактивного контента и больше персонализации .
Потрясающий пример этого - персонализированная инфографика, которая дает представление о том, может ли Ваша работа подвергаться риску быть автоматизированной роботами:
Пользователям нужно выбрать профессию, которая их интересует, чтобы получить релевантную информацию.
Включите графические формы для сбора информации
В последние несколько лет инфографика эволюционировала от статичных картинок до насыщенного интерактивного опыта с элементами анимации и видео, адаптированными под уникальный контент. Она больше не ограничивается заранее подготовленными, универсальными шаблонами. И сегодняшняя подборка содержит лучшие образчики инфографики, демонстрирующие, как выглядит интересный и информативный опыт.
Большая часть инфографики в этом списке была выбрана, чтобы показать различные способы, с помощью которых дизайнеры подходят к визуализации данных. Однако здесь есть также несколько «гибридов», иллюстрирующих стирание границ между инфографикой и насыщенным мультимедийным опытом при создании увлекательного контента и убедительных историй на лендингах. Отклонение от традиционных форм означает, что мы заходим на более сложную медиатерриторию, и именно такие эксперименты с технологиями и повествованием будут иметь решающее значение для формирования будущего графического дизайна.
1. Карта ветров
«Карта Ветров» (Wind Map) — это захватывающий образец дизайна, в котором показаны направление и скорость ветра над Соединенными Штатами. Данный дизайн несет скорее художественную, чем утилитарную цель, и это прекрасно: очень приятно просто сидеть и смотреть, как тонкие-тонкие ниточки вьются по карте. Простой, но хорошо продуманный пример того, как инфографика, показывающая траектории движения фигур, выигрывает от анимации и движущихся изображений.
2. В полете
В 2014 году The Guardian запустил инфографику «В полете» (In Flight), демонстрирующую данные о совершающихся в реальном времени коммерческих перелетах (кажется, сейчас сведения не обновляются, а жаль), а также содержащую урок по истории авиации. Приглушенные разговоры между авиационными экипажами в начале интерактивного шоу создают особую атмосферу. Похоже, что инфографика в наши дни постепенно превращается в кинематографический опыт. По крайней мере, «В полете» указывает на это направление...
3. Наберите Луну
В инфографике «Наберите Луну» (Dial A Moon) происходит немногое, но она служит своей цели довольно хорошо. В 2015 году, благодаря NASA, инфографика лунных фаз обновлялась каждый час, и можно было не лезть в Google в поисках этой таинственной информации. Теперь вы можете посмотреть картинки, вручную введя месяц, день и время.
4. Сутки с Плутоном
Журнал Nature публикует много интересной инфографики для своей интересующейся наукой аудитории. Была в их числе и одна о знаменитом пролете космического корабля возле Плутона (24 Hours Of Pluto). Инфографика включала много текстовой информации, но визуальные эффекты обеспечивали легкое понимание самого интересного, от строения карликовой планеты до процесса формирования ее лун. Сейчас в Интернете доступна текстовая часть, а также два анимационных видео из инфографики.
5. Как менялись американские дома
Совершите путешествие по великой американской мечте, отраженное через эволюцию в стилях домов. Эта хорошо иллюстрированная инфографика позволяет вам сесть за руль автомобиля (также изменяющего свой вид по мере прокрутки, чтобы не отставать от эпохи) и проложить путь от 1900-х до 2000-х годов, проезжая мимо построек, популярных в течение отдельных десятилетий. На этом пути вам встретится множество полезных материалов (включая социально-политические условия того времени, а также направления в моде), и все это заканчивается вопросом, побуждающим вас представить будущее американского дома. Инфографика Decades Of American Homes — отличный пример горизонтального скроллинга, здесь он к месту.
6. Эволюция маркетинговой аналитики
В своей инфографике Evolution of Insight компания Vision Critical, занимающаяся «интеллектуальными» пользовательскими исследованиями, отслеживает развитие рынка маркетинговых технологий во всем мире с 1890-х до наших дней. Она функционирует аналогично инфографике «Как менялись американские дома», и, таким образом, позволяет сравнить эффективность применения интерактивной временной шкалы для двух очень разных историй. Инфографика Decades Of American Homes имеет преимущество, поскольку просмотр домов по мере движения на автомобиле гораздо более интуитивен, чем путешествие по великой американской аналитике. Хорошая инфографика создается с учетом особенностей контента, а не вокруг него.
7. Права ЛГБТ-сообщества во всем мире
The Guardian захватывает еще одну позицию в нашем списке с этой элегантной инфографикой, объясняющей юридическую ситуацию по правам ЛГБТ по целому ряду вопросов (брак, дискриминация на рабочем месте, преступления на почве ненависти и т.д.) в каждом государстве мира. Перемещение по полукругу обеспечивает быстрый и простой способ сравнения статистики между разными странами, а композиция инфографики сохраняет глобальный статус на переднем плане в центре. Здесь также есть мощный призыв к действию, ставящий целью преодоление разрыва между простым осознанием проблемы и активизмом.
8. Неравенство поправимо
Еще один чудесный пример интерактивной инфографики «Неравенство поправимо» (Inequality Is Fixable) приглашает аудиторию погрузиться в проблему, делая ее глубоко личной. Зритель гарантированно не потеряет интерес к материалу, сообщающему ему или ей, сколько недоплачивает его/ее босс и почему. Делая пользователя частью истории, разработчики подогревают любопытство и проводят пользователя по всем необходимым этапам прямо к призыву к действию (Call-To-Action) в конце.
«Мы дали этому свершиться — как же теперь все исправить?»
9. Нарисуйте сами: как семейный доход предсказывает шансы поступления ребенка в колледж
Многие из инфографик в этом списке используют анимацию и интерактивность для обеспечения богатого опыта. Визуально данная инфографика от New York Times (You Draw It: How Family Income Predicts Children’s College Chances) придерживается классического формата диаграммы, но она также использует понимание пользовательского поведения для расширения области инфографического дизайна, а именно такой метод как опережающую и интерактивную визуализацию. Прося читателей нарисовать собственную кривую, они внедряют элемент личной заинтересованности и таким образом дают людям действительно ценную информацию.
Не самый худший результат! Вертикальная ось — процент детей, поступивших в колледж. Горизонтальная ось — перцентиль родительского дохода
10. Как умирают американцы
За исключением титульного изображения этот пример использует в основном только старые-добрые диаграммы для визуализации контента. Но это вовсе не скучно, поскольку пользователям доступно самостоятельное перемещение по данным с помощью движения курсора вдоль графиков. Это значительно облегчает сравнение, например, количества смертей, связанных с самоубийством, в 70-е годы по сравнению с нынешним (намек: сейчас оно находится на подъеме), статическая диаграмма не справилась бы с этим так ловко.
11.
С тех пор, как дебютировал проект «Снегопад» (Snowfall), заслуживший всеобщее внимание и похвалу, New York Times поддерживает свою репутацию представителя передовой мультимедийной журналистики. Команда издания использует сочетание инфографического дизайна и углубленного повествования для создания впечатляюще интересного опыта. У них есть и более яркие примеры, но The Russia Left Behind представляет собой работу, вызвавшую определенный резонанс. Инфографика функционирует как интерактивная поездка по России (вы прокладываете себе путь на карте).
12. Машины Бонда
Если вы когда-либо захотите познакомиться с историей Джеймса Бонда, посмотрев на его машины, то поблагодарите британского автодилера Evans Halshaw — он предоставил вам такой шанс. Его интерактивная инфографика Bond Cars позволяет вам изучить модель и дизайн каждого из автомобилей Бонда, а также дает несколько дополнительных интересных фактов. Используя вездесущую тактику слайдера, вы также можете «раскрыть» автомобиль во всей его металлической красе (по умолчанию дается лишь одноцветный рисунок). Так авторы творчески решили проблему необходимости включить фотографии, не совсем подходящие под эстетику инфографики.
13. Цвета движения
«Цвета движения» (The Colors Of Motion) — это инфографическая серия, анализирующая фильмы только по их цветовой палитре, полученной из соединения всех кадров. Если вы когда-нибудь задавались вопросом, то теперь у вас есть ответ. Не можете найти заголовок в базе данных? Просто отправьте разработчикам сообщение — они принимают запросы.
14. Царская гробница в Перу
National Geographic имеет довольно впечатляющую коллекцию, как они сами ее называют, «интерактивной графики» (большинство из которой сопровождается детальными текстовыми описаниями, как в случае, например, с Колонной Траяна), но мы выбрали этот относительно простой пример, чтобы подчеркнуть, применение каких методов действительно эффективно в интерактивной инфографике. «Царская гробница в Перу»(Peru’s Royal Wari Tomb) раскрывает особенности погребения дворянки тех времен. Фокус переходит от обмотки мумии к ее украшениям и положению. Разделяя информацию на небольшие части и позволяя пользователю перемещаться между ними, интерактивная графика избегает самых коварных ловушек: переизбытка данных и визуальных эффектов. Более того, каждое последующее взаимодействие расширяет опыт, делая его намного полезнее, чем в случае, если бы все было представлено сразу. Наш мозг обладает механизмом, отвергающим подавляющие стимулы, а данный тип взаимодействия становится отличным решением для пользователя, позволяя легко поглощать информацию.
15. Что такое «Шотландский референдум»? Объяснение для не-британцев
The Guardian, как и New York Times, делает ставку на мультимедийную журналистику, и их видеоролик на ура справляется с одной из главных функций инфографики: придавать громоздкой информации приемлемую форму. Для многих из нас, живущих за пределами Великобритании, референдум представляет собой весьма запутанную тему. К счастью, это видео (Scottish Referendum Explained For Non-Brits) поможет вам быстро узнать о ее важных аспектах, не требуя глубокого погружения в историю.
16. Здоровье населения
Перед изданием The Atlantic стояла задача — развить концепцию улучшения здоровья общества. Оно поручило компании Truth Labs оформить серию статей из 3-х частей о «Здоровье населения» (Population Health) в виде цифрового повествования. Основная цель исполнителя состояла в сохранении естественной прокрутки документа и обычных для пользователя условий чтения и создании при этом опыта, отличающегося от визуальной перспективы. Чтобы воплотить задуманное в жизнь, они позаимствовали инструменты и стратегии у кинематографа, но также ориентировались на набор дизайнерских принципов для поддержки принципа удобства чтения в качестве ключевого правила.
17. Зерна Joho’s
Австрийский производитель кофе Joho"s создал впечатляющий мультимедийный опыт Joho’s Bean, чтобы рассказать историю происхождения кофейных зерен. Повествование гармонично сочетает в себе аудио-, видео- и фотоматериалы, задействующие почти все чувства пользователя. Следуя за фермером, проходящим по кофейной плантации, вы слышите, как щебечут птицы, как звучат обжаренные кофейные зерна, упаковываемые в мешки, а также как шумят оживленные улицы и транспорт в городе. Полное погружение!
Joho"s отправляет вас в путешествие, объясняющее происхождение их кофейных зерен
18. Первозданная дорога
«Первозданная дорога» (The Wild Path) — это интерактивный эксперимент, рассказ о путешествии, созданный с помощью Canvas. Основным элементом является карта, анимирующая путь на карте при прокрутке страницы. Проект может работать не во всех браузерах. Зато ему сопутствует сопроводительная статья, объясняющая все оставшиеся за кулисами технологии создания инфографики.
19.
Освещение президентских выборов в США в 2016 году изданием The Guardian (Live Election Results) привнесло забавный элемент в серьезное дело, касавшееся набранных процентов и избирательных участков. Интерактивная инфографика отслеживала голоса в четырех штатах. По умолчанию на графике были показаны результаты по всей стране, а если пользователь наводил курсор на какой-либо участок на карте, то демонстрировалось, какие цифры кандидаты набрали именно там. Кандидаты в президенты были представлены в виде смешных пиксельных аватаров. По мере обновления инфографики в живом времени, человечки подкрашивали цветом штаты, в которых они выиграли. Время от времени рядом с кандидатом появлялась его цитата в пузыре.
Отражение результатов выборов в реальном времени
Представляем вам руководство по визуализации данных для начинающих, которое будет полезно всем, кто хочет научиться создавать интерактивную инфографику и карты.
Инфографика и интерактивные карты стали частью многих проектов, которые реализуют активисты, журналисты и общественные движения. Но как быть организациям, у которых нет штатного дизайнера? Даже в таком случае можно создавать качественные визуальные материалы - The Guardian рассказал, как это делать.
Данные
Первое, что вам нужно сделать - это понять, какие именно данные вы хотите визуализировать.
Давайте представим, что вы проводите кампанию, призывающую к улучшению санитарных условий во всем мире. Чтобы показать, насколько это важно, нужно подчеркнуть, как много стран до сих пор имеют ограниченный доступ к чистым туалетам и как незначительно эта ситуация изменилось за последние 10 лет. В этом руководстве мы воспользуемся набором данных от World Bank .
Теперь у нас есть данные за 10 лет, но нам нужны только цифры за 2000 и 2012 годы. Поэтому, после того, как мы загрузили себе данные, мы удаляем ненужные ряды и колонки (совет: сохраните оригинальный файл с данными).
Теперь, когда вы очистили данные, вы готовы к тому, чтобы их визуализировать. В нашем случае перед визуализацией была добавлена еще одна колонка - разница в процентах между 2000 и 2012 годами.
Как создать интерактивный график
Показать данные на графике - это самый быстрый и простой способ визуализировать информацию. Такие сайты, как Datawrapper , Infogr.am и PiktoChart являются легкими и удобными в использовании инструментами, с помощью которых вы можете создавать различные графики и диаграммы и встраивать их в любой сайт.
Datawrapper, возможно, является самым интуитивно понятным, а также он бесплатный. Слабая сторона этого инструмента заключается в том, что он не очень хорошо отображает большие массивы данных, поэтому мы будем визуализировать только 10 стран, в которых произошло больше всего изменений за последние 10 лет.
Как создать график с помощью Datawrapper:
- Зарегистрируйтесь на сайте Datawrapper и создайте новый график.
- Скопируйте и вставьте ваши данные в специальное поле.
- Проверьте ваши данные.
- Теперь веселая часть - выберите шаблон графика. Для данной визуализации был выбран простой интерактивный график, но вы можете выбрать из большого количества представленных на сайте вариантов.
- Последний шаг - окончательное редактирование вашего графика. Вы можете изменить цвета, добавить заголовок, описание и т.д.
Как создать интерактивную карту
Для того, чтобы показать данные, относящиеся к разным странам, лучше всего использовать карту. Представляем вам обзор трех бесплатных инструментов для начинающих.
Datawrapper
В этом инструменте теперь есть опция choropleth map - создание градиента в зависимости от ваших данных. Карты с помощью Datawrapper создаются так же, как и графики.
За: один из самых быстрых и простых инструментов. Datawrapper подскажет вам, когда вы ввели название страны не правильно. Еще одним плюсом этого инструмента является то, что если вы наведете курсор на определенный цвет в легенде, только страны с таким цветом будут подсвечены на карте.
Против: нет шаблонов для отдельных стран или городов.
За: бесплатный и простой в использовании (особенно для создания точек на карте).
Против: дополнительные возможности, например, изменение цветовой схемы, могут показаться для начинающих сложными (но если вы знаете, как соединить KML-файлы с существующими данными, вы сможете создать такую карту). Сложно добавить на карту легенду.
На первый взгляд может показаться пугающим, но с помощью этого инструмента вы сможете создать самые разнообразные карты и настраивать их в зависимости от того, что вы хотите видеть на карте.
За: позволят делать много настроек и добавлять дополнительные слои. Работает на мобильных устройствах.
Против: если вы планируете создать больше, чем 5 карт, и ожидаете, что у вас будет больше 10 000 просмотров в месяц, вам нужно будет платить за использование этого инструмента.
Как создать традиционную инфографику
Традиционная инфографика - это статичное, цветное изображение, на котором цифрами и иконками отображена информация. Инструменты, которые уже упоминались ранее - Infogr.am и PiktoChart - помогут вам в создании такого изображения. Они простые в использовании - вы можете просто перетягивать нужную информацию и вставлять ваши данные для создания графиков. Количество шаблонов, доступных в бесплатных версиях инструментов, ограничено.
Пример быстрой визуализации нашего набора данных с помощью Infogr.am:
С помощью представленных в этом руководстве инструментов каждый, не зависимо от имеющихся навыков, сможет создать красивую интерактивную инфографику или карту и донести свое сообщение до широкой аудитории.
Что такое интерактивная инфографика - такой вопрос все чаще задают нам наши клиенты. До недавнего времени малое количество агентств и студий вообще понимало, о чем идет речь, но сегодня коммуникационные компании, идущие в ногу со временем обязаны не только включать в прайс-лист данную услугу, но и качественно ее выполнять. К сожалению, пока что это умеют делать не все.
Существует несколько видов и определений интерактивной инфографики.
Первое: интерактивная инфографика - это инфографика, которая предполагает участие читателя в управлении отображаемыми данными. Интерактивность создается с применением технологий Flash или JavaScript, HTML 5.
Второе: любая инфографика, которая позволяет в онлайн режиме изменять данные, отображаемые в графической форме.
Проекты по созданию интерактивной инфографики только набирают обороты в связи с высокой сложностью и затратностью. Одним из ярких примеров интерактивной инфографики был проект "Кто поздравил Лукашенко с президентством", 2011 года.
Инфографика, обновляющаяся в интерактивном режиме, позволяла посмотреть, кто из глав государств поздравил А.Г. Лукашенко с выборами 2010 года. Данные, отображаемые на инфографике можно было выбрать по фотографии президента, флагу страны, в таблице или на глобусе. Таким образом, пользователь сам выбирал, какие данные его интересуют и какие будут показаны. В таблице также можно было отсортировать страны по длительности нахождения главы государства у власти на момент поздравления, по состоянию прав и свобод, качеству жизни, свободе прессы, де-факто демократическим выборам и рейтингу диктаторов. Наличие поздравлений проверялось на официальных сайтах президентов и изменялось вручную.
С момента запуска данного проекта прошло достаточно много времени, и сегодня многие специалисты стараются сделать так, чтобы интерактивные инфографики меняли информацию в автоматическом режиме. Хотя, это серьезно влияет на бюджет проекта.
Одними из первых интерактивную инфографику как средства формирования репутации или повышения лояльности пользователей стали применять крупные западные компании, которые поняли ценность отображения сжатой информации в динамике и возможность вовлечения посредством ее пользователей.
Некоторые виды инфографики позволяют в интерактивном формате настраивать некоторые параметры и получать интересные данные. Например, пользователю задается вопрос, ввести некое число, после чего график или диаграмма меняется на его глазах - получается совершенно новый информационный материал, непосредственным участником создания которого стал именно он.
Так, например, к третьей годовщине браузера Chrome компания Google визуализировала историю развития технологий и программ для просмотра веб-страниц: настоятельно рекомендуем перейти по ссылке и насладиться красочным зрелищем интерактивной инфографики в лучших традициях запада.
В упомянутом выше примере пользователи основных браузеров Internet Explorer 9 +, Firefox 4 +, Safari 4 +, Chrome 10 +, Opera 11 + могут увидеть два десятилетия развитии технологий, используемых в браузерах - от протокола http до офлайн-приложений AppCache.
Российскими компаниями интерактивная инфографика еще не освоена, поскольку даже простая инфографика на сегодняшний день есть в хорошем качестве не у всех. Несмотря на то, что услуга по созданию интерактивной инфографики - скорее новинка на российском рынке, наше агентство готово выполнять такие задачи уже сегодня, так как данный формат становится все более востребованным. Стоимость данной услуги высокая, поскольку подобные технологии единичны и всегда строго индивидуальны, что требует создания программного продукта с "0" под каждую задачу.