Сегодня рассмотрим основные принципы, которые нужны для классного СТА.
1. СТА – это кнопка
Начнем с формы. Прямоугольная, со скругленными краями или нестандартная – но СТА должен быть оформлен в виде кнопки. Такая подача максимально понятна и не требует никакого пояснения. Видишь кнопку – жми!
Текстовые кнопки без рамки теряются на странице и их нажимают только те, кому ну прямо очень нужно. И это не заслуга дизайнера вовсе. Такой призыв легко пропустить, а ведь это не наша цель.
Что касается необычного дизайна, то будьте с этим аккуратнее. В основном посетитель ждет привычного сценария, важно предоставить ему это. Оригинальные нестандартные подходы помогут пополнить портфолио, но не увеличить конверсию. Разве что такой шаг будет действительно оправдан – например, на сайте квест-рума будет уместен СТА с необходимостью открыть замок ключом, а не просто нажать на него.
2. Как выделить кнопку
Call to action – действие с самым высоким приоритетом на странице. Логично, что его нужно выделить на фоне остальных элементов. Вот несколько способов это сделать:
- цвет – всегда привлекающий внимание, контрастный и яркий, но не конфликтующий с общим дизайном. Лучшие варианты – инверсия использованной палитры или более темные и яркие ее варианты. Подробнее по цвета в дизайне сайта - здесь;
- шрифт – читаемый, четкий, желательно такой же, как и текст на странице, но можно более жирный. Это не тот случай, когда нужно экспериментировать с вензелями, используйте простые проверенные шрифты;
- размер – не нужно долго объяснять, что призыв должен быть хорошо виден даже людям с плохим зрением. А еще по нему нужно легко попадать пальцем в мобильном приложении. Но не переусердствуйте, элемент не должен быть бельмом на глазу, а лишь мелкой соринкой, цепляющей пользователя.
3. О муках выбора
Бывает необходимость разместить сразу несколько кнопок. Во-первых, стоит знать, что если они не обязательны, то лучше этого вовсе не делать – каждое дополнительное решение отдаляет человека от целевого действия.
Но в определенных ситуациях дополнительные кнопки очень нужны. Например, в интернет-магазине после выбора товара стоит делать два действия – купить и продолжить покупки.
В случае размещения нескольких кнопок важно обозначить их приоритетность. Главное действие всегда должно выделяться. Второстепенные кнопки не стоит слишком скрывать – та же форма и размер, но можно сделать прозрачный фон и оставить только рамку или использовать цвет на пару тонов светлее. Если все кнопки одинаковые, то вы заставляете пользователя лишний раз задумываться.
4. Расположение на экране
При размещении СТА важно учитывать паттерны поведения, в частности привычный сценарий чтения. У нас принято просматривать экран сверху вниз и справа налево. Поэтому один из самых популярных вариантов размещения – в правом нижнем углу первого экрана, если это лендинг.
Если сделать кнопку слишком высоко, то читателю может быть недостаточно сведений и убеждений нажать ее. А в конце инфоблока самое место логичному завершающему действию. К тому же, в этом месте удобнее всего нажать на кнопку пальцем, если просмотр совершается с мобильного устройства.
Когда кнопок несколько, то самая главная ставится последней. Это распространенная ошибка – делать приоритетный призыв первым, чтобы его не пропустили. Но если после него будут другие, то возвращаться к предыдущему пункту мозг уже не очень хочет.
Не заставляйте посетителя сайта листать до нужного призыва – СТА всегда делается в зоне видимости. И помните про свободное пространство, кнопка не должна ни с чем соревноваться на своем месте. Про эти и другие рабочие схемы подробнее в онлайн-интенсиве «Как сверстать сайт и выложить на хостинг. Реальная практика».
5. Текст
Текст на кнопке всегда контрастный и читаемый. Сами слова тоже очень важны, не менее, чем их оформление. Есть несколько важных принципов создания надписи на кнопке:
- сильный глагол – скачать, записаться, купить, получить и т.д. Человек должен совершить действие, подскажите ему, какое именно;
- понятность – максимально простая формулировка без завуалированных смыслов и недосказанности;
- краткость – сокращайте фразу настолько, насколько можно. Если требуется пояснение к СТА, то лучше оформить его в общей рамке с кнопкой, а не на ней самой.
6. Иконки и символы
Что может быть проще прочтения простого призыва из одного слова? Не читать вовсе. Если дополнить текст призыва соответствующей иконкой, то просто не может быть вариантов пропустить этот сигнал.
Тем более эта уловка поможет лучше ориентироваться тем, кто имеет некоторые проблемы с визуальным восприятием цвета или плохо знает язык. Если возле слова “купить” стоит символ тележки из супермаркета, то сразу ясно, что нажатием этой кнопки пользователь положит товар в корзину. Также небольшой графический элемент работает как дополнительный вес, выделяя кнопку среди других.
Главная тонкость тут – использовать символику максимально универсальную, понятную и безусловную. Глядя на нее не возникает двусмысленности, только четкий сигнал, который нам нужен.
7. Анимация
Если кнопка плавно мигает или переливается – она привлечет больше внимания. А если появляется дополнительная анимация при наведении курсора, то такой СТА прямо манит пользователя, ведь так интересно, что же еще случится с этим значком, если выполнить действие. Не лишними будут тени, стрелки или прочие способы выделить СТА.
В каждом отдельном случае можно найти исключения из вышеуказанных правил. Но всегда нужно учитывать то, что мозг работает по определенным схемам и шаблонам, он ждет увидеть нечто привычное и не напрягаться лишний раз. Так что при проектировании и размещении СТА учитывайте особенности целевой аудитории, ее опыт и привычки. Задача в этом случае – облегчить им решение и сделать так, чтобы они нажимали кнопку без лишних телодвижений, не задумываясь.
Хотите делать не только классные кнопки, но и целые сайты с высокой конверсией? Вас ждет обучение тонкостям мастерства и работа над собственными 5 проектами для портфолио на онлайн-коучинге «Веб-дизайнер: счастливый билет в Таиланд». Присоединяйтесь!
