Кол ту экшн в верху страницы. Про главные кнопки в интернет-магазине

Не всегда кнопке с призывом к действию уделяется достаточное внимание. К примеру, дизайнер может смотреть на нее с позиции эстетики и соответствия оформлению. Но кнопка call-to-action слишком значима, чтобы не рассматривать влияние разных деталей на конверсию. Важно представлять какие цвета / формы / размеры / стиль обеспечивают нормальный CTR кнопки.

Прежде чем разбирать все Call to Actions

1. Триггеры создающие доверие

Призывы к совершению действия хорошо работают с триггерами доверия. О главном в тезисах:

  • Доверие продает – на практике эта формула опирается на эмоции
  • Кнопка желаемого действия – это однозначный, ясный и побуждающий посыл. Чем меньше эмоциональная привязка, тем скорее кнопка несет лишь функциональное значение
  • Лаконичность заголовка о вашем бизнесе влияет на целевое действие. Упоминая бренд, сообщите главное преимущество – как в слогане: «Ralf Ringer – когда нигде не жмет»
  • Охват нескольких целевых запросов потребует усиления мотивации к действию. Например, правдиво обещающей «зацепкой» в лид-абзаце
  • Социальные подтверждения усиливают доверительный посыл на сайте с коммерческим предложением

Совмещение с доводами доступным языком. Пример сайта агентства, специализирующегося на маркетинге и консалтинге.

Доверительное отношение выстраивается многократным обращением к аудитории. Доступным языком объясняется: что в результате получите, сможете, будете знать. Целевое действие с призывом УЗНАТЬ РЕШЕНИЕ завершает важные страницы

Совмещение с социальными доказательствами. Callibri – российский сайт коллтрекинг-услуг и сервисов работы с клиентским потоком.

Соц. доказательства на главной странице и завершающий призыв «Тоже хочу попробовать»

Совмещение с тематической графикой. Сайт канадского медсервиса онлайн-консультаций. Иллюстрированным дизайном намного проще передать ощущение заботы о здоровье и внимания к клиенту.

Уникальное предложение предельно ясно расписано по шагам. Анимированная иллюстрация неоспоримого преимущества с заголовком огромными буквами: «Без очередей в поликлинике»

Тизер перед CTA-кнопкой должен затронуть воображение, разбудить интерес. Необходимое для конверсионного элемента свободное пространство «вырезано» из карточки

Преимущества мощного призыва

Почему мощный призыв побуждает? Для заинтересованной аудитории элемент сall-to-аction оказывается первым звеном на пути к цели. Поворотный момент: продолжить или воздержаться? У вас не единственного есть такое и в муках выбора пользователь или нет, ему требуется дополнительный стимул.

Мощный, удачно сформулированный призыв, побуждая к действию не оставляет сомнений. И в этом его главное преимущество. Вялые, неудачно заимствованные или недостаточно проработанные CTA не заставляют двигаться вперед. Правило без исключений:

Чтобы CTR (показатель кликабельности) вас радовал, призыв к действию должен сохранять целевого пользователя в зоне комфорта

1. Слово как триггер

Подходящая фраза в CTA-тексте кнопки служит эмоциональным якорем – акцентирует внимание, уменьшает раздумья и сомнения.

Персональный лендинг: эмоциональный призыв хорош при коротком цикле принятия решения

Положительное «ДА» в призыве, уже настраивает на позитивную волну. Ограниченная по времени акция «сегодня скидка…» – еще триггер. Использована триадная цветовая гармония. У основного CTA тройной контраст: текста, фона кнопки, подложки, узорчатого бэкграунда

2. Заветное «Бесплатно»

Пользователей Сети бесплатное интересует больше, чем премиум и профешнл. Всем знакомы фразы в призывах: «…Free 14-Day Trial», «…попробуйте бесплатно», «Начните сегодня…со скидкой». Раздающих что-то бесплатно чаще замечают, лучше запоминают, а поисковые системы ранжируют выше. С заветным словом обычно предлагают услугу на ограниченное время, пробное тестирование или бесплатный тариф.

Что такое СТА элемент? Call to action (СТА) - призыв к действию, побуждение пользователя сделать какой-то шаг (покупка, подписка, скачивание), задуманный разработчиком страницы. Графически такой призыв выделяется яркой кнопкой (чаще всего) с надписью-призывом: «купить сейчас», «скачать», «зарегистрироваться».

Иногда, нажав такую кнопку, мы переходим на другую страницу с подробным описанием товара или услуги. Тогда на кнопке будет уместна надпись «узнать больше», «узнать подробнее».

