Цвет кнопки купить конверсия. Про главные кнопки в интернет-магазине
Несмотря на то, что многие не знают этого, кнопки «призыв к действию» являются мощным инструментом маркетолога.
«Призыв к действию» – это слово или картинка, благодаря которым люди делают то, чего от них хотят владельцы сайта. То, как вы оформляете и размещаете их, является очень важным.
Неважно, хотите ли вы, чтобы люди подписались, скачали или же купили что-то, кнопка должна всегда выглядеть убедительно.
Изучение более 200 малых предприятий, базирующихся в США, показало, что более 70% из них не имеют четких и понятных кнопок «призыва к действию».
Исследователи также обнаружили некоторые интересные факты, приведенные ниже:
- 82% испытуемых не ссылались на профили фирм в социальных сетях.
- у 72% из них не было кнопок «призыва к действию» на сайтах.
- 27% не отображали номер телефона на главной странице.
- 70% из тех, у кого все же был указан номер телефона, не размещали его на видном месте.
- 96% из них не размещали информацию о навигации по сайту на домашней странице.
- 68% не указывали свой адрес электронной почты на главной странице.
- 38% из тех, кто указывал адрес электронной почты, не размещали его на видном месте.
Как видите, многие предприятия пренебрегали убедительными «призывами к действию». Это означает, что они не дают посетителям достаточно указаний о том, что делать дальше. В результате этого посетители покидают сайт.
Примеры и типы «призывов к действию»
Так как именно вы будете создавать убедительные кнопки на вашем сайте?
Посмотрите на эти 24 простых совета по улучшению вашего «призыва к действию», в результате чего вы получите больше кликов по нему:
1. Выберите правильный цвет
Выбор подходящего цвета играет огромную роль. Некоторые цвета, как известно, привлекают внимание больше, чем другие. На сайте компании SAP оранжевый цвет увеличил количество переходов по кнопкам на 32.5%.
Зеленый и оранжевый являются одними из лучших в этом деле цветов. Тем не менее, нужно подбирать цвета в соответствии с главным дизайном сайта. Всегда выбирайте те цвета, которые выделяются и привлекают внимание.
2. Используйте легко читаемый текст
Убедитесь, что текст на кнопке достаточно большой для того, чтобы посетители его заметили. В то же время, не делайте его слишком большим, потому что он может выглядеть отталкивающим.
3. Напишите конкретное содержание
Тексты, в которых указаны явные преимущества, помощь и другая важная информация, соберут больше кликов.
Hubspot является хорошим примером этого:
4. Используйте точную и понятную информацию
Текст на вашей кнопке не должен быть длинным. Сделайте текст кратким и понятным. Используйте от двух до четырех слов.
5. Будьте ориентированными на конкретные действия
Каждая кнопка «призыва к действию» должны заинтриговать и побудить посетителей сайта к действию. Попробуйте заменить слишком частое использование таких слов, как “войдите” и “подтвердите” словами “присоединитесь” и “согласитесь”. Выбирайте слова, которые относятся к вашему предложению, например “получить бесплатную пробную версию” или “скачать бесплатный образец”.
6. Добавьте специальные эффекты
Дополнительные эффекты могут быть отличным способом для того, чтобы привлечь внимание пользователя. Например, можно создать кнопку, которая шевелится, когда посетители нажимают на нее.
7. Используйте пробел
Старайтесь не добавлять слишком много элементов вокруг вашей кнопки. Оставляя пустое место возле «призыва к действию», вы автоматически выделяете его.
8. Создайте эффект срочности
Эффект лимита заставит посетителей принимать срочные решения: «первые 100 подписчиков получат бесплатную электронную книгу».
9. Будьте конкретны
Не путайте посетителя кнопкой, которая не содержит важную информацию. Постарайтесь быть более конкретными, указывайте важные детали вашего предложения.
10. Помните, что размер имеет значение
Ваша кнопка «призыва к действию» должна быть достаточно большой для того, чтобы посетители без труда могли найти ее. Однако не делайте ее слишком большой, потому что это может отпугнуть посетителя.
11. Выберите подходящую форму
В основном используются прямоугольные кнопки, но не стоит забывать, что округлая форма тоже может быть эффективной. Если кнопка как бы вогнута внутрь, то посетители обратят больше внимания на ее текст.
12. Используйте точную информацию
Сделайте кнопку «призыва к действию» актуальной, покажите, почему именно ее должен нажать пользователь. Вместо того, чтобы использовать общий текст («увидеть больше»), 9gag использует фразу «Хочу больше веселья». Это заставляет пользователей нажимать на кнопку, если они хотят увидеть больше забавных фотографий.
13. Используйте доказательства
Заставьте посетителя думать, что нажать на кнопку – в его интересах. Покажите это на конкретном примере. Консультант по маркетингу может привести в пример выгоду, которую получил покупатель, воспользовавшийся его услугами. Это убедит большее количество людей нажать эту кнопку.
14. Общайтесь с посетителями
Не перекладывайте все на технику, потому что пользователи хотят взаимодействовать с реальными людьми. Попробуйте разобраться в мыслях своих посетителей, это поможет достучаться до их чувств. Например, сайт по недвижимости может использовать такие слова, как «Начните свой виртуальный тур» или «Отправьтесь в тур сегодня»
15. Используйте обратную психологию
В то время как на большинстве сайтов написано “нажать здесь”, вы можете получить больше кликов, написав, чтобы они не нажимали кнопку. Эта стратегия была реализована фирмой TimothySykes, на сайте которой было написано “не нажимайте, если вы ленивы”. В результате этого переходы по этой ссылке увеличились на 39%
. 
16. Будьте креативными
Ваши «призывы к действию» не обязательно должны быть кнопками. Подумайте над другими вариантами, которые могли бы заставить людей перейти по ссылке. Вы можете попробовать сделать ссылку в видео, что привлечет внимание посетителей.
17. Распределите время
Вы можете разместить «призыв к действию» внизу, чтобы пользователь нажал его после того, как получит точное представление о том, что Вы предлагаете. Пользователи чувствуют, что вынуждены нажать кнопку, если она появляется перед главной информацией, именно это может оттолкнуть их.
18. Сосредоточьтесь на дизайне
То, как вы оформляете вашу кнопку, может сильно повлиять на количество нажатий на нее. Добавление картинок поможет пользователю получить лучшее представление о том, что он покупает.
19. Говорите от первого лица
Исследования, проведенные Майклом Аагордом из Content Verve, показали, что переход от второго лица к первому увеличивает количество кликов на 90% в среднем. Используйте личные местоимения для того, чтобы показать, что посетитель общается с реальным человеком.
20. Расставьте приоритеты
У вас могут быть другие кнопки на вашем сайте, которые не являются основными кнопками «призыва к действию». Убедитесь, что ваш главный «призыв к действию» привлекает больше внимания, чем другие вторичные кнопки.
21. Добавляйте картинки
Добавление привлекательной графики имеет большое значение. Однако важно, чтобы картинки, которые вы добавляете, имели непосредственное отношение к информации, которую вы хотите донести.
22. Создавайте опросы
Нет универсального образца кнопки, который бы подходил ко всем «призывам к действию». Поэтому важно создавать опросы для понимания, какой цвет, форма и текст больше всего подходят для вашей компании.
23. Используйте правила минимализма
Помните о старой пословице, что меньше значит больше. Ваш «призыв к действию» должен быть короткими, чтобы не вводить пользователей в заблуждение многовариантностью. Если вы хотите добавить несколько вариантов, ограничьте их до трех или четырех.
24. Выберите правильную позицию
Место размещения – это один из самых важных элементов, который влияет на количество кликов. Есть много мест, где вы можете добавить вашу кнопку «призыва к действию» в зависимости от ее типа. Попробуйте разместить ее в разных местах, чтобы понять, где она функционирует лучше.
Где разместить «призыв к действию»
Как уже говорилось в последнем пункте, позиционирование вашей кнопки может оказать огромное влияние на количество кликов. Расположение кнопок должно зависеть от контента и информации, а также дизайна Вашего сайта.
Тесты, проведенные Content Verve, показали, что кнопки, размещенные ближе к концу страницы, получили на 304% больше переходов, чем те, что размещены вверху страницы.
В случаях, когда предложение или продукт являются многовариантными, пользователям нужно изучить много информации, чтобы принять обоснованное решение. Именно в этом случае, кнопку следует разместить снизу. Для единичных предложений лучше поместить кнопку сверху.
В целом, видное расположение вашего «призыва к действию» играет ключевую роль в количестве переходов по нему.
Зачастую важностью СТА-элементов пренебрегают. Дизайнеры не всегда понимают, что именно делает кнопку call to action эффективной. Что они точно знают, так это то, что она должна быть заметной и подходить под общий дизайн сайта. Однако разрабатывать кнопку СТА без понимания секретов ее эффективности нельзя. Важность этого элемента слишком велика.
В конце концов, главная цель всех СТА-кнопок - это побудить посетителей сделать что-то, а именно совершить действия, необходимые вам. Это может быть добавление товара в корзину, скачивание какого-то материала, запрос информации, бронирование столика и многое другое. Важно иметь хотя бы общее понимание того, как текст, размеры, расположение и другие факторы влияют на конверсию СТА-элементов. Разобраться с этим не сложно. Давайте приступим и рассмотрим основные признаки успешных кнопок Call-to-action.
1. Они убедительны
Текст - это самая важная составляющая вашей кнопки. Именно грамотный копирайтинг побуждает посетителей кликать. Текст должен обещать выгоду и обращаться к личному интересу посетителя. Помимо того, что он должен быть релевантным, он должен ясно и недвусмысленно давать понять, что произойдет дальше. При составлении текста, убедитесь, что посетитель, кликнув на вашу СТА-кнопку, получит именно то, что на ней написано.
2. Они точные и краткие
Текст вашей кнопки должен быть краткими и по существу. Международное маркетинговое агентство HubSpot рекомендует использовать в СТА-кнопках не более 5 слов.
3. Они ориентированы на действия
Ваши СТА-элементы должны начинаться с глаголов действия, таких как «получить» или «скачать». Вот несколько примеров:
- Получить бесплатную консультацию
- Скачать сейчас
- Получить эксклюзивный доступ
- Записаться на бесплатное занятие
- Сравнить цены
И вместо того, чтобы повелевать посетителям «подписаться» или «отправить», предложите им «получить» или «попробовать». Предоставьте им стоящую причину, чтобы они совершили то действие, которые вы от них ждете.
4. Они говорят от первого лица
В ходе теста, который проводил Майкл Аагард (Michael Aagaard), специалист компании по разработке Landing Page «Unbounce», выяснилось, что сменив текст кнопки второго лица (т.е. Получите ваш бесплатный урок) на первое лицо (т.е. Получить мой бесплатный урок) показатель CTR (кликабельности) вырос на 90%.
Почему текст от первого лица работает хорошо? Потому что он представляет собой действие с точки зрения пользователя. Поэтому если вы все же планируете использовать в ваших СТА-элементах второе лицо, постарайтесь протестировать оба варианта и посмотрите, какое обращение к вашей аудитории работает лучше.
5. Они создают ощущение срочности
Особенность человеческой природы состоит в том, что мы склонны желать того, чего не можем иметь. Мы повышаем стоимость тех вещей, которые в дефиците, и снижаем стоимость того, что в избытке. Это основа баланса спроса и предложения. Чем менее доступен товар, тем более ценным он становится. Используйте этот принцип в своих СТА-элементах, и вы увидите приятный результат.
Вам совсем не обязательно использовать подобную тактику все время. Ощущение срочности вы можете создать путем добавление всего одного слова «сейчас».
6. Они содержат дополнительную информацию (если необходимо)
Чтобы повысить кликабельность и доверие пользователей, а также опередить их сомнения, зачастую необходимо предоставить дополнительную информацию. Например, ваш призыв к действию может содержать:
- Гарантию возврата денег (если таковая имеется)
- Информацию, закрывающую возражение (например, «для старта не требуется оплата», «регистрация за 20 секунд»)
- Важные преимущества («30 дней бесплатно»)
При разработке призыва к действию, подумайте о потенциальных вопросах и сомнениях, которые могут появиться у пользователя, и убедитесь, что вы разрешили их вовремя.
Надо сказать, что дополнительная информация в ваших СТА-кнопках не всегда необходима, но иногда она заметно улучшает CTR.
7. Их невозможно не заметить
Какой бы удачный текст вашего призыва к действию не был, он потеряет свою значимость, если никто не увидит вашу кнопку. Вот почему, вы должны убедиться в том, что ее невозможно пропустить. Она должна быть достаточно большой, чтобы ее было видно на расстоянии, но не настолько, чтобы наносить вред всему дизайну.
Если вы не уверены в том, что ваша кнопка достаточно велика, протестируйте ее: разместите ее на вашем сайте и отойдите на 3-4 метра от компьютера. Вы должны хорошо ее различать. Если не можете - кнопку стоит увеличить.
8. Они окрашены в контрастные цвета
Дизайнеры и маркетологи не перестают искать самый «конвертирующий» цвет, но пора признать, что универсального цвета, гарантирующего высокую конверсию, не существует. Люди склонны замечать (и запоминать) то, что выделяется из окружения. Поэтому, секрет успешной СТА-кнопки - это цвет, контрастирующий с остальными цветами окружающих элементов на странице (но, тем не менее, не выбивающийся из общей цветовой гаммы сайта)
9. Их не надо искать
Если ваши посетители готовы к следующему шагу, они не должны блуждать по сайту в поисках кнопки. Она должна располагаться именно там, где они ее будут ожидать увидеть, и куда в следующий момент направится их взгляд - в самом очевидном месте. Никогда не заставляйте ваших посетителей оглядываться в поисках кнопки. Следуйте за естественным движением мысли человека. Если он заполняет форму или читает информацию о продукте, СТА-кнопка должна находится тут же, сразу за тем контентом, с которым взаимодействует пользователь. На длинных страницах, где много информации, стоит размещать призывы к действию чаще, на протяжении всего контента.
Эта мысль может казаться очевидной, но достаточно много сайтов совершают ошибки. Даже Apple размещает СТА не в очевидном месте:
10. Они не конфликтуют с другими СТА
Скорее всего, пользователь не совершит ни одно действие, если перед ним стоит выбор. Процесс сравнение, анализа, оценки вариантов стоит таких умственных затрат, что проще не выбирать ничего и двигаться дальше. Самое худшее, что можно сделать, это заставить ваши СТА-элементы бороться за внимание пользователя.
Задайте вопрос самому себе: какое самое главное действие должны совершить пользователи на вашей странице? Ответ на этот вопрос будет отличаться в зависимости от целей той или иной проектируемой страницы.
Если вы проектируете Landing page
Ваш девиз должен звучать так: «одна страница - одна цель». Сфокусируйтесь на одном, самом важном, действии для пользователя.
Если вам все же надо предложить несколько действий
Иногда вам необходимо разместить более одной кнопки на странице. Например, когда вы предлагаете пользователям «войти» и «зарегистрироваться». И даже тогда, когда пользователи могут совершить несколько действий, тем не менее, руководить их выбором должны вы.
Выстраивайте визуальную иерархию и добавляйте веса тем элементам, конверсия которых наиболее важна для вас. Ваша основная СТА-кнопка должна быть визуально более броская и лидировать в конкуренции с другими СТА за внимание пользователя.
11. Они регулярно тестируются и корректируются
Люди часто спрашивают: какой показатель считать хорошей конверсией?
Показатель хорошей конверсии - тот, который лучше предыдущего.
Единственный способ убедиться в том, что ваши призывы к действию максимально эффективны - регулярно их тестировать. Меняйте текст, размер, цвет, местоположение и стиль ваших кнопок. Даже незначительные перемены могут оказать большое влияние. А/В тестирование скажет вам, что работает лучше, тестирование поведения пользователей скажет почему.
Расскажу о первых факторах которые, по моему мнению, влияют на эффективность CTA (call to action) кнопки, она же «купить» в икоммерц-проектах.
Никаких советов и , скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.
1) Расположение
Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране - то сами, своими руками, снижаем конверсию.Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.
Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.
2) Размер
Размер это акцент, акцент это приоритет, приоритет это что? Да - кто здесь главный. Если мы хотим продавать, то СТА-кнопка должна быть главной, то есть большого размера.Но, не слишком большого, чтобы не выпадать из дизайна и не занимать половину экрана.
На сайте Yoox нет сомнений какой элемент интерфейса главный.
3) Цвет
Что мы имеем здесь. Хорошо, если он контрастный, то есть отличается от цвета основных элементов сайта. Но, выпадение его из дизайна создает ощущение кичливости. Именно поэтому я не считаю универсальными и лучшими оттенки красного/оранжевого (что принято в среде юзабилистов). Но, в некоторых случаях, они действительно работают, все зависит от дизайна сайта.
На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.
4) Текст (содержание)
Это мой любимый момент. В качестве текста внутри кнопки можно видеть на сайтах зоопарк вариантов. Я считаю, что текст в кнопке должен:- точно отражать действие, конкретизировать его. В этом смысле «купить» не говорит ни о чем.
- включать . Например «Положить в мою корзину»
- содержать призыв к действию, не быть нейтральным.
На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.
5) Форма
В этом пункте сильная привязка к дизайну сайта, но в общем случае прямоугольную форму можно считать предпочтительной, она наиболее распространена и комфортна для пользователей.
На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.
6) Интерактивность / тактильность
Как хорошо порой поиграть с кнопкой наведением мыши. Раз, два, три навел и вот - ты ее уже нажал. Редкий случай? Нет, это работает. Поэтому по оверлею меняем цвет, увеличиваем шрифт или еще каким-то образом меняем кнопку. И это правильно!Еще можно по дать всплывающую подсказку, это тоже интерактивность.
Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.
И, конечно, если кнопка выпуклая, то при нажатии ее лучше вдавливать, это и есть тактильность. Поэтому объемная кнопка с тенью обычно предпочтительней плоской.
7) Повторение
Если у нас простыня контента (например, лендинг), то кнопку хорошо повторить. Почему? Чтобы для ее нажатия не надо было много скроллить вверх. И еще, чтобы напомнить пользователю зачем мы все это на странице ему показываем - чтобы он купил.
На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.
8) Качество исполнения
Отдельный пункт, который и так понятен, но не всегда реализован. Некрасивая, кривая кнопка нажимается реже, даже если весь сайт еще ничего. Это барьер, который никому не нужен и убирается легко любым толковым дизайнером.Кроме того, хорошая кнопка вокруг имеет отступ, это увеличивает ее самостоятельность и выделяет из всего контента. Плохая - липнет к краям и другим объектам.
Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.
9) Изменяемость
При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? - Никому. Привлекает внимание? - Да.Прием для сплит-теста годится, пробуем.
10) Взаимосвязь с другими CTA-кнопками
Самый сложный момент. Не могу дать правил, но если у нас рядом с основной кнопкой другие, то они друг на друга влияют и это надо учитывать. Нет ничего хуже двух похожих рядом, это пессимизирует обе, снижая их CTR.
На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.
Заключение
Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии - прямо и непосредственно. Я повышал за счет этого в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.Всем рабочих кнопок!
Вы можете не читать эту статью, если не заинтересованы в конверсии. Рекомендации по созданию эффективной кнопки для сайта будут полезны только тем, кто ищет пути генерации лидов и превращения посетителей сайта в реальных клиентов. А если такая потребность существует, то будем рады раскрыть нюансы создания работающих призывов к действию.
Цвет и контрастность CTA-кнопки, ее размер, месторасположение, сам текст призыва к действию – в данном вопросе нет мелочей: все эти критерии будут влиять на юзабилити сайта и оказывать закономерные последствия. Чтобы максимально учесть упомянутые параметры CTA-элементов, предложим несколько материалов на тему. Ознакомившись с ними, вы оцените реальные примеры из веб-практики, узнаете основные ошибки при создании графического интерфейса и – самое важное – получите представление о том, что тестировать на собственном веб-ресурсе. Приступим.
Цвет в масть конверсии
По различным данным, при создании CTA-кнопки для регистрационной формы Gmail разработчиками было протестировано от 41 до 50 оттенков синего. В эксперименте участвовали более 425 тысяч добровольных тестировщиков, что позволило выявить чуть ли не идеальный конвертирующий оттенок. Но означает ли это, что используемую Google кнопку разработчики всех сайтов могут взять за образец? Разумеется, нет.
Тот же оттенок синего специалисты Google используют на странице другого своего продукта – Picasa, но вот откройте сайт веб-браузера Chrome – и увидите совсем другой тон. Это подтверждает: цвет кнопки призыва к действию определяется множеством факторов, таких как тематика сайта, сфера деятельности, предпочтения вашей целевой аудитории, дизайн в целом, воздействие оттенков на физиологические процессы в организме и другими.
Холодные тона – будь то синий или голубой – ассоциируются с надежностью, стабильностью, спокойствием и, соответственно, доверием. Схожий эффект оказывают зеленые кнопки для сайта: обдуманность, натуральность, безопасность – вот какую информацию они несут. Используйте зеленый цвет для скачиваний (в том числе и антивирусных программ), активации платных пакетов услуг, внесения пожертвований.
Зеленый – тот самый цвет, что используется для призыва к действию на сайтах коллективных скидок. Его вы найдете на таких лидирующих сервисах, как «Купи Купон», Kupibonus, Groupon, «Выгода.ру», Citycoupon, Boombate, Bigbuzzy и многие другие. Впечатляющий список – и это несмотря на то, что с акциями и скидками по умолчанию ассоциируется совсем другой цвет.
Идеальным для повышения конверсии магазина большинство дизайнеров признает оранжевый, в результате чего по профессиональным медиа-сообществам и форумам даже распространился миф о большой оранжевой кнопке как лучшем захватчике внимания. Водрузив оранжевый на пьедестал, дизайнеры водят вокруг него хоровод и находят все новые ракурсы для рассмотрения. Действительно, оранжевый ассоциируется с энергией и творчеством – с одной стороны, стойкостью и решительностью – с другой, а также дружелюбием – с третьей. К тому же цвет этот занимает промежуточное положение между агрессивным красным и осторожным желтым цветами. Разве не довод, чтобы испробовать оранжевый призыв к действию на вашем сайте?
Желтый наступает на пяты лидеру и, безусловно, производит тот же эффект – стимулирует к действию. Этот цвет ассоциируется с интеллектом, развлечением, живостью; он выделяется на общем фоне, не вызывая тревоги, и дает ощущение счастья. Отличный цвет для кнопок отправки форм и подписки на рассылку по электронной почте.
Однако самым противоречивым из всех цветов был, есть и остается красный. Приведем лишь несколько примеров для подтверждения. Чтобы оценить кликабельность CTA-элементов на сайте Live Casino, тестировщики просто изменяли их цвета: красный, серый, черный, синий, фиолетовый, желтый, зеленый… Именно последний пробился в лидеры, увеличив кликабельность на 43%.
В то же время кнопки красного цвета показали наихудший результат – 29%:
И таких результатов сплит-тестирования вы обнаружите множество. Вот почему маков цвет долгое время находился в тени «собратьев» и не использовался для создания CTA. Более того, ассоциируясь с тревогой, опасностью, вирусами и запрещающим сигналом светофора, красный цвет призыва к действию многими дизайнерами и проектировщиками веб-интерфейсов отрицался как таковой.
Тем большим было удивление тестировщиков, обнаруживших, что для сайта компании Performable красный – самый эффективный цвет. Именно он дал на 21% больше конверсии, чем внушающий спокойствие зеленый.
Почему сплит-тестирование показало такие результаты, сложно обосновать, и споры на этот счет до сих пор продолжаются… Однако прецедент остается.
К тому же, не будем забывать, что цвет CTA-элемента необходимо выбирать, исходя из предпочтений вашей целевой аудитории. Согласно сенсорному маркетингу, красный – это цвет лидерства. Его предпочитают люди активные и деятельные: спортсмены и политики, азартные игроки, карьеристы в любой сфере, а также подростки в период полового созревания.
Некрасивых нет, – не подумайте, что ваш покорный слуга Туманов является большим альтруистом, он всего лишь продолжает монолог о цвете в графическом дизайне. Так, есть оттенки не подходящие конкретно для вашей задачи. Поэтому прежде чем окрасить CTA-кнопку, вспомните: фиолетовый ассоциируется с богатством, роскошью и магией, однако может вводить в депрессивные состояния. Выполненный в розовой гамме призыв подойдет для сайтов женской и детской тематики, но при условии выделения на общем фоне. Элегантный черный используют для отправки товара в корзину владельцы элитных бутиков, а серый вызывает чувство серьезности и основательности, и потому незаменим на сайтах, которые продвигают товары или услуги, рассчитанные на консервативного покупателя.
Из всего сказанного выше можно сделать несколько выводов:
- Эффективные CTA-элементы могут быть любого цвета, но не все они одинаково сработают именно на вашем сайте.
- Выбирать цвет кнопки для сайта можно только эмпирическим путем, для чего настоятельно рекомендуем А/В-тестирование.
- Самое важное – не цвет, но хороший контраст с фоном, о чем и поговорим ниже.
Контраст СTA-элемента с фоном
Говоря о контрастных цветах, мы на самом деле имеем в виду комплементарные пары, а также триады на цветовом круге. Для тех, кто не знаком с теорией цвета, порекомендуем посмотреть цветовые «миксеры» – то есть программы, позволяющие грамотно подбирать и сочетать оттенки. На ваш вкус это может быть Adobe Kuler или Color Schemer – разобраться в во всех тонкостях колористики здесь не составит труда, а если знаете что-то более удобное – просьба посоветовать в комментариях.
На цветовом круге комплементарные цвета расположены друг напротив друга (см. изображение выше); и если разместить такие цвета рядом, то каждый из них будет казаться ярче. Подобный эффект создают голубой и оранжевый, красный и зеленый, желтый и фиолетовый и другие цветовые пары.
Ниже – отличный пример комплементарного дополнения. Оба CTA-элемента превосходно контрастируют с зеленым фоном, пропустить такие визуально выделенные призывы к действию будет сложно.
Аналогичный метод графического выделения используется и на социальной платформе для медицинских консультаций. За тем лишь исключением, что уже три цвета контрастируют друг с другом. Что важно, именно элемент призыва к действию должен быть теплого тона и контрастировать с холодным тоном фона – и здесь это правило соблюдено. Тепловой контраст настолько силен, что оранжевая CTA-кнопка буквально бросается в глаза даже на фоне достаточно активного и аляповатого изображения за заднем плане.
Одной лишь ремарки требует комплементарная пара красный-зеленый.
Как известно, самая распространенная форма дальтонизма – дейтеранопия. И заключается этот зрительный дефект именно в неразличении красного, желтого и зеленого цветов, которые просто сливаются воедино. В результате посетитель сайта с нарушенным цветовосприятием видит приблизительно следующее:
Вот почему не рекомендуется использовать красные кнопки на зеленом фоне или альтернативные элементы призыва к действию красного и зеленого цветов. В первом случае вы рискуете тем, что пользователь не заметит ваш призыв к действию, а во втором – не разберется в приоритетах и совершит менее желательный переход или действие.
CTA и белое пространство (пустота)
Самый простой прием, чтобы выделить кнопку призыва к действию – исключить все остальные объекты из поля зрения. Свободное пространство вокруг акцентирует внимание на CTA-элементе и подчеркивает его особый статус.
Идеальной в этом плане является целевая страница сервиса Dropbox: контрастная кнопка свободно «дышит» на белом фоне, приглушенное изображение слева не конкурирует за пользовательское внимание, и сразу понятно, какое действие необходимо совершить. К тому же лаконичный дизайн ассоциируется с простотой и удобством использования самого сервиса – и это отличный ход.
Другое преимущество использования свободного пространства – структуризация вашего контента. На сайте ниже вся информация собрана в небольшие визуальные блоки, удаленные от главного CTA-элемента.
Комплементарные синий и оранжевый отлично гармонируют и в то же время не перебивают друг друга, пустое пространство способствует осмысливанию контента. Образец простоты и ясности.
Белый фон – лежащее на поверхности фоновое решение. Однако достичь эффекта изоляции CTA-кнопки можно практически на любом фоне. Как уже упоминалось, хорошо обыгрывает «теплые» графические элементы фон холодных оттенков. И даже глубокий черный может дать отличную перспективу, смотрите:
Несмотря на достаточно тяжелую цветовую гамму, внимание пользователя не отягощено и фокусируется в трех визуальных центрах: логотип, собственно портфолио, кнопка призыва к действию. Классическое сочетание черного и красного на странице брендингового агентства выглядит сдержанно и стильно. Как бы поступили вы, оказавшись на данной странице? Мы презентацию скачали.
Так монохромное решение помогает правильно расставить акценты в веб-дизайне. Однако не обесцвечивание фона повышает конверсию, а его однородность. Для того чтобы убедиться в этом утверждении рассмотрим еще несколько примеров. Ниже – аналогичные сайты, продающие молодежные футболки.
Первые два слайда – от российского дизайнерского тандема Светланы Свиридовой и Дмитрия Черных.
Чтобы приобрести трикотажное изделие для интеллектуальной молодежи, требуется кликнуть на иконку одной из социальной сетей, где, в свою очередь, ознакомиться с информацией о торговом центре. Такой путь осилит читатель «идущий» – а точнее, терпеливый и зрячий.
В данном случае социальные кнопки для сайта – единственный используемый CTA-элемент. Их размещение в левом нижнем углу на пестром сером фоне существенно затрудняет восприятие. Для повышения конверсии стоит задуматься о редизайне. Как вариант – заменить или «подсветить» иконки vkontakte и facebook ярким однородным блоком.
Аналогичную ошибку видим и на страницах американского магазина одежды. CTA-элемент находится на оптимальном расстоянии от товара, но пестрый фон перебивает призыв. Внимание пользователя рассеивается – в таких «джунглях» заметить кнопку непросто.
Очевидно, «прикипев» к агрессивному тигровому фону, ребята все же нашли выход. Выделив CTA-кнопку плотным зеленым контуром, они добились необходимого контраста, что повлекло прирост конверсии на 6,3%.
Статистика эта вполне объяснима. Если в первом случае черная кнопка сливалась с другими элементами дизайна, то во втором – выглядит органично, но броско. Кроме того, оказывающий на пользователя давление текст был заменен на более нейтральный. И об этом .
А в завершение данной статьи в очередной раз снимем шляпу перед Стивом Джобсом. «Дизайн – это не то, как предмет выглядит, а то, как он работает», – безапелляционно утверждал IT-гений и явно имел для этого основания. Просто вспомните его слова, когда будете работать над графическим интерфейсом собственного сайта.
Как выглядит кнопка призыва к действию на вашем сайте? И знаете ли вы потенциал для увеличения конверсии в зависимости от манипуляций с цветом и пространством?
У какого цвета кнопки самая высокая конверсия - старый философский вопрос, на который многие знают ответ. «Красная» - ответят начинающие маркетологи. «Контрастная» - ответят опытные маркетологи. Мы протестировали 21 666 пользователей на эту тему. И пришли к довольно интересным выводам.
Вначале статьи надо добавить интриги и будоражащих фактов, чтобы привлечь внимание. Руководствуясь этим советом, могу сказать, что на практике мы получили увеличение конверсии до 65% при простой смене цвета кнопки. В этой статье расскажем о результатах и как это сделать.
Насколько можно повысить конверсию с помощью цвета?
Не буду рассказывать, что мы изобрели волшебную таблетку по управлению конверсией. В случаях увеличения конверсии я пришел к одному простому выводу. Стопроцентных утверждений, которые будут работать всегда и для всех - не существует. Волшебных таблеток тоже. Ранее мы писали о том, как в некоторых случаях слово «Бесплатно» понижает конверсию. Что уж говорить о других «стопроцентных» истинах.
Итак, насколько можно повысить конверсию, просто изменив цвета кнопки?
Мы получили до 65% повышения конверсии. 65% было самым максимальным результатом тестов. Среднее значение было на уровне 11%. Но даже такое повышение конверсии - очень хороший результат. Учитывая, что этого можно добиться с помощью изменения цвета кнопки.
Красный - цвет победителей
Многие тесты экспертов говорят, что кнопка красного цвета обладает самой высокой конверсией. Почему? Мы знаем, что каждый цвет обладает своими ассоциациями и вызывает определенные эмоции. Красный цвет подразумевает остановку, опасность и страстность. И в большинстве случаев (как считается) он приводит к лучшим результатам в интернет-маркетинге.
Ниже алгоритм создаия А/Б тестов:
- Создать виджет в конструкторе. Занимает 5 минут.
- Скопировать его и внести изменения для теста. Занимает 1 минуту.
- Создать А/Б тест и выбрать данные виджеты. Занимает 1 минуту.
1. Создание виджета в конструкторе
Для создания виджета вы должны быть зарегистрированы в конструкторе .
Процесс создания состоит из 3-х шагов:
- Выбрать шаблон виджета, который вы будете использовать.
- Отредактировать виджет:- написать нужный текст- поменять цвет и загрузить изображение, в случае необходимости
- Выбрать настройки показа:- когда показывать виджет (по времени, при уходе, при пролистывании страницы и тд)- на каких устройствах (компьютер, мобильный, планшет)- что делать после конверсии (сказать спасибо, перенаправить по ссылке или просто закрыть виджет)
Вы можете посмотреть данное видео по созданию виджета. Здесь подробно разбирается каждый этап. Текстовая инструкция по созданию виджета находится .
Хочу отметить, что возможностей настроек в конструкторе гораздо больше. Например, показ при просмотре определенного количества страниц, по дням недели, по источнику переходу, частоте показа и многое другое. Но вначале советую использовать основные настройки, а потом экспериментировать с дополнительными.
2. Копирование виджета и внесение изменений для теста
После того, как вы создадите виджет надо сделать его копию. Чтобы внести в новый виджет изменения и поставить в А/Б тест. Для этого вы кликаете на иконку «Копировать» в созданном виджете.
Он автоматически включается на сайте. Сейчас надо его выключить, так как он не отредактирован. Для этого измените статус.
Теперь перейдите в его настройки, нажав иконку «В редактор».
Здесь измените желаемый элемент, который вы хотите протестировать. Например, давайте поменяем цвет кнопки. Это делается в один клик. Надо просто выбрать другой цвет кнопки.
Кликните на «Цвет кнопки» и выберите нужный.
После этого сохраняем виджет. На 4-ом шаге можно ничего не менять, чтобы оставить настройки прошлого виджета. Для этого просто нажмите кнопку «Сохранить».
Теперь у вас создано 2 виджета с разным цветом кнопок. Можно переходить к созданию А/Б теста. Для удобства осталось только поменять название во втором виджете.
3. Создание А/Б теста
Для создания теста надо зайти в меню «А/Б тесты». И нажать на кнопку «Создать тест».
Здесь надо:
Выбрать сайт- написать название теста
Выбрать тип теста
Касательно типа теста. В KEPLER LEADS есть 2 разных типа А/Б теста: Классический и Индивидуальный. Различие - в показе виджетов вернувшимся посетителям. Если вы хотите вернувшемуся посетителю показывать новый вариант виджета, выберите Классический тест. Если хотите, чтобы вернувшемуся пользователю не показывался другой вариант виджета (запоминается первый показанный и всегда срабатывает только он, в зависимости от настроек показа), тогда выберите Индивидуальный.
Выбрав тип теста, нажмите кнопку «Добавить». Останется последний шаг - выбрать виджеты для теста. Для этого надо кликнуть на ячейку «Виджеты» и выбрать их.
Выбрав виджеты, проверьте все ли они активные. Если есть неактивные виджеты, то вы можете включить их прямо здесь.
Все! Тест создан. Все результаты вы можете посмотреть в статистике теста. Для этого кликните справа от названия теста на иконку «Просмотр». Рекомендует проводить тесты на общем трафике от 1000 показов (это видно в столбце «Просмотры»). После этого принимать решение о запуске следующей теста.
Заключение
Ваша работа на этом не заканчивается. Теперь надо отслеживать результаты, и после достижения значительных данных (мы рекомендуем от 1000 посетителй) тестировать другие гипотезы. Это могут быть заголовки, тексты призыва к действию, ценностные предложения, изображения и пр. О других А/Б тестах мы напишем в следующих статьях. Расскажите о своих результатах в комментариях.