В данном уроке мы научимся строить интерактивную инфографику с помощью SVG, CSS и JavaScript. Одной из менее обсуждаемых тем является свойство новых браузеров в увеличении поддержки файлов в формате SVG. В отличие от растровых изображений, например, PNG, JPG или GIF, векторная графика в файлах SVG абсолютно масштабируемая к любому размеру и будет отображаться при любом разрешении или плотности экрана без потери качества. Во многих случаях файлы SVG намного меньше по размеру и быстрее загружаются. Но самое интересное, что некоторые разработчики не понимают то, что SVG основан на спецификации XML и может применяться подобным образом к HTML.
Это также означает, что мы можем получить доступ и управлять графикой и элементами в файле SVG, используя технологии CSS и JavaScript, с которыми разработчики веб-страниц уже знакомы. Разработчики могут теперь создать некоторые довольно внушительные анимации и эффекты, используя SVG. Сегодня мы исследуем возможности SVG на примере создания интерактивной векторной инфографики для веб. Просмотреть демо или же скачать исходный код вы можете, нажав на ссылки под картинкой ниже. Приступим.
Есть много способов создания графики SVG. В то время, как есть возможность сделать SVG, кодируя вручную, мы захотим для более сложной графики иметь некоторый тип векторного программного обеспечения, которое может экспортировать в формате SVG. Популярным выбором среди большинства дизайнеров может быть знакомый нам Adobe Illustrator , но есть и другие общедоступные приложения, например, Inkscape , который может быть более подходящим для наших целей.
Независимо от программного обеспечения, которое вы выберите, существенной остается возможность группировать объекты вместе и иметь возможность назвать эти группы (прописывая id атрибуты). Это позволяет нам организовывать наш SVG в соответствующую иерархию, к которой мы позже сможем получить доступ, используя CSS и/или JavaScript. У Illustrator и у Inkscape есть возможность делать это, выбирая многократные графические элементы, идя в Object > Group (группировать) (или Ungroup — разгруппировать) с главного меню.
Любому объекту или группе может быть приписано потом имя, которое становится id атрибутом группы или объекта при экспорте, так что избегайте пробелов, специальных символов и дубликатов.
В Illustrator это можно сделать в панели слои (layers). Просто найдите в панели объект, который вы желаете назвать, дважды кликните на поле слоя и введите желаемое id . В Inkscape используйте Object > Object Properties панель для того, чтобы приписать объекту или группе id . Также это можно сделать с Edit > XML Editor панель, где можно прописывать не только id, а также и классы.
В нашем примере, когда мы сохраним файл SVG и откроем его в текстовом редакторе, он будет иметь следующую структуру:
Разметка выше показывает нам структуру, к которой мы идем.
Как мы можем заметить в нашей разметке SVG, каждый тег
Есть способы включить или поместить SVG в HTML. Это возможно через использование тега , тега
Во-первых, создадим блок div в HTML документе:
Теперь, используя jQuery загрузку, загрузим файл SVG в #stage блок и назначим ему класс svgLoaded, который будем использовать, чтобы вызвать анимацию:
$(function () { $("#stage" ) .load ("interactive.svg" ,function (response) { $(this ) .addClass ("svgLoaded" ) ; if // Make absolutely sure you are running this on a web server or localhost! } } ) ; } ) ;
Важно : загружаем SVG с помощью JavaScript для того, чтобы получить доступ к его DOM. Chrome (и возможно другие браузеры) не позволят сделать вам это локально; это сработает только при запуске с протоколом HTTP из соображений безопасности.
Обратите внимание на то, что CSS в этом уроке не будет содержать никаких спецификаций для браузеров, но в файлах они будут.
Первым делом указываем некоторые стили для блока div . При загрузке SVG файл должен соответствовать размеру блока, поэтому важно установить размер блока соответственно размеру холста SVG.
#stage { width : 1024px ; height : 1386px ; }
Ключ к оживлению элементов в пределах холста находится в свойстве transform-origin . По умолчанию все преобразования к любому элементу в SVG происходят от (0px, 0px) холста SVG. Для любого элемента, который мы желаем преобразовать (например, масштабировать, повернуть), необходимо установить подходящий transform-origin относительно левой и верхней стороны холста SVG. Источник будет отличаться от каждого элемента в зависимости от желаемого эффекта/анимации, но в большинстве случаев будет равняться центральной точке, где элемент уже помещен. Это может быть довольно утомительно, но проще просто скопировать координатную информацию, которая представлена в нашем векторном редакторе.
#coffee { transform-origin: 517px 484px ; } #coffee-badge { transform-origin: 445px 488px ; } #coffee-title { transform-origin: 310px 396px ; } #coffee-details { transform-origin: 311px 489px ; } #design { transform-origin: 514px 603px ; } #design-badge { transform-origin: 580px 606px ; } #design-title { transform-origin: 712px 513px ; } #design-details { transform-origin: 710px 620px ; } #build { transform-origin: 511px 769px ; } #build-badge { transform-origin: 445px 775px ; } #build-title { transform-origin: 312px 680px ; } #build-details { transform-origin: 310px 790px ; } #complain { transform-origin: 512px 1002px ; } #complain-badge { transform-origin: 586px 1000px ; } #complain-title { transform-origin: 718px 921px ; } #complain-details { transform-origin: 717px 1021px ; } #beer { transform-origin: 513px 1199px ; } #beer-badge { transform-origin: 444px 1193px ; } #beer-title { transform-origin: 313px 1097px ; } #beer-details { transform-origin: 316px 1202px ; }
Нам необходимо установить начальные стили для изменения позиции некоторых объектов. А также необходимо скрыть определенные объекты, которые мы не хотим показывать до момента наведения на них курсора.
Для того, чтобы это сделать мы будем использовать селекторы CSS. В основном мы выбираем объекты с id “суффиксами”.
[ id$=badge] { /* Any element with an id that ends in "badge" */ transform: scale(0 .5 , 0 .5 ) ; } [ id$=title] { transform: scale(1 .8 ) translate(0px , 48px ) ; } [ id$=details] { transform: scale(0 , 0 ) ; }
Мы выбираем элементы внутри группы hovered и превращаем их обратно в исходное положение. Затем устанавливаем переход 0.25s для классного анимационного эффекта.
#timeline > g:hover [ id$=badge] , #timeline > g:hover [ id$=details] { transform: scale(1 , 1 ) ; } #timeline > g:hover [ id$=title] { transform: scale(1 ) translate(0px , 0px ) ; } [ id$=badge] , [ id$=title] , [ id$=details] { transition: transform 0 .25s ease-in-out; }
Используем CSS анимацию. Для начала необходимо создать несколько ключевых кадров, что позволит оживить некоторые различные свойства CSS:
@keyframes left-brace-intro { 0 % { transform: translateX(220px ) ; opacity: 0 ; } 50 % { opacity: 1 ; transform: translateX(220px ) ; } 100 % { transform: translateX(0px ) ; } } @keyframes right-brace-intro { 0 % { transform: translateX(-220px ) ; opacity: 0 ; } 50 % { opacity: 1 ; transform: translateX(-220px ) ; } 100 % { transform: translateX(0px ) ; } } @keyframes fade-in { 0 % { opacity: 0 ; } 100 % { opacity: 1 ; } } @keyframes grow-y { 0 % { transform: scaleY(0 ) ; } 100 % { transform: scaleY(1 ) ; } } @keyframes grow-x { 0 % { transform: scaleX(0 ) ; } 100 % { transform: scaleX(1 ) ; } } @keyframes grow { 0 % { transform: scale(0 , 0 ) ; } 100 % { transform: scale(1 , 1 ) ; } }
Мы можем использовать селекторы, основанные на классе svgLoaded, который мы применяли ранее.
Для того, чтобы задать анимационную последовательность, зададим свойство animation-delay , и установим animation-fill-mode: backwards так, чтобы анимация была с паузами.
SvgLoaded #logo { animation: fade-in 0 .5s ease-in-out; } .svgLoaded #quote-text { animation: fade-in 0 .5s ease-in-out 0 .75s ; animation-fill-mode: backwards; } .svgLoaded #quote-left-brace { animation: left-brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards; } .svgLoaded #quote-right-brace { animation: right-brace-intro 1s ease-in-out 0 .25s ; animation-fill-mode: backwards; } .svgLoaded #background { animation: grow-y 0 .5s ease-in-out 1 .25s ; transform-origin: 512px 300px ; animation-fill-mode: backwards; } .svgLoaded #background > g { animation: grow-x 0 .25s ease-in-out 1 .75s ; animation-fill-mode: backwards; } .svgLoaded #background > g:last-of-type { transform-origin: 458px 877px ; } .svgLoaded #background > g:first-of-type { transform-origin: 563px 877px ; } .svgLoaded #coffee , .svgLoaded #design , .svgLoaded #build , .svgLoaded #complain , .svgLoaded #beer { animation: grow 0 .25s ease-in-out; animation-fill-mode: backwards; } .svgLoaded #coffee { animation-delay: 2s; } .svgLoaded #design { animation-delay: 2 .25s ; } .svgLoaded #build { animation-delay: 2 .5s ; } .svgLoaded #complain { animation-delay: 2 .75s ; } .svgLoaded #beer { animation-delay: 3s; }
Так как мы использовали нестандартные шрифты в нашем файле SVG, нам необходимо включить их также в нашу веб-страницу. Важно указать правильно имя шрифта, который был использован при экспорте SVG. Мы открываем файл SVG в текстовом редакторе и просто находим текст, где использовался шрифт, и смотрим на свойство font-family:
Как мы можем видеть, файл SVG был экспортирован с использованием шрифта font-family с именем ‘LeagueGothic’ . Таким образом мы просто должны определить веб-шрифт в CSS, используя точно такое же имя.
@font-face { font-family : "LeagueGothic" ; url ("../fonts/league-gothic/league-gothic.eot.woff" ) format("woff" ) ; }
Это все! Надеемся, что вам понравился урок и вы нашли его полезным и информативным. Будем рады услышать ваши комментарии.
Перевод — Дежурка.
Testix публикует перевод статьи Робби Ричардса . Оригинал: How to Make an Interactive Infographic (a 6-Point Guide)
Одна из самых больших проблем, с которой сталкиваются сегодня маркетологи, - это борьба за создание вовлекающего контента.
Алгоритмы поиска постоянно изменяются в попытках отфильтровать контент низкого качества. С учетом вышеперечисленного это приводит к масштабным изменениям в стратегиях создания контента.
Некоторые брэнды перешли на лонгриды…
…или тот тип контента, который Брайен Дин продвигает при помощи своей «техники Небоскрёба» .
Результат - взрыв контента, заполнившего Интернет. Сегодня только в блогах каждый день публикуется более 2 миллионов статей.
Этот уровень насыщенности контента вызвал резкую смену стратегий компаний.
В последние годы, многие работали над тем, чтобы разнообразить свой контент, добавляя другие форматы - например, инфографику . Факт: инфографика в течение 2016 года пережила бурный рост: 58% маркетологов отметили ее среди главных тактик, которые они используют для вовлечения аудитории.
Например, некоторые маркетологи считают, что создание инфографики требует определённых профессиональных навыков или дорогостоящего графического дизайнера. Но это не так.
Вам не нужна специальная команда разработчиков, если у вас есть платформы *, предлагающие набор инструментов, ускоряющих и упрощающих процесс создания интерактивного контента.
В этой статье Вы увидите, что интерактивную инфографику не только легко создавать - она еще более эффективна для вовлечения аудитории, чем статичная инфографика, и превращает ваших читателей в потенциальных клиентов.
Концепция инфографики проста: вложи как можно больше ценного для читателей в часть контента и визуализируй, чтобы лучше вовлечь их.
Именно для этого и создана интерактивная инфографика.
Дизайн графики идеально сочетается как с сюжетом истории, так и с набором данных. Вы обнаруживаете себя путешествующим со скоростью 3000 километров в час, летящим мимо Международной космической станции на самую вершину ленты, составленной из 21,9 миллиарда фотографий, выложенных в Инстаграм за год.
Вот что нужно держать в уме, когда вы выбираете визуальную тему для интерактивной инфографики:
Еще один замечательный пример - это инфографика Joho Bean :
Она увлекает пользователя в необычное мультимедийное приключение, используя сочные кадры, рассказывает о путешествии кофейного зерна от места созревания к потребителю.
Интерактивная инфографика должна быть интерактивной, но это не значит, что она должна быть ограничена отдельными кликабельными элементами.
Каждое действие пользователя должно создавать какой-то отклик внутри контента, чтобы все в целом создавало по-настоящему персональный опыт - даже если это всего лишь обычная прокрутка страницы.
Скрытый контент не только заставляет читателя активно участвовать в изучении контента , он поощряет любопытство, а также позволяет читателям пропустить разделы, которые им мало интересны.
Вы можете гарантировать гораздо более сильное вовлечение, если предложите пользователям данные на основе введенной ими информации. Это соответствует желаниям пользователей: они хотят больше интерактивного контента и больше персонализации .
Потрясающий пример этого - персонализированная инфографика, которая дает представление о том, может ли Ваша работа подвергаться риску быть автоматизированной роботами:
Пользователям нужно выбрать профессию, которая их интересует, чтобы получить релевантную информацию.
Будущее визуализации данных в интерактивности.
Но как создать по-настоящему потрясающую интерактивную инфографику?
Инфографика повсюду, и последнее время она все чаще становится интерактивной.
В сегодняшней статье мы поделимся с вами секретами создания интерактивной инфографики, а также ссылками на полезные ресурсы.
Перед тем, как делать инфографику интерактивной, важно понять, почему вы хотите ее сделать именно такой.
Как подробно рассказано в этой инфографике , люди лучше воспринимают визуальную информацию. Мы с намного большей вероятностью прочитаем, поймем и запомним презентацию, если в ней будут увлекательные визуальные средства. является эффективным инструментом обучения, но и он может стать еще лучше.
Кинетическое обучение – отличная альтернатива, так как люди лучше усваивают информацию через физические действия.
Вот почему добавление интерактивности в перспективную сферу визуализации поможет вам создать еще более запоминающуюся и эффективную инфографику.
Эта комбинация визуального и кинетического подхода делает анимированную инфографику контентом будущего. Конечно, для некоторых тем лучше не использовать интерактивные элементы, но в большинстве случаев они только улучшат контент.
Движение придает дополнительный смысл информации, позволяет пользователю управлять опытом и задействует воображение так, как этого не сможет сделать статичная инфографика.
Фишка виртуальной реальности в том, что для окружающих вы будете выглядеть идиотом
Google’s Cardboard Design Lab – хороший “учебник” для начинающих дизайнеров виртуальной реальности
Инфографика — как игра-бродилка
Проблема с Unity в том, что не так то просто сделать хорошую вещь под web
Виртуальная реальность – это как наушники для ваших глаз
Виртуальная реальность требует безопасного окружения, вы не можете уйти в нее “на ходу”. Это ограничивает возможности VR
Закрывал сессию первой половины дня Archie Tse из The New York Times с провокационной темой “Почему NYT делает меньше интерактивных работ».
Работа NYT базируется на трех правилах визуального сторителлинга:
Вам придется перерисовать вашу графику 2 или 3 раза, чтобы все работало и на десктопе, и на мобильных
Как эти правила изменили подход NYT:
(Четвертый пункт гласит, что они по-прежнему делают интерактивные работы. Но теперь повод должен быть ОЧЕНЬ значимым).
Мы делали “многошаговки”. Пользователи останавливались на шаге 3. Читатели хотят просто скролить, а не кликать
Archie Tse: Scrolling Vs. clicking
Уже 18 недель каждый вечер воскресенья Энди Крибел публикует инфографику и данные, на основе которых она сделана, на сайте VizWiz . Задача – в течении понедельника выделить примерно час времени, быстро проанализировать визуализацию и сделать свою версию.
Ниже публикуем результаты прошлой недели — Рабство в XXI веке .
#MakeoverMonday от Andy Kriebel. Подробное описание и интерактив — в блоге Энди :
#MakeoverMonday от Andy Cotgreave. Подробное описание и интерактив — в блоге Энди:
Я также узнала, что 51% людей в мире младше меня, а 63% в России старше, и что мои шансы умереть прямо сейчас не так уж велики. Цифры вдруг перестали быть «статистикой» и задели меня за живое.
Визуализация данных — использует большие наборы данных с меньшим количеством ручной работы над дизайном; базируется на алгоритмах. Например, интерактивная работа New York Times .
Визуальное искусство — однонаправленное кодирование. Красивые, но трудно поддающееся расшифровке визуализации, например, вычислительное искусство Кунала Ананда.
В чем проблема?
В итоге многие работы привлекают только изощренных пользователей, но не позволяют вникнуть в суть вопроса непосвященным читателям, тем самым причиняя вред цели визуализации – информировать общественность. Именно поэтому настолько важно осознать и понять проблему визуальной грамотности в контексте визуализации.
Новая «визуальная грамматика» журналистики
Приведу в пример три работы, которые экспериментируют со способами представления интерактивной журналистики. Они выглядят внушительно, но и их интерпретация может стать для многих непростой задачей.
Права гомосексуалистов в США, штат за штатом
Количество доступных на сегодня источников данных и инструментов для их обработки само по себе уже наглядно показывает, что ещё никогда столько людей не пыталось освоиться в мире визуализации данных. А когда есть такое число материалов, доступных к изучению, один только вопрос «С чего начать?» может напугать каждого новичка. Итак, какие же библиотеки являются лучшими и что советуют профессионалы? Об этом и пойдёт речь в данной статье.
Говорить о визуализации данных и не упомянуть – это всё равно, что рассказывать об истории создания персональных компьютеров и ни словом не обмолвиться о Стиве Джобсе. D3 (от англ. Data Driven Documents) – это без преувеличения самая важная и доминирующая на рынке JavaScript библиотека с открытым исходным кодом, которая обычно используется для создания SVG-графиков. SVG (от англ. Scalable Vector Graphics) – это в свою очередь формат векторного изображения, поддерживаемый веб-браузерами, но ранее мало использовавшийся.
Библиотека D3 во многом обязана своей популярностью внезапному интересу к SVG со стороны веб-дизайнеров, что в значительной степени объясняется тем, как выигрышно векторные графики выглядят на экранах с большим разрешением (в частности, на Retina-дисплеях, используемых в устройствах Apple), которые становятся всё более распространёнными.
«Будем честными, если задача состоит в визуализации данных на основе SVG, то для её решения все остальные библиотеки даже рядом не стояли», – говорит Moritz Stefaner , независимый эксперт в области визуализации данных и владелец компании Truth & Beauty . «Есть также немало интересных проектов, созданных на базе D3, как, например, NVD3 , который предоставляет стандартные графические компоненты – готовые к использованию, но кастомизируемые; или, скажем, Crossfilter – просто выдающийся инструмент для фильтрации данных».
Scott Murray , программист-дизайнер и автор книги Interactive Data Visualization for the Web , согласен с предыдущим мнением: «D3 обладает чрезвычайной силой, которая заключается в том, что в нём используется всё, что только могут предложить браузеры. Хотя у этого есть и обратная сторона: если браузер не поддерживает что-то, например, 3D-изображения на основе WebGL (от англ. Web Graphics Library), то и D3 это поддерживать не будет».
И хотя эта библиотека по-настоящему универсальна, она всё же не является идеальным решением для любой задачи. «Основной недостаток библиотеки D3, если можно так выразиться, состоит в том, что она не предписывает и даже не предлагает какого-то определённого подхода к визуализации», – добавляет Scott Murray. «То есть это действительно инструмент для загрузки данных в браузер с последующей генерацией DOM-компонентов на основе этих данных».
В то время как D3 представляет собой отличный инструментарий для кастомных изображений, если вы хотите создать стандартный график без особой проработки визуального аспекта, то вам может быть полезен такой инструмент как Vega . Будучи фреймворком, разработанным на базе D3, Vega предоставляет альтернативу для отображения графических компонентов. Используя Vega, можно визуализировать данные в формате JSON Европейский центр журналистики и проект Data Driven Journalism . Точные даты проведения курса пока не известны, но зарегистрироваться можно уже сейчас.
За пять дней участники курса смогут узнать что такое журналистика данных, как она устроена и какие ключевые навыки стоит освоить, чтобы стать специалистом в этой области. Выяснить где искать данные в поддержку своих сюжетов и как находить новые идеи в имеющихся данных. Изучить мастерство превращения скучных данных в увлекательную историю, инфографику или даже в интерактивную визуализацию. Познакомится с основными принципами графического дизайна, которые необходимо знать журналисту.
Инструкторы курса — пять ведущих мировых экспертов по журналистике данных и визуализации.
В последние несколько лет инфографика эволюционировала от статичных картинок до насыщенного интерактивного опыта с элементами анимации и видео, адаптированными под уникальный контент. Она больше не ограничивается заранее подготовленными, универсальными шаблонами. И сегодняшняя подборка содержит лучшие образчики инфографики, демонстрирующие, как выглядит интересный и информативный опыт.
Большая часть инфографики в этом списке была выбрана, чтобы показать различные способы, с помощью которых дизайнеры подходят к визуализации данных. Однако здесь есть также несколько «гибридов», иллюстрирующих стирание границ между инфографикой и насыщенным мультимедийным опытом при создании увлекательного контента и убедительных историй на лендингах. Отклонение от традиционных форм означает, что мы заходим на более сложную медиатерриторию, и именно такие эксперименты с технологиями и повествованием будут иметь решающее значение для формирования будущего графического дизайна.
«Карта Ветров» (Wind Map) — это захватывающий образец дизайна, в котором показаны направление и скорость ветра над Соединенными Штатами. Данный дизайн несет скорее художественную, чем утилитарную цель, и это прекрасно: очень приятно просто сидеть и смотреть, как тонкие-тонкие ниточки вьются по карте. Простой, но хорошо продуманный пример того, как инфографика, показывающая траектории движения фигур, выигрывает от анимации и движущихся изображений.
В 2014 году The Guardian запустил инфографику «В полете» (In Flight), демонстрирующую данные о совершающихся в реальном времени коммерческих перелетах (кажется, сейчас сведения не обновляются, а жаль), а также содержащую урок по истории авиации. Приглушенные разговоры между авиационными экипажами в начале интерактивного шоу создают особую атмосферу. Похоже, что инфографика в наши дни постепенно превращается в кинематографический опыт. По крайней мере, «В полете» указывает на это направление...
В инфографике «Наберите Луну» (Dial A Moon) происходит немногое, но она служит своей цели довольно хорошо. В 2015 году, благодаря NASA, инфографика лунных фаз обновлялась каждый час, и можно было не лезть в Google в поисках этой таинственной информации. Теперь вы можете посмотреть картинки, вручную введя месяц, день и время.
Журнал 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) в конце.
«Мы дали этому свершиться — как же теперь все исправить?»
Многие из инфографик в этом списке используют анимацию и интерактивность для обеспечения богатого опыта. Визуально данная инфографика от 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 позволяет вам изучить модель и дизайн каждого из автомобилей Бонда, а также дает несколько дополнительных интересных фактов. Используя вездесущую тактику слайдера, вы также можете «раскрыть» автомобиль во всей его металлической красе (по умолчанию дается лишь одноцветный рисунок). Так авторы творчески решили проблему необходимости включить фотографии, не совсем подходящие под эстетику инфографики.
«Цвета движения» (The Colors Of Motion) — это инфографическая серия, анализирующая фильмы только по их цветовой палитре, полученной из соединения всех кадров. Если вы когда-нибудь задавались вопросом, то теперь у вас есть ответ. Не можете найти заголовок в базе данных? Просто отправьте разработчикам сообщение — они принимают запросы.
National Geographic имеет довольно впечатляющую коллекцию, как они сами ее называют, «интерактивной графики» (большинство из которой сопровождается детальными текстовыми описаниями, как в случае, например, с Колонной Траяна), но мы выбрали этот относительно простой пример, чтобы подчеркнуть, применение каких методов действительно эффективно в интерактивной инфографике. «Царская гробница в Перу»(Peru’s Royal Wari Tomb) раскрывает особенности погребения дворянки тех времен. Фокус переходит от обмотки мумии к ее украшениям и положению. Разделяя информацию на небольшие части и позволяя пользователю перемещаться между ними, интерактивная графика избегает самых коварных ловушек: переизбытка данных и визуальных эффектов. Более того, каждое последующее взаимодействие расширяет опыт, делая его намного полезнее, чем в случае, если бы все было представлено сразу. Наш мозг обладает механизмом, отвергающим подавляющие стимулы, а данный тип взаимодействия становится отличным решением для пользователя, позволяя легко поглощать информацию.
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) привнесло забавный элемент в серьезное дело, касавшееся набранных процентов и избирательных участков. Интерактивная инфографика отслеживала голоса в четырех штатах. По умолчанию на графике были показаны результаты по всей стране, а если пользователь наводил курсор на какой-либо участок на карте, то демонстрировалось, какие цифры кандидаты набрали именно там. Кандидаты в президенты были представлены в виде смешных пиксельных аватаров. По мере обновления инфографики в живом времени, человечки подкрашивали цветом штаты, в которых они выиграли. Время от времени рядом с кандидатом появлялась его цитата в пузыре.
Отражение результатов выборов в реальном времени
