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

Содержание

Лучшие примеры использования интерактивной инфографики на лендингах


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


Большая часть инфографики в этом списке была выбрана, чтобы показать различные способы, с помощью которых дизайнеры подходят к визуализации данных. Однако здесь есть также несколько «гибридов», иллюстрирующих стирание границ между инфографикой и насыщенным мультимедийным опытом при создании увлекательного контента и убедительных историй на лендингах. Отклонение от традиционных форм означает, что мы заходим на более сложную медиатерриторию, и именно такие эксперименты с технологиями и повествованием будут иметь решающее значение для формирования будущего графического дизайна.


«Карта Ветров» (Wind Map) — это захватывающий образец дизайна, в котором показаны направление и скорость ветра над Соединенными Штатами. Данный дизайн несет скорее художественную, чем утилитарную цель, и это прекрасно: очень приятно просто сидеть и смотреть, как тонкие-тонкие ниточки вьются по карте. Простой, но хорошо продуманный пример того, как инфографика, показывающая траектории движения фигур, выигрывает от анимации и движущихся изображений.

На скриншоте этого не видно, но движения ветра анимированы (для просмотра перейдите по ссылке выше)

Читайте также: 75 инструментов веб-анимации, которые вам нужно испробовать


В 2014 году The Guardian запустил инфографику «В полете» (In Flight), демонстрирующую данные о совершающихся в реальном времени коммерческих перелетах (кажется, сейчас сведения не обновляются, а жаль), а также содержащую урок по истории авиации. Приглушенные разговоры между авиационными экипажами в начале интерактивного шоу создают особую атмосферу. Похоже, что инфографика в наши дни постепенно превращается в кинематографический опыт. По крайней мере, «В полете» указывает на это направление…

Скриншот показывает полеты, совершающиеся между разными континентами


В инфографике «Наберите Луну» (Dial A Moon) происходит немногое, но она служит своей цели довольно хорошо. В 2015 году, благодаря NASA, инфографика лунных фаз обновлялась каждый час, и можно было не лезть в Google в поисках этой таинственной информации. Теперь вы можете посмотреть картинки, вручную введя месяц, день и время.

Луна во всей (или не во всей?) ее красе

Читайте также: Создание инфографики в Canva за 15 минут


Журнал Nature публикует много интересной инфографики для своей интересующейся наукой аудитории. Была в их числе и одна о знаменитом пролете космического корабля возле Плутона (24 Hours Of Pluto). Инфографика включала много текстовой информации, но визуальные эффекты обеспечивали легкое понимание самого интересного, от строения карликовой планеты до процесса формирования ее лун. Сейчас в Интернете доступна текстовая часть, а также два анимационных видео из инфографики.

«Сутки с Плутоном» являлась графическим представлением совершенного космическим кораблем пролета


Совершите путешествие по великой американской мечте, отраженное через эволюцию в стилях домов. Эта хорошо иллюстрированная инфографика позволяет вам сесть за руль автомобиля (также изменяющего свой вид по мере прокрутки, чтобы не отставать от эпохи) и проложить путь от 1900-х до 2000-х годов, проезжая мимо построек, популярных в течение отдельных десятилетий. На этом пути вам встретится множество полезных материалов (включая социально-политические условия того времени, а также направления в моде), и все это заканчивается вопросом, побуждающим вас представить будущее американского дома. Инфографика Decades Of American Homes — отличный пример горизонтального скроллинга, здесь он к месту.

Середина пути…

Читайте также: Анимация при скроллинге может стоить вам конверсии


В своей инфографике Evolution of Insight компания Vision Critical, занимающаяся «интеллектуальными» пользовательскими исследованиями, отслеживает развитие рынка маркетинговых технологий во всем мире с 1890-х до наших дней. Она функционирует аналогично инфографике «Как менялись американские дома», и, таким образом, позволяет сравнить эффективность применения интерактивной временной шкалы для двух очень разных историй. Инфографика Decades Of American Homes имеет преимущество, поскольку просмотр домов по мере движения на автомобиле гораздо более интуитивен, чем путешествие по великой американской аналитике. Хорошая инфографика создается с учетом особенностей контента, а не вокруг него.

Эволюция аналитики


The Guardian захватывает еще одну позицию в нашем списке с этой элегантной инфографикой, объясняющей юридическую ситуацию по правам ЛГБТ по целому ряду вопросов (брак, дискриминация на рабочем месте, преступления на почве ненависти и т.д.) в каждом государстве мира. Перемещение по полукругу обеспечивает быстрый и простой способ сравнения статистики между разными странами, а композиция инфографики сохраняет глобальный статус на переднем плане в центре. Здесь также есть мощный призыв к действию, ставящий целью преодоление разрыва между простым осознанием проблемы и активизмом.

Права ЛГБТ во всем мире


Еще один чудесный пример интерактивной инфографики «Неравенство поправимо» (Inequality Is Fixable) приглашает аудиторию погрузиться в проблему, делая ее глубоко личной. Зритель гарантированно не потеряет интерес к материалу, сообщающему ему или ей, сколько недоплачивает его/ее босс и почему. Делая пользователя частью истории, разработчики подогревают любопытство и проводят пользователя по всем необходимым этапам прямо к призыву к действию (Call-To-Action) в конце.

«Мы дали этому свершиться — как же теперь все исправить?»

Читайте также: 21 руководства по стилю для визуального вдохновения


Многие из инфографик в этом списке используют анимацию и интерактивность для обеспечения богатого опыта. Визуально данная инфографика от New York Times (You Draw It: How Family Income Predicts Children’s College Chances) придерживается классического формата диаграммы, но она также использует понимание пользовательского поведения для расширения области инфографического дизайна, а именно такой метод как опережающую и интерактивную визуализацию. Прося читателей нарисовать собственную кривую, они внедряют элемент личной заинтересованности и таким образом дают людям действительно ценную информацию. 

Не самый худший результат! Вертикальная ось — процент детей, поступивших в колледж. Горизонтальная ось — перцентиль родительского дохода


За исключением титульного изображения этот пример использует в основном только старые-добрые диаграммы для визуализации контента. Но это вовсе не скучно, поскольку пользователям доступно самостоятельное перемещение по данным с помощью движения курсора вдоль графиков. Это значительно облегчает сравнение, например, количества смертей, связанных с самоубийством, в 70-е годы по сравнению с нынешним (намек: сейчас оно находится на подъеме), статическая диаграмма не справилась бы с этим так ловко.

Заглавная страница инфографики


С тех пор, как дебютировал проект «Снегопад» (Snowfall), заслуживший всеобщее внимание и похвалу, New York Times поддерживает свою репутацию представителя передовой мультимедийной журналистики. Команда издания использует сочетание инфографического дизайна и углубленного повествования для создания впечатляюще интересного опыта. У них есть и более яркие примеры, но The Russia Left Behind представляет собой работу, вызвавшую определенный резонанс. Инфографика функционирует как интерактивная поездка по России (вы прокладываете себе путь на карте). 

Россия, которая осталась позади

Читайте также: Как сделать продающую инфографику


