Кнопки — основной интерактивный элемент сайта, приложения или других интерфейсов, поэтому их качественное проектирование влияет на общий результат.
Задача CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке.
За 8 лет разработки веб-интерфейсов мы определили ряд правил, которые помогут вам создать эффективный CTA.
- В тексте обязательно должен быть глагол, который призывает к действию, четко отражает суть кнопки и того, что произойдет после ее нажатия. Оффер должен быть кратким и понятным, мотивировать только к одному действию: скачай, купи, подпишись.
Желательно формулировать призыв так, если бы воспринимали информацию как покупатель. Например, «положить в мою корзину», «хочу». Используйте эмпатию в CTA.
Используйте слова-триггеры, на которые позитивно реагируют посетители сайта («получить скидку», «бесплатно», «подарок», «узнать»).
Формулируйте призывы так, чтобы посетитель понимал, как дальше будет развиваться действие. Вместо «отправить» или «оставить» лучше сказать «получить консультацию» или «узнать стоимость».
Пример хорошего CTA: вас призывают получить выгоду, используют слова-триггеры «бесплатно», и вы четко понимаете, что произойдет после нажатия.
2. Расположение кнопки зависит от идеи и целей проекта, но важным условием является присутствие на первом экране, так как большинство пользователей не скролят страницы вниз.
Плохо, когда кнопка находится далеко от вашего предложения. Некоторые пользователи просто могут не заметить кнопку и уйти с сайта.
3. Цвет. CTA должен выделяться на фоне и проходить проверку W3C. А также вписываться в общий дизайн, при этом помните, что на странице не должно быть более четырех цветов — пощадите глаза своих клиентов.
Плохой пример цветового решения: кнопка выделяется, но не вписывается в стилистическую концепцию.
4. Форма кнопки зависит от концепции проекта, однако прямоугольная предпочтительнее, так как она наиболее распространена, привычна и удобна для пользователей и напоминает кнопки в реальной жизни.
Не делайте кнопку круглой, даже если выглядит стильно, некоторых пользователей такая форма может раздражать, а некоторые просто не поймут ее функции.
Кнопка не должна быть слишком маленького или большого размера, не должна быть на пол экрана. Средний размер оптимален для восприятия и удобен в использовании.
5. Помните о приоритетности кнопок: не ставьте рядом одинаковые кнопки. Это сбивает с толку и снижает показатель кликабельности. На одном экране лучше использовать одну кнопку. Так вы оставляете одно целевое действие для пользователя, он не должен думать, что выбрать, куда нажать. Его путь должен быть очевиден. Если же без второй кнопки на экране не обойтись, выделите главную кнопку, сделайте ее по правилам, которые описаны выше. А вторую оформите в виде ссылки или используйте обводку без заливки.
Отличные пример приоритизации. Вы сразу поймете, какая кнопка главная.
Мы поделились рабочими рекомендациями, которые помогают делать наши проекты высоко-конверсионными, а какие кнопки используете вы?
