Ста кнопки на продающих страницах страницах мировых брендов. Примеры Call to action Что такое ста кнопка

Зачастую важностью СТА-элементов пренебрегают. Дизайнеры не всегда понимают, что именно делает кнопку call to action эффективной. Что они точно знают, так это то, что она должна быть заметной и подходить под общий дизайн сайта. Однако разрабатывать кнопку СТА без понимания секретов ее эффективности нельзя. Важность этого элемента слишком велика.

В конце концов, главная цель всех СТА-кнопок - это побудить посетителей сделать что-то, а именно совершить действия, необходимые вам. Это может быть добавление товара в корзину, скачивание какого-то материала, запрос информации, бронирование столика и многое другое. Важно иметь хотя бы общее понимание того, как текст, размеры, расположение и другие факторы влияют на конверсию СТА-элементов. Разобраться с этим не сложно. Давайте приступим и рассмотрим основные признаки успешных кнопок Call-to-action.

1. Они убедительны

Текст - это самая важная составляющая вашей кнопки. Именно грамотный копирайтинг побуждает посетителей кликать. Текст должен обещать выгоду и обращаться к личному интересу посетителя. Помимо того, что он должен быть релевантным, он должен ясно и недвусмысленно давать понять, что произойдет дальше. При составлении текста, убедитесь, что посетитель, кликнув на вашу СТА-кнопку, получит именно то, что на ней написано.

2. Они точные и краткие

Текст вашей кнопки должен быть краткими и по существу. Международное маркетинговое агентство HubSpot рекомендует использовать в СТА-кнопках не более 5 слов.

3. Они ориентированы на действия

Ваши СТА-элементы должны начинаться с глаголов действия, таких как «получить» или «скачать». Вот несколько примеров:

Получить бесплатную консультацию
Скачать сейчас
Получить эксклюзивный доступ
Записаться на бесплатное занятие
Сравнить цены

И вместо того, чтобы повелевать посетителям «подписаться» или «отправить», предложите им «получить» или «попробовать». Предоставьте им стоящую причину, чтобы они совершили то действие, которые вы от них ждете.

4. Они говорят от первого лица

В ходе теста, который проводил Майкл Аагард (Michael Aagaard), специалист компании по разработке Landing Page «Unbounce», выяснилось, что сменив текст кнопки второго лица (т.е. Получите ваш бесплатный урок) на первое лицо (т.е. Получить мой бесплатный урок) показатель CTR (кликабельности) вырос на 90%.

Почему текст от первого лица работает хорошо? Потому что он представляет собой действие с точки зрения пользователя. Поэтому если вы все же планируете использовать в ваших СТА-элементах второе лицо, постарайтесь протестировать оба варианта и посмотрите, какое обращение к вашей аудитории работает лучше.

5. Они создают ощущение срочности

Особенность человеческой природы состоит в том, что мы склонны желать того, чего не можем иметь. Мы повышаем стоимость тех вещей, которые в дефиците, и снижаем стоимость того, что в избытке. Это основа баланса спроса и предложения. Чем менее доступен товар, тем более ценным он становится. Используйте этот принцип в своих СТА-элементах, и вы увидите приятный результат.

Вам совсем не обязательно использовать подобную тактику все время. Ощущение срочности вы можете создать путем добавление всего одного слова «сейчас».

6. Они содержат дополнительную информацию (если необходимо)

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

Гарантию возврата денег (если таковая имеется)
Информацию, закрывающую возражение (например, «для старта не требуется оплата», «регистрация за 20 секунд»)
Важные преимущества («30 дней бесплатно»)

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

Надо сказать, что дополнительная информация в ваших СТА-кнопках не всегда необходима, но иногда она заметно улучшает CTR.

7. Их невозможно не заметить

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

Если вы не уверены в том, что ваша кнопка достаточно велика, протестируйте ее: разместите ее на вашем сайте и отойдите на 3-4 метра от компьютера. Вы должны хорошо ее различать. Если не можете - кнопку стоит увеличить.

8. Они окрашены в контрастные цвета

Дизайнеры и маркетологи не перестают искать самый «конвертирующий» цвет, но пора признать, что универсального цвета, гарантирующего высокую конверсию, не существует. Люди склонны замечать (и запоминать) то, что выделяется из окружения. Поэтому, секрет успешной СТА-кнопки - это цвет, контрастирующий с остальными цветами окружающих элементов на странице (но, тем не менее, не выбивающийся из общей цветовой гаммы сайта)

