9 важных советов по дизайну CTA для кнопок, которые заставляют людей нажимать

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

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

Кнопки призыва к действию кажутся простыми. Но их легко испортить. Или совсем пропустить. Эти 9 советов по дизайну CTA обеспечат вам эту конверсию. Плюс много полезных примеров:

1. Сделайте так, чтобы ваша кнопка выглядела кликабельной
2. Будьте описательными с вашей копии
3. Размер и пространство должным образом
4. Подключиться от первого лица
5. Создайте срочность и используйте сильные глаголы
6. Попробуйте подзаголовок
7. Варианты A/B-тестирования
8. Обратите внимание на мобильную версию

Сделайте так, чтобы ваша кнопка CTA выглядела кликабельной

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

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

Единственный раз, когда этот дизайн обычно работает, — это дополнительная кнопка:

Источник: UX-движение.

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

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

Netflix использует свой фирменный красный цвет, чтобы привлечь ваше внимание. Почти как стоп-сигнал:

Он также может работать, чтобы иметь контрастный цвет, чтобы он выделялся. Подобно тому, что платформа электронной коммерции BigCommerce сделала здесь:

Это относится и к тексту в поле. Убедитесь, что он контрастирует, чтобы вы могли правильно прочитать его.

Градиенты также могут работать в рамках одной цветовой схемы бренда. Они придают вещам современный, более молодежный вид:

Источник: Понедельник

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

Будьте описательными с вашей копии

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

Обычно вы видите это в контактных формах и строках обновления состояния в социальных сетях. Подобно знаменитому Facebook «Что у тебя на уме?» или «Начать публикацию» в LinkedIn.

Микрокопия может помочь:

• Расскажите пользователям, что делать
• Сделать предложения
• Решайте проблемы
• Укажите контекст

Ваша копия кнопки CTA — еще один пример. И он должен точно сообщать людям, что они получат/что произойдет, когда они нажмут на него.

Раньше это была CTA-кнопка IMPACT. "Бесплатная загрузка". Не очень изобретательно, а?

Источник: ВОЗДЕЙСТВИЕ

Но сделав его более описательным, они увеличили конверсию на 78,5%. «Покажи мне, как привлечь больше клиентов» явно понравился больше:

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

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

Источник: КлиентБуст

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

Источник: Маркетинговые примеры

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

Правильный размер и использование пробелов

Дизайн кнопки CTA — это гораздо больше, чем просто цвет. Размер кнопки — еще одна маленькая деталь, которая может реально повлиять на рейтинг кликов. И белое пространство так же важно, как и сам текст.

Многое будет зависеть от вашего веб-дизайна. Негативное (белое) пространство привлекает внимание к определенным элементам на странице. Вам не нужна загроможденная домашняя страница. Должен быть очевидный путь, по которому должен следовать посетитель.

Airbnb — один из лучших примеров правильного использования отрицательного пространства. И контрастный цвет, чтобы сделать его более заметным:

У Buffer на главной странице немного больше, но они по-прежнему держат кнопку CTA рядом с основной копией. Плюс пример эффективного использования призрачных кнопок. Отсюда становится ясно, что делать дальше:

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

Если вы склонны к мигреням, отвернитесь сейчас. Вот пример того, как не надо:

Источник: Justinmind

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

В отличие от этого, что вы видите первым на целевой странице Spotify?

Огромная кнопка «Go Premium», верно? Вот как спроектировать четкий путь пользователя.

Наконец, есть ли что-то еще, что вы заметили в дизайне CTA для хороших примеров? Если вы посмотрите еще раз, вы увидите что-то общее, что есть у них всех.

Ученые обнаружили, что людям нравятся «формы с плавными изгибами, а не с острыми точками». Они более приятны для глаз и заставляют нас чувствовать себя спокойнее. Из-за этого наиболее эффективными кнопками призыва к действию являются прямоугольники с закругленными углами.

Источник: CleverTap

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

Подключиться от первого лица

Лучший дизайн CTA может быть одним изменением. Иногда одно слово.

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

Unbounce обнаружил, что изменение текста на их целевой странице с «Начать бесплатную 30-дневную пробную версию» на «Начать мою бесплатную 30-дневную пробную версию» увеличило рейтинг кликов на 90%.

Итак, почему это? Что ж, когда кто-то чувствует связь с продуктом, у него больше шансов совершить конверсию. Это дает тот личный контакт, не зная ничего о них.

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