Если вы когда-либо захотите познакомиться с историей Джеймса Бонда, посмотрев на его машины, то поблагодарите британского автодилера Evans Halshaw — он предоставил вам такой шанс. Его интерактивная инфографика Bond Cars позволяет вам изучить модель и дизайн каждого из автомобилей Бонда, а также дает несколько дополнительных интересных фактов. Используя вездесущую тактику слайдера, вы также можете «раскрыть» автомобиль во всей его металлической красе (по умолчанию дается лишь одноцветный рисунок). Так авторы творчески решили проблему необходимости включить фотографии, не совсем подходящие под эстетику инфографики.

Астон Мартин из «Казино Рояль» (2006)


«Цвета движения» (The Colors Of Motion) — это инфографическая серия, анализирующая фильмы только по их цветовой палитре, полученной из соединения всех кадров. Если вы когда-нибудь задавались вопросом, как выглядит ваш любимый фильм в виде цветовой палитры, то теперь у вас есть ответ. Не можете найти заголовок в базе данных? Просто отправьте разработчикам сообщение — они принимают запросы. 

Это фильмы «Интерстеллар» и «Бойцовский клуб»


National Geographic имеет довольно впечатляющую коллекцию, как они сами ее называют, «интерактивной графики» (большинство из которой сопровождается детальными текстовыми описаниями, как в случае, например, с Колонной Траяна), но мы выбрали этот относительно простой пример, чтобы подчеркнуть, применение каких методов действительно эффективно в интерактивной инфографике. «Царская гробница в Перу»(Peru’s Royal Wari Tomb) раскрывает особенности погребения дворянки тех времен. Фокус переходит от обмотки мумии к ее украшениям и положению. Разделяя информацию на небольшие части и позволяя пользователю перемещаться между ними, интерактивная графика избегает самых коварных ловушек: переизбытка данных и визуальных эффектов. Более того, каждое последующее взаимодействие расширяет опыт, делая его намного полезнее, чем в случае, если бы все было представлено сразу. Наш мозг обладает механизмом, отвергающим подавляющие стимулы, а данный тип взаимодействия становится отличным решением для пользователя, позволяя легко поглощать информацию. 

Один из разделов инфографики

Читайте также: 6 способов использования анимации без отвлечения от оффера


The Guardian, как и New York Times, делает ставку на мультимедийную журналистику, и их видеоролик на ура справляется с одной из главных функций инфографики: придавать громоздкой информации приемлемую форму. Для многих из нас, живущих за пределами Великобритании, референдум представляет собой весьма запутанную тему. К счастью, это видео (Scottish Referendum Explained For Non-Brits) поможет вам быстро узнать о ее важных аспектах, не требуя глубокого погружения в историю.

Отрывок из видео


Перед изданием The Atlantic стояла задача — развить концепцию улучшения здоровья общества. Оно поручило компании Truth Labs оформить серию статей из 3-х частей о «Здоровье населения» (Population Health) в виде цифрового повествования. Основная цель исполнителя состояла в сохранении естественной прокрутки документа и обычных для пользователя условий чтения и создании при этом опыта, отличающегося от визуальной перспективы. Чтобы воплотить задуманное в жизнь, они позаимствовали инструменты и стратегии у кинематографа, но также ориентировались на набор дизайнерских принципов для поддержки принципа удобства чтения в качестве ключевого правила.

Одна из частей «Здоровья населения»


Австрийский производитель кофе Joho’s создал впечатляющий мультимедийный опыт Joho’s Bean, чтобы рассказать историю происхождения кофейных зерен. Повествование гармонично сочетает в себе аудио-, видео- и фотоматериалы, задействующие почти все чувства пользователя. Следуя за фермером, проходящим по кофейной плантации, вы слышите, как щебечут птицы, как звучат обжаренные кофейные зерна, упаковываемые в мешки, а также как шумят оживленные улицы и транспорт в городе. Полное погружение! 

Joho’s отправляет вас в путешествие, объясняющее происхождение их кофейных зерен


«Первозданная дорога» (The Wild Path) — это интерактивный эксперимент, рассказ о путешествии, созданный с помощью Canvas. Основным элементом является карта, анимирующая путь на карте при прокрутке страницы. Проект может работать не во всех браузерах. Зато ему сопутствует сопроводительная статья, объясняющая все оставшиеся за кулисами технологии создания инфографики.

Анимированная карта показывает путь при прокрутке


Освещение президентских выборов в США в 2016 году изданием The Guardian (Live Election Results) привнесло забавный элемент в серьезное дело, касавшееся набранных процентов и избирательных участков. Интерактивная инфографика отслеживала голоса в четырех штатах. По умолчанию на графике были показаны результаты по всей стране, а если пользователь наводил курсор на какой-либо участок на карте, то демонстрировалось, какие цифры кандидаты набрали именно там. Кандидаты в президенты были представлены в виде смешных пиксельных аватаров. По мере обновления инфографики в живом времени, человечки подкрашивали цветом штаты, в которых они выиграли. Время от времени рядом с кандидатом появлялась его цитата в пузыре.


Отражение результатов выборов в реальном времени


Высоких вам конверсий!

По материалам: smashingmagazine.com

30-11-2017

9 лучших анимированных инфографик с просторов интернета

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

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

1. Как сделать человека?

инфографика, анимация, создание

Автор этой замечательно работы — Элеанора Лутц.

2. 42 бабочки Северной Америки

инфографика, анимация, создание

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

3. Как добывают сланцевый газ?

Авторы этого ролика, Kurz Gesagt, каждый месяц выкладывают на своем сайте новое анимационное видео. Не пожалейте времени и оцените всю их замечательную коллекцию.

Работы отличаются великолепным дизайном. Но что самое важное, содержание также находится на очень высоком уровне. Информация представлена настолько подробно, что эти ролики могли легко сойти за обучающие видео. Ничего удивительно, что работа, представленная выше, набрала на YouTube 1,7 млн. просмотров и 3790 комментариев.

4. Как работает громкоговоритель?

инфографика, анимация, создание

Как работает громкоговоритель

Яков О’Нил — таланливый дизайнер-инфографист, который в какой-то степени можно сказать, что монополизировал рынок гиф-анимации. У него есть целый сайт, посвященный этой теме.

Полную версию инфографики выше можно посмотреть по ссылке — How Speakers Make Sound.

5. Как работает автомобильный двигатель?

инфографика, анимация, создание

Как работает автомобильный двигатель

Еще одна замечательная работа Якова О’Нила, доказывающая, что зацикленная анимация смотрится очень эффектно.

6. Взросление

Потрясающее сочетание рассказа ребенка с рисованной анимацией, которое на 2 минуты приковывает внимание к экранам монитора. Великолепная анимация и потрясающий дизайн.

7. Не забудьте кликнуть по анимированной инфографике

 

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

8. Как едят артишоки?

инфографика, анимация, создание

Как едят артишоки

Очень интересная инфографика, которая является примером довольно необычного использования видео-лупов.

9. 30 лет музыки за 30 секунд

инфографика, анимация, создание

30 лет музыки за 30 секунд

Простота, наверное, является одной из основных причин популярности этой анимированной диаграммы. Отличный пример зациклинной гиф-анимации, который еще раз доказывает ее эффективность.

инфографика, анимация, создание

интерактивная инфографика — Infographer

Шэзна Нэсса — специалист по визуальному сторителлингу, член журналистского общества JFC в Стэнфордском университете, бывший заместитель главного редактора Associated Press — о понятии визуальная грамотность и средствах ее достижения.

«Важно не то на что вы смотрите, а то что вы видите» — Генри Дэвид Торо