9. Их не надо искать

Если ваши посетители готовы к следующему шагу, они не должны блуждать по сайту в поисках кнопки. Она должна располагаться именно там, где они ее будут ожидать увидеть, и куда в следующий момент направится их взгляд - в самом очевидном месте. Никогда не заставляйте ваших посетителей оглядываться в поисках кнопки. Следуйте за естественным движением мысли человека. Если он заполняет форму или читает информацию о продукте, СТА-кнопка должна находится тут же, сразу за тем контентом, с которым взаимодействует пользователь. На длинных страницах, где много информации, стоит размещать призывы к действию чаще, на протяжении всего контента.

Эта мысль может казаться очевидной, но достаточно много сайтов совершают ошибки. Даже Apple размещает СТА не в очевидном месте:

10. Они не конфликтуют с другими СТА

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

Задайте вопрос самому себе: какое самое главное действие должны совершить пользователи на вашей странице? Ответ на этот вопрос будет отличаться в зависимости от целей той или иной проектируемой страницы.

Если вы проектируете Landing page

Ваш девиз должен звучать так: «одна страница - одна цель». Сфокусируйтесь на одном, самом важном, действии для пользователя.

Если вам все же надо предложить несколько действий

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

Выстраивайте визуальную иерархию и добавляйте веса тем элементам, конверсия которых наиболее важна для вас. Ваша основная СТА-кнопка должна быть визуально более броская и лидировать в конкуренции с другими СТА за внимание пользователя.

11. Они регулярно тестируются и корректируются

Люди часто спрашивают: какой показатель считать хорошей конверсией?

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

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

«Реальное решение измеряется тем фактом, что вы предприняли новое действие. Если нет действий, вы по-настоящему не решили».

Тони Роббинс

Звучит убедительно, не правда ли?

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

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

Всего лишь маленькая кнопка, но она могла стать причиной вашего решения, а также отличным инструментом для компании, стремящейся превратить вас в покупателя.

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

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

Однако начнем с самых основ…

Что такое СТА и что с этим делать

«Время действовать прямо сейчас. Никогда не поздно начать что-то».

Антуан де Сент Экзюпери

Призыв к действию или СТА (call to action) мотивирует читателей действовать. Такой призыв помогает им подключиться, скачать, купить, участвовать, записаться и предпринять множество других действий. Это своеобразный маркетинговый рычаг убеждения, который очень часто приносит положительные результаты брендам.

Чем отличаются СТА в соцсетях от других призывов к действию

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

Где лучше всего располагать CTA в социальных сетях?

Это довольно дискуссионный вопрос, и он зависит от разных факторов (например, от длины текста или его темы). Чаще всего авторы добавляют его в конце постов или внутри изображений в социальных сетях. Призыв может отображаться как кнопка, текстовая ссылка или быть полностью картинкой.

Как СТА влияет на анализ постов

Почему важно добавлять призыв к действию в посты?

CTA помогает достичь 3 основные бизнес-цели:

клики
продажи
вовлечение

Вы можете легко отслеживать посты с СТА с помощью аналитики KUKU.io.

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

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

Сперва нужно четко понять к кому вы обращаетесь и к чему призываете.

Конечно, сначала в голове будет много неструктурированных мыслей: Какой призыв? К какому действию? Цели, мотивы, охват…

12 формул для создания эффективного CTA в социальных сетях

Создавайте или адаптируйте CTA для каждой социальной сети отдельно

Механизм работы соцсетей разный, особенно, если речь идет о CTA. Facebook предлагает использовать рекламные объявления с кнопками призыва к действию, которые можно кликать и отслеживать. В Instagram вы можете добавить свою собственную кнопку в конце спонсорского контента.

Предлагайте реальные ценности

Если вы хотите привлечь внимание читателей и заставить их предпринять определенные действия, вы должны предлагать что-то реально ценное. Думайте о серьёзных стимулах и о том, что действительно может принести пользу. Ваши читатели должны четко понимать, зачем им нужно ваше предложение.

Предлагайте бесплатный вариант

Чтобы убедить своих читателей действовать определенным образом (скачать книгу, подписаться на электронную почту, купить продукт и т. д.), — предложите бесплатную версию.

«Заполните форму подписки и получите бесплатный доступ к вебинару»

Кнопка: «Получить бесплатно»

Используйте слова призыва

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

Затрагивайте эмоции

