Будущее визуализации данных в интерактивности.
Но как создать по-настоящему потрясающую интерактивную инфографику?
Инфографика повсюду, и последнее время она все чаще становится интерактивной.
В сегодняшней статье мы поделимся с вами секретами создания интерактивной инфографики, а также ссылками на полезные ресурсы.
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. С его помощью вы без труда воссоздадите самые популярные элементы интерактивной инфографики.
Все перечисленные выше ресурсы доступны совершенно бесплатно. Поэтому у вас остается все меньше причин продолжать делать обычную статичную инфографику.
https://rusability.ru