Внимание: СТА кнопка всегда должна быть в цветовой гамме дизайна всей страницы, должна сочетаться и иметь эстетический вид. НО выделяться.

Как выделить СТА кнопки

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

Надпись призыва "кричит" об экономии, которую можно получить при использовании данной программы. Буквенные символы такого же цвета, как и остальной текст.

Призыв на кнопке тесно связан с элементом о скидке. Вы видите предложение и тут же кнопка с возможностью использования этого предложения. Здесь кнопка - логическая точка.

Призывная кнопка носит обобщенный характер

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

Пример кнопки обобщенного типа рассмотрим на примере Internet Explorer.


Кнопка яркая, контуры четкие, форма прямоугольная. По цвету она сочетается с логотипом браузера.

На кнопке нет уточнений, общий призыв «Скачать». Но здесь это вполне уместно, так как бренд общеизвестен. Цвет призыва находится в контрасте с цветом кнопки, но в сочетании с текстом страницы.

Внимание: если скачивание программы платное, то возле кнопки будет уместным разместить условия использования. Как это сделал бренд Apple.


Изучив только кнопку, уже можно понять смысл предлагаемой услуги.

Размер кнопки достаточно большой, цветовая гамма отличается от остальной страницы. Цвет кнопки зеленый, это цвет доверия и спокойствия. Хороший психологический ход.

Призыв к действию очень четкий, на нем видны сразу же и экономические выгоды - “бесплатно”. Сразу же указан и язык программы.

Нахождение СТА кнопки вверху страницы

Рассмотрим на примерах от Google.

На обеих страницах призывные кнопки очень похожи, что не удивительно. Обе кнопки носят классический характер (тень, объемность). Кнопки расположены на островках такой же цветовой гаммы, с текстовым добавлением.
У Picasa на кнопке четкая надпись о том, что для скачивания предлагается последняя версия.

Как улучшить СТА элемент

Не забываем о том, что СТА элемент для лендинга самый важный. Она используется для сосредоточенности внимания пользователя, для конечного действия - покупки.

Если страница перегружена текстом и картинками, то кнопка на ней просто потеряется.

Есть определенные правила при создании СТА элемента:

1. Если это кнопка, то она должна быть похожа на кнопку.

2. Цвет должен быть ярким, но согласованным с общей гаммой.

3. Размер кнопки не должен быть маленьким.

4. Можно использовать такой элемент, как стрелки, которые указывают на кнопку, но не увлекайтесь.

5. Текстовый призыв должен быть продуманным.

6. Используйте контраст для СТА элемента.

7. Шрифт текста страницы и текста СТА элемента должен быть одинаковым.

8. Цветовое решение всей страницы должно включать в себя не более 4 цветов.

9. Тестируйте разные варианты элементов и выбирайте лучший.

Несмотря на то, что многие не знают этого, кнопки «призыв к действию» являются мощным инструментом маркетолога.

«Призыв к действию» – это слово или картинка, благодаря которым люди делают то, чего от них хотят владельцы сайта. То, как вы оформляете и размещаете их, является очень важным.

Неважно, хотите ли вы, чтобы люди подписались, скачали или же купили что-то, кнопка должна всегда выглядеть убедительно.

Изучение более 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% больше переходов, чем те, что размещены вверху страницы.

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

В целом, видное расположение вашего «призыва к действию» играет ключевую роль в количестве переходов по нему.

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

Всем рабочих кнопок!

Обсудим «насущные» вопросы про кнопки оформления заказа в интернет-магазине.

Что лучше писать на кнопке «Купить»?

Совет, который сэкономит вам массу времени — не заморачивайтесь. Если 4-5 лет назад еще было сколько-то важно, что написано на этой кнопке, то сейчас вы можете на ней вообще ничего не писать, только показать пиктограммку с корзиной и этого будет достаточно.

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

Тем не менее, если вы хотите поговорить об этом, давайте достанем из дальнего ящика здравый смысл, расчехлим логику и попробуем разобраться.

Логично было бы в карточке товара на кнопке покупки писать текст «Купить», если после нажатия, товар добавляется в корзину, а пользователь сразу отправляется на страницу с оформлением заказа. То есть в случаях, когда в интернет-магазине редко приобретают более одного товара.

Есть мнение, что кнопка «Купить» менее конверсионная чем кнопка «Добавить в корзину», поскольку «Купить» — это уже принятое решение, а «Добавить в корзину» — пока еще только процесс, не требующий решения прямо сейчас. Спорить нет смысла, возможно, это так. Но нужно определиться, что считать в данном случае конверсией. Если добавление товара в корзину - это желанная конверсия, то кнопку нужно называть именно так, но потом не удивляться брошенным корзинам. Если за конверсию считать оформленный заказ, то не нужно бояться писать «Купить».