В ваших призывах старайтесь приблизиться к чувствам и эмоциям читателей. Они не должны остаться равнодушными. Используйте яркие слова и призывы, протестируйте различные варианты. Даже небольшая кнопка поможет получить много подписчиков в Instagram, Facebook, Twitter и других социальных сетях.

Напомните об усталости

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

«Вы устали от неэффективных диет? Купите наш новый протеиновый комплекс и создайте тело своей мечты за 3 месяца!»

Кнопка: «Купить сейчас»

Установите временные ограничения

Это сделает ваш призыв конкретным и понятным. Например, «Попробовать сейчас» выглядит более убедительно, чем просто «Пожалуйста, попробуйте».

Упрощайте

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

Обращайтесь к конкретному получателю сообщения

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

Используйте слова «вы», «ваши», «вам» и т.д., чтобы добавить близости взаимодействию. Например, «Попробуйте ваш бесплатный сет».

Вовлекайте

Предложите продолжить коммуникацию и узнать больше.

Напомните опыт знаменитостей

«Почему Мадонна пользуется нашей косметикой»

Кнопка «Хочу попробовать».

Тестируйте различные CTA

Не забудьте отслеживать результаты СТА. Вы можете определить, какие посты с мотивацией работают лучше, а какие кнопки или ссылки не привлекают внимания. Адаптируйте, перемещайте и «полируйте» их до идеального состояния. Этот анализ позволит вам искать варианты и оптимизировать кнопки СТА. Помните, что вы легко можете использовать аналитические инструменты таких сервисов, как Buffer или KUKU.io для отслеживания результатов публикаций с помощью полезных метрик.

Теперь у вас не должно возникнуть проблем с созданием эффективных призывов к действию.

Используйте приведенные выше формулы и преимущества ваших предложений. И, конечно же, обязательно пропускайте все через призму клиентов, учитывая их желания и представляя себя на их месте. Обращайте внимание на дизайн кнопок, цветовые решения и размер шрифта. Удачных вам call to action!

Сегодня мы поговорим о кнопках «Call to action» далее CTA. Элементы CTA, как понятно из названия, призывают пользователя совершить какое-либо действие на сайте. Однако дизайнеры часто относятся к ним с пренебрежением. В то время как понимание принципов в данном вопросе повысит эффективность готового продукта. Из этого материала вы узнаете как правильно создать кнопку CTA.

Важно иметь хотя бы общее представление о том, как цвет, размер, содержание и другие факторы влияют на конверсию кнопки CTA. Сами принципы довольно просты, но применять их нужно еще на этапе планирования конструкции сайта.

Цель кнопок «Call To Action»

Кнопки CTA могут нести различные функции. В конце концов «призыв к действию» может означать что угодно. Но главный принцип кнопок заставить пользователя, который зашел на ваш сайт совершить действие. Например, добавить товар в корзину, скачать что-то , предоставить информацию, и т. д.

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

Типы кнопок «Call To Action»

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

1. Добавить в корзину

Интернет-магазины, как правило, используют целый ряд кнопок CTA, но самые популярные из них — кнопки «Добавить в корзину». Эти кнопки обычно размещаются на страницах с продуктом, и призывают пользователя приобрести тот или иной товар. Обычно их оформляют коротким текстом с призывом «Купить» или «Добавить в корзину» и иконкой банковской карточки или корзины.

2. Скачать

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

3. Пробная версия

На некоторых сайтах клиента пытаются заинтересовать, предложив ему пробную версию продукта. Это может быть бесплатная загрузка или бесплатный аккаунт, в зависимости от типа предлагаемой услуги или товара. Некоторые дизайнеры стараются быть лаконичными в оформление СТА-кнопок такого типа, кто-то же наоборот щедро наделяет кнопку дополнительной информацией.

4. Узнать больше

Кнопки «Узнать больше» часто располагают в конце тизерного блока информации. Обычно это простые кнопки, однако достаточно большого размера, чтобы привлечь внимание пользователя.

5. Регистрация

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

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

Работа с негативным пространством

Вы наверняка хотите, чтобы кнопки СТА на вашем сайте выделялись на фоне остального контента и привлекали внимание пользователя. Для этого используйте негативное пространство вокруг кнопок. Создайте воздух между контентом и СТА-кнопками. В некоторых случаях (как с кнопками «Добавить в корзину») этим правилом можно пренебречь, но чаще всего оно добавит эффективности вашему дизайну.

