Большинство операторов веб-сайтов стремятся информировать своих посетителей о конкретных темах или развлекать их. Сегодня, как никогда ранее, мы полагаемся на уникальный, высококачественный контент, чтобы выделиться из толпы. Интерактивный контент (контент, побуждающий посетителя к участию), в частности, приобретает все большее значение.
Причина проста: Интерактивный контент обращается к посетителю на многих уровнях. Посетитель не просто читает текст или смотрит на изображение, он может напрямую взаимодействовать с элементами, открывать доступ к дополнительной информации и высказывать свое мнение по теме. Это делает контент более запоминающимся и интересным. Взаимодействие с веб-сайтом, а значит, и с брендом или услугой, гораздо интенсивнее, чем простое чтение абзаца текста. Это также повышает вероятность того, что пользователь останется доволен, что приведет к увеличению конверсии и продолжительности пребывания на сайте.
В следующей статье мы представим обзор различных типов интерактивного контента и познакомим вас с полезными инструментами, которые вы можете использовать для создания или встраивания этого типа контента в ваш сайт.
Каковы различные форматы интерактивного контента?
Существует множество различных типов интерактивного контента, который можно интегрировать в ваш собственный веб-проект. Некоторые типы не так легко интегрировать, как другие — различные форматы требуют определенных инструментов или навыков программирования. В конечном итоге это означает, что отдельные типы контента значительно отличаются по связанным с ними затратам. В следующей таблице представлены некоторые из лучших решений для интерактивного контента веб-сайта:
|
Тип интерактивного контента |
Описание |
Усилия и затраты |
Пример |
|
Конфигураторы |
Веб-приложение, позволяющее пользователям взаимодействовать с предлагаемым продуктом и позволяющее посетителям увидеть, как будут выглядеть желаемые конфигурации |
Очень высокая |
Конфигуратор автомобилей Porsche |
|
Калькуляторы |
Инструмент для самостоятельного расчета цен |
От высокого до очень высокого |
Калькулятор федерального подоходного налога |
|
Контрольные работы |
Проверка знаний в формате вопрос/ответ |
Низкий |
BuzzFeed |
|
Интерактивные видео/360° ролики |
Видео, в которых пользователь может активно влиять на процесс или угол обзора |
Высокий/очень высокий |
360cities |
|
Слайд-шоу |
Галереи с движущимися изображениями на определенную тему |
Очень низкий |
Слайд-шоу Рори Макилроя |
|
Интерактивные диаграммы, карты и инфографика |
Графические изображения, которые отображают подробную информацию, когда пользователь на них нажимает |
Высокий |
‘Millennials’ — инфографика от Goldman Sachs |
|
Игры |
Веб-игры или мобильные игры, которые тематически или творчески основаны на бренде, услуге или продукте |
Очень высокий |
Magnum ‘Pleasure Hunt 2 |
|
Интерактивное повествование |
Связывание различных интерактивных элементов для того, чтобы рассказать историю |
Высокий |
Sevenhills ‘Nature’s Combinations’ |
Создание интерактивного контента: лучшие инструменты для работы
Все представленные выше типы контента требуют значительно больших усилий, чем обычный текстовый и графический контент. Они также более дорогостоящие, особенно инструменты и услуги, необходимые для создания этих интерактивных элементов. Если вы не являетесь экспертом в программировании игр, но хотите интегрировать игру в свой сайт, имеет смысл обратиться за помощью к стороннему агентству. Это относится и к профессиональным видео 360°, работа над которыми намного сложнее, чем может показаться на первый взгляд. Потребность в высококачественном оборудовании и время, необходимое для максимально быстрой обработки исходных материалов, могут привести к пятизначным затратам — всего за несколько минут фильма.
Однако некоторые интерактивные материалы, такие как интерактивная графика, викторины или слайд-шоу, часто можно создать без помощи внешних поставщиков услуг. Вам просто нужна хорошая концепция и подходящий инструмент. Ниже представлены некоторые из наиболее полезных инструментов.
ThingLink
В 2011 году финская компания ThingLink выпустила программное обеспечение Rich Media Tags, которое можно было использовать для привязки изображений к веб-сайтам и платформам социальных сетей. С тех пор команда разработчиков развивала веб-приложение (теперь оно также называется ThingLink). Теперь в него можно добавлять изображения, графику и дополнительные элементы, такие как текстовые поля, картинки, музыка, видео и ссылки. Для этого пользователю предоставляется интуитивно понятный веб-редактор, в который можно импортировать исходную графику или изображение простым перетаскиванием. Индивидуально настраиваемые кнопки, которые вы можете добавить, показывают зрителю, где находится интерактивный контент.
Базовую версию редактора изображений можно использовать бесплатно, хотя она предлагает только стандартную кнопку разных цветов для обозначения интерактивных элементов. Кроме того, количество ежемесячных просмотров изображения или графики ограничено 10 000. Если вы хотите настроить дизайн кнопки и любую дополнительную информацию, вы можете воспользоваться планом «Профессиональный» ($20 в месяц на пользователя — 100 тыс. просмотров в месяц). Вы также получите обширную статистику анализа, а интерактивная графика будет свободна от любого брендинга ThingLink. С планом ‘Premium’ ($125 в месяц для пяти пользователей и 1 млн просмотров) вы также можете создавать изображения и видео 360° с интерактивным контентом.
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Простое и интуитивно понятное связывание внешнего контента | ✘ Интерактивные видео можно создавать только в тарифном плане Premium | |
| ✔ Контент автоматически реагирует на изменения | ✘ Поддержка может занять до 4 рабочих дней в бесплатной версии | |
| ✔ Бесплатная базовая версия, которая идеально подходит для тестирования интерактивного контента |
Инфограмма
Если вы хотите представить информацию своим пользователям в привлекательной форме и хотите использовать интерактивные элементы, Infogram — это инструмент для вас. Веб-инструмент теперь принадлежит компании Prezi, которая, помимо всего прочего, также предоставляет одноименное программное обеспечение для презентаций. Само приложение Infogram предлагает различные макеты и строительные блоки для создания интерактивной инфографики, карт и диаграмм. Их можно дополнить наборами данных вручную или с помощью функции импорта, при условии наличия интерфейсов Google Drive, Dropbox и OneDrive. Готовую графику можно вставить в собственный веб-проект с помощью кода вставки или загрузить в виде файла JPG или PNG (возможно только при оплате).
Базовая версия Infogram совершенно бесплатна для создания интерактивного контента. Однако вы довольно ограничены в возможностях программы: для использования доступны лишь несколько карт (включая США, Европу и Африку) и небольшой выбор иконок и изображений. Кроме того, вы обязаны держать проекты в открытом доступе. Чтобы иметь возможность создавать частные проекты и получить доступ к более чем миллиону изображений и иконок, необходимо приобрести платные пакеты «Pro» (от $19 в месяц за 100 проектов), «Business» (от $67 в месяц за 1000 проектов) или «Enterprise» (цена по запросу, за неограниченное количество проектов). Планы ‘Business’ и ‘Enterprise’ также позволяют использовать собственный логотип. Обычно графики и изображения брендируются собственным логотипом Infogram.
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Доступно более 35 различных шаблонов графиков | ✘ Проекты в бесплатной версии должны быть общедоступными | |
| ✔ Созданные графики могут быть легко интегрированы с помощью кода встраивания | ✘ Логотип инфограммы может быть удален только с плана «Бизнес» и далее | |
| ✔ Доступны различные интерфейсы для импорта собственных наборов данных |
Qzzr
Qzzr — один из лучших инструментов для создания индивидуальных викторин, опросов и списков лучших. В настоящее время программу используют более 270 000 пользователей, включая такие известные учреждения и компании, как ESPN и HBO, видеоплатформа Vimeo и производитель энергетических напитков Red Bull. Инструмент позволяет быстро создавать вопросы, ответы, объяснения и советы. Добавляя изображения, видео или аудиофайлы, можно также улучшить интерактивный контент. Готовый контент можно связать, встроить непосредственно в веб-проект с помощью кода встраивания или, наоборот, поделиться им в различных социальных сетях одним щелчком мыши. Они всегда автоматически оптимизируются для мобильных устройств.
Qzzr не только позволяет создавать интерактивный контент, но и предоставляет подробную статистику действий пользователей. Например, он сообщает, сколько пользователей заполнили викторину или приняли участие в опросе, сколько времени они потратили в среднем и закончили ли они викторину или опрос (коэффициент завершения). Если вы соедините призыв к действию с вашим контентом, вы также сможете узнать коэффициент конверсии.
Если вы просто хотите создать простую викторину или небольшой опрос для своего сайта, вы можете воспользоваться бесплатным базовым пакетом. Однако для создания профессионального интерактивного контента вам следует инвестировать в учетную запись «Pro» ($24,99 в месяц). В этой версии есть только небольшое упоминание о Qzzr (в то время как в базовой версии логотип даже появляется в общем контенте). Кроме того, вы можете автоматически рекомендовать другие викторины и опросы из сети Qzzr. Если вы хотите, чтобы не было никаких ссылок на инструмент или провайдера, то это возможно только в версии «Производительность». Для этого не существует фиксированной цены; вам необходимо запросить тарифы.
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Даже в бесплатной версии можно создать много отзывчивых тестов | ✘ Избавиться от логотипа Qzzr можно только в тарифном плане «Производительность». | |
| ✔ Тесная связь с функциями анализа и управления лидами | ||
| ✔ Простая интеграция медиа-элементов, таких как изображения, видео или GIF. |
Cincopa
Основанная в 2006 году, компания Cincopa, поставщик мультимедийных платформ, предлагает решения для интеграции и управления медиаконтентом в веб-проектах. С помощью Cincopa пользователи могут расширить свой веб-сайт, добавив в него видеопорталы, подкасты и слайд-шоу. Специальные веб-редакторы помогают создавать желаемый интерактивный контент. С другой стороны, компания также предлагает необходимые ресурсы хостинга для используемых медиафайлов (аудио, видео, изображения и т.д.). Кроме того, существует несколько возможностей для встраивания готового контента, например, с помощью HTML-кода, целевых страниц, ссылок или плагинов для CMS (WordPress, Joomla!, Blogger, Drupal, Wix и т.д.).
Для создания желаемого интерактивного медиаконтента пользователь Cincopa может выбрать один из множества шаблонов: Среди прочего, есть шаблоны для коллажей, слайд-шоу, видеоплееров, плейлистов или таймлайнов, и все они доступны в бесплатной версии. Однако этот базовый тариф ограничен одним доменом, 50 изображениями и тремя аудио- и видеофайлами, а также одним гигабайтом трафика. Кроме того, в контенте можно увидеть фразу «Powered by Cincopa». Если вы хотите регулярно создавать и публиковать интерактивный контент, вам следует выбрать одну из платных услуг: ‘Startup’ (1 домен, 5 видео/аудио файлов, 1,500 изображений, 10 Гб трафика за единовременную оплату в размере $99), ‘Plus’ (5 доменов, 50 видео, 200 аудио файлов, 2,000 изображений, 100 Гб трафика за $25 в месяц) или ‘Corporate’ (неограниченное количество доменов, 500 видео, 1,000 аудио файлов, 5,000 изображений, 400 Гб трафика за $99 в месяц).
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Различные шаблоны для создания аудио-, видео- и графического контента на заказ | ✘ Логотип можно увидеть в бесплатной версии | |
| ✔ Интуитивно понятные веб-редакторы | ||
| ✔ Возможность повышения и понижения пакета оплаты в любое время |
Adobe Spark
Компания Adobe в первую очередь известна своим Flash Player и Creative Cloud (ранее Creative Suite). С помощью Adobe Spark компания также предлагает собственное решение для создания интерактивных историй во Всемирной паутине. Творческий пакет состоит из трех инструментов: Spark Post (для простых изображений), Spark Video (для интерактивных видео) и Spark Page (для веб-историй). Пользователь может выбрать: оптимизировать фотографию с помощью текста и дизайнерских фильтров, создать высококачественные рекламные или информационные ролики или рассказать интерактивную историю. Пользователи Creative Cloud (Adobe Stock) или Lightroom имеют возможность связать их с веб-приложениями Spark.
Чтобы наполнить собственные проекты содержанием, вы также можете загружать и использовать собственные материалы изображений. Кроме того, вы можете создавать заголовки, текстовые блоки и кнопки и размещать их в любом месте ваших веб-историй. Выбрав тему, вы также можете влиять на дизайн. Для импорта клипов достаточно указать URL-адрес. Содержимым можно поделиться либо через автоматически сгенерированную ссылку (встроенные функции для Facebook и Twitter), либо отправить по электронной почте, либо встроить в собственный веб-сайт с помощью кода. Использование приложений Spark, которые также доступны в виде приложений для iOS, совершенно бесплатно. Хотя подписчики Creative Cloud могут удалить логотип из своего контента.
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Очень простое и интуитивно понятное использование | ✘ Контент нельзя скачать, его необходимо разместить на хостинге Adobe | |
| ✔ Доступны приложения для iOS | ✘ Ограниченные возможности оформления (например, размер шрифта не настраивается, шрифты привязаны к теме). | |
| ✔ Совместимость с Creative Cloud |
Mapme
С помощью веб-редактора Mapme можно создавать высококачественные интерактивные карты без предварительных знаний программирования. Пользователь может выбрать один из восьми различных стилей карт, таких как спутниковые снимки, дорожная сеть или природа. Независимо от выбранного типа карты, вы можете добавить столько булавок, сколько вам нужно, чтобы отметить местоположение и дать информацию о нем. Также можно настроить внешний вид булавки (в премиум-пакетах можно даже использовать собственные иконки), добавить изображения, аудио- или видеофайлы, а также кнопки социальных сетей. В зависимости от выбранного макета содержимое интерактивной булавки отображается в меню слайдера в нижней части карты (стиль слайдера) или в списке в левой части карты (стиль списка).
Если вы хотите использовать Mapme для создания собственного интерактивного контента для вашего сайта, вам понадобится одна из платных версий. Бесплатная версия веб-приложения действительно является лишь демонстрацией инструмента и не предоставляет возможности публикации или встраивания созданных карт. Пользователи могут выбрать один из трех премиум-планов: ‘Basic’ (от $19 в месяц), ‘Standard’ (от $29 в месяц) и ‘Plus’ (от $49 в месяц). Последний тарифный план не только позволяет прикреплять неограниченное количество мест, но и использует 3D-эффекты для более интересного дизайна карт. Кроме того, пользователи лицензии ‘Plus’ могут настраивать карту с помощью CSS.
| Преимущества | Недостатки | |
|---|---|---|
| ✔ Карты местоположений можно настраивать по своему усмотрению | ✘ Карты не могут быть опубликованы в бесплатной версии | |
| ✔ Все карты автоматически оптимизируются для мобильных устройств | ||
| ✔ Встроенный учебник для начинающих |
Веб-проекты с интерактивным контентом — лучшие практики и примеры
Вышеупомянутые инструменты предлагают различные варианты, позволяющие сделать ваш собственный веб-проект более интерактивным даже при небольшом бюджете. Финансово сильные компании также имеют средства, чтобы нанять агентства, которые возьмут на себя заботу о создании и поддержке интерактивного контента веб-сайта. Интерактивный контент делает сайт более привлекательным, но только если он используется правильно и не уводит посетителя от вашего продукта или услуги. Поэтому необходимо создать соответствующую основу для интерактивного контента и, с другой стороны, найти правильный баланс между информацией и развлечением — задача, с которой справились следующие сайты:
- Airbnb: использование интерактивной инфографики
- Fillory: Сайт welcometofillory.com с помощью впечатляющей интерактивной карты представляет фэнтезийный мир Fillory из сериала канала Syfy «Волшебники» (основанного на одноименной трилогии Льва Гроссмана). Здесь также есть подробная информация о главных героях, а также различные мини-игры и викторины под рубрикой «Квесты». Когда речь зашла о втором сезоне, канал решил поручить создание сайта производственной студии UNIT9.
- Walmart: посадочная страница известного магазина Walmart является примером того, как работает слайд-шоу. Основное слайд-шоу движется автоматически, показывая предложения и события магазина, в то время как слайд-шоу под ним может перемещаться пользователем и представляет товары, доступные для покупки.
- mymuesli: Пользователи могут приготовить собственные мюсли из множества различных ингредиентов с помощью онлайн-конфигуратора mymuesli. Выбрав основу для мюсли и добавив фрукты, орехи или шоколад, вы можете сразу заказать их или сохранить на сайте и поделиться ссылкой с друзьями.