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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. С его помощью вы без труда воссоздадите самые популярные элементы интерактивной инфографики.

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

14 сервисов для создания инфографики онлайн

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

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

Три важных фактора воздействия инфографики:

1. Более 45% пользователей кликнут на ссылку, если она ведет на инфографику
2. 30% пользователей поделятся этой инфографикой, даже если она не несет важной информации
3. Остальные пользователи пребывают в астрале)

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

1. Hohli Builder — онлайновый сервис для создания красивых диаграмм и графиков. Судя по названию — не иначе как земляки придумали!☺)

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

3. Infogr.am — простой и удобный инструмент для создания интерактивной инфографики. Стоит попробовать в деле!

4. Piktochart — несколько бесплатных настраиваемых тем для создания собственной инфографики и более 200.000 пользователей по всему миру. Базовая версия бесплатна, расширенная обойдется в $29 в месяц. Читать наш обзор Piktochart.

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

6. Google Charts — сервис создаст красивые и легко настраиваемые графики и диаграммы из данных, которые вы ему “скормите”. Полученное отлично ляжет в основу дельной инфографики или отличной презентации.

7. Vizualize.me — сервис, превращающий ваше LinkedIn-резюме в инфографику. Российский аналог — Resumup.ru .

8. Google Public Data Explorer — поиск по открытым статистическим данным со всего мира. Ищем, забираем, трансформируем в инфографику.

9. Wordle — старенький, но все еще исправно работающий сервис для создания эффективных словесных визуализаций. Вводите собственный текст — получаете “облако” с выделением наиболее упоминаемых слов.

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

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

12. Tagxedo превращает слова (известные речи, новостные статьи, слоганы и тематики, даже ваши любовные признания) в облака слов, оказывающие визуальное воздействие на пользователя.

13. Cacoo – онлайн инструмент для рисования, который делает возможным создание разных видов инфографики, включая карты сайта, схемы страниц, UML (Unified Modeling Language — унифицированный язык моделирования) и сетевые графики. Сервис позволяет совершать совместную работу в реальном времени, а значит несколько пользователей могут делиться друг с другом и добавлять в блог одну диаграмму одновременно.

14. Easel.ly — приложение дает возможность возможность создавать красивую инфографику онлайн без знаний основ графических редакторов.

Источник: medium

Инфографика — Википедия

Инфогра́фика (от лат. informatio — осведомление, разъяснение, изложение; и др.-греч. γραφικός — письменный, от γράφω — пишу) — это графический способ подачи информации, данных и знаний, целью которого является быстро и чётко преподносить сложную информацию^[1][2]. Одна из форм графического и коммуникационного дизайна.

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

Инфографика — визуализация данных или идей, целью которой является донесение сложной информации до аудитории быстрым и понятным образом^[1][2]. Средства инфографики помимо изображений могут включать в себя графики, диаграммы, блок-схемы, таблицы, карты, списки^[1].

Существуют два противоположных подхода к дизайну инфографики, расходящиеся в вопросах значимости для инфографики эстетики и украшений. За одним из них, исследовательским (англ. explorative), берущим начало в вековых традициях оформления научных работ, стоит Эдвард Тафти, автор нескольких основополагающих работ по информационному дизайну. Он ратует за минималистский характер инфографики, при котором всё несущественное для передачи информации должно быть опущено, а сама информация должна быть передана максимально точно. Основной целью этого подхода является стремление к донесению информации до целевой аудитории. Такой подход оправдан в научной работе, анализе данных, бизнес-аналитике. Другой подход, сюжетный, повествовательный (англ. narrative) свойственен Найгелу Холмсу (Nigel Holmes^[en]), наиболее известному по его иллюстрациям редакционных колонок в Time с 1978 по 1994 год, называемому им explanation graphics^[3] — «поясняющие иллюстрации». Этому подходу присуще стремление к созданию привлекательных для читателя образов, выразительного дизайна, иллюстративности. Это не просто получение информации, но и развлечение для читателя. Сферой применения этого подхода можно считать журналистику, блоги, маркетинговые и рекламные материалы. Таким образом, исследовательский подход подразумевает извлечение нужной информации самим читателем, тогда как повествовательный уже содержит заключение, к которому читатель должен прийти^[4].

Инфографика может использоваться для создания ложного представления о статистических данных и манипулирования общественным мнением. Использование инфографики для этих целей подробно рассмотрено в главе «The One-Dimensional Picture» классической^[5] книги Дарелла Хаффа (англ.)русск. «Как лгать при помощи статистики».

