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

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

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

Что можно сделать с помощью изображений?

Компактно упаковать информацию

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

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

(простыня текста продолжается)
(простыня текста продолжается)

Cформировать доверие

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

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

Создать «человеческое лицо»

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

Структурировать текст, управлять вниманием

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

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

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

Поддержать интерес и не дать заскучать

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

Семь форматов: между добром и злом

Фотографии

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

Круги и линии между ними показывают движение глаз пользователей
Круги и линии между ними показывают движение глаз пользователей

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

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

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

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

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

Чем не реклама надежных окон?
Чем не реклама надежных окон?

Рисунки

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

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

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

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

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

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

Инфографика

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

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

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

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

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

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

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

Мемы

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

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

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

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

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

Напомним (или заспойлерим): Арья Старк устроила расправу на «банкете» и приготовила пирог с «неожиданной начинкой»
Напомним (или заспойлерим): Арья Старк устроила расправу на «банкете» и приготовила пирог с «неожиданной начинкой»

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

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

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

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

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

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

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

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

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

Гифки

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

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

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

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

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

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

Синемаграфия

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

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

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

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

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

Видео

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

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

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

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

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

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

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

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

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

Гармония победит хаос

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

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

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

99
3 комментария

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

Гифка на кнопку "Заказать"?
Гифка, Карл!
Шёл 2018 год...

Нашел вот такой сайт gifs.ru