«ЖМИ СЮДА!» — СЕКРЕТЫ «ПРАВИЛЬНЫХ» КНОПОК
Вы часто встречаете их на различных продающих сайтах. Они взывают «Добавь в корзину», «Отправь заявку», «Купи», «Позвони», «Оплати»… Они – кнопки, которые зачастую являются одним из самых понятных инструментов для пользователя. Как с помощью обычной, казалось бы, кнопки привлечь внимание пользователя и подтолкнуть его к определенному действию? Читаем в статье.
Немного теории: кнопка на портале/сайте/лендинге – это графический элемент, который служит лучшей визуализацией какой-либо функции. Очень часто кнопки используются в навигации сайта, так пользователь лучше ориентируется. На различных интернет-порталах и сайтах интернет-магазинов кнопки являются рекламными позициями (продаются порой за немалые деньги) и, как правило, служат призывом к действию – позвонить, купить, отправить заявку. Ну а на лендинге они, словно жирная точка в конце предложения – несут в себе согласие пользователя, совершающего некое действие.
Получается, что во всех этих аспектах кнопки выполняют различные функции. Есть ли какие-то правила, руководствуясь, которыми можно «изобрести» для своего сайта/лендинга/рекламной кампании идеальную кнопку? Может ли эта идеальная кнопка приводить больше клиентов, чем было раньше? Сможет ли заставить их отставлять заявки в два раза чаще обычного?
Специалисты спорят. Статей на эту тему столько, что не перечитать. И где же в итоге правда – не понятно. Наше мнение, правда – это реальный опыт. Итак, отвечаем на самые важные вопросы касательно кнопок.
Вообще, относительно цвета кнопки много споров. Основные из них сводятся к утверждению: чем кнопка будет ярче, тем лучше. А другие им с легкостью противоречат: наоборот, кнопка должна быть «приглушенной», ведь яркие цвета слишком бросаются в глаза. И практика показывает, что самые частые используемые цвета это именно красный и зеленый. Какой цвет для кнопки лучше?
Доказываем на практике с помощью собственного теста на крупнейшем автопортале auto.ru. При равных условиях и красная кнопка, и зеленая кнопка на самом деле имеют одинаковый коэффициент CTR. Мы разместили две кнопки, отличающиеся лишь цветом. Одна кнопка была красной, другая – зеленой. При этом кнопки были расположены на одном уровне.
В ходе незатейливого эксперимента, который длился 1 месяц, были получены следующие результаты: кнопки соперничали между собой, несколько раз в месяц «перетягивали» трафик друг у друга, однако общая картина оставалась неизменной: на одинаковое количество показов кнопок пришлось практически одинаковое количество кликов.
* данные могут иметь статистическое отклонение не более 1%.
Помимо проблемы выбора цвета кнопки, почти у каждого клиента есть мнение, что креатив должен быть ярким, контрастным, бросаться в глаза, привлекать внимание и тогда пользователь точно не пройдет мимо. К сожалению, яркая кнопка – не всегда значит удачная. Наш совет: обратите внимание на рекламные материалы на площадке. В случае если площадка «пестрит» рекламой, сделайте кнопку яркой, иначе она потеряется среди прочих рекламных элементов. В качестве примера можно привести кредитную кнопку на странице объявления портала avito.ru, расположенную рядом с ценой товара.
Мы выбрали для нее оранжевый цвет, яркий и контрастный зеленому, которым выделена цена товара. Кроме того, на странице больше нет элементов оранжевого цвета, что позволило нам выделить рекламную позицию и поднять CTR в 1,5 раза (до этого кнопка была синего цвета, как сопутствующая на странице реклама).
Еще один пример. Возьмем площадку narule.ru с небольшим количеством рекламы.
На портале narule.ru лучше всего работает кнопка повторяющая цвет шапки сайта. Данную ситуацию отлично объясняет теория гештальтпсихологии в рекламе (объекты должны быть связаны друг с другом, вызывать ощущение целостности, законченности). Синий цвет сверху и снизу первого экрана площадки вызывает такие чувства. Повторяющая цвет шапки сайта кнопка вызывает доверие, чувство причастности ко всему порталу в целом. На avito.ru данная теория не срабатывает по ряду причин:
1. Строка фильтров и настроек сверху экрана занимает много места, если нет визуального «начала» сайта – не сработает и «законченность» кнопкой.
2. Обилие рекламы отвлекает пользователя, текстографические блоки не дают кредитной кнопке оставаться последним звеном на странице.
Стоит понимать, что наши советы помогут увеличить CTR, но высокий CTR не означает высокую конверсию. Достижение высокой конверсии в первую очередь предполагает работу над landing page.
Существует пара негласных аксиом:
- Креативы устаревают. Одна и та же кнопка, расположенная на одной и той же позиции со временем приедается пользователю, становится давно изученным элементом страницы сайта. CTR позиции неизбежно падает.
- Одна и та же кнопка работает на разных порталах по-разному. В первую очередь это зависит от отличных друг для друга позиций, мест размещения кнопки. Кроме того, может не совпасть цветовая гамма сайта, шрифт, текст, форма кнопки. Не стоит также забывать и о том, что у разных порталов может быть различная специфика и аудитория.
Все вы хоть раз видели кнопки «жми сюда» и другие подобные, не содержащие большой смысловой нагрузки. Обычно такие кнопки яркие, могут быть анимированными.
Существует два варианта развития событий, когда размещается кнопка, предназначенная исключительно для привлечения внимания: посетителей будет очень мало и посетителей будет очень много. «Почему же большое количество посетителей – плохо, разве это не наша цель» - спросите вы? К сожалению, больше половины гостей, пришедших на ваш landing page с подобной кнопки, уйдут через несколько секунд. Потому что у этих людей не было четкого представления о том, что именно они увидят на сайте. В такой ситуации конверсия сильно падает, а количество кликов возрастает. Это прямой путь к бесцельной трате ваших денежных средств.
Следует писать на кнопке то, что логически будет связано с предложением на лендинге. Кроме этого, стоит использовать законченные фразы на кнопке: не «отправить», а «отправить заявку»; «рассчитать» стоить поменять на «рассчитать стоимость/кредит»; «кредит» лучше изменить на «получить кредит».
Анимированные кнопки на самом деле во многом могут проигрывать своим статичным конкурентам. Как правило, анимированные креативы несут в себе наибольшую информационную нагрузку (читай «имеют больший вес»). И стоит понимать, что у части пользователей ввиду отсутствия достаточной скорости Интернета могут быть проблемы с отображением рекламы. То есть она попросту будет медленно загружаться, а анимация начнет «притормаживать». Это действительно может стать большой проблемой. Кроме этого, дизайн анимированной кнопки может быть слишком агрессивным, мешать восприятию основной информации страницы. Такая кнопка вызовет только негативные эмоции.
Однако гипотеза об эффективности анимированных кнопок все же имеет право на жизнь, некоторые из них действительно показывают высокий CTR. Стоит понимать, что эффективная анимированная кнопка будет стоить немалых дизайнерских усилий по уменьшению «веса» и созданию спокойной, но в то же время привлекающей анимации. Определить насколько эффективна в работе та или иная анимированная позиция, помогут только тесты.
Под дизайном кнопки обычно понимают форму кнопки, рельеф, наличие дополнительных элементов на креативе (логотип компании, привлекающие внимание блики и изображения). Стоит помнить, что практически всегда фантазия дизайнера ограничена определенными техническими требованиями позиции (формат, размер в Кб).
Форма кнопки может быть прямоугольной или же овальной. Лучше придерживаться эти двух традиционных форм не только на порталах, но и на landing page. Не нужно изобретать кнопки-треугольники, кнопки-трапеции или круглые кнопки. В качестве рекламных позиций на портале они неуместны, а на landing page могут вызвать чувство «лишнего элемента», не согласующегося с элементами дизайна самого лендинга.
Объём кнопки, несомненно, важная вещь при создании креатива. Дизайнеры используют разные оттенки цвета, чтобы передать объемность. Кнопка показывает более высокий CTR, когда она становится объёмной и тем самым интересной и заметной среди остальных графических блоков сайта. Примеры объёмных кнопок:
Дополнительные графические элементы также придадут кнопке интерес и привлекут внимание пользователей. Самый простой способ выделить кнопку – наложение бликов на кнопку, либо использование цветового градиента:
Помимо графических элементов дизайна кнопку можно украсить логотипом, эмблемой, графическим изображением, подчеркивающим или дополняющим тест:
Кроме этого хорошо показывают себя с точки зрения высокого CTR кнопки со стрелочками, которые показывают направление на продаваемый товар или услугу. Если расположение кнопки на портале не совсем удобно для восприятия, такой ход поможет подчеркнуть прямую взаимосвязь между кнопкой и товаром.
Надеемся, что после прочтения материала у вас больше не осталось сомнений и вопросов без ответа, а поиск «работающих» кнопок покажется вам увлекательным и интересным занятием!