• Графические объекты, ассоциативно связанные с представляемой информацией или являющиеся графическим выражением направлений изменения представляемых данных;
• полезная информационная нагрузка;
• красочное представление;
• внятное и осмысленное представление темы.

Практикующие дизайнеры выделяют несколько аспектов, учёт которых позволяет сделать инфографику успешной^[6][7][8][9]:

• Своевременность
• Привлекательная, понятная тема
• Плавный, красивый, эффективный дизайн
• Удобство распространения
• Учёт целевой аудитории
• Цифры могут говорить сами за себя
• Внутренняя целостность
• Эмоциональные цвета
• Качественные диаграммы
• Выбор масштаба
• Создание истории
• Выбор интересных фактов
• Визуализация
• Упрощение
• Использование линии времени
• Определение концепции и цели
• Авторитетность и надёжность источников
• Учёт отзывов от заказчика

Кроме того, можно выделить три столпа, на которых основывается хорошая инфографика^[10]:

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

Разновидности[править | править код]

Несмотря на то, что инфографика может применяться практически в любой дисциплине, специалист может выделить некоторые категории инфографики^[11]:

• Числа в картинках: наиболее распространённая категория, которая позволяет сделать числовые данные более удобоваримыми,
• Расширенный список: статистические данные, линия времени, просто набор фактов может быть визуализирован,
• Процесс и перспектива: служит для визуализации сложного процесса или предоставления некоторой перспективы. Может вообще не содержать числовых данных.

По способу отображения инфографика подразделяется на следующие виды^[12]:

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

По типу источника различают 3 основных вида инфографики:

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

• Инфографика различных видов
• 

  Линия времени о работах Джона Баскервиля

• 

  Инфографика на тему Social media brandsphere

• 

  Принцип создания и восприятия инфографики

Ключевыми форматами инфографической коммуникации являются^[13]:

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

Движущиеся изображения, особенно в сочетании со звуковым сопровождением, привлекают внимание людей больше, чем статические изображения. Этот вид инфографики становится всё более популярным. Технологии HTML5, CSS3 и JavaScript (ранее — Flash) позволяют располагать текстовый и графический материал поверх видео, создавая эффект расширенной реальности^[14].

Интерактивные инфографические интерфейсы (англ. interactive infographic interfaces) варьируются от самых простых до сложных и динамических. Этот вид инфографики особенно приспособлен для презентации большого объёма данных и привлечения пользователя к активному исследованию при получении требуемой им информации. Через интерактивный интерфейс можно подать как фиксированную информацию (англ. hard-coded), информацию о ситуации в виде приборной доски, а также обновляющуюся информацию в реальном времени^[15].

Интерактивная визуализация фиксированной информации в наиболее простом варианте может быть аналогична презентации или слайд-шоу, где от пользователя может потребоваться лишь переходить от одного слайда к другому. Другим случаем может быть нагруженная данными географическая карта, которая визуально представляет данные о выбранном пользователем регионе (скажем, при движении мыши над этим регионом)^[15].

Фиксированная интерактивная визуализация набора данных, динамически обновляющаяся в случае внесения изменений в наборе данных. В этом решении данные отделены от движка визуализации, да и обновлять подчас огромный объём данных вручную может быть слишком дорогим занятием. Примером данного подхода может служить фоновая картограмма карты США с обозначенными уровнями безработицы^[16][15].

Динамический интерактивный интерфейс позволяет по требованию обновлять как отображение, так и отображаемую информацию. Примеры данного вида интерактивной инфографики можно найти в программах для разного рода аналитики и CRM. В качестве хорошего примера интерфейса можно назвать бесплатный сервис управления финансами mint.com. Хотя обычно в таких системах пользователь сам выбирает временные периоды, визуализируемые данные и форму их отображения, и в этом случае сюжетное изложение возможно наряду с исследовательским^[15].

В СССР инфографика широко применялась при оформлении павильонов ВДНХ, где был создан «Производственно-оформительский комбинат» (ПОК ВДНХ), на котором работали в том числе выпускники художественно-оформительского отделения МГАХУ памяти 1905 года и МГХПА им. Строганова.

