«ЖМИ СЮДА!» — СЕКРЕТЫ «ПРАВИЛЬНЫХ» КНОПОК
Автор: Наталья Гарыкина
Дата: 16.12.2016      Комментарии: 0

Вы часто встречаете их на различных продающих сайтах. Они взывают «Добавь в корзину», «Отправь заявку», «Купи», «Позвони», «Оплати»… Они – кнопки, которые зачастую являются одним из самых понятных инструментов для пользователя. Как с помощью обычной, казалось бы, кнопки привлечь внимание пользователя и подтолкнуть его к определенному действию? Читаем в статье.

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

Получается, что во всех этих аспектах кнопки выполняют различные функции. Есть ли какие-то правила, руководствуясь, которыми можно «изобрести» для своего сайта/лендинга/рекламной кампании идеальную кнопку? Может ли эта идеальная кнопка приводить больше клиентов, чем было раньше? Сможет ли заставить их отставлять заявки в два раза чаще обычного?

Специалисты спорят. Статей на эту тему столько, что не перечитать. И где же в итоге правда – не понятно. Наше мнение, правда – это реальный опыт. Итак, отвечаем на самые важные вопросы касательно кнопок.

Вопрос: Какого цвета должна быть кнопка?

Вообще, относительно цвета кнопки много споров. Основные из них сводятся к утверждению: чем кнопка будет ярче, тем лучше. А другие им с легкостью противоречат: наоборот, кнопка должна быть «приглушенной», ведь яркие цвета слишком бросаются в глаза. И практика показывает, что самые частые используемые цвета это именно красный и зеленый. Какой цвет для кнопки лучше?

Доказываем на практике с помощью собственного теста на крупнейшем автопортале 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 кнопки со стрелочками, которые показывают направление на продаваемый товар или услугу. Если расположение кнопки на портале не совсем удобно для восприятия, такой ход поможет подчеркнуть прямую взаимосвязь между кнопкой и товаром.


Надеемся, что после прочтения материала у вас больше не осталось сомнений и вопросов без ответа, а поиск «работающих» кнопок покажется вам увлекательным и интересным занятием!

Авторская группа
Наталья Гарыкина
руководитель отдела медийной рекламы

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

Свою должность любит за нетривиальность: каждый день новые задачи и крутые повороты. Но Наташа не устаёт: бурную работу уравновешивает её особое хобби — проведение свадебных церемоний. Счастливые клиенты — её конёк.

Считает, что работа в рекламном агентстве научила её быть дипломатом: где-то немного хитрости, а где-то немного мудрости — и любая задача будет по силам. Очень любит свой отдел медийной рекламы — считает их особенными.

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

Вам наверняка понравится:
Dublin trip: Google Premier Partner Awards и прекрасная Ирландия, или статья о том, как мы посетили самое важное событие года
Тестирование логику бьёт. 4 причины попробовать что-то самому, чем довериться логике.
Тонкости баннерной рекламы. Как не «слить» бюджет?
GO ON: GAME ON!
Бизнес-профили в Instagram: как перестать нравиться подвесному потолку
CSS Writing Mode
Не надо так: типичные ошибки продвижения имиджа работодателя в сети
Анатомия контекста. Часть 1.
Ok, Google! Рекламное агентство Webmechanic
Говорим без остановки: 3 способа взять от SocialMedia больше
От статуса до премии: РА Webmechanic готовится к Google Premier Partner Awards 2017!
Google Premier Partners Awards: мы попали в shortlist!
Каждый желает знать… И мы не исключение!
Яндекс и Вебмеханик: 100% бизнес-аналитики + сертификат!
Ответы на 4 частых вопроса о прототипах
Что не так с вашими котиками? 5 типичных ошибок в реализации SMM-стратегии.
Кто виноват и что делать? 7 принципов работы с негативом в Сети.
Оставьте свой комментарий: