Кнопки лендинга

В 2017 году Dale Cudmore (Дейл Кадмор), контент-маркетолог и full stack разработчик, провёл исследование 90 конверсионных лендингов из рекламной ТОП-выдачи Adwords (Google). В исследование вошли digital-агентства, программное обеспечение, услуги, мероприятия и товарка. Одной из основных частей его анализа были кнопки.

Цвет кнопки

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

По данным исследования Дейла К. преимущественно использовался оранжевый цвет кнопок, голубой и синий, красный и зелёный. На другие цвета стоит тоже обратить внимание, в 2021 году белый и чёрный активно набирали популярность, особенно в минималистичном дизайне.

Цвет текста на кнопке

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

Цвет текста должен контрастировать с фоном кнопки, делать текст читаемым. Самая большая и частая ошибка — делать цвет текста похожим на фон кнопки, типо чтобы сочеталось лучше. В результате кнопка не читается и перестаёт быть кнопкой.

Как кнопка выделяется на фоне сайта

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

Отдельный наиболее редкий случай — когда кнопке отводится часть страницы, сама кнопка перестаёт быть кнопкой и превращается в своего рода баннер. Я настоятельно не рекомендую использовать такие кнопки на рекламном лендинге. С точки зрения UX/UI дизайна это самый сложный и рискованный вариант, далеко за гранью «безопасного решения».

Так как большинство сайтов имеют белый фон, то и по исследованию фон вокруг кнопок белый в подавляющем большинстве. Белый — самый популярный цвет шрифта

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

Количество слов на кнопке с призывом к действию

Как много слов должно быть на кнопке? Сколько можно добавить слов в кнопку? Если взглянуть на исследования ниже — вы увидите довольно интересную статистику. Максимум приходится на 3 слова, а если взять среднее значение, получится 3,441 (или от 3 до 4 слов).

Так как исследования проводились на английском языке, то в CTA-кнопках однозначно есть отличия от русского. В английском нормально ставить в кнопку призывы вида «Get it now», «Take full package». Т. е. в английских CTA можно встретить it, the, a, for и другие связующие, отсюда на мой взгляд слов больше.

В русскоязычных сайтах максимум сайтов сместится в сторону 2 слов, а средним показателем будет ± 2,6. То есть 2−3 слова в CTA-кнопке это норма. Более того, 2 слова в целом необходимы, об этом я писал в начале статьи:

• Получить (что?);

• Заказать (что?);

• Вызвать (кого?).

Оптимальное количество слов в кнопке — то, которое необходимо пользователю для понимания: «что произойдет по клику?».

Использование ЗАГЛАВНЫХ букв и высота кнопки

Стоит ли использовать заглавные буквы в кнопках? По данным исследования, это вряд ли как-то влияет на конверсию. Скорее на дизайн-концепцию. Единственное о чём важно помнить, это о читаемости. Если используете прописные буквы в кнопках, смотрите на межбуквенное расстояние. В большинстве гарнитур его необходимо увеличить (8−10%).  Высота кнопки не сильно влияет на коэффициент конверсии. Цвет гораздо важнее. Если бы шрифт и высота влияли на конверсию, на графике было бы видно, что высота кнопок сходится в более узком диапазоне.

Рекомендация:

• 16px шрифт для строчного набора

• 14px шрифт для прописных букв + до 10% увеличение межбуквенного расстояния

• 50−60px высота кнопки

Продающие слова на кнопках

Согласно исследованию самые популярные слова:

• Сейчас (22 / 90);

• Получить (21 / 90);

• Бесплатно (19 / 90).

Знаки препинания

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

На практике это бессмысленная затея, которая не влияет на конверсию или даже снижает её. В исследовании Д. Кадмора из 90 сайтов только в 11 были восклицательные знаки и в одном знак вопроса. Почему так?

В копирайтинге:

• Вопросы обычно задаются пассивным тоном;

• Запятые обычно обозначают много слов, перечисление;

• Знаки вопроса опускаются в заголовках, особенно в случае SEO-оптимизации;

• Большинство призывов к действию на лендинге должны быть короткими без запятых.