Когда клиент обращается к нашему агентству, первым делом мы составляем подборку диджитал-проектов с полезными решениями для его задачи — а потом совместно выбираем приемы и механики для прототипа. В этой статье делимся подборкой референсов для PR-задачи одного из наших заказчиков.
Референсы в статье разбираем по трем параметрам: построение истории, информационный стиль и механики для вовлечения пользователя. Каждый из этих элементов помогает не просто представить продукт, но удержать на нем внимание читателя. Чем интереснее рассказ и чем больше запоминаются преимущества, в нем описанные — тем выше вероятность совершения заказа или звонка.
Сайт наушников AirPods Pro, создатели продукта – компания Apple
Сторителлинг
В этом проекте преимущества продукта становятся интересной историей, а продукт — ее главным героем. Сопроводительного текста мало: достоинства наушника раскрываются через его визуальный образ, и этот образ проходит с читателем через весь рассказ. В этом случае не приходится вникать в абстрактные описания — можно наблюдать достоинства продукта в действии. Информация в таком рассказе запоминается и больше впечатляет потенциального покупателя.
Истории запоминаются, а факты — нет. Сделайте из списка преимуществ историю о продукте, и читатель ее запомнит.
На нескольких экранах наушник появляется в ухе у человека. Посетитель сайта видит реальную ситуацию применения продукта, больше доверяет рассказу, вероятность покупки становится выше.
Наушник AirPods Pro в ухе у человека: на экране есть связь продукта и потребителя
Инфографика и инфостиль
Взрыв-схема наушника не просто объясняет принцип его действия: она раскрывает достоинства продукта через его составляющие и показывает, как каждая из них делает продукт лучше.
Сделайте устройство продукта его преимуществом: покажите, как компоненты влияют на качество.
Пользователь видит, что в продукте нет лишних элементов, и заодно понимает, как он работает. Рассказ предупреждает основные сомнения и вопросы читателя, и в целом становится более убедительным.
Взрыв-схема наушника AirPods Pro. На схеме объясняется, зачем нужен каждый из элементов внутри наушника
Механики
В этом сторилендинге используется всего одна механика: анимация по скроллу страницы. При этом каждый скролл на экране происходит новое движение — наушник все время крутится и предстает в разных ракурсах.
Этот прием поддерживает ритм повествования: пользователю интересно листать дальше, чтобы увидеть новые изменения на экране.
Если в проекте сложный дизайн, интерактивные механики лучше сделать простыми. При таком балансе читатель не отвлекается и не устает.
Простота механик компенсируется насыщенной визуальной составляющей. Большое количество 3D-изображений и сложная анимация создают ощущение уникальности и высокого качества продукта, тем самым усиливая впечатление от рассказа. При этом внутри вау-эффекта не теряется сам продукт, потому что история строится вокруг наушника, а механики не перегружают рассказ.
Наушник меняет свое положение на экране с каждым новым скроллом
После предыдущего примера возникает вопрос: что делать, если хочется сделать эффектную и интересную презентацию продукта, но нет ресурсов на такие визуализации и 3D-модели, как у Apple?
Следующий проект — хороший пример такой презентации. Здесь нет чрезмерно сложных или дорогих элементов, но есть продуманное использование инструментов и четкая ориентация на решение исходной задачи — эффективно продвинуть продукт с помощью рассказа о его достоинствах.
Сайт капсулы для кофе Capsul’in IML Zero Impact, создатели продукта – компания Capsul’in Pro
Сторителлинг
Повествование снова ведется от лица продукта. Сюжет — это путешествие капсулы для кофе: она падает с неба на землю и по пути проходит через описание всех своих преимуществ.
Визуальные решения не обязаны быть сложными и дорогими: главное, чтобы они в полной мере раскрывали сильные стороны продукта.
За перемещением капсулы интересно следить — она все время меняет свой облик. В начале и в конце сторилендинга, где важно показать конечный вид продукта, капсула отрисована в цвете. А в середине, где рассказывается о внутреннем устройстве капсулы, пользователь видит контурный рисунок.
Изменение внешнего облика продукта — это эффективный способ удержания внимания, и более экономный, чем сложные анимационные переходы из предыдущего примера. Мозг не устает от одинаковой картинки, и пользователю интересно скроллить проект дальше.
Цветное изображение капсулы сменяется контурным
Инфографика и инфостиль
Каждая характеристика капсулы отображается с помощью отдельной механики. Процесс разложения капсулы просматривается с помощью бегунка, для изображения защитного кислородного барьера используется анимация. Во взрыв-схеме разные части капсулы подсвечиваются при наведении курсора на их названия.
Все эти механики позволяют взаимодействовать с содержимым проекта, а это всегда делает контент более интересным для изучения. Кроме того, если преимущества продукта основаны на сложных схемах или процессах, интерактивность сделает эти схемы и процессы более наглядными. Пользователю будет проще разобраться в принципе работы продукта.
Если продукт устроен сложно, сделайте интерактивные схемы и графики: это развлечет читателя и упростит восприятие рассказа.
Взрыв-схема капсулы. Разные элементы подсвечиваются при наведении курсора
Механики
В этом рассказе механики не только работают с вниманием читателя, но и подчеркивают достоинства продукта.
Процесс разложения капсулы показан с помощью бегунка. Перемещая бегунок, пользователь видит состояние капсулы на разных этапах распада. Поскольку такая механика позволяет за одно-два движения показать полугодовой процесс, время распада кажется более коротким, чем на самом деле. Из-за этого эффекта свойство биоразлагаемости капсулы производит более сильное впечатление на читателя.
26-недельный процесс разложения капсулы можно просмотреть за одно движение бегунка
Выбирайте для преимущества ту механику, которая лучше всего его подчеркнет.
Другая механика — раскраска капсулы по клику на один из цветов. Это хороший способ показать услугу кастомизации. Если пользователь может прямо в рассказе создать и увидеть ту версию товара, которую он хотел бы приобрести, он вероятнее решится сделать заказ.
При клике на цвет на экране появляется соответствующая версия капсулы
Сайт с презентацией сотокартона. Создатели продукта — компания «Рекаст»
Сторителлинг
У этого проекта блочная структура: новый экран — новое преимущество. Сотокартон все время появляется в рассказе, но является не главным героем, а скорее вспомогательной иллюстрацией — в этом проекте много текстовых описаний.
Постройте рассказ вокруг способов применения продукта.
Так читателю будет легче найти мотивацию для покупки.
Преимущества сотокартона показаны через разные варианты его использования. Пользователь может найти вариант, актуальный для него — так формируется потребность в продукте. Такую структуру можно использовать для рассказа о продуктах с большим количеством функций.
Инфографика и инфостиль
Визуализации в рассказе не просто развлекают пользователя, но и четко доносят преимущества, описанные в текстах.
Например, анимация, где сотокартон выступает в качестве поддона для грузов, наглядно показывает, как именно картон выдерживает распределенную нагрузку.
Если в рассказе много текста, лучше его наглядно проиллюстрировать. Это разбавляет повествование и облегчает восприятие информации.
Анимация с вариантами сотокартона для изделий нестандартной формы
Механики
Как и в случае с наушниками, единственная механика в рассказе — анимация по скроллу. Однако этот пример, напротив, показывает, как чрезмерное увлечение одной механикой ухудшает ритм повествования.
Не используйте один и тот же прием слишком часто: даже самая эффектная механика может быстро наскучить.
Анимация с вариантами сотокартона для изделий нестандартной формы
Большинство анимаций – это сборка разных элементов в единую
3D-модель. Эта механика впечатляет и захватывает внимание, но при постоянном ее повторении пользователю становится скучно. Мозг перегружается однообразной подачей информации, и с проектом сложнее взаимодействовать.
Анимация показывает, как сотокартон фиксирует хрупкие товары в упаковке
Если эта статья показалась вам полезной, подписывайтесь на наш телеграм-канал: там мы разбираем больше проектов с ценными решениями и задач, в которых эти решения могут пригодиться.
.png)
