Обсудим ваш проект?
Комплексный интернет-маркетинг
17 лет опыта | 90+ специалистов
Отправить заявку

Кнопки на лендинге как элемент дизайна и инструмент для увеличения продаж

Обновлено: 12 мая 2020
Время на прочтение:
Просмотров: 5236
Дарья Иванова
редактор
Станислав Мозгель
руководитель отдела веб-разработки
Редполитика
Мы прилагаем все усилия, чтобы наши обзоры были максимально честными, точными и объективными. Если вы посещаете ссылки в нашем контенте, мы можем получить комиссионное вознаграждение от ваших покупок, однако это не влияет на нашу редакционную политику и мы не станем рекомендовать продукты или сервисы, в которых не уверены.

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

Расположение кнопки на лендинге

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

Пример размещения кнопки на лендинге
Пример размещения кнопки на лендинге

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

  • заголовок захватывает внимание пользователя;
  • перечислены выгодные преимущества, которые вызовут интерес потенциального клиента;
  • упомянута акция, ограниченная по времени и/или количеству («Скидка 30 % первым 5 покупателям», «Акция «Второй товар в подарок» действует только 30 дней»);
  • кнопка целевого действия («Заказать», «Оставить заявку» и др.) находится на видном месте.

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

Нет времени разбираться?
Комплексное продвижение в онлайне
Разрабатываем стратегии продвижения бизнеса в онлайне с пошаговым планом действий, и обеспечиваем его реализацию. Проектируем, реализуем, поддерживаем и развиваем сайты, приводим на сайт целевой трафик (реклама, SEO, email-рассылки), расширяем присутствие компании на сторонних площадках, настраиваем аналитику и проводим постклик анализ.
Ваш сайт:

Размещение кнопки на лендинге по модели AIDA
Размещение кнопки на лендинге по модели AIDA

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

Кнопку целесообразно размещать по траектории взгляда посетителя сайта, которая напоминает латинскую букву F: под заголовком, списком преимуществ и призывом к действию.

Цвет кнопки на посадочной странице

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

  • красный,
  • желтый,
  • синий,
  • зеленый.
Самые удачные цвета для кнопок на лендинге
Самые удачные цвета для кнопок на лендинге

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

Дизайн кнопки

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

Визуально выделить кнопку можно следующими способами:

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

Также можно сделать кнопку с «тематической» текстурой. К примеру, элемент в деревянной текстуре будет уместно выглядеть на сайте столярной мастерской.

Идеальная форма кнопки — максимально простая с закругленными углами (1). Она будет эффектно выделяться на странице и при этом не слишком отвлекать внимание посетителя от контента:

Образец формы кнопки
Образец формы кнопки

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

Количество кнопок

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

  • целевое действие пользователя — кнопки «Купить», «Заказать» и т.д.;
  • второстепенное действие — «Заказать обратный звонок», «Записаться на консультацию» и т.д.;
  • последние по значимости действия — «Читать далее», «Узнать больше» и т.д.

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

Зачем нужен А/Б-тест лендинга

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

Методология выбора
Кто мы
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200 +
проектов
90
экспертов
17лет
на рынке
Наша методология
Статьи в блоге Директ Лайн — это всегда оригинальный, проверенный и объективный контент. Все обзоры и рейтинги честно отражают наше мнение и опыт взаимодействия с каждым инструментом.
Содержание
Комментарии

Комплекс услуг для вашего бизнеса

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

Читайте также

Бесплатный аудит SEO
и рекламного трафика
Покажем точки роста вашего проекта,
если по нему уже ведутся работы