Обсудим ваш проект?

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


Просмотров:
2347
Время на прочтение:
Статья обновлена:
12 Мая 2020
Информация о статье
Просмотров: 2347
Время на прочтение:
Статья обновлена: 12.05.2020
Дарья, редактор
Дарья, редактор
Клиент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Увеличим ваши продажи через интернет!
Разрабатываем и поддерживаем сайты. Приводим на сайт целевой трафик с помощью SEO и рекламы. Увеличиваем конверсию сайтов. Имеем успешные кейсы увеличения продаж интернет-магазинов, медицинских центров, производителей, застройщиков, автоцентров, интернет-сервисов и пр. В команде 33 специалиста.

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»

19 место
В топ-100 perfomance-агентств России

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

1 место
Рейтинг агентств контекстной рекламы Новосибирска

Золотая сотня
Российского Digital

Сертифицированное агентство Яндекс 2020

Нам доверяют

Жерихова А.В., директор ООО «Позитив»
Айзикович Б.И., генеральный директор ЗАО Медицинский центр «Авиценна»
Левчук Ю.С., управляющий ООО «ТФ Теплодар»