Приглашенный редакторЭлектронная инфографика. Часть 4: будущее
«Вместо того чтобы просто сообщать о каких-то вещах, инфографика станет исследовательским инструментом»
Заключительная статья Алексея Волкова об инфографике на всех возможных электронных устройствах.
Алексей Волков
Создаёт мобильные приложения и веб-сайты. Интересуется инфографикой, фотографией, графическим дизайном. В данный момент работает в компании «Мамба» арт-директором.
В предыдущих частях я рассказывал, как изначальная журнальная инфографика стала перебираться в электронные системы. Сперва это была всё та же статичная инфографика, переехавшая с бумаги на экраны наших девайсов. Теперь же она, используя возможности электронных устройств, преобразовалась в динамическую и интерактивную инфографику.
Сегодня в заключительной части я расскажу про инфографические интерфейсы, которые приходят на смену двум предыдущим этапам развития электронной инфографики и которые являются будущим всей инфографики в целом. И всё это благодаря компам, планшетам и экспоненциальному росту информации.
В будущем, вместо того чтобы просто сообщать о каких-то вещах, инфографика станет исследовательским инструментом. То есть в конечном счёте сам пользователь будет решать, что он хочет получить в итоге
Теперь давайте более детально рассмотрим пока только зарождающиеся инфографические интерфейсы, разделённые мною (по уже сложившейся традиции) на несколько наиболее популярных групп.
1Таймлайны
История олимпийского медального зачёта на сайте «Нью-Йорк Таймс»
Ну и сразу пример, который идеально иллюстрирует вышесказанную мысль об исследовательском инструменте. В этом примере история медального зачёта всех прошедших Олимпиад не только рассказывается понятным визуальным языком, но и ещё она объединена с изящным интерфейсом, который даёт возможность каждому человеку сделать свой собственный вывод из этой истории.
Слайд 1: Расписание сеансов на сайте сети кинотеатров «Планета кино» Слайд 2: Расписание сеансов на сайте «Афиша»
Следующий пример — не про исследования, но про интерфейс. Думаю, каждый из вас хоть раз в жизни бронировал сеанс в кинотеатре. Предлагаю рассмотреть два подхода к отображению расписания сеансов. Первый, инфографический, с разложенными по временной оси сеансами, даёт возможность сравнивать их между собой, что сильно упрощает выбор нужного сеанса. Второй, табличный, путает, заставляет задумываться и, как следствие, только отнимает наше драгоценное время.
Слайд 1 и 2: блок с анонсами на сайте Совета Федерации
А этот пример — из моей практики. Здесь он разместился как иллюстрация того, что в сфере инфографических интерфейсов можно придумать ещё кучу разнообразных способов отображения хотя бы того же самого таймлайна, что уж говорить обо всём остальном. Направление для развития очень плодотворное.
Суть конкретно этого вида таймлайна — в том, что он смог раскрыть новый смысл в таких уже очень знакомых всем сущностях, как «Анонсы» или «Новости», которые обычно просто стоят друг с другом рядом, без визуальной привязки к временному отрезку. Здесь же мы даже можем не читать все анонсы, но продолжать следить за нашей властью и понимать, когда она занята, а когда не очень. Такой вид отображения информации делает действия властей чуть более прозрачными для простых смертных.
К сожалению, эту фишку не успели реализовать на данном проекте. И на втором слайде для сравнения как раз и показано, как уныло «Анонсы» выглядят на рабочем сайте.
2Карты
How Music Travels — The Evolution of Western Dance Music
А вот таймлайны плавненько перетекают к следующему виду инфографики, основанной на картах. Здесь навигационный слой таймлайна объединён со слоем привязки данных по месту, или попросту говоря с картой. Когда появляется возможность объединить сразу несколько измерений на одной плоскости — это очень хорошо. К тому же ещё круче, если одним из этих измерений можно управлять. Лично я застрял минимум на полчаса, двигая туда-сюда ползунок времени и изучая, что же такое соул, госпел, блюз и т. п. А вот статичная версия, как бы она ни была хороша, не идёт ни в какое сравнение с интерактивной.
3Графики распределения
Слайд 1 и 2: Экран выбора вариантов перелёта в интерфейсе терминалов «Джаст трэвела» и стандартный табличный интерфейс покупки билетов
Ещё одна ситуация из жизни, с которой вы, наверняка, сталкивались не раз. Это снова покупка билетов, только теперь на самолёт, а не в кино. Вот как может выглядеть экран выбора рейса, а совсем не так, как вы привыкли. Билеты здесь распределены по плоскости в зависимости от наиболее важных для путешественника факторов: времени и цены билета. При таком способе отображения выбрать нужный вариант будет легко и просто. А ещё здесь очень чётко соблюдается следующий принцип:
Хорошая инфографика должна быть свободна от субъективного опыта автора, с помощью универсального языка она должна извлекать смысл из самой себя
Для сравнения вторым слайдом показан стандартный табличный вид, встречающийся на 99 % подобных сервисов, он заставляет посетителя бегать глазами построчно и поколоночно, сравнивая варианты и пытаясь найти наиболее привлекательный из них.
4Калькуляторы
Сразу оговорюсь, название данного вида инфографических интерфейсов довольно условно. То есть это не те калькуляторы, к которым мы с вами привыкли. Однако следующие примеры занимаются именно подсчётом и вычислением параметров в своей функциональной области.
Слайд : Непринятая концепция интернет-банка «Русский стандарт»
Слайд : Главная страница интернет-банка «Альфа-клик».
В визуализации информации очень полезно бывает показать информацию под разными углами, сравнить её с другими данными, произвести её обновление, передать по сети, дать возможность посмотреть на неё персонифицированно, чтобы глубже понять проблему
Именно этим принципом я и руководствовался при создании данного концепта интернет-банка. Именно так и будут выглядеть интернет-банки будущего. И в подтверждение моих слов парочка уже реализованных примеров, которые двигаются в том же направлении: интернет-банки «Связного» и Тинькова.
А вторым слайдом показан яркий представитель интернет-банка из настоящего, с кучей никак не визуализированных данных, которые из-за этого очень сложно и скучно изучать.
↑ Мобильное приложение «Найк+ Раннинг»
Вот ещё один пример. Думаю, каждому из вас хорошо знакомо это популярное приложение, которое «взорвало» мобильный рынок некоторое время назад. Причиной такого успеха, кроме всего прочего, является и инфографический интерфейс этого приложения. С таким интерфейсом оно выглядит, как приложение из фильмов про недалёкое будущее.
На этом статью я мог бы и закончить, но дело в том, что у инфографики в будущем есть ещё одна ветвь развития, которая не совсем про электронные девайсы. Она скорее про искусство. Это тренд, поэтому я не мог не рассказать вам о нём.
Бонус: Инфографика
как эстетическая составляющая проекта
Если в проектировании дизайна важна сама информация, которую ты хочешь донести (то есть само содержание), и донести её нужно кратчайшим и наиболее понятным способом, то в произведении искусства, которое основано на массиве данных, наоборот, больше важна форма и эстетическая составляющая, чем содержание.
↑ Manta Rhei, ART+COM
Здесь должен был находиться немного другой, но очень похожий на этот пример всё той же замечательной студии Art+com http://www.artcom.de/en/. Но, по всей видимости, они удалили его со своего сайта по неизвестной мне причине. На нём была аналогичная кинетическая инсталляция, только основана она была на массиве данных: движение каждой составной части инсталляции соответствовало движению датчиков на поверхности маленького кусочка Тихого океана. Эдакая механическая волна. И всё это происходило в режиме реального времени.
Forms, Memo Akten
Ещё один пример инфографики на службе искусства, а не дизайна. Ведь отличие дизайна от искусства в том, что в первом случае результат работы должен быть понятен незамедлительно всем и каждому. В случае же с искусством автор использует свою персональную систему повествования, свой индивидуальный язык. И смысл работы может быть понятен далеко не всем и уж тем более не сразу.
Процесс расшифровки произведения искусства очень важен
Ну а если расшифровать эту работу у вас не получилось, то есть карточка в портфолио, в которой подробно рассказывается об этом проекте.
Sound chair, Matthew Plummer-Fernandez
Object of Sound, NOCC
А вот несколько примеров из физического мира, от которых лично я в полном восторге. Инфографика из печатного и электронного мира приходит в промышленный дизайн. И это ещё одна тенденция.
Ну и в заключение несколько примеров из электронной среды, где инфографика используется в качестве эстетической составляющей. Если говорить о примере с автомобилем, то это как раз тот выдуманный инфографический интерфейс из будущего, к которому и идёт вся электронная инфографика. Уже сейчас нужно начинать делать всё больше и больше аналогичных инфографических интерфейсов. И тогда будущее наступит уже сегодня.
Комментарии
Подписаться