Расположение кнопки на лендинге
Кнопка должна мотивировать посетителя лендинга выполнить определенное действие — купить товар, оставить заявку, заказать обратный звонок, получить консультацию и т.д. Поэтому данный элемент лучше размещать на первом экране сайта, чтобы он полностью был виден без прокрутки вниз (1):
Пример размещения кнопки на лендинге
В среднем на принятие решения пользователь тратит 3 секунды. По этой причине кнопку рекомендуется размещать рядом с продающим текстом. Убедитесь, что ваш текст соответствует следующим характеристикам:
- заголовок захватывает внимание пользователя;
- перечислены выгодные преимущества, которые вызовут интерес потенциального клиента;
- упомянута акция, ограниченная по времени и/или количеству («Скидка 30 % первым 5 покупателям», «Акция «Второй товар в подарок» действует только 30 дней»);
- кнопка целевого действия («Заказать», «Оставить заявку» и др.) находится на видном месте.
Если на лендинге предусмотрено изображение человека, то его взгляд должен быть направлен на кнопку:
Размещение кнопки на лендинге по модели AIDA
Такая модель размещения называется AIDA. Она много лет используется в сфере маркетинга для увеличения продаж и развития клиентской базы коммерческих компаний.
Кнопку целесообразно размещать по траектории взгляда посетителя сайта, которая напоминает латинскую букву F: под заголовком, списком преимуществ и призывом к действию.
Цвет кнопки на посадочной странице
Кнопка на лендинге должна максимально четко выделяться на общем фоне. Также при разработке следует позаботиться о том, чтобы этот элемент гармонично выглядел как на экранах ПК и ноутбуков, так и на мобильных устройствах. Цвет здесь играет одну из ключевых ролей. Наиболее эффективными цветами для кнопок считаются:
- красный,
- желтый,
- синий,
- зеленый.
Самые удачные цвета для кнопок на лендинге
Допускается использовать различные оттенки этих цветов. Важно, чтобы цвет элемента гармонировал с фоном. К примеру, кнопка зеленого цвета будет сочетаться с оранжевым, синим, желтым, розовым, красным и коричневым фонами.
Дизайн кнопки
Данный элемент, как мы уже говорили, обязательно должен выделяться. При этом мы рекомендуем сохранить стандартные атрибуты: например, правильную форму (круг, квадрат, прямоугольник и т.д.).
Визуально выделить кнопку можно следующими способами:
- ее цвет не должен повторяться в других элементах лендинга;
- сочетайте светлый и темный тона (кнопка темного цвета на светлом фоне и наоборот);
- кнопка должна «возвышаться» над остальными элементами сайта; сделать ее объемнее можно с помощью градиента и тени.
Также можно сделать кнопку с «тематической» текстурой. К примеру, элемент в деревянной текстуре будет уместно выглядеть на сайте столярной мастерской.
Идеальная форма кнопки — максимально простая с закругленными углами (1). Она будет эффектно выделяться на странице и при этом не слишком отвлекать внимание посетителя от контента:
Образец формы кнопки
Желательно, чтобы при взаимодействии пользователя с кнопкой ее состояние менялось. К примеру, когда посетитель страницы будет наводить курсор на кнопку, она будет дополнительно подсвечиваться, а нажатие кнопки будет сопровождаться снижением яркости и появлением теней.
Количество кнопок
Для наибольшей эффективности на лендингах рекомендуется размещать несколько кнопок, поскольку посетители принимают решение о покупке/заказе на нескольких этапах изучения страницы. При нажатии на разные кнопки должны выполняться разные функции:
- целевое действие пользователя — кнопки «Купить», «Заказать» и т.д.;
- второстепенное действие — «Заказать обратный звонок», «Записаться на консультацию» и т.д.;
- последние по значимости действия — «Читать далее», «Узнать больше» и т.д.
Степень значимости можно маркировать с помощью яркости цвета, прозрачности и контрастности. Также вы можете поместить на страницу элементы разных цветов. К примеру, кнопка «Купить» будет выделена основным цветом — самым ярким из цветовой палитры сайта.
Зачем нужен А/Б-тест лендинга
А/Б-тест — маркетинговый инструмент, применяющийся для проверки различных гипотез и повышения эффективности работы сайта. На оценку целевой аудитории выносятся 2 варианта сайта с разными элементами. Тестироваться могут тексты, разные варианты призыва к действию и, конечно, кнопки. Разработчики совместно с маркетологами размещают разные варианты дизайна кнопок — разного цвета, с разной текстурой и надписями. По результатам теста выявляют наиболее эффективный вариант и оставляют на посадочной странице именно его.
