9 секретов создания инфорграфики
17 Марта 2016
9 секретов создания инфорграфики

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

Зачем нужна интерактивная инфографика

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

Секрет №1. Эффективная интерактивная графика

Эффективность инфографики основывается на множестве факторов, к которым можно отнести следующие:

  • скорость восприятия человеком визуальной информации в 60000 раз больше, чем понимание обычного текста;
  • при обработке визуальных данных участвуют более половины всех нейронов головного мозга;
  • по статистике только 28 % опубликованных слов будут прочитаны;
  • в глазах человека находится около 70% сенсорных рецепторов;
  • визуализация материала на сайте увеличивает мотивацию с ней ознакомиться;
  • согласно медицинским исследованиям человек может усвоить только 70% информации из текста без картинок, но при появлении иллюстраций эта способность увеличивается до 95%;
  • инструкции с изображениями лучше воспринимаются и, как следствие, запоминаются.

эффективная интерактивная графика

Таким образом, можно с уверенностью утверждать, что люди запоминают больше то, что видели и делали, чем просто слышали или прочитали. Этому способствуют два канала восприятия:

  • визуальный;
  • кинестетический.

От их слаженного взаимодействия и будут зависеть показатели эффективности инфографики.

Секрет №2. Заставьте пользователя прокручивать одну и ту же страницу несколько раз

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

Инфографика, которая завлекает посетителя

Секрет №3. Применяйте нумерацию страниц

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

Инфографика, которая завлекает посетителя

Секрет №4. Предоставьте возможность пользователю выделять отдельные элементы графики

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

Все элементы графики собраны в одном месте

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

Возможность получить информацию по каждому элементу

Секрет №5. Предоставьте эффективный способ получения дополнительных сведений

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

Дополнительные сведения помогают усвоить информацию

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

Важно заставить пользователя досмотреть инфографику до конца

Секрет №6. Используйте в изображениях данные о пользователе

Высокие показатели просмотра текста также наблюдаются при использовании персональных данных пользователя в изображении графика.

Персональные данные в интерактивной графике

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

Оригинальность и эффективность изложения на первом месте

Секрет №7. Посмотрите и изучите CSS-переходы, анимации, трансформации и фильтры

Доступность интерактивной инфографики увеличивается пропорционально с ростом количества учебников и пособий по CSS3-переходам, анимации и другим подобным свойствам и возможностям. На указанном англоязычном сайте можно найти их полное описание, обзоры и советы по использованию. Также множество полезных сведений находятся в онлайн-учебнике HTML5. С их помощью можно научиться создавать качественную инфографику и использовать специальные приемы для увеличения ее эффективности.

Анимации и трансформации обязательны в интерактивной графике

Секрет №8. Используйте интересные переходы при создании собственной инфограммы

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

Используйте интересные переходы в инфографике

Секрет №9. Воспользуйтесь библиотекой JavaScript для разработки 3D объектов

При помощи библиотеки, представленной ниже, можно анимировать информацию различными способами, используя для этого HTML, SVG и CSS. При этом она является абсолютно бесплатной, но позволяет получить ценные сведения, необходимые для последующей разработки интерактивных графиков. Воспользовавшись данной библиотекой однажды, вы уже никогда не захотите создавать неподвижные изображения.
Таким образом, можно с уверенностью утверждать, что самым простым и доступным способом заинтересовать посетителя сайта – это заставить его прокручивать колесико мышки при перелистывании страниц или нажатии на отдельные элементы изображения. Но при этом следует учитывать тот факт, что по-настоящему интерактивная инфографика не может существовать без полезной для читателя информации. Этих принципов непременно следует придерживаться для разработки интересных и доступных графиков, а также изображений.
Вместе с тем, для создания эффективной инфографики лучше воспользоваться услугами специалистов. Веб-студия «Октавиан» разработает лучшие предложения для продвижения вашего сайта на веб-ресурсах и поможет создать интересные и оригинальные графики, которые увеличат популярность вашего предприятия, а также будут способствовать росту продаж выпускаемой продукции или услуг.