В последние годы визуализация данных в журналистике востребована как никогда: к ней обращаются как для поиска и анализа данных в исследовательских целях, так и для того, чтобы представить информацию публике. Более десяти лет я провела в новостных редакциях: сначала делала интерактивную графику самостоятельно, а затем координировала и оптимизировала работу графических, интерактивных и мультимедийных команд. Новостные редакторы делали все возможное, чтобы наши работы были дерзкими и инновационными: создавали междисциплинарные команды, чтобы повысить наши творческие возможности; нанимали талантливых специалистов за пределами традиционной журналистики, с предыдущим опытом работы в информационных технологиях, статистике или искусстве. В результате такого подхода часть наших визуализаций стала склоняться в сторону все более специфической аудитории. И мы теряли читателей, потому что не принимали во внимание визуальную грамотность нашей аудитории.

Визуализация данных и журналистика

Когда-то слово «визуализация» описывало акт создания мысленного образа. Сегодня оно скорее означает графическое представление информации. Мы живем во все более и более визуальном мире, всматриваемся в экраны разных размеров, разрешение которых с каждой новой версией устройств постепенно увеличивается. Мы живем в мире с большим количеством доступных нам данных, чем когда бы то ни было. IBM утверждает, что 90% данных в мире были созданы за последние два года, и что ежедневно мы создаем 2.5 квинтильона байтов данных, способствуя развитию того, что некоторые называют новой нервной системой планеты. Объедините большие объемы данных с тем фактом, что человеческий мозг быстрее и проще воспринимает изображения, чем текст — вы получите расцветающий мир визуализации данных. Для нас это наиболее действенный способ обнаружения и понимания скрытых образов, взаимосвязей. Текст, фотографии и видео — это журналистские форматы, которые информируют общественность и дают ей возможность принимать решения. Визуализация данных быстро присоединяется к их разряду, как не менее важный формат.

Джули Стил из О’Рейлли выделяет три категории визуализации:

Инфографика — использует небольшой набор данных и много ручной работы над дизайном, например, вот эта работа National Geographic.

Визуализация данных — использует большие наборы данных с меньшим количеством ручной работы над дизайном; базируется на алгоритмах. Например, интерактивная работа New York Times.

Визуальное искусство — однонаправленное кодирование. Красивые, но трудно поддающееся расшифровке визуализации, например, вычислительное искусство Кунала Ананда.

В чем проблема?

Визуализация данных в журналистике часто подвержена влиянию компьютерных наук и математики. В результате, чтобы представить данные в журналистских работах, используются причудливые формы, очертания и взаимосвязи. Этот эффект усиливается еще и быстрым размножением инструментов, которые делают создание любых видов визуализации проще, таких как Many Eyes, Tableau, и общедоступные библиотеки, в том числе D3.

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

Новая «визуальная грамматика» журналистики

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

Права гомосексуалистов в США, штат за штатом

Визуализация The Guardian о правах гомосексуалистов в Соединенных Штатах наделала много шума в журналистских кругах и в мире визуализации данных из-за ее экспериментального формата. В разговорах и спорах особо выделяют напряженность между новизной и более привычными форматами. Графика представляет страну в виде круга, который позволяет вывести на экран больше информации, чем в формате карты. Формы и цвета привлекательны, но они же — дополнительный уровень для читателя, требующий приложить больше усилий, чтобы добраться до сути.

Интерактив о правах гомосексуалистов, The Guardian

Продолжить чтение →

виды, примеры работ, будущее, как делать самому, разработка, создание анимационной, интерактивной инфографики

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

Нельзя отрицать силу визуалов на просторах интернета и в нашей повседневной жизни. В YouTube и Instagram доминирует визуальное содержание; YouTube – 3 по посещаемости сайт в сети, и в Instagram более 80 миллионов фотографий выкладываются каждый день.

Посты в блогах и статьи на 80% более «потребляемы», если в них есть цветные изображения, заголовки или эскизы, и люди потратят не более 15-ти секунд на сайт, если он не привлечет их внимание с первых секунд.

Инфографика – фаворит среди аудитории и продавцов, и она на 800% сильнее интересует людей сегодня, чем в 2012.

Вдобавок ко всему, контент создается с угрожающей скоростью – 60% маркетологов создают по крайней мере небольшую часть нового контента каждый день! Подробнее об обязанностях SEO-специалиста вы можете узнать из обзорной статьи.

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

Естественно, маркетологи содержания уже задумываются о будущем визуального контента, рассчитывая, что они могут делать сейчас, что они смогут реализовать и какие новые технологии уже появляются на горизонте. Такое передовое мышление – это то, что может создать все или разрушить все ваши усилия в контент-маркетинге; вы должны адаптироваться, или потонете.

С таким визуальным контентом, как инфографика, маркетологи имеют уникальную возможность видеть будущее по мере его приближения. Компании, графические дизайнеры, и маркетологи – все начинают использовать инфографику – обновлять ее, чтобы сделать ее еще более привлекательной для аудитории. Даже если вы уже “просто вывешиваете” инфографику регулярно, никогда не рано узнавать о тенденциях, которые только начинают развиваться, так же как не рано узнавать, как реализовывать их в ваших стратегиях контент-маркетинга.

Если вы хотите заглянуть в будущее, и, возможно, даже узнать несколько трюков раньше, чем все остальные, сейчас самое время!

Вот три типа инфографики, которые будут наиболее распространенными в (ближайшем) будущем.

Если вы ищете крутой инструмент для создания инфографики, я рекомендую обратить внимание на Visme. Для начала они предлагают бесплатный аккаунт и отличные удобные функции для тех, кто не занимается дизайном. Можете получить бесплатный аккаунт сейчас.

1. Интерактивная инфографика

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

Независимо от вашего бизнеса, продукта, услуги или сообщения, вы можете создать интерактивную инфографику, которая позволит людям оценивать себя (например, «рассчитайте свой BMI здесь»). Пользователи могут также кликнуть на соответствующую информацию, которая отправит их к более глубоко ориентированному ресурсу, или обратно к целевой странице, создавая тем самым трафик. Это очень адаптируемый и веселый способ привлечь аудиторию.

Многие маркетологи уже приспособились к этому виду инфографики, и это передается быстро. Но в это же время многие, все-таки, берут за основу простые инфографики:

….только представьте, что еще можно делать с интерактивными инфографиками.

Вы можете попробовать:

  • Использование техник прокрутки, что заставляет изображения или фигуры выделяться по сравнению с фоном
  • Построение “всплывающих окон” которые расширяют области текста
  • Выплывание изображений или статистики, при клике на них
  • Превращение своих инфографик в несколько страниц, которые пользователи могут просмотреть

Для более подробного примера интерактивной инфографики, посмотрите на эту:

Чтобы сделать инфографику высоко интерактивной (с прокруткой, всплывающими окнами и т.д.) вам понадобиться узнать немного о HTML5 или CSS, или нанять кого-то еще, кто разберется с этим вопросом для вас.

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

Почему нужно стараться внедрять инфографику в ближайшем будущем?

  • Это воодушевляет вашу аудиторию взаимодействовать с вашим контентом и делиться им
  • Это генерирует трафик (через ссылки)
  • Это доказывает вашей аудитории, что вы инновационны, находчивы и намереваетесь предоставлять своевременный и интересный контент.
  • Существуют уровни интерактивной инфографики, которые делают управляемым ее развитие

