Приглашенный редакторЭлектронная инфографика. Часть 3: настоящее
«Главный девиз инфографики — объяснять сложное и скучное доступным способом»
В ближайшие недели на сайте Look At Me Алексей Волков выпустит серию статей об инфографике на всех возможных электронных устройствах. Третья часть — об интерактивной и динамической инфографике — ниже.
Алексей Волков
Создаёт мобильные приложения и веб-сайты. Интересуется инфографикой, фотографией, графическим дизайном. В данный момент работает в компании «Мамба» арт-директором.
После удачных попыток переноса статичной инфографики на веб всем стало ясно, что следующий, самый логичный и простой шаг в её развитии — это применение к статичным данным интерактивных свойств, которыми изобилует веб и прочие электронные штуки. В общем и целом наше отечественное сообщество находится сейчас примерно на этой отметке. Как и в прошлый раз, я снова разделил, теперь уже интерактивную инфографику, на группы.
1 Разворачивающиеся слои
Иллюстрация на сайте
агрохолдинга «Мрия»
Перед вами центральная иллюстрация из раздела «Деятельность» украинского агрохолдинга «Мрия», на которой в действии показан главный девиз инфографики.
Главный девиз инфографики — объяснять сложное и скучное доступным способом
Тут можно вспомнить, что в качестве исходных данных мне предоставили три длинных экселевских таблицы, внутри которых в хаотичном порядке были разбросаны составляющие процесса производства продукции. Не буду вдаваться в подробности, но в итоге аналитическая работа отняла большую часть времени, выделенного на задачу. И это, кстати говоря, одна из главных особенностей создания действительно правильной инфографики, в которой анализу и структурированию всегда уделяется большинство рабочего времени, а сборке и отрисовке — на порядок меньше. Зато после такого детального разбора все данные сразу встают на свои места, как будто элементы огромного пазла. В итоге получившийся результат выглядит как единственно правильный вариант отображения сложных по существу и простых по восприятию данных.
Ну а из интерактива здесь появились разворачивающиеся по ссылкам слои с поясняющим текстом. Не густо, конечно, но уже не статичные иллюстрации.
Одна из интерактивных статей на сайте New York Times про Олимпийские игры — 2014
Помните, в предыдущем посте, когда я рассказывал про принцип актуальности, я обмолвился об инфографике на тему Олимпийских игр в Сочи? Да вот же она, смотрите. По анимации тут всё понятно: ездящие фигурки спортсменов, разложенные по переключающимся слоям. Но больше здесь интересен сам смысл. На этой инфографике в основном представлены виды спорта, менее зрелищные в плане борьбы с соперниками: бобслей, скелетон и т. п. И вот эта инфографика как раз и компенсирует отсутствие зрелищности, графически показывая расстановку спортсменов на финишной прямой, как будто они финишировали не по очереди, а в одном заезде.
New York Times вообще очень крутые ребята. Вот, например, одна из страниц, которую они делали к предыдущей Олимпиаде, в Лондоне. По мне, так это в разы мощнее видеороликов, которые они нарезали для 2014 года. В первом случае возникает сопричастность действию, которая позволяет намного глубже понять и изучить материал. Во втором случае такого вовлечения уже нет, зато это дешевле и быстрее в производстве. И да, кстати, пример с лондонской Олимпиады относится уже к другому виду электронной инфографики, о котором я расскажу в заключение сегодняшнего поста.
Непринятая концепция корпоративного сайта оптового поставщика канцтоваров (анимированная версия)
В данном примере используется всё тот же старый добрый приём увеличенного кегля у чисел, о котором я рассказывал в предыдущем посте. Хотя в других разделах этого концепта должны были быть не только числа, а ещё и графики, и диаграммы, и карта страны с распределением объёмов продаж по областям, и много чего другого. Но сейчас я хочу рассказать не о них, а о следующем принципе создания качественной инфографики.
При проектировании инфографики важно создавать очевидную для зрителя структуру информации
Вся структура выше, собранная из десятка вордовских файлов с разношёрстными маркетинговыми текстами, в итоге представляет собой 4 ёмких тезиса: компания-лидер, наилучшие условия, нереально огромный ассортимент и помощь в реализации. Тезисы и их порядок составлены таким образом, что фактически они являются схемой, по которой клиент обычно и выбирает себе подходящего поставщика.
А вот внутри каждого из тезисов как раз и находятся все эти карты, графики и цифры, которые доказывают собой достоверность утверждений. И это ещё один очень важный принцип:
Визуализация обязательно должна
что-то доказывать
2Анимированные цифры и диаграммы
Главная страница новой пластиковой карты American Express
И снова всё те же гигантские кегли на числах. Но только здесь эти числа уже динамично сменяют друг друга в зависимости от выбранного слева примера возможных расходов по кредитке. И вот, опять же при помощи инфографики мне удалось преподнести скучные банковские схемы вариантов кэш-бэка доступным и очень близким конечному потребителю способом. Анимация на цифрах, к слову, здесь не только в качестве развлекалова, она акцентирует внимание на самом важном. И это следующий принцип:
При помощи анимации можно акцентировать внимание на наиболее важных моментах повествования
Промостраница о возможностях нового iPad в условиях высокогорья
А вот пример с сайта компании Apple, на котором принцип акцентирования внимания с помощью динамической инфографики прослеживается в ещё более явном виде. Плюс здесь динамические уже не только цифры, а ещё и графики, схемы, и сравнения объектов.
Исторический портал к 150-летию Гражданской войны в США
Данный проект хоть и не новый, зато он является целым сборником разной динамической инфографики. Здесь есть и переключающиеся слои, и растущие графики, и изменяющиеся диаграммы, и бегущие числа... Да что я перечисляю, смотрите сами.
Кстати говоря, в блоге студии-создателя этого великолепного сайта недавно вышла статья, в которой ребята рассказывают о своём опыте создания электронной инфографики. Речь там заходит и про этот проект в том числе. Очень интересно и обязательно к прочтению.
3Анимированная техническая иллюстрация
Анимированная инфографика для интернет-витрины производителя сельскохозяйственной техники
При создании следующей работы я использовал уже знакомый вам вид инфографики на основе технической иллюстрации. Но только теперь инфографика не статична, а напичкана всякими анимационными прибамбасами. Во-первых, технику можно рассмотреть с разных сторон, что уже нехило способствует изучению темы. Во-вторых, на каждом ракурсе анимацией показывается схема работы одной из частей этого агрегата. И все эти навороты не случайны, ведь следующий принцип гласит:
Наибольшее влияние оказывает та визуализация информации, которая проясняет тему способом, недоступным словам
И правда, как словами ни описывай схему трансформирования бункера, например, всё равно толком ничего понятно не будет. Но стоит увидеть анимацию, и сразу всё становится предельно ясно.
Одна из иллюстраций сайта-сборника анимированной инфографики
На следующем сайте дизайнер из Портленда выкладывает свою анимированную инфографику, посвящённую устройству разных сложных механизмов. Вот, например, рассказ о том, как происходит стрельба из пистолета. А теперь попробуйте представить, каким длинным и скучным получился бы этот рассказ без использования анимации и тем более без использования инфографики.
Ну и по традиции маленький вывод из всего вышесказанного. В настоящий момент времени уже недостаточно делать крутую, но статичную инфографику, ведь темпы генерируемой информации продолжают расти. Поэтому сегодня, чтобы удержать внимание посетителя, инфографику нужно, как минимум, оживлять анимацией. Ведь массовая аудитория обожает динамичность и интерактивность объектов. Что, кстати говоря, заметно и по трендам в отрасли мобильных интерфейсов. А о том, как же дальше будет развиваться электронная инфографика, я расскажу через неделю, в заключительной и самой интересной статье данной серии.
Комментарии
Подписаться