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

Зачем нужны баннеры и что это такое

Как предпринимателю оформить рекламное предложение и привлечь клиентов? Если сайт построен таким образом, что на макете нет места для актуальных акций, предприниматель рискует потерять прибыль. Поэтому для описания новых предложений и привлечения клиентов используют баннеры - изображения, которые встраиваются в контентную часть и меняются с течением времени. Такие изображения оформляются в соответствии с тематикой, как правило, контрастируют с фоном сайта и остальными элементами для привлечения внимания.

Какие баннеры могут быть:

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

Слайдеры - другой способ рассказать о рекламных предложениях. Главный экран - первое, что видит клиент, когда заходит на сайт. Поэтому на первом экране размещают самые горячие акции с помощью крупных изображений. Обычно это 3-5 картинок с переключателями.

Способы привлечения внимания клиентов

Баннеры - самый распространенный способ описания акций и других предложений магазина. Однако, пользователи часто игнорируют рекламу из-за, так называемой, «баннерной слепоты». Это явление появилось как раз потому, что пользователи привыкли видеть рекламу на баннерах, и поэтому предложения уже не воспринимаются. Чтобы клиенты обратили внимание на акцию, совершили целевое действие (в данном случае - переход на страницу с рекламируемым товаром и его покупка), нужно выделить баннер среди основного контента. Рассмотрим основные способы привлечения внимания клиентов с помощью дизайна таких изображений.

Цветовой контраст

Основной прием привлечения внимания к изображению - цветовой контраст между контентной частью и баннером.

Пример - интернет-магазин одежды Wildberries. На традиционно белом фоне дизайнеры размещают контрастный черный баннер с яркой надписью. Также акция продублирована в оформлении шапки сайта.

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

Иллюстрации

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

Также особой популярностью пользуются иллюстрации в стиле flat - двумерные рисованные картинки. Больше об этом стиле мы писали здесь.

Лица

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

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

На примере изображена девушка, которая смотрит на надпись «Sale». Больше об использовании лиц в веб-дизайне можно прочитать в этой статье.

Текст

Надписи - важная составляющая рекламного предложения. С помощью текста также можно привлечь внимание, увеличить уровень узнаваемости и запоминаемости. Какие надписи могут вызвать у клиента желание купить товар?

1. Прямой ответ на запрос. Если клиент пришел на сайт за конкретной информацией или товаром, баннер с четким предложением вероятнее всего привлечет его внимание. Особенно это работает в те дни, когда во всех магазинах проходят акции: это может быть черная пятница, подготовка к Новому году и другим праздникам. В это время клиенты ищут подарки и специально просматривают выгодные предложения.
2. «Я хочу узнать больше». Желание узнать продолжение интересной информации также может заставить пользователя кликнуть на баннер. Например, предложить прочитать сопутствующие статьи в блоге и прочее.
3. Горячие предложения. Можно определить, что интересно клиенту в текущий момент и предложить ему выгодное предложение по его запросам. Например, пользователь читает статью в блоге «Как оформить визу в Америку». С помощью баннера можно направить пользователя по его проблеме к менеджеру сайта или на страницу оформления заявки на консультацию.
4. Яркие большие буквы. Иногда фраза значит не так много, как ее оформление. Крупные буквы с названием акции, тематически оформленные, с красочными иллюстрациями, также могут привлечь внимание и заинтересовать пользователя.

На слайдере главное - не изображение, а крупная надпись и красная кнопка:

Ситуативный маркетинг

Еще один способ привлечь внимание к баннерам и слайдерам - прием, который называется «ситуативный маркетинг». Этот термин появился недавно, означает быструю реакцию на происходящие события. Самый яркий пример - праздники, в честь которых предприниматели разрабатывают различные акции для привлечения клиентов. На примере - баннеры, приуроченные к ближайшим событиям марта - Дню театра и предстоящим каникулам:

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

Расположение

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

• шапка;
• встраивают в контентную часть;
• на главном экране;
• слева контентной части и прочее.

Сайт Яндекс.Музыка для привлечения внимания пользователей размещает контрастные баннеры снизу и сверху:

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

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

Еще один способ привлечь внимание - фиксированные баннеры. Пример - все тот же сайт Яндекс.Музыки:

Баннер как будто прилипает к экрану и двигается вместе со скроллингом.

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

Последовательность

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

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

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

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

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

Ассоциации и эмоции

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

Также можно создавать ассоциации с товарами. Например, используя цветовые оттенки.

На примере - баннер с акционным товаром. Чтобы провести ассоциативный ряд, дизайнер использует розовый цвет. Этот оттенок обычно ассоциируется либо с женскими товарами, либо с любовью.

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

Качество баннера на сайте

Как понять, качественный ли баннер размещен на странице?

1. Отображается на сайте без задержек. Иногда баннеры (особенно рекламные) делают с помощью анимации или видео. Движение на сайте всегда привлекает внимание пользователей. Важно, чтобы страница загружалась быстро, чтобы не раздражать клиентов и не заставлять ждать.
2. Баннер привлекает внимание. При этом важно не привлечение яркими цветами, а конкретным предложением клиенту. Изображение должно стимулировать пользователя перейти по ссылке и совершить целевое действие.
3. Оригинальное изображение. К сожалению, интернет пестрит одинаковыми фотографиями с улыбающимися лицами. Поэтому качественный баннер - в первую очередь изображение, которое показывает индивидуальность компании и конкретного предложения.
4. Баннер должен стать элементом, который вызовет доверие у пользователя. Больше по этой теме можно прочитать здесь.

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

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