2. Встроенное видео и GIF

Это другой тип инфографики, который мы наблюдаем все чаще и чаще сегодня. Инфографики, предлагающие короткие видео или даже GIF (Формат обмена графическими данными) – отличный способ привлечь внимание и выделить вашу инфографику из толпы. Тогда как это ограничивает платформы, вы можете делиться своей инфографикой в настоящем времени.

Множество простых инструментов для создания инфографик, таких как Easel.ly, предлагают опцию “Встроенное видео с YouTube”, или же вы можете добавить видео в инфографику, которую вы создаете в Photoshop с помощью видео слоя. Вы можете даже добавить видео в слайд Powerpoint, который вы также можете превратить в инфографику.

Более того, вы можете найти миллионы гифок в сети и вставить их аналогичным образом. Загвоздка здесь в том, что вам придется распространять свою инфографику как URL, чтобы быть уверенным, что она правильно встроена в ваш сайт. Вы не можете распространять или сохранять такие инфографики в формате .jpeg или PDF. Несомненно, так как это становится все более популярным, появятся и другие инструменты вставки видео и гиф, чтобы сделать процесс еще более простым.

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

Если вы хотите перейти на следующий уровень, вы можете сделать видео из инфографики, которую вы уже имеете. Это отличная возможность быть увиденным на YouTube,в Instagram, и даже на таких видео платформах, как Vimeo, Snapchat, и других. Видео внизу – отличный пример того, как превратить инфографику в видео.

Зачем вставлять видео или гиф в инфографику?

  • Это дает вам элемент неожиданности – люди не ожидают, что картинка начнет двигаться!
  • Это очень весело и оригинально, что увеличивает шанс того, что люди будут взаимодействовать и делиться вашей инфографикой
  • Это хороший способ показать всем уникальность своего бренда

3. Анимированная инфографика

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

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

Вот пример того, о чем я говорю:

Если вы хотите узнать более подробно, как создавать анимированную инфографику, обратите внимание на эту инфографику от Tabletop Whale. Вы так же можете найти различные сервисы, помогающие в создании инфографик такого плана. В любом случае, это один из самых сложных процессов в эволюции инфографики.

Почему вам стоит потратить свое время, энергию и/или деньги на создание анимированной инфографики?

  • Это на самом деле выделит вас из толпы, потому что не каждый имеет доступ к такого рода программному обеспечению или контенту
  • Уже через пару лет это будет обычным явлением – вы будете одним из первых, кто сделает это!
  • Анимация сделает информацию внутри инфографики более запоминающейся
  • Это вдохновит ваших пользователей на работу с вами

Все это не научная фнтастика

Это может звучать слишком технично и казаться чем-то, за гранью ваших возможностей сейчас, но вполне вероятно, что эти виды инфографики станут очень даже обычным явлением через 2-3 года. Мы уже сейчас можем наблюдать сильный прорыв в анимированных инфографиках и гиф-инфографиках, особенно благодаря тому, что популярность гифок продолжает расти. Инфографики становятся одним из наиболее потребляемых и наиболее часто создаваемых типов контента на просторах интернета. Почему? Да потому что мозгу нужно всего 250 миллисекунд чтобы принять и обработать значение символа.

Если среднестатистический человек проводит около 15-ти секунд на сайте и потом начинает скучать, то вы, само собой, захотите вытащить на экран все, что может задержать его – или по крайней мере получить сообщение через 15 секунд или меньше. Некоторые исследования даже доказали, что люди могут концентрировать внимание на чем-либо не более 8-ми секунд, и этот показатель уменьшается с каждым годом.

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

Если наличие инфографики сегодня является показателем, то скоро она будет везде. Это означает новые изменения в вашей работе. Ни одна маркетинговая кампания в истории не добилась успеха, делая одно и то же все время.

Идея здесь заключается в том, чтобы увидеть в инфографике нечто большее, чем изображение .jpeg. Инфографики могут быть адаптированы к различным средам и использоваться на огромном разнообразии платформ. Предприниматели и маркетологи уже увидели потенциал в этом. А вы?

Похожие статьи:

Кей коллектор формулы кей.

Источник перевода

Советы для создания потрясающей интерактивной инфографики

Будущее визуализации данных в интерактивности.

Но как создать по-настоящему потрясающую интерактивную инфографику?

Инфографика повсюду, и последнее время она все чаще становится интерактивной.

В сегодняшней статье мы поделимся с вами секретами создания интерактивной инфографики, а также ссылками на полезные ресурсы.

1. Понимайте психологию

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

Перед тем, как делать инфографику интерактивной, важно понять, почему вы хотите ее сделать именно такой.

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

Кинетическое обучение – отличная альтернатива, так как люди лучше усваивают информацию через физические действия.

Вот почему добавление интерактивности в перспективную сферу визуализации поможет вам создать еще более запоминающуюся и эффективную инфографику.

Эта комбинация визуального и кинетического подхода делает анимированную инфографику контентом будущего. Конечно, для некоторых тем лучше не использовать интерактивные элементы, но в большинстве случаев они только улучшат контент.

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

2. Добавьте эффекты при прокрутке

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

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

Эта техника вовлекает зрителей в историю и подогревает их интерес, никак их при этом не ограничивая.

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

Анимацию при скроллинге также можно использовать в простых повествованиях. Например, как в этой креативной визуализации iPod. Контент здесь совершенно базовый, но необычный эффект делает его наглядным и запоминающимся.

3. Разделите контент на порции для лучшего усвоения

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

Your Daily Dose of Water предлагает пользователям листать страницы, а не прокручивать контент. Некоторые концепции действительно работаю лучше при этом подходе.

В этой инфографике элементы на каждой странице интерактивные. Поэтому за счет разделения инфографики на страницы у пользователей есть время как следует изучить каждую порцию.

4. Дайте пользователям возможность управлять опытом

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

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

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

В этой инфографике о возврате налогов How Much Goes Unclaimed Every Year данные могли быть отображены сразу по всем штатам. Получилось бы очень громоздко. Но предоставив пользователям возможность посмотреть информацию только по интересующим их штатам, создатели сделали опыт куда более простым и приятным.

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

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

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

5. Скройте часть информации

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

Еще один способ заставить пользователей активно участвовать в изучении инфографики – скрыть часть информации, которая открывается после клика или наведения курсора. Это подход помогает не только пробудить любопытство, но и дает возможность пропустить неактуальные элементы, не отвлекаясь при этом от остальных частей инфографики.

Beneath the Thinking Cap используют подписи (например, Einstein’s Wide Load), кликнув на которые, пользователи смогут узнать больше о фактоидах каждого участка мозга.

Более сложный пример – гид по домашней безопасности от SimpliSafe. На каждом слое контента спрятанные элементы значительно обогащают опыт.

6. Участие пользователей очень важно

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

You vs John Paulson – пример инфографики, в которой используются введенные пользователем данные. Указав свой ежегодный доход, вы сможете сравнить его с той суммой, которую трейдер Джон Полсон зарабатывает за пару минут.

Этот тип интерактивности работает только для некоторых тем, поэтому он встречается довольно редко. Однако подобная инфографика является наиболее эффективной, так как не только требует участия пользователя, но и делает опыт персонализированным.

Полезные ресурсы

С ростом популярности интерактивной инфографики вырос и спрос на инструменты для создания анимации и переходов. Благодаря им процесс разработки становится более доступным и управляемым.

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

