Сибирикс

14 методов онлайн-сторителлинга: тексты, графика, анимация, видео, аудио, social media

Сегодня, чтобы быть услышанным, достаточно написать о себе в интернете. Сабина Илдер (Sabina Idler) в своей статье «Методы онлайн-сторителлинга» предлагает несколько способов сделать это максимально эффективно, во всеуслышание. Подробные инструкции и примеры — под катом.

Хороший сторителлинг — это смешные, немного пугающие и трогательные истории. Они апеллируют к нашим эмоциям.

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

Традиционный метод: используем текст

Кто бы там чего не говорил, но текст по-прежнему остаётся самым распространенным методом сторителлинга. В некоторых случаях он и вовсе является единственно подходящим способом воздействия.

Однако большинство пользователей читают между строк, усваивая 20-28% информации. Айтрекинг-исследования и вовсе показывают, что мы склонны скорее сканировать страницы, а не читать их (мы тоже проводили такие исследования еще в 2011-ом). Так что тексты на сайтах, особенное длинные и неструктурированные — не вызывают интерес для пользователя. Факт.

Отсюда наша задача — заинтересовать читателя и удержать его внимание, пока он не усвоит все до последнего слова.

Напишите живую, интригующую или даже провокационную историю о вашем продукте, компании, команде, клиентах — обо всем, что посчитаете нужным. И дело будет в шляпе.

Пример 1. Компания Monitor

Monitor знает толк в сторителлинге. На странице Our Story есть всё необходимое: история компании, мотивация и видение.

Что можно взять на заметку: текст краткий, хорошо структурирован и написан в неформальном стиле.

История начинается с основных фактов о компании, далее — фотография персонала во всю ширину раздела и цитата о целях работы. Стиль текста — разговорный, но сдержанный. Есть и фотографии «внутренней кухни» — на случай, если пользователь утомится чтением.

Пример 2. Goruck

Бренд Goruck производит и продаёт рюкзаки высокого качества. Ее основатель, Джейсон МакКарти (Jason McCarthy), рассказывает о процессе их производства в своём блоге и на сайте. Один из постов Джейсона посвящен тому, как он использовал свою последнюю разработку — сумку Goruck GR2 — для поездки в Шанхай. В содержании: преимущества сумки и причины, по которым она разрабатывалась специально для путешествий.

Что можно взять на заметку: публикуя посты в своем блоге, вы получаете возможность напрямую общаться со своими клиентами и поддерживать их интерес к своей работе.

Заметьте, что такое, казалось бы, «официальное письмо» основателя бренда к покупателям выглядит совершенно неформально. Устанавливать теплые дружеские отношения с потребителями куда логичнее, чем дистанцироваться от них. (От переводчика: вы вспомните отечественные сайты и тамошние страницы с «обращениями директоров к народу». Дистанцирование в чистом виде).

Визуальный метод: фотографии, рисунки, инфографика и иже с ними

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

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

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

Существует три основных типа визуального контента, которые могут быть использованы в сторителлинге:

  • иллюстрации и фотографии, сопровождающие текст (в том числе эскизы, графики и диаграммы) — они добавляют ему динамики;
  • фоновые изображения — задают сайту настроение, делают его целостным;
  • инфографика — отличный способ о чем-то рассказать. Пользователи охотно изучают такие картинки и делятся ими в социальных сетях. Они популярны и за счет своей емкости и использования текста только в качестве подписей.

Пример 3. Testflight

Пользователям нравится идея взаимодействия с реальными людьми. Это как раз то, что делают Testflight — при помощи рисунков.

Свои ключевые послания Testflight отобразил в скетчах. Всё выглядит так, будто вы сейчас в одной комнате с сотрудниками этой компании, и они буквально минуту назад нарисовали это всё, чтобы наглядно показать свои рабочие процессы.

Что можно взять на заметку: благодаря скетчевым изображениям ваша история будет вызывать больше доверия. (От переводчика: мы однажды уже перевели статью Сабины о роли рисованных элементов в веб-дизайне)

Пример 4. Airbnb

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

Что можно взять на заметку: при помощи фото можно рассказывать истории и приглашать пользователей стать их частью.

Пример 5. «Карикатурная» инфографика

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

Пример 6. «Схематичная» инфографика

Water Down — другой вид инфографики. Показывает доступность чистой воды в мире. Точнее отсутствие доступа:

Что можно взять на заметку: Инфографика — это головоломка. Только собрав все пазлы, вы получите полную картину. Следовательно, нам с вами нужно добиться того, чтобы этот пазл было интересно «собирать».

Идем дальше: анимированное взаимодействие

Излюбленный метод вовлечения пользователей в сфере развлечений.

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

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

Один из способ анимировать ваш контент — параллакс. Это относительно новая технология в веб-дизайне, имеет большой потенциал и призвана улучшить юзабилити сайтов. Позвольте вашим клиентам скроллировать сайт в своём собственном темпе: и слои, которые по-разному реагируют на прокрутку, создадут ощущение глубины.

Пример 7. История отправки от Google

Анимированная история о том, что происходит после нажатия на кнопку «Отправить» в окне электронной почты.

Эта история вовлекает — и Google легко и успешно информирует свою аудиторию.

Пример 8. The Hybrid Graphic Novel от Пежо

Отличный пример параллакса на сайте Пежо — для демонстрации их новой технологии HYbrid4. Это рисованный роман, действия в котором развиваются по мере вашего скроллирования. Вы вовлекаетесь в историю героя, перед которым стоит сложная задача: захватить секретные данные и скрыться.

По мере прокрутки, вы станете свидетелем развития событий и узнаете о режимах HYbrid4 — информация о них вводится параллельно основному сценарию.

История становится ещё больше интересной за счет музыки и звуковых эффектов. Едва ли вам захочется закрыть страницу, не узнав, чем всё закончится.

Пример 9. TEDxGUC

Главная страница сайта TEDxGUC — небольшая TED-сказка на параллаксе, которая увенчивается предложением зарегистрироваться на сервисе.

Скроллируя вниз, вы узнаете историю компании, на какой идее она была основана, а также как скромные идеи могут изменить мир, если над их воплощением будут работать несколько людей.

TED объединяет идеи со всего мира и находится в постоянном поиске новых. Добравшись до конца страницы, вам будет предложено присоединиться к сообществу TED. И на этом конец истории.

Метод, собирающий в себе все остальные: видео

Почти любое видео имеет сюжетную линию, которая складывается в историю. Они содержат в себе все необходимые технические аспекты — движение, звук, текстовое сопровождение — способные заинтересовать и вовлечь.

Знаете ли вы, что в 100% случаях пользователи задержатся на сайте, если на нем есть видео? Более того, именно благодаря ему число потенциальных покупателей возрастает на 85%.

И это далеко не вся статистка, признанная показать преимущества использования видео на сайте.

Пример 10. Wistia

Wistia — это видео-хостинг. Как, если не через видео, такой сервис мог рассказать о себе?

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

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

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

Пример 11. Droplet

Ещё один пример по использованию видео — сайт мобильного приложения Droplet, которое позволяет загружать деньги на свой телефон и бесплатно отправлять платежи.

Ролик покажет вам Лондон и объяснит, зачем нужно это приложение и как с ним работать. Всё это — через несколько коротких историй.

Разработчики Droplet остановили свой выбор на видео в мультипликационном стиле. Это позволяет обратить внимание только на основных деталях и минимизировать шум. Рисованный стиль делает ролик уникальным и очень личным.

Предпоследний метод: аудио

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

Даже сегодня те же песни можно рассматривать в качестве своего рода историй.

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

Пример 12. Dumb Ways To Die

Многими любимый проект Dumb Ways To Die был создан в рамках национальной кампании в Австралии для поддержки безопасности на железнодорожном транспорте. В 2012 году кампания стала виральной.

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

Заключительный метод: социальные сети

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

Для многих компаний социальные сети могут стать отличной площадкой для того, чтобы рассказать свою историю. Главное преимущество здесь — интерактивность.

Пример 13. Сообщество Starbucks в Фейсбуке

Как это ни странно, многие компании до сих пор не знают, как использовать социальные сети для повышения продаж. Starbucks не из их числа.

В их сообществе на Фейсбуке 35 миллионов подписчиков, более 50 тысяч лайков, а каждый пост в среднем набирает по 5 тысяч комментов. Шикарно же!

Как добиться такого же результата? Через истории. При том не только о себе, но и о своих клиентах. Социальные сети в этом случае — как раз то, что нужно.

Пример 14. Red Bull в Инстаграме

Ещё одна популярная социальная сеть сегодня — Инстраграм. Здесь вы можете рассказывать свои истории при помощи фотографий и коротких видео.

Red Bull делает именно это.

Red Bull известен своими мероприятиями — именно благодаря им у него есть дополнительная возможность рассказать о себе. Даже больше — показать. Фотографии и видео с мероприятий пользуются огромной популярностью, поэтому и количество подписчиков уже превысило миллион.

Вывод

Рассказывать о себе в интернете — нужно, полезно, а ещё весьма выгодно. Вы можете выбрать любой из привычных вам методов или объединить их все. Именно интернет является тем единственным инструментом, при помощи которого вы можете доступно заявить о себе на весь мир. Дерзайте!

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.