Расскажу о первых факторах которые, по моему мнению, влияют на эффективность 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 раза и больше. В любом случае, над ней стоит хорошенько поработать.Всем рабочих кнопок!
Зачастую важностью СТА-элементов пренебрегают. Дизайнеры не всегда понимают, что именно делает кнопку 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. Они регулярно тестируются и корректируются
Люди часто спрашивают: какой показатель считать хорошей конверсией?
Показатель хорошей конверсии - тот, который лучше предыдущего.
Единственный способ убедиться в том, что ваши призывы к действию максимально эффективны - регулярно их тестировать. Меняйте текст, размер, цвет, местоположение и стиль ваших кнопок. Даже незначительные перемены могут оказать большое влияние. А/В тестирование скажет вам, что работает лучше, тестирование поведения пользователей скажет почему.
«Реальное решение измеряется тем фактом, что вы предприняли новое действие. Если нет действий, вы по-настоящему не решили».
Тони Роббинс
Звучит убедительно, не правда ли?
Вспомните последний случай, когда вы покупали что-то в Интернете. Возможно, эта покупка была совершена при участии социальных сетей. Такой способ сегодня достаточно популярен, и маркетологи стараются изо всех сил обогащать контент в соцсетях, применять основы и укреплять «степень убедительности» разными способами.
Есть вероятность, что ваше решение об онлайн покупке было принято на основе призыва к действию, который оказал на вас влияние в виде маленькой кнопки, сопровождающей пост.
Всего лишь маленькая кнопка, но она могла стать причиной вашего решения, а также отличным инструментом для компании, стремящейся превратить вас в покупателя.
Так ли просто создать и грамотно разместить убедительный призыв к действию ? Почему некоторые яркие и крупные кнопки не получают доверия и не собирают клики, в то время как совсем неубедительные с первого взгляда призывы в соцсетях могут принести небывалые продажи?
В этой статье мы пытаемся определить, в чем сила и преимущества этого волшебного маркетингового инструмента, который может привлечь больше пользователей, увеличить продажи и привести потенциальных клиентов.
Однако начнем с самых основ…
Что такое СТА и что с этим делать
«Время действовать прямо сейчас. Никогда не поздно начать что-то».
Антуан де Сент Экзюпери
Призыв к действию или СТА (call to action) мотивирует читателей действовать. Такой призыв помогает им подключиться, скачать, купить, участвовать, записаться и предпринять множество других действий. Это своеобразный маркетинговый рычаг убеждения, который очень часто приносит положительные результаты брендам.
Чем отличаются СТА в соцсетях от других призывов к действию
Ничем. Или практически ничем. Чаще всего в социальных сетях вам нужно лишь «упаковать» ваш призыв в определенный шаблон, либо использовать свою фантазию для разработки нового. Самый популярный вид CTA в соцсетях – кнопка.
Где лучше всего располагать CTA в социальных сетях?
Это довольно дискуссионный вопрос, и он зависит от разных факторов (например, от длины текста или его темы). Чаще всего авторы добавляют его в конце постов или внутри изображений в социальных сетях. Призыв может отображаться как кнопка, текстовая ссылка или быть полностью картинкой.
Как СТА влияет на анализ постов
Почему важно добавлять призыв к действию в посты?
CTA помогает достичь 3 основные бизнес-цели:
- клики
- продажи
- вовлечение
Вы можете легко отслеживать посты с СТА с помощью аналитики KUKU.io.
Можно экспериментировать с формой кнопки и цветовыми решениями, это повысит конверсию. Пост может просто вызвать положительные эмоции и приятные комментарии, но призыв к действию поможет бизнесу достичь поставленных целей.
Как создать эффективный призыв к действию: основы
Сперва нужно четко понять к кому вы обращаетесь и к чему призываете.
Конечно, сначала в голове будет много неструктурированных мыслей: Какой призыв? К какому действию? Цели, мотивы, охват…
12 формул для создания эффективного CTA в социальных сетях
Создавайте или адаптируйте CTA для каждой социальной сети отдельно
Механизм работы соцсетей разный, особенно, если речь идет о CTA. Facebook предлагает использовать рекламные объявления с кнопками призыва к действию, которые можно кликать и отслеживать. В Instagram вы можете добавить свою собственную кнопку в конце спонсорского контента.
Предлагайте реальные ценности
Если вы хотите привлечь внимание читателей и заставить их предпринять определенные действия, вы должны предлагать что-то реально ценное. Думайте о серьёзных стимулах и о том, что действительно может принести пользу. Ваши читатели должны четко понимать, зачем им нужно ваше предложение.
Предлагайте бесплатный вариант
Чтобы убедить своих читателей действовать определенным образом (скачать книгу, подписаться на электронную почту, купить продукт и т. д.), — предложите бесплатную версию.
«Заполните форму подписки и получите бесплатный доступ к вебинару»
Кнопка: «Получить бесплатно»
Используйте слова призыва
Помните, что ваша основная цель — мотивировать читателей выполнить четкое действие. Вы можете подтолкнуть их к этому с помощью полезных глаголов действия. Проведите собственные исследования и создайте список таких глаголов. Избегайте неопределенные или непристойные слова, жаргон или просторечия.
Затрагивайте эмоции
В ваших призывах старайтесь приблизиться к чувствам и эмоциям читателей. Они не должны остаться равнодушными. Используйте яркие слова и призывы, протестируйте различные варианты. Даже небольшая кнопка поможет получить много подписчиков в Instagram, Facebook, Twitter и других социальных сетях.
Напомните об усталости
Людям свойственно разочаровываться во многих вопросах, и они определенно оценят решение своей проблемы, которая затрудняет путь к успеху.
«Вы устали от неэффективных диет? Купите наш новый протеиновый комплекс и создайте тело своей мечты за 3 месяца!»
Кнопка: «Купить сейчас»
Установите временные ограничения
Это сделает ваш призыв конкретным и понятным. Например, «Попробовать сейчас» выглядит более убедительно, чем просто «Пожалуйста, попробуйте».
Упрощайте
Чем проще и понятнее ваш текст CTA, тем быстрее он достигнет получателей. Читатель не должен совершать много мыслительных процессов и логических задач, чтобы понять ваше предложение. Прочитав текст один раз, получатели сообщения должны понимать, что им нужно сделать и сделать это.
Обращайтесь к конкретному получателю сообщения
Обращаясь напрямую к конкретному читателю, вы вызываете доверие и склоняете к действию. Читателям важно почувствовать, что вы о них заботитесь.
Используйте слова «вы», «ваши», «вам» и т.д., чтобы добавить близости взаимодействию. Например, «Попробуйте ваш бесплатный сет».
Вовлекайте
Предложите продолжить коммуникацию и узнать больше.
Напомните опыт знаменитостей
«Почему Мадонна пользуется нашей косметикой»
Кнопка «Хочу попробовать».
- Тестируйте различные CTA
Не забудьте отслеживать результаты СТА. Вы можете определить, какие посты с мотивацией работают лучше, а какие кнопки или ссылки не привлекают внимания. Адаптируйте, перемещайте и «полируйте» их до идеального состояния. Этот анализ позволит вам искать варианты и оптимизировать кнопки СТА. Помните, что вы легко можете использовать аналитические инструменты таких сервисов, как Buffer или KUKU.io для отслеживания результатов публикаций с помощью полезных метрик.
Теперь у вас не должно возникнуть проблем с созданием эффективных призывов к действию.
Используйте приведенные выше формулы и преимущества ваших предложений. И, конечно же, обязательно пропускайте все через призму клиентов, учитывая их желания и представляя себя на их месте. Обращайте внимание на дизайн кнопок, цветовые решения и размер шрифта. Удачных вам call to action!
Обсудим «насущные» вопросы про кнопки оформления заказа в интернет-магазине.
Что лучше писать на кнопке «Купить»?
Совет, который сэкономит вам массу времени — не заморачивайтесь. Если 4-5 лет назад еще было сколько-то важно, что написано на этой кнопке, то сейчас вы можете на ней вообще ничего не писать, только показать пиктограммку с корзиной и этого будет достаточно.
Большинство людей уже давно в интернете. Они понимают что «Купить» их ни к чему не обязывает, а «Положить в корзину» не имеет отношения к мусорной корзине. Они знают, что при клике на «купить» с их карты деньги автоматически не спишутся, а при «положить в корзину» товар не исчезнет навсегда. Поэтому не нужно терять время и задаваться вопросом, даже самый правильный ответ на который ничего существенно у не улучшит у вас в магазине.
Тем не менее, если вы хотите поговорить об этом, давайте достанем из дальнего ящика здравый смысл, расчехлим логику и попробуем разобраться.
Логично было бы в карточке товара на кнопке покупки писать текст «Купить», если после нажатия, товар добавляется в корзину, а пользователь сразу отправляется на страницу с оформлением заказа. То есть в случаях, когда в интернет-магазине редко приобретают более одного товара.
Есть мнение, что кнопка «Купить» менее конверсионная чем кнопка «Добавить в корзину», поскольку «Купить» — это уже принятое решение, а «Добавить в корзину» — пока еще только процесс, не требующий решения прямо сейчас. Спорить нет смысла, возможно, это так. Но нужно определиться, что считать в данном случае конверсией. Если добавление товара в корзину - это желанная конверсия, то кнопку нужно называть именно так, но потом не удивляться брошенным корзинам. Если за конверсию считать оформленный заказ, то не нужно бояться писать «Купить».
Кнопка «Добавить в корзину» по смыслу подразумевает покупку нескольких товаров, когда они сначала все добавляются в корзину и уже там оформляется заказ.
Можно писать просто «В корзину», убрав слово «добавить». Найдутся противники такого упрощения, скажут, что без глагола хуже call to action (призыв к действию). Выбор за вами.
Кнопка «Заказать», не будет вызывать вопросов, если в интернет-магазине товары есть как в наличии, так и под заказ. Тогда на товарах «в наличии», ставим кнопку «Купить», а на тех что только под заказ — «Заказать».
Еще эта кнопка подойдет для сайтов заказа еды. Раз уж принято говорить «давай закажем пиццу» то на соответствующем сайте вполне можно использовать кнопку «Заказать» вместо «Купить». Но и кнопки «Купить» и «В корзину» тоже будут работать не хуже.
Не парьтесь слишком сильно, что и в каких случаях писать на кнопке покупки. Не слушайте экспертов, которые, чтобы у них лучше покупали консультации и курсы, раздувают значимость каждой мелочи.
Давно прошли те времена, когда покупка в интернет-магазине казалась чем-то опасным. Возможно, где-то в лесах Сибири есть племена диких юзеров и им кликать «Купить», психологически сложнее чем «Добавить в корзину», но наукой это не доказано, а единичные случаи, описанные в интернете, не вызывают доверия.
Рекомендую прочитать статью про автоматическую оптимизацию карточек товара в зависимости от определенных событий. В ней в частности говорится об изменении текста на кнопке, в зависимости от этих событий.
«Положить в корзину», «Добавить в корзину», «Отправить в корзину», просто «В корзину», «Купить», «Заказать» — один хрен (растение семейства Капустные).
С текстом кнопки разобрались, переходим к цвету.
Идеальный цвет кнопки «Купить»
Если погуглить, можно найти результаты А-Б тестов, в которых авторы утверждают что зеленые кнопки работают лучше, оранжевые тоже гуд, а красные кнопки — зло. Погуглив еще немного можно найти противоположные точки зрения. Не нужно брать на веру эти утверждения и бездумно перекрашивать кнопки.
Можно пойти еще дальше и начать тестировать не только цвет но и текстуру кнопок. Кнопки под дерево — лучше продают натуральные продукты, чем блестящие пластмассовые. Брутальные металлические кнопки хорошо подходят для мужских товаров, а мягкие розовые кнопочки на 5% чаще кликают няшные тян.
Тестировать цвет кнопки применительно к целевой аудитории — такой же бред как тестировать текстуру кнопки.
Как вы думаете, много ваших потенциальных клиентов не заметят синюю кнопку «В корзину» на белом фоне? А если вы сделаете ее зеленой, сколько из тех кто не купили с синей кнопкой подумают:
«О! У этих парней кнопка зеленого цвета, я чувствую спокойствие, зеленый цвет мне сигнализирует, что покупать у них безопасно».
Вы всерьез считаете что цвет кнопки «Купить» — это единственная последняя преграда, которая мешает посетителям сделать покупку? Исправьте сначала другие важные проблемы , а потом приступайте к таким мелочам. Я писал об этом в статья про неверные приоритеты при работе с магазином . Прочитайте, вдруг там ваш случай.
Если посетитель пришел к вам в интернет-магазин с намерением купить (а не позырить описания новых гаджетов или фотки клёвых девчонок в бикини — зависит от товара), при этом его устроит цена, сроки доставки, ваш магазин не покажется ему лохотроном, менеджер будет в онлайне и сможет ответить нормально на все вопросы — то клиент купит, независимо от цвета кнопки.
Белая кнопка с белым текстом на белом фоне — работает хуже чем кнопка любого цвета, контрастного с фоном — к гадалке не ходи (хоть тестируй, хоть нет). :-)
Если серьезно, то красная кнопка будет работать хуже, когда рядом с ней есть зеленая кнопка. Думаю, не надо объяснять почему.
Пример двух кнопок рядом. Красной и зеленой. На какую бы вы нажали не задумываясь?
То же самое, если одна кнопка, например, красная, а другая рядом серая и называние кнопки написано серым - серая будет выглядеть как «Disable» — неактивная, неработающая, соответственно кликать на нее будут меньше.
Пример серой кнопки. Стали бы вы на нее нажимать?
К слову, серые кнопки с серым текстом — частый косяк интернет-магазинов. К счастью основную кнопку «купить» обычно такой не делают, но вспомогательные кнопки («В избранное», «Быстрый заказ», «Сравнить») — очень часто. Дизайнер старается сделать красиво, правильно расставить акценты, но забывает про стандарт к которому все привыкли, работая с ОС — серые кнопки с серым текстом (равно как чекбоксы и радиобоксы)— это элементы недоступные для нажатия и выбора.
Некоторые животные притворяются мертвыми, чтобы их не заметили и не съели. Точно так же серые кнопки с серым текстом притворяются неактивными, чтобы по ним никто не кликал.
Если хотите чтобы кнопки кликали, не делайте таких кнопок в интернет-магазине:
Недоступная для нажатия кнопка в ОС, к которой все привыкли
Если кнопка «Купить» достаточно большая и контрастная, то ее цвет почти не важен. Почти потому что есть исключения, два таких я привел выше. Наверняка можно привести еще.
Поэтому когда магазины проводят А-Б тестирование у них получаются разные результаты. У одних лучше жмут красную кнопку, у других зеленую и т. д. Дело не в продаваемом товаре, не в аудитории, а в дизайне магазина и контексте вокруг кнопки.
Когда нужна кнопка «Заказ в один клик» или «Быстрый заказ»?
Стоит ли делать такую кнопку? Кнопка полезная, делать стоит. Но, как и во многих других делах, тут тоже есть свои нюансы (анекдот про нюанс найдите сами).
Покупка в один клик нужна, если заказы часто содержат не больше одного товара или товары достаточно дорогие.
А вот если в заказе обычно больше одного товара, то эту кнопку можно не делать. Если акцент на нее в дизайне будет выше, чем на основную, этот функционал может сократить среднюю сумму чека (поскольку «Заказ в один клик» подразумевает оформление заказа, а не отправку товара в корзину) и усложнит работу менеджеров — им придется больше времени проводить на телефоне, уточняя данные покупателя.
Поэтому, если быстрый заказ хочется реализовать и не получить с ним лишних сложностей, нужно не забыть в дизайне сайта расставить акценты таким образом, чтобы в приоритете была основная кнопка «В корзину», а «Заказать в 1 клик» была менее заметной.
Частая ошибка в работе кнопки «Заказать в один клик» - заказ, оформленный через такую кнопку падает не в общий список заказов, принятый через корзину, а в другой список или на почту менеджеру. Фактически эта кнопка работает как «Получить обратный звонок», что неверно.
Допускается эта ошибка обычно по простой причине — в быстром заказе недостаточно данных для автоматического создания полноценного заказа, поэтому их складывают в инфоблок или просто отправляют на емейл менеджеру.Все заказы, независимо от того как они получены, должны падать в общий список. Это упрощает работу, не создает лишних шагов в бизнес-процессах магазина.
Другой частый косяк — заставлять пользователя вводить имя и телефон каждый раз при нажатии на кнопку «Быстрый заказ». Если пользователь авторизован, или уже вводил свои имя и телефон, не заставляйте его снова их указывать — подставляйте автоматически. Покупателю останется только нажать кнопку «Оформить заказ». К слову, «быстрые заказы» от одного пользователя можно склеивать в один. Если реализовать такую склейку это отчасти решит проблему с заказами от одного пользователя, который хочет купить несколько товаров, но почему-то оформляет заказ не через корзину, а через кнопку «Купить в один клик».
Когда кнопка «В корзину» нужна только на карточке товара, а когда еще и в списке товаров?
Это еще один популярный вопрос про кнопку «купить» .Тут примерно так же как в случае с кнопкой «Быстрый заказ» — зависит от товаров, которые продает магазин. Если перед покупкой, у товара нужно выбирать несколько параметров, которые не получается выводить в списке товаров (размер, цвет, вес и т. п.), то кнопку «В корзину» в список товаров не добавляют.
Согласитесь, странно будет выглядеть, если кнопка «В корзину» будет в магазине одежды, а размер одежды и цвет выбрать будет нельзя. А если даже можно, то будет ли тут же возможность посмотреть таблицу соответствия европейских размеров российским и т. п. важную для выбора информацию?
Другое дело если магазин продает, например, бытовую химию. Эти товары покупают регулярно, часто характеристики покупателю уже известны, задача не выбирать, а найти нужное, накидать в корзину и быстро оформить заказ. Если сайт подразумевает такую схему покупок - то кнопку «В корзину» в списке товаров предусмотреть очень желательно. При этом конечно, нужно давать в этом же списке, над кнопкой «В корзину» возможность выбирать нужные параметры товара. В случае с бытовой химией, это может быть вес, штуки, запах и т. п.
Кнопка «Оформления заказа» в корзине
Раз начали про главные кнопки интернет-магазина, давайте затронем и корзину.
В интернет-магазинах корзин часто две. Малая, которая располагается обычно в правом верхнем углу, служит больше для информирования о заполненности корзины и основная корзина, где и происходит оформление заказа.
Так вот, желательно чтобы в малой корзине, кнопка перехода в большую корзину не называлась так же как кнопка на карточке товара. Это может вызвать небольшую, но ненужную путаницу. То есть если в карточке товара у вас кнопка называется «В корзину» то в малой корзине кнопка не должна называться так же.
Разные по функционалу кнопки называются одинаково — это неправильно.
В большой корзине все просто. Если она у вас пошаговая, т. е. оформление заказа разбито на несколько небольших шагов, то надпись на кнопке перехода к следующему шагу должна информировать о том что будет дальше. Пример, корзина разбита на 5 шагов:
Такие пошаговые корзины в современных магазинах редкость, но все еще встречаются и вполне неплохо работали и работают.
Сейчас корзина обычно состоит всего из одной страницы, на которой и список товаров в корзине, и поля для оформления заказа. Например, в стандартной реализации магазина в 1С-Битрикс сделано именно так.
Правило здесь то же, что и в примере выше. Надпись на кнопке должна сообщать о действии, которое будет совершено по ее нажатии. Если вдруг у вас каждая кнопка называется «Далее», то под ней обязательно должна быть подсказка, куда эта кнопка ведет.
Если в магазине одностраничная корзина, то кнопка в ней должна называться или «Отправить заказ», (если у вас есть промежуточная страница Thank you page) или «Перейти к оплате», если нет Thank you page.
Кнопка «Добавить драматизма»
Конечно баян, но если вы не видели то будет интересно.
У какого цвета кнопки самая высокая конверсия - старый философский вопрос, на который многие знают ответ. «Красная» - ответят начинающие маркетологи. «Контрастная» - ответят опытные маркетологи. Мы протестировали 21 666 пользователей на эту тему. И пришли к довольно интересным выводам.
Вначале статьи надо добавить интриги и будоражащих фактов, чтобы привлечь внимание. Руководствуясь этим советом, могу сказать, что на практике мы получили увеличение конверсии до 65% при простой смене цвета кнопки. В этой статье расскажем о результатах и как это сделать.
Насколько можно повысить конверсию с помощью цвета?
Не буду рассказывать, что мы изобрели волшебную таблетку по управлению конверсией. В случаях увеличения конверсии я пришел к одному простому выводу. Стопроцентных утверждений, которые будут работать всегда и для всех - не существует. Волшебных таблеток тоже. Ранее мы писали о том, как в некоторых случаях слово «Бесплатно» понижает конверсию. Что уж говорить о других «стопроцентных» истинах.
Итак, насколько можно повысить конверсию, просто изменив цвета кнопки?
Мы получили до 65% повышения конверсии. 65% было самым максимальным результатом тестов. Среднее значение было на уровне 11%. Но даже такое повышение конверсии - очень хороший результат. Учитывая, что этого можно добиться с помощью изменения цвета кнопки.
Красный - цвет победителей
Многие тесты экспертов говорят, что кнопка красного цвета обладает самой высокой конверсией. Почему? Мы знаем, что каждый цвет обладает своими ассоциациями и вызывает определенные эмоции. Красный цвет подразумевает остановку, опасность и страстность. И в большинстве случаев (как считается) он приводит к лучшим результатам в интернет-маркетинге.
Ниже алгоритм создаия А/Б тестов:
- Создать виджет в конструкторе. Занимает 5 минут.
- Скопировать его и внести изменения для теста. Занимает 1 минуту.
- Создать А/Б тест и выбрать данные виджеты. Занимает 1 минуту.
1. Создание виджета в конструкторе
Для создания виджета вы должны быть зарегистрированы в конструкторе .
Процесс создания состоит из 3-х шагов:
- Выбрать шаблон виджета, который вы будете использовать.
- Отредактировать виджет:- написать нужный текст- поменять цвет и загрузить изображение, в случае необходимости
- Выбрать настройки показа:- когда показывать виджет (по времени, при уходе, при пролистывании страницы и тд)- на каких устройствах (компьютер, мобильный, планшет)- что делать после конверсии (сказать спасибо, перенаправить по ссылке или просто закрыть виджет)
Вы можете посмотреть данное видео по созданию виджета. Здесь подробно разбирается каждый этап. Текстовая инструкция по созданию виджета находится .
Хочу отметить, что возможностей настроек в конструкторе гораздо больше. Например, показ при просмотре определенного количества страниц, по дням недели, по источнику переходу, частоте показа и многое другое. Но вначале советую использовать основные настройки, а потом экспериментировать с дополнительными.
2. Копирование виджета и внесение изменений для теста
После того, как вы создадите виджет надо сделать его копию. Чтобы внести в новый виджет изменения и поставить в А/Б тест. Для этого вы кликаете на иконку «Копировать» в созданном виджете.
Он автоматически включается на сайте. Сейчас надо его выключить, так как он не отредактирован. Для этого измените статус.
Теперь перейдите в его настройки, нажав иконку «В редактор».
Здесь измените желаемый элемент, который вы хотите протестировать. Например, давайте поменяем цвет кнопки. Это делается в один клик. Надо просто выбрать другой цвет кнопки.
Кликните на «Цвет кнопки» и выберите нужный.
После этого сохраняем виджет. На 4-ом шаге можно ничего не менять, чтобы оставить настройки прошлого виджета. Для этого просто нажмите кнопку «Сохранить».
Теперь у вас создано 2 виджета с разным цветом кнопок. Можно переходить к созданию А/Б теста. Для удобства осталось только поменять название во втором виджете.
3. Создание А/Б теста
Для создания теста надо зайти в меню «А/Б тесты». И нажать на кнопку «Создать тест».
Здесь надо:
Выбрать сайт- написать название теста
Выбрать тип теста
Касательно типа теста. В KEPLER LEADS есть 2 разных типа А/Б теста: Классический и Индивидуальный. Различие - в показе виджетов вернувшимся посетителям. Если вы хотите вернувшемуся посетителю показывать новый вариант виджета, выберите Классический тест. Если хотите, чтобы вернувшемуся пользователю не показывался другой вариант виджета (запоминается первый показанный и всегда срабатывает только он, в зависимости от настроек показа), тогда выберите Индивидуальный.
Выбрав тип теста, нажмите кнопку «Добавить». Останется последний шаг - выбрать виджеты для теста. Для этого надо кликнуть на ячейку «Виджеты» и выбрать их.
Выбрав виджеты, проверьте все ли они активные. Если есть неактивные виджеты, то вы можете включить их прямо здесь.
Все! Тест создан. Все результаты вы можете посмотреть в статистике теста. Для этого кликните справа от названия теста на иконку «Просмотр». Рекомендует проводить тесты на общем трафике от 1000 показов (это видно в столбце «Просмотры»). После этого принимать решение о запуске следующей теста.
Заключение
Ваша работа на этом не заканчивается. Теперь надо отслеживать результаты, и после достижения значительных данных (мы рекомендуем от 1000 посетителй) тестировать другие гипотезы. Это могут быть заголовки, тексты призыва к действию, ценностные предложения, изображения и пр. О других А/Б тестах мы напишем в следующих статьях. Расскажите о своих результатах в комментариях.
