Привет!

9 советов по дизайну CTA для повышения конверсий [digital note for ecommerce #52]

Валерия СластенниковаВалерия Сластенникова

Ваш призыв к действию (CTA) - финальная точка в интернет-магазине.
Но из-за этого небольшого элемента все может пойти наперекосяк. Как и при живых продажах, один неверный шаг и вы потеряете клиента навсегда.
Он должен быть как можно короче и четче. В статье поговорим о техниках, результатах UX исследований и практическом опыте, которые помогут при разработке CTA.

1. Заглушите остальные кнопки

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

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

Если есть контраст в яркости кнопок, то кликабельность более яркой будет выше, т.к. она выглядит привлекательней.

2. Объясните, что произойдет по клику

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

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

Что обычно нужно показать:

  • что произойдет после клика. Это форма подписки, прямая ссылка на загрузку, кнопка получения промокода. Не ответив на этот вопрос, вы вызовете подозрение и отказ.
  • почему нужно нажать на кнопку. Воспользуйтесь моментом, чтобы лаконично изложить все преимущества. Покажите основные ценности для клиента, если позволяет пространство, упомяните их страхи. Одно предложение “Мы не будем отсылать Вам спам” или “Если вам это не понравится, мы вернем деньги”, может совершить прорыв в конверсиях.

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

3. Подходящее место для CTA

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

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

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

Обычно центр - оптимальное расположение, если нет большого количества дополняющего контента.

Допустимо располагать CTA даже в левом углу. Для этого справа и по центру должно быть крупное доминирующее изображение.

Такая структура подталкивает пользователя к более детальному изучению текста. Но если слева оставить только CTA, а текст расположить справа, то кнопку будут игнорировать.

4. Не большой и не маленький

Призывы к действию должны быть большими, но не давящими.

Больше, не значит лучше. Объяснить это можно 3 факторами:

  • Чем больше кликабельная зона, тем меньше усилий нужно для того, чтобы начать с ней взаимодействовать.
  • Крупный размер ассоциируется с важностью. CTA кажется более важным и срочным, если он больше.
  • На крупные объекты обращают внимание в первую очередь. Размер играет важную роль в формировании визуальной иерархии. Сделайте призыв к действию достаточно большим, чтобы он был заметен, но не доминировал на всей странице.

Добейтесь правильного баланса в размере кнопки и помните, что всегда есть другие способы сделать ее более заметной (читайте далее в статье).

5. Контрастные цвета

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

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

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

6. Ограничение текста до 5 слов

...и лучше, если одно из них будет “бесплатно”.

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

Текст на кнопке ограничьте до 5 слов. Это не жесткое правило, эффективный призыв может состоять и из 6 и 7 слов, но в большинстве случаев 5 это предел.

7. Используйте четкий и решительный текст

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

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

Попробуйте добавить слово “сейчас” в конце. Это добавляет срочности и обладает силой внушения.

Простой пример: “Начните сейчас”.

8. Пустое пространство: получите все из ничего

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

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

9. Удалить альтернативы

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

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

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

  • У пользователя есть доверие к сайту.
  • CTA не требует многого. Например, регистрация или подписка на рассылку.

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

Экспериментируйте, анализируйте и пусть ваши конверсии растут.

9 Useful CTA Design Techniques to Improve Conversions