Кнопка «Добавить в корзину» по смыслу подразумевает покупку нескольких товаров, когда они сначала все добавляются в корзину и уже там оформляется заказ.

Можно писать просто «В корзину», убрав слово «добавить». Найдутся противники такого упрощения, скажут, что без глагола хуже call to action (призыв к действию). Выбор за вами.

Кнопка «Заказать», не будет вызывать вопросов, если в интернет-магазине товары есть как в наличии, так и под заказ. Тогда на товарах «в наличии», ставим кнопку «Купить», а на тех что только под заказ — «Заказать».

Еще эта кнопка подойдет для сайтов заказа еды. Раз уж принято говорить «давай закажем пиццу» то на соответствующем сайте вполне можно использовать кнопку «Заказать» вместо «Купить». Но и кнопки «Купить» и «В корзину» тоже будут работать не хуже.

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

Давно прошли те времена, когда покупка в интернет-магазине казалась чем-то опасным. Возможно, где-то в лесах Сибири есть племена диких юзеров и им кликать «Купить», психологически сложнее чем «Добавить в корзину», но наукой это не доказано, а единичные случаи, описанные в интернете, не вызывают доверия.

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

«Положить в корзину», «Добавить в корзину», «Отправить в корзину», просто «В корзину», «Купить», «Заказать» — один хрен (растение семейства Капустные).

С текстом кнопки разобрались, переходим к цвету.

Идеальный цвет кнопки «Купить»

Если погуглить, можно найти результаты А-Б тестов, в которых авторы утверждают что зеленые кнопки работают лучше, оранжевые тоже гуд, а красные кнопки — зло. Погуглив еще немного можно найти противоположные точки зрения. Не нужно брать на веру эти утверждения и бездумно перекрашивать кнопки.

Можно пойти еще дальше и начать тестировать не только цвет но и текстуру кнопок. Кнопки под дерево — лучше продают натуральные продукты, чем блестящие пластмассовые. Брутальные металлические кнопки хорошо подходят для мужских товаров, а мягкие розовые кнопочки на 5% чаще кликают няшные тян.

Тестировать цвет кнопки применительно к целевой аудитории — такой же бред как тестировать текстуру кнопки.

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

«О! У этих парней кнопка зеленого цвета, я чувствую спокойствие, зеленый цвет мне сигнализирует, что покупать у них безопасно».

Вы всерьез считаете что цвет кнопки «Купить» — это единственная последняя преграда, которая мешает посетителям сделать покупку? Исправьте сначала другие важные проблемы , а потом приступайте к таким мелочам. Я писал об этом в статья про неверные приоритеты при работе с магазином . Прочитайте, вдруг там ваш случай.

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

Белая кнопка с белым текстом на белом фоне — работает хуже чем кнопка любого цвета, контрастного с фоном — к гадалке не ходи (хоть тестируй, хоть нет). :-)

Если серьезно, то красная кнопка будет работать хуже, когда рядом с ней есть зеленая кнопка. Думаю, не надо объяснять почему.

Пример двух кнопок рядом. Красной и зеленой. На какую бы вы нажали не задумываясь?

То же самое, если одна кнопка, например, красная, а другая рядом серая и называние кнопки написано серым - серая будет выглядеть как «Disable» — неактивная, неработающая, соответственно кликать на нее будут меньше.

Пример серой кнопки. Стали бы вы на нее нажимать?

К слову, серые кнопки с серым текстом — частый косяк интернет-магазинов. К счастью основную кнопку «купить» обычно такой не делают, но вспомогательные кнопки («В избранное», «Быстрый заказ», «Сравнить») — очень часто. Дизайнер старается сделать красиво, правильно расставить акценты, но забывает про стандарт к которому все привыкли, работая с ОС — серые кнопки с серым текстом (равно как чекбоксы и радиобоксы)— это элементы недоступные для нажатия и выбора.

Некоторые животные притворяются мертвыми, чтобы их не заметили и не съели. Точно так же серые кнопки с серым текстом притворяются неактивными, чтобы по ним никто не кликал.

Если хотите чтобы кнопки кликали, не делайте таких кнопок в интернет-магазине:

Недоступная для нажатия кнопка в ОС, к которой все привыкли

Если кнопка «Купить» достаточно большая и контрастная, то ее цвет почти не важен. Почти потому что есть исключения, два таких я привел выше. Наверняка можно привести еще.

