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

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


Просмотров:
788
Время на прочтение:
Статья обновлена:
12 Мая 2020
Информация о статье
Просмотров: 788
Время на прочтение:
Статья обновлена: 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