1. CSS3 = Awesome

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

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

2. A collection of page transitions

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

Этот сайт демонстрирует различные популярные переходы между страницами. Этот ресурс будет полезен как для вдохновения, так и для получения информации.

3. D3.js

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

D3.js – это JavaScript библиотека, которая поможет вам трансформировать и анимировать данные несколькими способами: HTML, CSS и SVG. С его помощью вы без труда воссоздадите самые популярные элементы интерактивной инфографики.

Все перечисленные выше ресурсы доступны совершенно бесплатно. Поэтому у вас остается все меньше причин продолжать делать обычную статичную инфографику.

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

Полезно знать

28.02.2014

Интерактивная инфографика


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


Существует несколько видов и определений интерактивной инфографики.


Первое: интерактивная инфографика — это инфографика, которая предполагает участие читателя в управлении отображаемыми данными. Интерактивность создается с применением технологий Flash или JavaScript, HTML 5.


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


Проекты по созданию интерактивной инфографики только набирают обороты в связи с высокой сложностью и затратностью. Одним из ярких примеров интерактивной инфографики был проект «Кто поздравил Лукашенко с президентством», 2011 года.


Инфографика, обновляющаяся в интерактивном режиме, позволяла посмотреть, кто из глав государств поздравил А.Г. Лукашенко с выборами 2010 года. Данные, отображаемые на инфографике можно было выбрать по фотографии президента, флагу страны, в таблице или на глобусе. Таким образом, пользователь сам выбирал, какие данные его интересуют и какие будут показаны. В таблице также можно было отсортировать страны по длительности нахождения главы государства у власти на момент поздравления, по состоянию прав и свобод, качеству жизни, свободе прессы, де-факто демократическим выборам и рейтингу диктаторов. Наличие поздравлений проверялось на официальных сайтах президентов и изменялось вручную.


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


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


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


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


В упомянутом выше примере пользователи основных браузеров Internet Explorer 9 +, Firefox 4 +, Safari 4 +, Chrome 10 +, Opera 11 + могут увидеть два десятилетия развитии технологий, используемых в браузерах — от протокола http до офлайн-приложений AppCache.


Российскими компаниями интерактивная инфографика еще не освоена, поскольку даже простая инфографика на сегодняшний день есть в хорошем качестве не у всех. Несмотря на то, что услуга по созданию интерактивной инфографики — скорее новинка на российском рынке, наше агентство готово выполнять такие задачи уже сегодня, так как данный формат становится все более востребованным. Стоимость данной услуги высокая, поскольку подобные технологии единичны и всегда строго индивидуальны, что требует создания программного продукта с «0» под каждую задачу.


Интересно, что существуют сервисы, на которых предполагается создание первых форматов интерактивной инфографики опционально. К примеру, на первой платформе визуального маркетинга ZIPPPI сегодня среди размещаемых компаниями b2b сегмента — энергетики, строительства, недвижимости, промышленности и др. визуальных материалов, имеется возможность сделать не просто инфографику, но и сразу интеркативную инфографику. Одна из последних новинок, которая пользуется высоким спросом у компаний — iMap — виртуальная инфографика-карта, на которой в интерактивном режиме показываются регионы, города, проекты, с которыми связана жизнь компании, может обновляться по мере включения новых успехов и районов распространения бизнеса.


Если Вас интересует создание инфографики, интерактивной инфографики, Вы можете обратиться в наше агентство, мы всегда поможем и проконсультируем по всем вопросам. Звоните: +7 (495) 669 50 61.

10 бесплатных инструментов для создания инфографики — Дизайн на vc.ru

1. Vizualize



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


Дополнительно можно использовать данные о карьерном пути из своего профиля в соцсети LinkedIn.


2. Google Developers



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


3. Easel.ly


Стартап
Easel.ly предлагает дюжину бесплатных шаблонов для создания инфографики. Все структурные элементы будущей инфографики можно настроить и отредактировать на свой вкус.


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


4. Piktochart



Piktochart — инструмент бесплатного создания инфографики и схем для презентаций на основе введенных данных. У него есть собственный редактор схем и цветовой палитры, набор шрифтов и возможность загрузки фонов, форм и картинок.


Шаблоны для подготовки инфографики оснащены схематической сеткой для того, чтобы редактирование и размещение элементов было пропорциональным.


В бесплатной версии предлагается три базовых шаблона. За остальное придется заплатить $29 в месяц либо $169 в год.


5. Infogr.am


Infogr.am — бесплатный инструмент для создания схем, графиков и карт с возможностью загрузки видео и фото для создания интерактивной инфографики.


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


6. Visual.ly



Visual.ly — платформа для публикации инфографики, стартовавшая в 2011 году. Готовую инфографику можно разместить в социальных сетях. Сервисом пользуются не только энтузиасты-одиночки, но и профессиональные дизайнеры, известные бренды и компании: в сообществе более 35 тыс. участников, и для брендов есть отдельные платные пакеты услуг.


7. InFoto Free



Нишевый
инструмент для тех, кто пользуется Android-смартфонами для фотосъемки. С помощью этого сервиса можно «вытянуть» все EXIF-данные из сделанных фотоснимков и построить по ним инфографику. Предусмотрена возможность редактирования.


Помимо бесплатной версии приложения, есть также платная версия без рекламы стоимостью в $0,99.


8. Venngage



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


Среди дополнительных возможностей есть поддержка анимации и возможность загружать фоны и картинки с брендированием.


9. Dipity



Dipity — сервис создания, настройки и публикации инфографики с возможностью добавления на сторонние веб-ресурсы. С его помощью можно создать интерактивную инфографику-хронику. Поддерживается загрузка не только схем и фотоснимков, но и прикрепление видеороликов, аудиозаписей, интернет-ссылок, геолокационных и календарных отметок.


В платном тарифном плане предусмотрена возможность брендинга для готовой инфографики, использование инструментов аналитики и приложение для iPhone.


10. Get About



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

101 Визуально впечатляющая интерактивная инфографика, которая вас вдохновит

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

Итак, что же делает хорошую интерактивную инфографику? Будь то супер простой или невероятно сложный, все сводится к хорошему дизайну, увлекательной интерактивности и интересной теме.Варианты практически безграничны. Если вы думаете поэкспериментировать с интерактивной инфографикой или ищете серьезное вдохновение для своего следующего проекта, мы собрали 101 наш фаворит, охватывающий все, от космической сети до коктейлей.

101 Awesome Interactive Infographics

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

1. «Как работает поиск: от алгоритмов к ответам»

С легкостью поиска в Интернете легко забыть, сколько работы уходит на создание каждого результата поиска.Эта интерактивная инфографика, созданная Google, поможет вам полностью понять процесс.

interactive infographics 1 interactive infographics 1

2. «Горизонт Нью-Йорка»
В Нью-Йорке один из самых узнаваемых горизонтов в США, но он меняется, как показывает интерактивный ролик от National Geographic. Прокрутите город и нажмите на достопримечательности для получения дополнительной информации.

interactive infographics 2 interactive infographics 2

3. «Эволюция Интернета»

Эта интерактивная инфографика от Google Chrome подробно описывает рост Интернета.Вы можете изучить инфографику с двух точек зрения: рост Интернета в целом или отдельные браузеры и технологии.

interactive infographics 3 interactive infographics 3

