Продолжение первой части статьи про то, как сделать работающий call-to-action. На этот раз речь пойдёт об оформлении призыва: дизайне и расположении. Читайте, что сделать, чтобы призыв всё-таки побудил человека нажать на кнопку, создание веб приложений, в этой статье.
Что, где, куда
В первую очередь призывы стоит размещать на целевых страницах, где пользователь решает, совершать ли ему покупку (или иное запланированное вами действие). С такой страницы лучше всего убрать все необязательные графические и текстовые элементы, чтобы они не отвлекали людей.
На главной странице так же стоит разметить CTA. Можно (а иногда — даже нужно) несколько: вплоть до 3. Чем больше информации находится на главной странице, тем больше призывов должно быть. На каждое предложение по одному, соответствующему товару или услуге, CTA.
Если вы делаете рассылку, CTA стоит разместить после текста. Если пишете пост в соцсети — в самом начале или же в самом конце поста.
При этом, вне зависимости от площадки размещения, призыв должен отличаться от остального содержания страницы. Лучше всего выделить его кнопкой яркого цвета или заметным баннером.
При этом располагать CTA необходимо в поле зрения пользователя, учитывая параметры всех возможных устройств. Специалисты рекомендуют НЕ делать этого внизу.
В идеале необходимо свериться с высотой экранов пользователей по Google Analytics. Разместите кнопку CTA и посмотрите, на каком пикселе вверху она находится у вас. Затем сверьте её высоту экранов других людей. Если нижняя граница кнопки расположена на 900-ом пикселе, то ⅓ людей не увидит её на первом экране (только на втором).
Дилемма. Некоторые рекомендуют размещать CTA слева, т. к. большинство людей читает слева направо. Другие же говорят размещать справа (ближе к центру, но со сдвигом вправо), т. к. большинство людей правши. В данном случае ориентироваться стоит на дизайн своего сайта. Однако по-настоящему правильным решением будет провести A/B-тест.
Призыв как навигация
Хороший ход — использовать CTA как навигационный маркер, чтобы он направлял людей по сайту, объясняя, что пользователь может получить, совершив то или иное действие. Это значительно повысит шансы того, что ваш сайт не закроют, так и не разобравшись в выгоде всех предложений.
CTA и дизайн
— несмотря на то, что призыв должен быть ярким и выделяться на фоне страницы, он всё же должен выглядеть органично в дизайне и общем стиле площадки;
— CTA в виде кнопки должен напоминать кнопку. В этом не стоит экспериментировать, пусть лучше пользователи сразу увидят знакомый и «безопасный» для них элемент;
— размер кнопки будет зависеть от дизайна конкретной страницы: высоты шрифта, масштабности остальных её элементов и т. д. Рекомендация здесь предсказуема: кнопка должна быть сразу заметна, однако не занимать половину экрана;
— можно использовать стрелки или иные графические указатели, которые будут обращать внимание пользователя на призыв.
Немного о кнопке
— контраст: кнопка должна отличаться не только от фона, но и от цвета текста на ней. При этом важно помнить о комфорте зрения пользователей и не уходить в «вырвиглазные» сочетания, некомфортные глазу на физическом уровне;
— текст на кнопке должен быть оформлен так же или стилистически схоже с другим текстом страницы, исключения могут быть, но рисковать не стоит, если вы не уверены в мастерстве своего авангардиста-дизайнера;
— шрифт текста можно сделать полужирным или подчёркнутым;
— при оформлении кнопки и CTA в целом не стоит использовать больше 4 цветов, даже если их оттенки похожи. Исключением является баннер, включающий в себя CTA. Однако здесь, как и в случае с отклонением от общего шрифта страницы, нужно иметь действительно грамотного дизайнера.
CTA и декор
Непосредственно на кнопку призыва можно добавить какую-нибудь простую иконку. Например, продуктовую тележку, корзину или иной маркер действия. Если CTA оформлен как баннер, то сбоку может быть фото. Это повышает конверсию.
Универсальных советов нет. В данном вопросе можно лишь экспериментировать и отслеживать эффективность различных вариантов с помощью A/B-тестов, опросов пользователей и сравнения прибыли в периоды различных вариантов кнопок.
Вместо заключения
Чек-лист по созданию рабочего call-to-action. Оформление
- CTA нужно располагать на целевых страницах, на главной странице (1 предложение — 1 призыв). Главное, чтобы все CTA соответствовали предлагаемым товарам, услугам и т. д.
- Размещать CTA нужно вверху страницы. Слева или справа — зависит от конкретного дизайна.
- Можно использовать CTA как навигационный инструмент, который будет сопровождать пользователя по сайту, объясняя, какие выгоды первый приобретает от совершения тех или иных действий.
- Призыв должен отличаться от остального содержания страницы. Этого можно достичь за счёт контрастности фона сайта и кнопки или иного дизайнерского выделения.
- Несмотря на контрастность, призыв должен органично вписываться в общий дизайн сайта.
- Если вы выбрали CTA в виде кнопки, не экспериментируйте с её видом. Пусть она визуально напоминает привычную людям кнопку, это повышает конверсию.
- Текст на кнопке по стилю и шрифту не должен сильно отличаться от другого текста на странице. Но он может быть подчёркнутым или полужирным.
- При оформлении CTA в виде кнопки не стоит использовать больше 4 цветов. Если призыв сделан в виде баннера, это ограничение не действует, но слишком пестрить тоже не стоит.
- Кнопка CTA может быть продекорирована иконкой, маркирующей необходимое действие (покупка — корзина или продуктовая тележка, добавление в закладки — звёздочка, и т. д.). На баннере, сбоку, может быть фотография. Это так же положительно сказывается на конверсии.