Важно при этом не забывать о балансе. Нужно рассчитать негативное пространство так, чтобы оно выглядело пропорционально размеру кнопок. Мы хотим, чтобы кнопки и контент выглядели как единая композиция, несмотря на то, что мы отделяем их друг от друга. Так что иногда вам возможно придется повозиться, экспериментируя с расстоянием.

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

Размер и цвет

Размер кнопки СТА очень важен. Очень большая кнопка затмит остальное содержание, слишком маленькая затеряется среди окружающего контента. Нам же нужно, чтобы наша кнопка выделялась на фоне других элементов, но при этом не подавляла их визуально.

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

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

Текст

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

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

Не забывайте и о размере текста. Шрифт должен быть большим и заметным, но конечно сочетаться с размерами самой кнопки. Убедитесь, что текст достаточно контрастен и легко читаем.

Используйте просто, понятный язык.
Используйте большой, заметный шрифт.
Убедитесь что текст действительно призывает к действию.

Создайте срочность

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

Наша задача произвести на пользователя впечатление, что нужно действовать прямо сейчас. Вам нужно побудить их действовать незамедлительно, экспромтом. И пусть не все СТА-кнопки будут работать так (особенно если речь идет о покупке дорогостоящего товара), дешевые или бесплатные действия должны в идеале производится пользователем без раздумий.

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

Дополнительная информация

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

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

Добавляйте на кнопки только ту информацию, которая будет пользователю однозначно полезна.
Дополнительная информация уместна лишь на некоторых типах СТА-кнопок (например, «Пробная версия» и «Скачать»).
Убедитесь что сам призыв к действию до сих пор является самым заметным текстом на вашей кнопке.

Приоритет

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

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

Иконки и изображения

Оформление кнопок СТА иконками также может сыграть на увеличение конверсии. Примером могут служить иконка корзины на кнопке «Купить» или стрелка на кнопке «Скачать». Вы также можете использовать и уникальные иконки и изображения, но убедитесь что они в точности передают предназначение кнопки и не вводят в заблуждение пользователя.

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

Примеры

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

Logbook
Использование разных цветов для кнопок «Скачать» и «Купить» отделяют их друг от друга и подчеркивают важность кнопки «Купить».

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

MailChimp

На сайте много кнопок, но окно «Prepare for Launch» для создания почтовой компании, пожалуй, самая впечатляющее. Сделанное с юмором, оно демонстрирует процесс и привлекает свой необычностью.

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

ManageWP

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

Blue Apron

Домашняя страница действительно представляет собой серию CTA. Этот раздел передает информацию посетителю в легком для чтения формате. Даже небольшой значок Free Delivery - приятная черта. Они идеально использовали фон из свежих продуктов, чтобы убедительно доказать точку зрения. Глядя на него, начинаешь испытывать голод.

Spotify

Как Blue Apron, Spotify показывает свой главный коммерческий аргумент в CTA. Но они делают это проще и доступнее для посетителя. Ползунок выделяет важную информацию о сервисе потоковой музыки, но главным образом поощряет щелкать для получения более подробной информации. Они не пытаются ошеломить, но облегчают путь к подписке или информации.

Zillow

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

B&O Play

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

Mercy Corps

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

Nest

Домашняя страница компании по производству и продаже известных термостатов NEST сообщает о «Дне Земли», что согласуется с их энергосберегающим продуктом. Мерцающие звезды в фоновом режиме вместе с фотографией продукта действительно оказывают влияние (создается впечатление планеты, плавающей в пространстве). При этом страница не загромождается лишними элементами и создает пространство.

Skagen

Это датская компания, которая продает минималистские часы, наряду с другими модными аксессуарами. Их CTA показывает выдающееся использование цвета и соответствующей бренду простоты. Они как бы говорят - когда у вас есть уникальный продукт, просто позвольте ему самому рассказать о себе.

Patagonia

Это компания, специализирующаяся на спортивной и походной одежде. Слайдер их домашней страницы - соединение продуктов и причин – это красиво обработанное изображение, продвигающее экологический фильм. Изображение большое, четкое. Оно стремятся привнести немного дикой местности на экран. Это правильно с точки зрения их целевой аудитории.

Призыв к действию

Хороший CTA должен определить аудиторию и желаемый результат взаимодействия с пользователем. Цвет и формирование изображений должны стать отражением бренда и помочь передать сообщение. Текст должен быть коротким и точным.

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

По материалам speckyboy.com.

______________________________________________________________________

Материал создан агентством контент-маркетинга Текстотека .

Хотите самостоятельно внедрить контент-маркетинг в свой бизнес? Подписывайтесь на наше сообщество

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