4. «Крупнейшие утечки данных в мире»

Риску кражи данных подвергаются все, но особо преследуются крупные организации. Эта интерактивная инфографика, созданная Дэвидом МакКэндлессом из Information is Beautiful, позволяет увидеть, кто и в какой степени был взломан.

interactive infographics 4 interactive infographics 4

5. «Атлас витаминов: интерактивное руководство по питанию и человеческому телу»

Этот интерактивный журнал Good Magazine проведет вас через тело, как миссис.Фризл ведет своих учеников на «Волшебном школьном автобусе», давая вам полный урок биологии.

interactive infographics 5 interactive infographics 5

6. «Голодные технологические гиганты»

Технические гиганты не спускаются с бобовых стеблей; они растут за счет приобретений. Этот интерактив от Simply Business позволяет вам увидеть завоевания пяти крупных компаний с 1999 по 2014 год.

interactive infographics 6 interactive infographics 6

7. «Разнообразие в технологиях: разбивка сотрудников ключевых технологических компаний»

В этой интерактивной инфографике Дэвида МакКэндлесса рассматривается демография крупнейших технологических компаний.Данные не идеальны, так как не все компании заявляют свои цифры. Но вы можете искать по полу, этнической принадлежности или компании.

interactive infographics 7 interactive infographics 7

8. «Робот возьмется за вашу работу?»

BBC создала ужасающую интерактивную инфографику, которая показывает вероятность того, что роботы сделают вашу работу ненужной. Либо введите свою профессию, либо выберите из полного списка, чтобы увидеть процент.

interactive infographics 8 interactive infographics 8

9. «Визуальное введение в машинное обучение»

Машинное обучение — это область исследования, которая дает компьютерам возможность учиться без явного программирования.Это настолько абстрактно, насколько это звучит, но если вы хотите узнать больше, лучший способ сделать это — это интерактивная инфографика, созданная Стефани Йи и Тони Чу.

interactive infographics 9 interactive infographics 9

10. «45 слов, которые вы должны знать о ВИЧ / СПИДе»

Этот интерактив, созданный Healthline, борется с дезинформацией о ВИЧ и СПИДе. Термины имеют цветовую кодировку, и вы можете нажать, чтобы узнать больше.

interactive infographics 10 interactive infographics 10

11. «Визуальная паутина»

Эта интерактивная инфографика от Ceros визуализирует исследование, проведенное GumGum и Brand Innovators о силе визуального контента.

interactive infographics 11 interactive infographics 11

12. «Картирование мертвых: огнестрельные смертельные случаи после Сэнди-Хука»

Эта интерактивная карта убийств с применением огнестрельного оружия в США от Huffington Post позволяет увидеть, насколько распространено насилие с применением огнестрельного оружия по всей стране и в вашем штате.

interactive infographics 12 interactive infographics 12

13. «Международный женский день: политические права во всем мире на карте»

Интерактивная карта Guardian о правах женщин позволяет сканировать информацию по регионам, периоду времени или по праву (голосование, право бежать, избранный).Более подробную информацию можно найти, нажав на страну.

interactive infographics 13 interactive infographics 13

14. «Данные, которые скрываются»

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

interactive infographics 14 interactive infographics 14

15. «Зарплаты НФЛ по командам и должностям»

Интерактивная команда Guardian создала эту интерактивную инфографику, чтобы продемонстрировать зарплаты игроков НФЛ в зависимости от их команды и должности.Вы можете сравнивать команды или изучать данные отдельных команд.

interactive infographics 15 interactive infographics 15

16. «Космический корабль для всех»

Этот интерактив от Google объединяет иллюстрации и видео, чтобы дать более глубокий взгляд на историю ISEE-3, космического корабля, предназначенного для отслеживания информации с Солнца. Интерактивный режим позволяет вам наблюдать за путешествием, просматривать изображение в реальном времени и более внимательно изучать данные.

interactive infographics 16 interactive infographics 16

17. «Права гомосексуалистов в США, штат за штатом»

Этот интерактив, созданный The Guardian , демонстрирует эволюцию прав геев в Америке.Он разбит по штатам и регионам, что позволяет подробно изучить все законы, касающиеся брака, посещений больниц, усыновления, трудоустройства, жилья, преступлений на почве ненависти и школ.

interactive infographics 17 interactive infographics 17

18. «География ненависти: геотегированные ненавистнические твиты в Соединенных Штатах»

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

interactive infographics 18 interactive infographics 18

19. «Каков ваш разрыв в оплате труда?»

Эта визуализация, представленная в Wall Street Journal , , подчеркивает проблему несоответствия в оплате труда. Интерактивный интерфейс позволяет вам указать свою профессию и подсчитать, сколько вы зарабатываете по сравнению с представителем противоположного пола. (Интересно, что это показывает, что женщинам платят меньше. Есть профессии, в которых мужчины зарабатывают меньше, чем их коллеги-женщины — кашель-кашель: диетологи.)

interactive infographics 19 interactive infographics 19

20. «Притча о многоугольниках: играбельная статья о форме тела». Общество »

Эта работа Ви Харт и Ники Кейс иллюстрирует сложности небольших индивидуальных предубеждений и их влияние на общество в целом.Вы играете в игру с «несчастливыми многоугольниками» и одновременно познаете общество.

interactive infographics 20 interactive infographics 20

Страницы: 1 2 3 4 5

.

10+ анимированная и интерактивная инфографика, оживляющая контент

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

Что ж, один из способов сделать это — использовать анимированную инфографику .

Анимированная и интерактивная инфографика, особенно разработанная с использованием HTML5, вполне возможно, будущее инфографики . Анимированная инфографика лучше привлекает зрителей и может помочь повысить интерес к темам, которые в противном случае могли бы показаться банальными.

Вот список из 10+ анимированных и интерактивных инфографик , которые вы можете использовать и найти в них вдохновение.Нажмите на ссылки, чтобы перейти к полной версии инфографики с анимацией.

30 инструментов для создания собственной инфографики

30 инструментов для создания собственной инфографики

Инфографика — один из лучших способов представить данные, не заставляя вашу аудиторию зевать от скуки. Там … Подробнее

Голодные технологические гиганты

Эта интерактивная инфографика представляет собой отсортированный график приобретений пяти крупнейших технологических компаний мира за последние 15 лет.[Посетить страницу]

Hungry Tech Giants Hungry Tech Giants

HTML5 и CSS3 Готовность

Эта интерактивная инфографика представляет собой анализ поддержки HTML5 и CSS3 во всех основных веб-браузерах до 2013 года. [Посетить страницу]

HTML5 & CSS3 Readiness HTML5 & CSS3 Readiness

Эволюция Интернета

В этой инфографике используются элементы SVG, хронология браузеров и технологий, а также развитие самого Интернета. [Посетить страницу]

The Evolution Of The Web The Evolution Of The Web

Веб-браузеры и разрешения

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

Web Browsers & Resolutions Web Browsers & Resolutions

Начало

В этой инфографике используется анимация, которая помогает объяснить, что произошло в фильме «Начало». Минималистский дизайн определенно помогает ему в достижении этой цели. [Посетить страницу]

Inception Inception

Рейсы Интерактивные

Эта инфографика — мечта любителя авиации. Это не только интерактивная карта мира, на которой в режиме реального времени отслеживаются все самолеты и маршруты полетов, но и презентация истории коммерческих рейсов.[Посетить страницу]