Написание «мой» помогает пользователю визуализировать действие, которое он собирается предпринять. Это дает им контроль и (надеюсь) подталкивает их к принятию решений.

Кроме того, это может показать, что они получат немедленную ценность. Как на домашней странице Crazy Egg:

Источник: Сумасшедшее яйцо

1-800 Contacts — крупнейший в мире магазин контактных линз. Но они делают то же самое. Они следят за тем, чтобы их CTA-кнопки были нацелены только на одного человека:

Источник: 1-800 Контакты

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

Создайте ощущение срочности и используйте сильные глаголы

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

«Купить сейчас» — это классика. Но мы можем добиться большего успеха с нашим дизайном CTA.

Источник: GoSquared

Вы можете попробовать формулировку вроде:

• «Побалуй себя сегодня»
• «Разблокировать скидку сейчас»
• «Единоразовая бесплатная загрузка»

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

Вот несколько примеров того, что я имею в виду:

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

Вы тоже можете проявить творческий подход. Как и эта версия домашней страницы Huemor:

Источник: FastCapital360

Или старая целевая страница округа Гумбольдт, которая придает ей мистический оттенок:

Источник: ConEmprendimiento

Обсудите идеи с вашей командой. Как бы не смешно. Вы будете удивлены тем, что вы придумаете и в конечном итоге будете использовать. Но какую бы формулировку вы ни выбрали, не забудьте выполнить свое обещание на другом конце.

Попробуйте добавить подзаголовок рядом с кнопкой призыва к действию.

Иногда людям нужен небольшой толчок. И немного текста под кнопкой CTA может помочь. Это не обычный «подзаголовок». Но это самый простой способ описать это.

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

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

Источник: CoSchedule

CoSchedule понимает, что пользователи могут подумать, что это всего лишь бесплатная пробная версия. Так почему бы не? Это бесплатно навсегда», — поясняет.

Вы также можете использовать их, чтобы добавить некоторые социальные доказательства:

Источник: Базовый лагерь

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

Если у вас есть специальное предложение или дополнительная ценность, связанная с вашей услугой, используйте подзаголовок, чтобы выделить это:

Источник: Моз

Микротекст — это шанс заявить о себе своим брендом. Даже если это всего лишь одно предложение. Итак, не бойтесь быть немного дерзким, если это подходит:

Источник: КлиентБуст

Вы также можете точно указать, что произойдет после того, как люди нажмут. Скажи им:

• Что они получат (новые маркетинговые идеи)
• Сколько (17+)
• И почему их это должно волновать (они лучше, чем у вас)

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

Не забывайте об A/B-тестировании

Большинство инструментов CRO нацелены на улучшение пользовательского опыта (UX). Возможно, вы уже делаете это с основными частями своих веб-страниц. Но вы должны делать это и с мелкими элементами.

Amazon, как известно, придирчив к дизайну кнопок CTA. Особенно со сторонним использованием. Итак, убедитесь, что вы не нарушаете никаких правил со своими.

После этого небольшие изменения в дизайне кнопок могут иметь огромное значение. Итак, сравните различные типы кнопок CTA. Затем проведите A/B-тестирование вариантов:

• Цвет кнопки
• Копия призыва к действию
• Шрифт
• Размещение в дизайне страницы
• Всплывающие окна
• Контактные формы

Источник: Снов

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

Вы хотите узнать такие вещи, как:

1. С какими элементами они пытаются взаимодействовать
2. Откуда они
3. Путь пользователя/воронка покупок на вашем сайте
4. Мотивация людей быть там

Источник: ГИФИ

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

Обычно проще сравнить версии A и B с CTA-дизайном. Но вы можете увеличить это значение и попробовать многовариантное тестирование. Поначалу проще обычно лучше. Таким образом, у вас будет явный победитель.

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

Обратите внимание на мобильную версию

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

Все, что мы рассмотрели, становится более распространенным в вашей мобильной версии. Контрастные цвета должны выделяться больше:

Негативное пространство должно быть в приоритете:

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

Спасибо CleverTap за эту графику

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

Вывод

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

A/B-тестирование — единственный способ узнать. И для этого вам даже не нужен дорогой инструмент CRO. Просто отслеживайте свои конверсии. Изменить. И посмотрите, есть ли увеличение или уменьшение по сравнению с обычным числом.

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

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