Цвет и контрастность CTA-кнопки, ее размер, месторасположение, сам текст призыва к действию – в данном вопросе нет мелочей: все эти критерии будут влиять на юзабилити сайта и оказывать закономерные последствия. Чтобы максимально учесть упомянутые параметры CTA-элементов, предложим несколько материалов на тему. Ознакомившись с ними, вы оцените реальные примеры из веб-практики, узнаете основные ошибки при создании графического интерфейса и – самое важное – получите представление о том, что тестировать на собственном веб-ресурсе. Приступим.

Цвет в масть конверсии

По различным данным, при создании CTA-кнопки для регистрационной формы Gmail разработчиками было протестировано от 41 до 50 оттенков синего. В эксперименте участвовали более 425 тысяч добровольных тестировщиков, что позволило выявить чуть ли не идеальный конвертирующий оттенок. Но означает ли это, что используемую Google кнопку разработчики всех сайтов могут взять за образец? Разумеется, нет.

Тот же оттенок синего специалисты Google используют на странице другого своего продукта – Picasa, но вот откройте сайт веб-браузера Chrome – и увидите совсем другой тон. Это подтверждает: цвет кнопки призыва к действию определяется множеством факторов, таких как тематика сайта, сфера деятельности, предпочтения вашей целевой аудитории, дизайн в целом, воздействие оттенков на физиологические процессы в организме и другими.

Холодные тона – будь то синий или голубой – ассоциируются с надежностью, стабильностью, спокойствием и, соответственно, доверием. Схожий эффект оказывают зеленые кнопки для сайта: обдуманность, натуральность, безопасность – вот какую информацию они несут. Используйте зеленый цвет для скачиваний (в том числе и антивирусных программ), активации платных пакетов услуг, внесения пожертвований.

Зеленый – тот самый цвет, что используется для призыва к действию на сайтах коллективных скидок. Его вы найдете на таких лидирующих сервисах, как «Купи Купон», Kupibonus, Groupon, «Выгода.ру», Citycoupon, Boombate, Bigbuzzy и многие другие. Впечатляющий список – и это несмотря на то, что с акциями и скидками по умолчанию ассоциируется совсем другой цвет.

Идеальным для повышения конверсии магазина большинство дизайнеров признает оранжевый, в результате чего по профессиональным медиа-сообществам и форумам даже распространился миф о большой оранжевой кнопке как лучшем захватчике внимания. Водрузив оранжевый на пьедестал, дизайнеры водят вокруг него хоровод и находят все новые ракурсы для рассмотрения. Действительно, оранжевый ассоциируется с энергией и творчеством – с одной стороны, стойкостью и решительностью – с другой, а также дружелюбием – с третьей. К тому же цвет этот занимает промежуточное положение между агрессивным красным и осторожным желтым цветами. Разве не довод, чтобы испробовать оранжевый призыв к действию на вашем сайте?

Желтый наступает на пяты лидеру и, безусловно, производит тот же эффект – стимулирует к действию. Этот цвет ассоциируется с интеллектом, развлечением, живостью; он выделяется на общем фоне, не вызывая тревоги, и дает ощущение счастья. Отличный цвет для кнопок отправки форм и подписки на рассылку по электронной почте.

Однако самым противоречивым из всех цветов был, есть и остается красный. Приведем лишь несколько примеров для подтверждения. Чтобы оценить кликабельность CTA-элементов на сайте Live Casino, тестировщики просто изменяли их цвета: красный, серый, черный, синий, фиолетовый, желтый, зеленый… Именно последний пробился в лидеры, увеличив кликабельность на 43%.

В то же время кнопки красного цвета показали наихудший результат – 29%:

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

Тем большим было удивление тестировщиков, обнаруживших, что для сайта компании Performable красный – самый эффективный цвет. Именно он дал на 21% больше конверсии, чем внушающий спокойствие зеленый.

Почему сплит-тестирование показало такие результаты, сложно обосновать, и споры на этот счет до сих пор продолжаются… Однако прецедент остается.

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

Некрасивых нет, – не подумайте, что ваш покорный слуга Туманов является большим альтруистом, он всего лишь продолжает монолог о цвете в графическом дизайне. Так, есть оттенки не подходящие конкретно для вашей задачи. Поэтому прежде чем окрасить CTA-кнопку, вспомните: фиолетовый ассоциируется с богатством, роскошью и магией, однако может вводить в депрессивные состояния. Выполненный в розовой гамме призыв подойдет для сайтов женской и детской тематики, но при условии выделения на общем фоне. Элегантный черный используют для отправки товара в корзину владельцы элитных бутиков, а серый вызывает чувство серьезности и основательности, и потому незаменим на сайтах, которые продвигают товары или услуги, рассчитанные на консервативного покупателя.