Flights Interactive Flights Interactive

Бонд: Лицензия на вождение

Эта чудесно анимированная, спроектированная и нарисованная инфографика показывает эволюцию автомобилей Бонда, начиная с Sunbeam Alpine в «Dr. Нет, Land Rover Defender в «Skyfall». [Посетить страницу]

Bond: Licence To Drive Bond: Licence To Drive

Крупнейшие утечки данных в мире

Эта интерактивная инфографика представляет собой визуализацию всех крупнейших утечек данных с 2004 года. [Посетить страницу]

World World

Тринадцать причин, по которым ваш мозг жаждет инфографики

Эта очаровательно анимированная инфографика показывает, почему мы так любим инфографику.[Посетить страницу]

Thirteen Reasons Why Your Brain Craves Infographics Thirteen Reasons Why Your Brain Craves Infographics

Как работает поиск

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

How Search Works How Search Works

Dribbble: для чего он нужен?

Эта интерактивная инфографика HTML5 объясняет Dribbble, от того, для чего он используется, до некоторых общих терминов, используемых в службе. [Посетить страницу]

Dribbble: What Dribbble: What

Как работает плоскопанельный дисплей

Эта анимированная инфографика, созданная на HTML5, анализирует плоский экран, чтобы показать, как именно он работает.[Посетить страницу]

How A Flat Panel Display Works How A Flat Panel Display Works

Как работает автомобильный двигатель

Эта анимированная инфографика в формате HTML5 показывает вам в мельчайших подробностях, как работает автомобильный двигатель. [Посетить страницу]

How A Car Engine Works How A Car Engine Works

Связанные

,

100 лучших инфографиков 2020 года [Интерактивные]

Визуализация данных 50+ LRD Анимация Интерактивная отличная идея Уникальный дизайн Выбор книги Выбор экспертов

30 снимков

go to https://www.behance.net/gallery/30-Shots-Infographic/5117717

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

3D Сельское хозяйство

go to http://visual.ly/agriculture

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

42 Североамериканские бабочки

go to http://tabletopwhale.com/2014/08/27/42-butterflies-of-north-america.html

Взмах крыльев в этой анимации — это та часть, которая действительно захватывает вас, поэтому не забудьте щелкнуть мышью, чтобы увидеть ее полностью. Иллюстрация этих очень уникальных бабочек тоже не что иное, как удивительная — так что не забывайте впечатляться и этим.

50 лет, 50 игрушек

go to http://www.abbyryandesign.com/50years50toys/

Носталига — это всегда мощный эффект, и в сочетании с отличными иллюстрациями вы получаете такой кусок, который генерирует 140 LRD и устанавливает тенденцию, которая подтолкнет несколько других к созданию подобных предметов.

Краткое введение в типографику

go to http://www.downgraf.com/inspiration/infographics/introduction-to-typography-infographic/

Как правило, мы стараемся избегать «руководств» при создании инфографики. Это связано с тем, что инфографика не поддерживает копирование, а также эффективная инфографика обычно содержит неожиданный контент.Однако Downgraf заставляет это работать, потому что их дизайн мирового класса — это может быть базовая концепция, но это показывает, что можно преодолеть с помощью потрясающей эстетики.

A Compendium of Glowing Creatures

go to http://tabletopwhale.com/2014/07/21/a-visual-compendium-of-glowing-creatures.html

Элеонора Лутц из Tabletop Whale — инфографический дизайнер и аниматор мирового класса, и это видно из ее работ, пятикратно появляющихся в этом посте — почти наверняка самый высокий показатель среди всех художников-одиночек. Это произведение запускает тенденцию к эффектности.

Хорошо сбалансированный блог

go to http://www.socialfresh.com/content/uploads/2014/02/well-balanced-blog.jpg

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

Птицы Северной Америки

go to http://mentalfloss.com/sites/default/files/P-BirdsNA_Zoom%20copy.jpg

Еще один заслуживающий внимания сборник «Птицы Северной Америки» приятен не только потому, что он всеобъемлющ, но и потому, что птицы Северной Америки предлагают такое приятное разнообразие цветов.

Bloomberg Billionaires

go to http://www.bloomberg.com/billionaires/

Хотя в представленных здесь данных нет ничего особенно удивительного, Bloomberg выделяется несколькими вещами — исполнением и свежестью.К сожалению, он не очень оптимизирован для SEO, поскольку нет причин, по которым он не должен появляться при большом количестве запросов среди самых богатых людей мира.

Кофеин в популярных продуктах

go to http://www.scientificamerican.com/article/graphic-science-caffeine-high-more-and-more-products-contain-large-doses/

Хорошая инфографика может внести изменения. Это один из тех. Если вы обнаружите, что ваш напиток или еда находятся в верхней части этого списка, это может заставить вас переосмыслить потребление — или иным образом подтолкнуть вас к альтернативному доступному варианту.

Могу я сделать что-нибудь?

go to http://www.slate.com/blogs/browbeat/2012/03/21/mike_daisey_david_sedaris_david_foster_wallace_and_other_storytellers_who_can_make_stuff_up_.html

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

Cheetah: Nature’s Speed ​​Machine

go to http://animagraffs.com/cheetah-natures-speed-machine/

Это была первая анимированная инфографика, которую я когда-либо видел, и она до сих пор остается одной из лучших. Повторение гепарда просто впечатляет, и в сочетании с другими элементами рисунка делает эту анимацию лучшей в своем классе. Предложено AJ Ghergich из компании по дизайну инфографики Ghergich & Co.

Common MythConceptions

go to http://www.informationisbeautiful.net/visualizations/common-mythconceptions/

Скажите, что я ошибаюсь, и у меня есть возможность убедить меня.Это единственное предложение — главная причина, по которой этот интерактив стал вирусным, поскольку он объединил в себе десятки распространенных заблуждений. Интерактивность хороша, но была создана похожая статическая версия, которая также имела аналогичный эффект, показывая, что иногда идея (и исполнение) — это все.

Креативные рутины успешных людей

go to http://dingo.care2.com/pictures/greenliving/uploads/2015/09/creative-routines-edit4.png

Еще один подход к концепции творческих рутин, который несколько раз встречался в списке, эта статическая версия также стала вирусной — показывая, что мы действительно хотим сократить путь к лучшей жизни.InfoWeTrust был одним из первых, кто дебютировал в этой тенденции (и сделал это хорошо), так что они определенно достойны быть в этом списке.

Распорядок дня известных творческих людей

go to https://podio.com/site/creative-routines

Вы, наверное, видели несколько постов о «рутинах известных людей», но Подио — единственный, кому удалось выполнить в интерактивном формате. Он сработал как шарм, создав 656 связанных корневых доменов.

Эмоции, которые нельзя выразить по-английски

go to http://unspeakableness.net/01untranslatable.html

Английский язык известен своими странными особенностями и идиомами, из-за которых людям, не являющимся носителями языка, сложно его усвоить.Но знаете ли вы, что есть также некоторые эмоции, которые полностью отсутствуют в языке? Используя почти невозможное для тиражирования исследование, эта статья показывает нам пробелы в нашем несовершенном языке.

Каждый активный спутник на орбите Земли

go to http://qz.com/296941/interactive-graphic-every-active-satellite-orbiting-earth/