Одними из первых в газете стали использовать сочетание графики и текста издатели USA Today, запустившие свой проект в 1982 году. За несколько лет газета вошла в пятерку самых читаемых изданий страны. Одним из наиболее заметных и востребованных читателями нововведений USA Today стали детальные, хорошо прорисованные картинки с поясняющими комментариями — инфографика. Американские читатели быстро поняли и приняли преимущества такого способа передачи информации — инфографика передавала сообщение быстрее, чем текст (один качественно сделанный рисунок заменял несколько страниц текста) и подробнее, чем стандартная иллюстрация (благодаря детальности рисунка и точным тезисным комментариям). Со временем выяснилось, что инфографика является не только технологией, не только сферой бизнеса, но и искусством. При этом, степень владения этим искусством напрямую влияет на доходность издательского бизнеса. Именно поэтому сегодня такие журналы как «Эсквайр» и «Нью-Йоркер» выделяют на создание инфографики 3—4 ведущих дизайнеров и одного журналиста — автора стержневой идеи.

Одним из пионеров в создании интерактивной графики можно считать Дона Виттекинда (Don Wittekind), приглашённого газетой South Florida Sun-Sentinel^[en]. Мультимедийная галерея The Edge, созданная в Sun-Sentinel с помощью программы Adobe Director и позднее перенесённая на Macromedia Flash, стала образцом для подражания многих профессионалов. Интерактивную графику приняли на вооружение и другие онлайн-медиа^[17].

В России в 2011 году появился журнал «Инфографика», главной особенностью которого стало отсутствие текстов и представление всей информации в виде инфографики^[18].

1. ↑ ^{1 2 3} Newsom, Haynes, 2010, p. 220—221.
2. ↑ ^{1 2} Mark Smiciklas (2012). The Power of Infographics: Using Pictures to Communicate and Connect with Your Audience.
3. ↑ Nigel Holmes Explanation Graphics
4. ↑ Lankow, Ritchie, Crooks, 2012, VARIED PERSPECTIVES ON INFORMATION DESIGN: A BRIEF HISTORY.
5. ↑ «Over the last fifty years, How to Lie with Statistics has sold more copies than any other statistical text.» J. M. Steele. «Darrell Huff and Fifty Years of How to Lie with Statistics. Statistical Science, 20 (3), 2005, 205—209.
6. ↑ 4 Key Ingredients For Designing Successful Infographics
7. ↑ Dayne Shuda, Three Case Studies of Infographic Success
8. ↑ 5 Rules for Infographic Success Архивная копия от 17 октября 2012 на Wayback Machine
9. ↑ Tom Howlett, 50 Elements That Make Infographics Successful (with examples)
10. ↑ Lankow, Ritchie, Crooks, 2012, WHAT MAKES A GOOD INFOGRAPHIC?.
11. ↑ John Bottom, How do you define an infographic?
12. ↑ Нестерович А. В., Инфографика Архивная копия от 2 октября 2013 на Wayback Machine
13. ↑ Lankow, Ritchie, Crooks, 2012, INFOGRAPHIC FORMATS: CHOOSING THE RIGHT VEHICLE FOR YOUR MESSAGE.
14. ↑ Lankow, Ritchie, Crooks, 2012, MOTION GRAPHICS.
15. ↑ ^{1 2 3 4} Lankow, Ritchie, Crooks, 2012, INTERACTIVE INFOGRAPHICS.
16. ↑ Choropleth
17. ↑ Cairo, 2012, The Rise of Interactive Graphics.
18. ↑ Сайт журнала «Инфографика»

• История мира в инфографике. — М.: Альпина Паблишер, 2014. — ISBN 978-5-9614-4525-1.
• Edward R. Tufte. The Visual Display of Quantitative Information. — 16. — Graphics Press, 1983. — P. 197.
• Lankow, J. and Ritchie, J. and Crooks, R. Infographics: The Power of Visual Storytelling. — Wiley, 2012. — 264 p. — ISBN 9781118420065.
• Alberto Cairo. The Functional Art: An introduction to information graphics and visualization. — New Riders, 2012. — 384 p. — ISBN 978-0-13-304118-7.
• Newsom, D. and Haynes, J. Public Relations Writing: Form \& Style. — Cengage Learning, 2010. — 448 p. — ISBN 9781439082720.

ИНТЕРАКТИВНАЯ ИНФОГРАФИКА В ИНТЕРНЕТЕ | sibac.info

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

