Платформа

Кнопка, на которую нажмут: 5 дизайн-приемов по созданию CTA

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

1. Расположение

Уместно ли размещать СТА на первом экране? Ведь к этому моменту пользователь узнал еще не так много о компании, чтобы тут же сделать покупку. Верно. Но это не повод оставлять главную страницу вообще без призыва. Если кнопки «Купить»/«Заказать» здесь действительно неуместны, то, например, «Узнать больше»/«Скачать презентацию»/«Перейти в каталог» вполне оправданы. Главное, чтобы это никак не отвлекало пользователя от ключевого целевого действия на сайте, а лишь приближало к нему.

2. Форма и размер

Разумеется, как ключевая часть сайта, призыв к действию не должен теряться на странице. При этом важно, чтобы кнопка СТА не была Гулливером на фоне остальных элементов дизайна. Задача – не выделить СТА за счет размера, а не проиграть борьбу за внимание другому контенту. В мобильной версии сайта СТА должен быть таким, чтобы мимо него не промахивались пальцем, то есть не меньше, чем 44х44 пикселя.

Что касается формы, то вечной классикой, конечно же, считается продолговатый треугольник с прямыми или скругленными углами. Но это не значит, что другие формы – табу. Если это действительно уместно, you are welcome. Например, на сайте BoscoFresh используют круглые кнопки СТА, и это смотрится весьма неплохо, правда?

bosco-web-digital

3. Цвет

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

Кроме того, довольно эффективны так называемые «тактильные» кнопки, которым с помощью тени придали эффект выпуклости.

4. Содержание

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

Для этого нужно, чтобы:
— текст был небанальным, простого «Купить» уже недостаточно, лучше использовать фразы типа «Положить в корзину», «Стать меценатом», «Активировать свою скидку 50%»;
— текст интриговал (если это уместно), например, «Узнать размер своей скидки»;
— текст на кнопке не вводил в заблуждение (если это стандартная кнопка «Скачать», желательно добавить на нее еще и то, что именно будет скачано).

office-web-digital

5. Повторение

Конечно, одной кнопки СТА на весь сайт чаще всего недостаточно. При этом необязательно, чтобы она всегда была одинакова. Взгляните, как осторожно ребята из киевского проекта Campus использовали сразу три варианта кнопки СТА, каждая из которых ведет к одному и тому же результату – на финальную форму.

web-campus-digital

campus-web-digital-web

Похожие материалы:

Формула идеального Call to Action

Что такое UX-копирайтинг, зачем он нужен и где этому научиться?

Юзабилити-х**билити: 6 мифов, в которые до сих пор верят

Брошенная корзина: 4 железных способа вернуть покупателя

Тренды веб-дизайна 2020

Каким будет хороший сайт в 2020 году?

Поделиться
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)
Загрузка...