Сегодня мы поговорим о том, как разработать эффективные «продающие» кнопки для ваших лендингов.
Какая кнопка, на ваш взгляд, конвертится лучше?
Когда вы просите пользователей совершить какое-либо действие, например, скачать PDF, заполнить форму, совершить покупку или просто перейти на другую страницу, вы всегда делаете это посредством призыва к действию. Это ключевой момент, который определяет показатель отказов и конверсию на вашем сайте.
«Продающие» кнопки состоят из 2 элементов, непосредственно влияющих на конверсию: дизайн и текст.
Дизайн привлекает внимание потенциального покупателя. Другими словами, он информирует: «Где я должен кликнуть»? Текст на кнопке, мотивирует посетителя, отвечая на вопрос: «Почему я должен кликнуть»?
В этой статье, мы более подробно остановимся на дизайне.
Начнем с примера из практики. Речь идет о крупном интернет магазине, продающем вручную расписанный фарфор. Им удалось увеличить продажи на 35.81%, просто изменив цвет и размер «продающих» кнопок.
Этот пример характеризует то, как сильно влияет дизайн кнопок на конверсию. Если вы разрабатывали дизайн кнопок, не задумываясь об их потенциальной кликабельности, то вероятно, уже потеряли много денег.
Нет кнопки «Бабло», которая работает всегда.
Кнопки бывают самых разных размеров, форм и цветов и не существует решения, подходящего для всех случаев.
Существуют стереотипы вроде: «Не используете красный цвет, это стоп сигнал». Или «Зеленые кнопки самые лучшие»! На самом деле, такие обобщения редко отражают реальность. На картинке выше зеленые кнопки действительно работали лучше синих. Но это не означает, что так будет везде. Я видел много сайтов, где голубые или красные кнопки конвертились лучше.
Самое главное — ВЫДЕЛЯТЬСЯ.
Самое главное, чтобы кнопка сразу бросалась в глаза на странице сайта. Тогда, потенциальный клиент сможет ее легко найти. Если ваш лендинг оформлен в зеленом цвете, то зеленая кнопка точно не подойдет.
Единственный способ узнать, что работает конкретно на вашей целевой странице — опробовать различные варианты на ваших клиентах.
Существует миллион оттенков. Какой из них выбрать?
Мой совет — используйте здравый смысл и выбирайте контрастные цвета для кнопок. Есть очень простой тест. Отойдите на несколько шагов от экрана, скосите глаза и посмотрите, выделяется ли ваша кнопка.
Еще один пример из жизни. В этом случае удалось вдвое увеличить CTR, путем тотального редизайна кнопки из маленькой коричневой в большую оранжевую.
Если вы попробуете скосить глаза, то заметите, что последний вариант выделяется больше.
Я обычно начинаю свои эксперименты с зеленого или оранжевого цвета. Не ищите здесь глубокого психологического подтекста. Просто в дизайне большинства сайтов используется традиционная, нейтральная гамма, а зеленый или оранжевый более заметны. Опять же, все зависит от контекста. В некоторых случаях, фиолетовая кнопка оставит зеленую и оранжевую далеко позади.
Визуальные эффекты.
Визуальные эффекты стимулируют посетителей чаще нажимать на кнопку. Но будьте с ними осторожны. Даже минимальные манипуляции могут вызвать значительные изменения. Причем, не всегда в лучшую сторону.
Несмотря на позитивный эффект на конверсию, вариант с оранжевой кнопкой совсем не понравился их дизайнеру. Особое нарекание вызвала зеленая стрелка. По моему же мнению, она делала кнопку более заметной и кликабельной.
После долгих споров мы решили провести эксперимент. Простой A/B тест доказал, что кнопка без стрелки работала на 12.29% хуже.
Вот еще один пример с сайта по продаже б/у сотовых телефонов. Я предположил, что можно увеличить CTR сменив цвет текста на кнопке с черного на желтый. Это было ошибкой. CTR упал на 18,01%
Очень сложно предположить возможные последствия, без тестирования на практике. Я не против креатива, но считаю, что простые, традиционные варианты работают лучше.
В следующем примере обычная зеленая кнопка на 10.94% оказалась успешнее, чем ее нестандартная копия.
Размер имеет значение.
Ошибка многих дизайнеров в том, что их совершенные со всех точек зрения кнопки слишком маленькие. Важно, чтобы ваша кнопка была заметна на сайте. Но это не значит: чем больше, тем лучше.
Как раз в следующем примере, увеличение размера кнопки привело к плачевным результатам.
На мой взгляд, слишком большая кнопка «давила» на посетителей, вызывая в них внутренний протест.
Повторяю — не переусердствуйте с размером кнопок. Без тестирования здесь не обойтись.
Еще раз о тексте.
Дизайнеры любят повторять: «Никто не читает что написано на кнопках». Но это не так. У меня накопилось больше 30 примеров, опровергающих это утверждение. Текст на кнопках оказывает значительное влияние на конверсию и люди действительно его читают. Можете быть уверенным, что это самая читаемая часть страницы после заголовка.
Недавно мы проводили A/B тестирование лендига, целью которого было увеличить количество потенциальных клиентов, которые подписались на 30-дневную бесплатную пробную версию. Единственная вещь, которую мы сделали — изменили слово ваша» на «моя» в предложении «Загрузите вашу бесплатную версию». Это увеличило CTR на 90%
Во многих случаях, дизайнеры жертвуют текстом в пользу дизайна и функциональности. Но может не стоит бояться длинных призывов к действию, если такие кнопки приносят больше клиентов?
Более подробно про создание призывов к действию в видео.
Что мне теперь делать?
Откройте ваши лендинги и тщательно изучите кнопки. Легко ли их найти? Похожи ли они на кнопки? Может быть следует сменить цвет или добавить визуальных эффектов? В этом вам поможет специальный инструмент buttonoptimizer.com.
Я обычно начинаю свои эксперименты с зеленого или оранжевого цвета. Не ищите здесь глубокого психологического подтекста. Просто в дизайне большинства сайтов используется традиционная, нейтральная гамма, а зеленый или оранжевый более заметны. Опять же, все зависит от контекста. В некоторых случаях, фиолетовая кнопка оставит зеленую и оранжевую далеко позади.
Я думаю, что эти цвета спокойные, а вот если посмотреть на синюю кнопку, то она мне думается более агрессивная, призывает к действию?
А работать лучше всего будет именно тот цвет, который в каждом конкретном дизайне будет выделяться и привлекать к себе внимание, - это же очевидно.
Есть такая полезная штука как цветовой круг - показывает гармоничные сочетания цветов. Любой правильный треугольник, вписанный в цветовой круг, даст вам новый вариант для идеального сочетания цветов. Подробнее.
Наткнулась на интересное утверждение: обязательно используйте закругленные уголки, тени, блики и все остальное, что придает кнопке более реалистичный вид. Глядя на реалистичную кнопку, пользователь начинает чувствовать непреодолимый зуд в указательном пальце и не может от него избавиться, пока не нажмет.
. А блики меня наоборот настораживают.