Поэтому когда магазины проводят А-Б тестирование у них получаются разные результаты. У одних лучше жмут красную кнопку, у других зеленую и т. д. Дело не в продаваемом товаре, не в аудитории, а в дизайне магазина и контексте вокруг кнопки.

Когда нужна кнопка «Заказ в один клик» или «Быстрый заказ»?

Стоит ли делать такую кнопку? Кнопка полезная, делать стоит. Но, как и во многих других делах, тут тоже есть свои нюансы (анекдот про нюанс найдите сами).

Покупка в один клик нужна, если заказы часто содержат не больше одного товара или товары достаточно дорогие.

А вот если в заказе обычно больше одного товара, то эту кнопку можно не делать. Если акцент на нее в дизайне будет выше, чем на основную, этот функционал может сократить среднюю сумму чека (поскольку «Заказ в один клик» подразумевает оформление заказа, а не отправку товара в корзину) и усложнит работу менеджеров — им придется больше времени проводить на телефоне, уточняя данные покупателя.

Поэтому, если быстрый заказ хочется реализовать и не получить с ним лишних сложностей, нужно не забыть в дизайне сайта расставить акценты таким образом, чтобы в приоритете была основная кнопка «В корзину», а «Заказать в 1 клик» была менее заметной.

Частая ошибка в работе кнопки «Заказать в один клик» - заказ, оформленный через такую кнопку падает не в общий список заказов, принятый через корзину, а в другой список или на почту менеджеру. Фактически эта кнопка работает как «Получить обратный звонок», что неверно.

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

Другой частый косяк — заставлять пользователя вводить имя и телефон каждый раз при нажатии на кнопку «Быстрый заказ». Если пользователь авторизован, или уже вводил свои имя и телефон, не заставляйте его снова их указывать — подставляйте автоматически. Покупателю останется только нажать кнопку «Оформить заказ». К слову, «быстрые заказы» от одного пользователя можно склеивать в один. Если реализовать такую склейку это отчасти решит проблему с заказами от одного пользователя, который хочет купить несколько товаров, но почему-то оформляет заказ не через корзину, а через кнопку «Купить в один клик».

Когда кнопка «В корзину» нужна только на карточке товара, а когда еще и в списке товаров?

Это еще один популярный вопрос про кнопку «купить» .Тут примерно так же как в случае с кнопкой «Быстрый заказ» — зависит от товаров, которые продает магазин. Если перед покупкой, у товара нужно выбирать несколько параметров, которые не получается выводить в списке товаров (размер, цвет, вес и т. п.), то кнопку «В корзину» в список товаров не добавляют.

Согласитесь, странно будет выглядеть, если кнопка «В корзину» будет в магазине одежды, а размер одежды и цвет выбрать будет нельзя. А если даже можно, то будет ли тут же возможность посмотреть таблицу соответствия европейских размеров российским и т. п. важную для выбора информацию?

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

Кнопка «Оформления заказа» в корзине

Раз начали про главные кнопки интернет-магазина, давайте затронем и корзину.

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

Так вот, желательно чтобы в малой корзине, кнопка перехода в большую корзину не называлась так же как кнопка на карточке товара. Это может вызвать небольшую, но ненужную путаницу. То есть если в карточке товара у вас кнопка называется «В корзину» то в малой корзине кнопка не должна называться так же.

Разные по функционалу кнопки называются одинаково — это неправильно.

В большой корзине все просто. Если она у вас пошаговая, т. е. оформление заказа разбито на несколько небольших шагов, то надпись на кнопке перехода к следующему шагу должна информировать о том что будет дальше. Пример, корзина разбита на 5 шагов:

Такие пошаговые корзины в современных магазинах редкость, но все еще встречаются и вполне неплохо работали и работают.

Сейчас корзина обычно состоит всего из одной страницы, на которой и список товаров в корзине, и поля для оформления заказа. Например, в стандартной реализации магазина в 1С-Битрикс сделано именно так.

Правило здесь то же, что и в примере выше. Надпись на кнопке должна сообщать о действии, которое будет совершено по ее нажатии. Если вдруг у вас каждая кнопка называется «Далее», то под ней обязательно должна быть подсказка, куда эта кнопка ведет.

Если в магазине одностраничная корзина, то кнопка в ней должна называться или «Отправить заказ», (если у вас есть промежуточная страница Thank you page) или «Перейти к оплате», если нет Thank you page.

Кнопка «Добавить драматизма»

Конечно баян, но если вы не видели то будет интересно.