Все такое вкусное, не знаю, с чего начать: как использовать гифки, мемы, фото, графики и видео на лендинге

Маркетолог платформы для самостоятельного создания сайтов и лендингов Flexbe.ru Данила Плешков о том, как с помощью графики и видео можно увеличить эффективность лендинга.

Статьи с картинками получают на 94% больше просмотров. 67% пользователей считает, что качество фото очень важно при выборе продукта, а для 63% изображение важнее, чем описание. Можно продолжать, но, пожалуй, этого достаточно, чтобы не осталось сомнений: над визуальной стороной сайта стоит хорошенько поработать. Так что давайте смотреть, как использовать дизайн-артиллерию, сохранив при этом стиль, и не превратиться в «Веселые картинки».

Мозг способен обработать картинку за 13 миллисекунд. Изображение — простой для восприятия формат. Инфографики, видео с инструкциями, обзорами и отзывами — все это помогает быстро доносить большие объемы информации. Сравните, насколько быстрее вы примете решение «нравится/не нравится», если увидите фото кроссовок, а не просто прочитаете описание (исследователи говорят, примерно в 60 000 раз).

Вот наглядный пример соотношения самодостаточной картинки и (зачем-то) добавленного после описания.

Лучше один раз увидеть, чем сто раз услышать (и тем более прочитать). Можно сколько угодно писать о том, какие вкусные пирожные вы делаете, какие уютные номера в вашем отеле или как мастерски справляется с ремонтом ваша бригада. Но пока на лендинге не будет достаточного количества фото, вряд ли многие всерьез соблазнятся вашим предложением. А вот так — вполне.

Очевидный способ «очеловечить» бренд — показать реальных сотрудников. Другой вариант — шутить. Если вы у вас есть чувство юмора, значит, вы не робот. Так что когда это уместно, гифки, мемы и комиксы вам в помощь. Об этом подробно поговорим позже.

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

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

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

Фотографии — основной способ показать продукт, с этим все понятно (кстати, попробуйте увеличить картинки на сайте). Но есть еще один инструмент — фотографии людей, которые автоматически привлекают внимание. Правда, типичные стоковые фото игнорируются.

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

Ниже список фотостоков, где можно найти что-то поинтереснее, чем женщин, хохочущих над салатом.

Бонус. Фотостоки:

• Freepik
• ShappyGoat
• DesignersPics
• Usplash
• Foodeverest
• Focusfitness
• Jeshoots
• SplitShire
• Good Free Photos
• Lifeofpix
• Kaboompics

И если вам нужна совсем уж тяжелая артиллерия, всегда есть фото детей и котиков.

Рисунки могут создавать фирменный узнаваемый стиль. Если есть возможность нарисовать собственные уникальные картинки — отлично, они могут стать вашей фишкой.

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

Стильный набор пиктограмм-иконок добавит 100 очков дизайну вашего лендингу. На Флексби есть из чего выбрать, но вы можете использовать и свои коллекции.

Качественно сделанная инфографика производит отличное впечатление на пользователей, ее интересно рассматривать.

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

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

Бонус. Сервисы для создания инфографики, в том числе красивых диаграмм:

• Easel.ly
• Piktochart
• Venngage
• Creately
• Infogram
• Visage
• Canva

Тут действуют три золотых правила:

• мем должен быть либо на волне популярности в настоящий момент, либо очень живучим;

• ваша целевая аудитория должна понимать значение мема;
• вы должны понимать значение мема (притом правильно понимать).

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

А вот этот мем по мотивам Игры Престолов явно создан «со знанием дела», но будет забавно, если его использует какое-нибудь агентство по организации праздников.

Мемы — довольно универсальная история. Привязать их к тематике проекта — вопрос креативности. Нейл Патель, гуру маркетинга, считает мемы одним из самых эффективных типов контента для привлечения трафика: «Их просто сделать. Они виральны. Они смешные».

Например, для блога о казино.

Или для интернет-магазина, продающего все для барбекю.

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

Ну а блог — прекрасное пространство для экспериментов с актуальными мемами и гифками. Была бы фантазия.

Бонус. Здесь можно сделать свой мем:

• Мemegenerator
• 1001mem
• Risovach

В умелых руках гифки становятся отличным инструментом для вовлечения и развлечения пользователя. Использование GIF-анимации можно сделать частью узнаваемого стиля. Остроумные гифки делают страницу более живой и динамичной (до тех пор, пока она не превращается в психоделический клип из 70-х).

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

• Вы можете записать последовательность действий, заменить или дополнить длинную пошаговую инструкцию гифкой. Иллюстрированные инструкции более чем на 300% эффективнее, чем текстовые.

Такую GIF можно сделать с помощью, например, Licecap или GifCam.

• Попробуйте использовать гифки в блоках Call to Action. Огромные красные мигающие кнопки «Заказать» — не лучший вариант, но протестировать небольшие GIF-элементы можно. Анимация привлекает внимание:

• Покажите продукт. Гифка это сделает быстрее, чем видео.

Бонус. Инструменты для создания гифок:

• Giphy
• Gifs.com
• Img Flip
• GIF maker
• Make a GIF
• Ezgif
• GIF Brewery
• GIFBoom

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

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

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

Бонус. Приложения для создания синемаграмм:

• Livemaker
• Lively
• Camera MX
• Loopsie
• Cinemagram
• Fotodanz

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

Видео вовлекает пользователей и помогает установить более близкий контакт. Судите сами:

• в одном из экспериментов размещение видео на лендинге увеличило конверсии на 86%, в другом — на 100%;
• 80% пользователей могут пересказать содержание ролика, который они увидели на сайте в течение последнего месяца;
• 90% считают, что видео важны для принятия решения о покупке;
• 1 из 3 миллениалов признает, что покупка — прямой результат просмотра видеообзора или инструкции к товару.

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

• продукцию или товары;
• процесс и результат работ;
• пошаговые инструкции;
• интервью с вами или командой;
• вопросы и ответы;
• отзывы клиентов;
• неформальные развлекательные ролики.

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

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

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

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

Можно начать с совсем мелких форматов — вайнов. Вот, например, 6-секундный видео-рецепт коктейля куба либре от Bacardi.

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

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

Вперед, к красивым сайтам и восторженным пользователям!