1897
5 мин.

7 рекомендации по дизайну кнопок CTA

Ссылка на основную публикацию

При хорошо продуманном дизайне эти кнопки (CTA — Call-to-action — призыв к действию) не только позволяют пользователю эффективно перемещаться по вашему продукту, но и имеют решающее значение в потоках конверсии.

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

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

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

Будьте краткими

Это был один из ключевых принципов, выделенных Эллисон Рунг, UX Writer в Google. Меньше — больше, но лаконичность означает не только краткость. Это баланс между количеством используемых слов и сообщением, которое эти слова несут в себе. Сообщение лаконично, когда каждое слово имеет смысл.

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

Пример cta кнопок для сервиса

Быть ясным

Хотя вы будете работать только с 2-4 словами, язык — это ядро вашего CTA-дизайна. Выбранные вами слова повлияют на то, как ваш пользователь воспримет предполагаемое действие кнопки. Использование неправильных слов может сообщить что-то другое, что приведет к нежеланию двигаться вперед или негативному ощущению нежелательных результатов.

Работа с акцентом внимания cta кнопкой
Страница объявлений Airbnb — кнопка «Зарезервировать».

Мне нравится, как Airbnb использовал слово «Зарезервировать» на своей странице листинга вместо слова «Забронировать», так как это показывает политику Airbnb, согласно которой оплата взимается только через 24 часа после заезда, так как это не имеет никакого отношения к оплате.

Сфокусироваться

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

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

Расстановка акцентов в минималистичном дизайне с помощью cta кнопок
Целевая страница Slite, как и в случае с любым новым стартапом, имеет только один основной призыв к действию для пользователя.

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

Использовать контрастные цвета

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

При хорошем контрасте кнопка выделяется среди других элементов и требует внимания пользователя.

Использование контраста в дизайне для увеличения конверсии
Что первое, что бросается в глаза?

Использовать умное расположение

Я упоминал выше, что контрастные цвета эффективны для привлечения внимания пользователя, но использование продуманных размещений может еще больше увеличить эти шансы. Существует два типа «умных» размещений; первый — это понимание ментальной модели пользователя, а второй — передвижение пользователя.

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

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

Использование cta кнопок в главных экранах
Фронт использует «умное» размещение для кнопки CTA для увеличения коэффициента регистраций.

Внедрить визуальную иерархию

В большинстве случаев кнопки CTA входят в пару; «войти и зарегистрироваться», «подтвердить и отменить» и т. д. Вот почему важно уточнить ваш основной CTA и создать визуальную иерархию, чтобы сделать его центром внимания. Это может быть сделано путем более смелого проектирования первичной кнопки (с использованием контрастного цвета) и размещения ее справа. В то время как вторичное действие может быть представлено с помощью кнопки-призрака или простой текстовой ссылки.

Реализация четкой визуальной иерархии направит их на нужное действие, которое в значительной степени способствует достижению целей конверсии.

Пример основных и второстепенных кнопок в дизайне

Тест, тест, и тест

В то время как приведенные выше советы, безусловно, послужат для улучшения дизайна кнопки, единственный способ усовершенствовать вашу кнопку CTA это проводить A/B тесты, чтобы выяснить, что работает лучше всего для ваших пользователей; текст, цвета, размер, расположение, форма и стиль будет отличаться в зависимости от вашего дизайна интерфейса и пользователя.

Чтобы разработать идеальную call-to-action кнопку, дизайнеры должны сосредоточиться на ее основных целях и оценить эффективность с помощью испытаний A/B теста. Кнопка с соответствующим размером, цветом, текстом и размещением эффективно привлечет внимание пользователя и побудит его к желаемым действиям.

Иеремия Лам

Предыдущая
ДругоеУлучшение UX с помощью микро-взаимодействия
Следующая
ДругоеПочему мы любим синий цвет