Как всего за 5 шагов сделать кнопку призыва к действию, по которой обязательно будут переходить
logo

Как всего за 5 шагов сделать кнопку призыва к действию, по которой обязательно будут переходить

Ecommerce Дизайн Оптимизация сайта Увеличение посещаемости

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

Сделать кнопку призыва, на самом деле, несложно, если учитывать все нюансы. Рассмотрим их далее.

Создание кнопки призыва к действию — краткое руководство из 5 шагов

Шаг 1: Определиться с формой и размером

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

Вот такой пример был обнаружен в сети, найдите на нем кнопку:

Ответ: черное пятно в углу

Ниже приведен образец стилей кнопок. Они имеют узнаваемую форму и проще воспринимаются пользователями.

Учтите размер кнопок, к примеру, большая может быть 160x60 пикселей и 130x45 пикселей для мобильных устройств.

Шаг 2: Написать призыв к действию

Призыв — важная часть кнопки. Он должен направлять пользователя и подсказывать, что делать дальше. Написать одним словом “Заказать” или “Купить” — несложно, но уныло. Давайте разберем этот вопрос подробнее.

Как написать призыв к действию

Глагол действия + преимущество/срочность = призыв 

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

  • Купить

  • Получить

  • Подписаться

  • Связаться

  • Присоединиться

  • Заказать

  • Бронировать

  • Посмотреть

  • Зарегистрироваться

  • Начать

  • Посетить

  • Узнать

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

Преимущество: “заработать баллы”, “создать в один клик”, “получить бесплатный подарок”

Срочность: “купить сейчас”, “зарегистрируйся сегодня”

Шаг 3: Выбрать шрифт

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

Вот несколько  удачных шрифтов для кнопки:

Шаг 4: Залить цветом

Частый вопрос: какого цвета лучше сделать кнопку? Взгляните на картинку ниже. Другой цвет притягивает взгляд, не так ли?

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

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

При выборе цвета для текста отдайте предпочтение контрастным с фоном тонам.

Шаг 5: Финальные улучшения

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

Как установить кнопку на сайте

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

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

Вывод

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

 

Также использована информация: https://medium.com/master-your-website/design-call-to-action-button-c87446a65949

Вопросы по статье
У вас возникли вопросы по статье? Напиши нам и мы ответим на них
Подпишись. Интересные материалы не чаще раза в месяц