Прокручиваемый интерактивный элемент, идеально подходящий для изображения атмосферы Земли. Еще один элемент отличной инфографики — он использует свой формат, потому что он лучше всего подходит для него, а не только потому, что это текущий тренд дизайна или разработки.

Evolution of Video Game Controllers

go to http://cdn.rsvlts.com/wp-content/uploads/2013/04/evolution_of_game_gontrollers.jpg

Компендиумы — это формат файла, который, как мы обнаружили, занял 15-20 результатов в этом списке, и нам затем пришлось набрать его. Для этого есть причина — они уносят тебя. Эта интересная и ностальгическая деталь видеоконтроллера от Pop Chart Lab ничем не отличается.

Привычки сна известных писателей

go to https://www.brainpickings.org/2013/12/16/writers-wakeup-times-literary-productivity-visualization/

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

Fantastical Fictive Beers

go to http://geekologie.com/2013/10/22/fictional-beers-large.jpg

Ностальгия, забавные иллюстрации и квазикомпендиум. Здесь мы должны быть довольно близки к уравнению успеха — и именно так Pop Chart Lab может продавать это и другие подобные вещи в виде распечаток.

Самый быстрый корабль во Вселенной

go to http://www.fatwallet.com/blog/fastest-ship-in-the-universe/

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

Разобранные видео полетов

go to http://tabletopwhale.com/2014/09/29/flight-videos-deconstructed.html

В большой анимированной инфографике обычным явлением является повторение. Чтобы графика не дергалась / не начиналась внезапно, их нужно возвращать в начало. Траектории крыльев — это пример того, как это, если все сделано хорошо, может поразить вас.

Полеты в небе

go to http://www.theguardian.com/world/ng-interactive/2014/aviation-100-years

Ни одна инфографика в этом списке, кроме этой от The Guardian, не может утверждать, что содержит данные в реальном времени.Ничего более впечатляющего, чем это, — если вы на самом деле не взаимодействуете с инфографикой и не понимаете, что это тоже часть, которая подводит итоги 100 лет авиации.

Сочетания еды и вина

go to http://winefolly.com/review/simple-food-and-wine-pairing/

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

Права геев в США — штат за штатом

go to http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states

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

География ненависти

go to http://users.humboldt.edu/mstephens/hate/hate_map.html#

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

Как работает автомобильный двигатель

go to http://animagraffs.com/how-a-car-engine-works/

Еще одна потрясающая анимация от Animagraffs, как работает автомобильный двигатель, демонстрирует мощь среды посредством эффективной передачи движения двигателя с помощью цвета.Предложено Нилом Пателем, основателем компании Quicksprout по контент-маркетингу.

Как работает пистолет

go to http://animagraffs.com/how-a-handgun-works-1911-45/

Прозрачность — одна из причин, по которой эта анимация, а также рассказ «Как работает автомобильный двигатель» от Animgraffs так хорошо передают их идеи. Детали в сочетании с этим эффектом демонстрируют уровень качества, на который способны немногие другие изделия. Предложен Джоном Купером, основателем Point Blank SEO.

Как часто бывает ваш день рождения?

go to http://thedailyviz.com/2012/05/12/how-common-is-your-birthday/

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

Как доход семьи влияет на шансы поступить в колледж

go to http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html?

Кто знал, что рисование может быть настолько эффективным в рассказе действительно важной истории? The New York Times сделала это, и именно поэтому они создали интерактив, во многом непохожий на любой другой контент в сети.Предложено Рэндом Фишкиным, основателем компании Moz, занимающейся входящим программным обеспечением.

Как далеко до Марса?

go to http://www.distancetomars.com/

TL; DR — это довольно далеко. Этот интерактив отлично передает информацию о расстоянии, а также делает процесс достижения пункта назначения очень увлекательным.

Как быстро работает пожарная служба?

go to http://graphics.latimes.com/how-fast-is-lafd/#11/34.0498/-118.5967

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

Насколько быстр Усэйн Болт?

go to http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html

Моделирование разницы между прошлым и настоящим — довольно крутое использование инфографики. Используете короткое видео для объяснения инфографики? Еще круче. Эта статья из NYTimes — единственная, в которой используется видео в этом списке.

Сколько людей убивают дроны?

go to http://drones.pitchinteractive.com/

Эмоции, вызванные этим потрясающим интерактивом, сделали его без труда включенным в список, показывая, насколько неэффективны удары дронов в Пакистане, а также делают это, несомненно, уникальным способом.

Сколько зарабатывают музыканты в Интернете?

go to http://www.informationisbeautiful.net/2010/how-much-do-music-artists-earn-online/

Музыкантам просто не хватает денег. Мы уже знали, что звукозаписывающие компании ковыряют в кармане, и с этой визуализацией мы знаем, насколько сильно. Демонстрации того, что артистам нужно 4 053 110 прослушиваний в месяц, чтобы получать минимальную заработную плату от Spotify, было достаточно, чтобы зажечь живую беседу и привлечь к этому произведению более 1000 созданных LRD.

Как часто французы целуются?

go to http://www.radicalcartography.net/frenchkisses.html

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

Как работает поиск

go to http://www.google.com/insidesearch/howsearchworks/thestory/

Это не просто интерактивная прокрутка, эта часть открывается, когда вы переходите к следующему разделу. Это не является большим сюрпризом для талантливой и сильной команды инженеров и дизайнеров, проживающих в Маунтин-Вью.

Как работают солнечные панели

go to https://www.saveonenergy.com/how-solar-panels-work/

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

Как начал Стив Джобс

go to http://fundersandfounders.com/how-steve-jobs-started/

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

Как быть продуктивным

go to http://i.imgur.com/7aegNyj.jpg

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

Как собрать собаку

go to http://ngm.nationalgeographic.com/2012/02/build-a-dog/dog-families-graphic

Этот дизайн имеет уникальный формат макета «сколько из 100%» он использует. Возможно th

.

Pro советы по созданию интерактивной инфографики

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

Прочтите, чтобы узнать, как создать дизайн, действительно заинтересовавший вашу аудиторию.

01. Понять психологию

Эта инфографика объясняет, почему инфографика работает

Прежде чем вы начнете создавать свою интерактивную инфографику, стоит подумать, почему вы делаете ее интерактивной.

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

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

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

Анимация может сделать сухую тему более увлекательной

Один из самых популярных типов интерактивности требует от пользователей лишь небольшой прокрутки, которая обычно запускает анимацию и переходы. Это создает ту же потребность в завершении, что и домкрат из коробки; пользователи чувствуют себя обязанными закончить начатое.

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

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

03. Разбивка на страницы для облегчения усвоения

Разделение инфографики на страницы означает, что пользователь не перегружен информацией

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

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

04. Позвольте пользователям выделять определенные области.

Эта инфографика затрагивает тему налоговых деклараций.

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

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

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

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

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

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

05. Скрыть некоторую информацию

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

Еще один отличный способ привлечь пользователей к активному участию в инфографике — это щелчки или ролловеры, предлагающие дополнительную информацию. Это не только стимулирует у пользователя чувство любопытства и исследования, но и позволяет им пропускать второстепенные темы, которые им не интересны, не отговаривая их от продолжения работы с остальной инфографикой.

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

06. Участие пользователя убедительно

Персонализированная информация убедительна, но подходит только для определенных ситуаций

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

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

Следующая страница: Ресурсы, которые помогут вам оживить вашу инфографику

,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *