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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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