Из всего сказанного выше можно сделать несколько выводов:

Эффективные CTA-элементы могут быть любого цвета, но не все они одинаково сработают именно на вашем сайте.
Выбирать цвет кнопки для сайта можно только эмпирическим путем, для чего настоятельно рекомендуем А/В-тестирование.
Самое важное – не цвет, но хороший контраст с фоном, о чем и поговорим ниже.

Контраст СTA-элемента с фоном

Говоря о контрастных цветах, мы на самом деле имеем в виду комплементарные пары, а также триады на цветовом круге. Для тех, кто не знаком с теорией цвета, порекомендуем посмотреть цветовые «миксеры» – то есть программы, позволяющие грамотно подбирать и сочетать оттенки. На ваш вкус это может быть Adobe Kuler или Color Schemer – разобраться в во всех тонкостях колористики здесь не составит труда, а если знаете что-то более удобное – просьба посоветовать в комментариях.

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

Ниже – отличный пример комплементарного дополнения. Оба CTA-элемента превосходно контрастируют с зеленым фоном, пропустить такие визуально выделенные призывы к действию будет сложно.

Аналогичный метод графического выделения используется и на социальной платформе для медицинских консультаций. За тем лишь исключением, что уже три цвета контрастируют друг с другом. Что важно, именно элемент призыва к действию должен быть теплого тона и контрастировать с холодным тоном фона – и здесь это правило соблюдено. Тепловой контраст настолько силен, что оранжевая CTA-кнопка буквально бросается в глаза даже на фоне достаточно активного и аляповатого изображения за заднем плане.

Одной лишь ремарки требует комплементарная пара красный-зеленый.

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

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

CTA и белое пространство (пустота)

Самый простой прием, чтобы выделить кнопку призыва к действию – исключить все остальные объекты из поля зрения. Свободное пространство вокруг акцентирует внимание на CTA-элементе и подчеркивает его особый статус.

Идеальной в этом плане является целевая страница сервиса Dropbox: контрастная кнопка свободно «дышит» на белом фоне, приглушенное изображение слева не конкурирует за пользовательское внимание, и сразу понятно, какое действие необходимо совершить. К тому же лаконичный дизайн ассоциируется с простотой и удобством использования самого сервиса – и это отличный ход.

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

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

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

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

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

Первые два слайда – от российского дизайнерского тандема Светланы Свиридовой и Дмитрия Черных.

Чтобы приобрести трикотажное изделие для интеллектуальной молодежи, требуется кликнуть на иконку одной из социальной сетей, где, в свою очередь, ознакомиться с информацией о торговом центре. Такой путь осилит читатель «идущий» – а точнее, терпеливый и зрячий.

В данном случае социальные кнопки для сайта – единственный используемый CTA-элемент. Их размещение в левом нижнем углу на пестром сером фоне существенно затрудняет восприятие. Для повышения конверсии стоит задуматься о редизайне. Как вариант – заменить или «подсветить» иконки vkontakte и facebook ярким однородным блоком.

Аналогичную ошибку видим и на страницах американского магазина одежды. CTA-элемент находится на оптимальном расстоянии от товара, но пестрый фон перебивает призыв. Внимание пользователя рассеивается – в таких «джунглях» заметить кнопку непросто.

Очевидно, «прикипев» к агрессивному тигровому фону, ребята все же нашли выход. Выделив CTA-кнопку плотным зеленым контуром, они добились необходимого контраста, что повлекло прирост конверсии на 6,3%.
Статистика эта вполне объяснима. Если в первом случае черная кнопка сливалась с другими элементами дизайна, то во втором – выглядит органично, но броско. Кроме того, оказывающий на пользователя давление текст был заменен на более нейтральный. И об этом .

А в завершение данной статьи в очередной раз снимем шляпу перед Стивом Джобсом. «Дизайн – это не то, как предмет выглядит, а то, как он работает», – безапелляционно утверждал IT-гений и явно имел для этого основания. Просто вспомните его слова, когда будете работать над графическим интерфейсом собственного сайта.

Как выглядит кнопка призыва к действию на вашем сайте? И знаете ли вы потенциал для увеличения конверсии в зависимости от манипуляций с цветом и пространством?