Мы используем своё видение в первую очередь для восприятия мира, в котором мы живем. По этой причине визуальная коммуникация более эффективна, чем другие типы общения. Её история восходит к тысячам лет назад: от пиктограмм на стенах пещеры до идеограмм в иероглифах. Сегодня человечество развивается в мире, гораздо более сконцентрированном на визуальной составляющей. Быстрый прогресс урбанизации и технологий с 20-го века привел к тому, что визуальная коммуникация приобрела большее значение в современной жизни. В качестве примера этого процесса можно привести постепенное увеличение систем знаков и направлений, наружной рекламы и визуальных элементов в печатных публикациях. Сегодня предметы, которые являются неотъемлемой частью современной жизни, такие как смартфоны, сенсорные экраны, телевидение, Интернет и социальные сети, определяют визуальной коммуникации центральное место.

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

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

Статичная. Как правило фиксированная информация. Статичная инфографика – самая простая и наиболее распространенная форма инфографического дизайна. Взаимодействие с пользователем состоит из просмотра и чтения. Готовая инфографика сохраняется в виде файла статичного изображения (JPG, PNG, SVG и т.д.) для удобного распространения в интернете и для печати на бумаге. Лучше всего работает в качестве описания, но может быть полезным и в других случаях.

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

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

Рисунок 1. Квадрат инфографических форматов

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

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

Условно интерактивность можно разделить на 2 типа взаимодействия с пользователем (Таблица 1): функциональные выражения, которые улучшают функциональность путем акцентирования и добавления информации и эмоциональные выражения, которые развлекают пользователей и приглашают их участвовать в каком-либо процессе [6]. Функциональные выражения интерактивной инфографики включают в себя функциональные элементы, такие как добавление или вычитание информации, акцентирование необходимой информации посредством взаимодействия, представление взаимосвязей между несколькими графиками и подробное предоставление выбранной информации посредством перемещений или изменений внутри диаграмм. Эмоциональные выражения включают такие элементы, как отображение красочных анимаций, например, и представление интересных движений без изменения предоставленной информации при взаимодействии с ними пользователей.

Таблица 1.

Типы интерактивных выражений

Исследователи из Wharton School of Business обнаружили, что презентации с интерактивной инфографикой, сопровождаемые звуковыми эффектами, вызывали большую лояльность аудитории, нежели обычные статичные презентации. Также обычный одностраничный сайт показал результаты по уникальным посетителям в 2-3 раза хуже, чем такой же сайт, но с интерактивной инфографикой на нем [2]. Дело всё в том, что читатель привязывается к интересному и увлекательному контенту, интерактивные переходы подсказывают ему куда нажать и что посмотреть. Интерактивные средства генерируют больше потенциальных клиентов, и таким образом пользователь втягивается в процесс и остаётся на сайте дольше.

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

1. Есть данные и информация, которую было бы сложно визуализировать в ограниченном пространстве, которое предоставляет традиционная статическая инфографика.
2. Есть информация, визуализация которой может быть более выигрышной, если добавить возможность пользователю самому настраивать данные.
3. В тексте идёт повествование, в котором пользователь может сам добавлять и скрывать информацию, которая ему интересна.
4. Возможность повысить обратную связь с пользователем и привести к ключевой информации.
5. Обеспечение лучшего включения в веб-сайты и другие медиа.

Список литературы:

1. Amanda Dodge. What Is an Interactive Infographic? [Электронный ресурс] // Copypress — Режим доступа. — URL:https://www.copypress.com/blog/what—is—an—interactive—infographic/ (дата обращения: 22.05.2018)
2. An animated infographic about animated infographics [Электронный ресурс] // Copypress — Режим доступа. — URL:https://www.copypress.com/blog/an—animated—infographic—about—animated—infographics/ (дата обращения 19.05.2018)
3. Banu İnanç U.D. Interactive Infographics on the Internet / U.D. Banu İnanç // Online Journal of Art and Design. — 2014. Vol. 2. issue 4.
4. Infographic Tips That You Wish You Knew Years Ago [Электронный ресурс] // Kissmetrics — Режим доступа. — URL:https://blog.kissmetrics.com/12-infographic-tips/ (дата обращения 23.05.2018)
5. Interactive Design [Электронный ресурс] / Killerinfographics — Режим доступа. — URL:http://killerinfographics.com/interactive-infographics/ (дата обращения 21.05.2018)
6. Jongyoun Won. Interactive Infographics and Delivery of Information: The Value Assessment of Infographics and Their Relation to User Response [Электронный ресурс] // Department of Communication Design, Hongik University — Режим доступа. — URL:http://www.aodr.org/xml/12877/12877.pdf (дата обращения: 23.05.2018)