Улучшить кнопка – Дизайн кнопок для фокуса, стандартного отображения и других состояний: примеры работы

Содержание

6 универсальных способов улучшить кнопки CTA — Лидзавод

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

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

Вот шесть вариантов проверки на Ваших кнопках призыва к действию – неважно, что Вы продаете.

1 – Размер кнопки

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

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

2 – Цвет

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

Перестарались — эти кнопки корзины сливаются с фонами

3 – Текст

Люди покупают с эмоцией, но дополняют ее логикой.

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

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

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

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

  • 6 универсальных способов улучшить кнопки CTA

Наиболее распространенный текст кнопки призыва к действию, используемый интернет-магазинами

  • 6 универсальных способов улучшить кнопки CTA

Эта кнопка Buy Now на Appsumo производит впечатление, что их заказ будет сразу оформлен

4 – Спецэффект

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

• Закругленные углы

• Скошенные края (чтобы кнопка будто висела над страницей)

• Градиенты

• Падающие тени

• Стрелы или другие маленькие значки

• Кредитная карта / эмблемы PayPal (чтобы создать доверие и безопасность)

• Изменение цвета кнопки при наведении

5-Положение на странице

Одна из самых популярных переменных для теста – местоположением кнопки призыва к действию на странице.

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

  • 6 универсальных способов улучшить кнопки CTA

Кнопка ‘Try it Fee’ StereoPill на главном экране, вероятно, привлекает больше внимания, чем ниже стоящая “Узнать больше”

6-Пробелы

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

Когда веб-страница пытается сделать слишком много, она часто ничего не делает.

  • 6 универсальных способов улучшить кнопки CTA

План действий

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

• Выберите контрастирующие цвета и измерьте свою кнопку призыва к действию отдельно от других визуальных элементов на Ваших страницах

• Выберите Ваш текст – сообщите, что получит при клике пользователь

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

• Всегда тестируйте! Кнопки призыва к действию – только один из многих аспектов Вашего сайта, который Вы можете протестировать через A/B.

Перевод материала https://www.crazyegg.com/blog/test-call-to-action-buttons/

7 точек роста конверсии или как повысить кликабельность кнопок / Habr

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

Предисловие:

Данная статья размещена в хабах «Интернет-маркетинг», «Дизайн» и адресована в первую очередь маркетологам и дизайнерам. Чтобы делиться мнениями, опытом и становиться лучше. Из первого абзаца становится понятно о чем данная статья. Если вы разработчик, который считает, что все магазины обманывают, а все маркетологи мошенники, то это ваше мнение и оно имеет право на существование. Не тратьте своё время на чтение данной статьи и последующее минусование за потраченное время. Лучше почитайте про то как искусственный интеллект делает минет — самая популярная тема за последние дни на Хабре. Успехов! А теперь к перейдём к статье.

1. Наличие кнопки


Для того, чтобы по кнопке кликали, кнопка на странице должна быть. Это может прозвучать странным, но сайты без кнопок есть. На примере ниже — страница товара интернет-магазина ВелоДрайв. Сайт рекламируется в «Яндекс.Маркете», но кнопки «Купить» на странице нет, а звонить и диктовать номер артикула не самый удобный вариант.


На странице товара сайта velodrive.ru отсутствует кнопка

2. Кнопка должна быть похожа на кнопку


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


Ссылка (слева) менее заметна, чем кнопка (справа)

2.1. Форма кнопки


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


Кнопки на сайте Tmall (AliExpress)

2.2. Скругленные углы кнопок


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


Apple Magic Keyboard, все клавиши имеют скругленные углы

2.3. Объемные кнопки


Кнопку лучше делать объемной, для этого используется тень, градиент и рамка. Тренд последних лет — плоский дизайн (flat design). Такой дизайн красив, но один из явных его недостатков в том, что из-за отсутствия теней и объема кнопки сложнее отличить от некликабельных элементов дизайна. Nielsen Norman group провели тест, в ходе которого выяснили, что объемные кнопки пользователи находят на 22% быстрее, чем плоские.


Плоская кнопка (слева) и объемная кнопка с тенью и градиентом (справа)

2.4. Интерактивные кнопки


Кнопку желательно делать отзывчивой, то есть при наведении курсора менять её цвет и объем. Таким образом, ещё при наведении курсора (до клика) становится понятно, что элемент кликабелен.


Кнопка по умолчанию (слева) и кнопка при наведении курсора (справа)

3. Царь-кнопка


Я вывел для себя одно хорошее правило, которое ещё ни разу меня не подвело: одна страница — одна главная кнопка (CTA — призыв к действию). Не стоит перегружать страницу множеством кнопок, это рассеивает внимание, создает лишние вопросы и, как следствие, снижает кликабельность.


Nix.ru, множество кнопок рассеивает внимание и снижает кликабельность

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

4. Цвет кнопок


4.1. Кнопка-призрак


Главная кнопка на странице должна быть контрастного цвета, чтобы выделяться от фона и окружающих элементов. Для менее приоритетных кнопок лучше не использовать цвет, сделав их прозрачными и поместив в рамку — это так называемые кнопки-призраки (ghost buttons).


Цвет кнопки отделяет главную кнопку (сверху) и второстепенную (снизу)

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


Кнопка-призрак в качестве главной кнопки неудачное решение


Так гораздо лучше, mi-storekazan.ru

4.2. Какой цвет кнопки выбрать


Распространено мнение, что цвет кнопки может подсказывать действие, например:
  • Положительное действие (CTA: добавить, отправить, сохранить, загрузить): синий, зеленый;
  • Отрицательное действие (CTA: удалить, заблокировать, сбросить): красный;
  • Нейтральное действие (CTA: узнать больше, сравнить, добавить в избранное): черный;
  • Недоступное действие: серый.


Цвет кнопок
Основано данное мнение на том, что человек с детства привыкает к значению этих цветов, и этот опыт закрепляется на уровне подсознания. Потому что так работают светофоры на улицах (красный — стой, зеленый — иди). Так работают смартфоны (зеленый — начать звонок, красный — сбросить) и так далее.


Привычное значение красного и зеленого цветов

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

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

Но вернемся к конверсии, в результате теста кнопок разных цветов лучшая конверсия вышла у кнопки красного цвета — 52,25%, а худший показатель оказался у кнопки зеленого цвета 41,46%. Другими словами, ситуация абсолютно противоположная цветам светофора. Что говорит в пользу закона Рэлея и красный цвет более заметен.


Коэффициент конверсии кнопок разных цветов

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


Коэффициент конверсии текста разных цветов на кнопках

5. Размер кнопок


Размер кнопок важен по двум основным причинам:
  • С помощью крупного размера можно привлечь внимание, поэтому главную кнопку лучше делать крупнее.
  • В мобильных устройствах отсутствует курсор мыши, а палец человека больше курсора, поэтому и кнопки необходимо делать больше, чтобы по ним удобно было попадать подушечками пальцев. В MIT (Massachusetts Institute of Technology) провели исследование, в рамках которого выявили, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончики пальцев — от 8 до 10 мм. Поэтому рекомендуемый минимальный размер кнопки 10х10 мм.


UX Magazine (слева) и фрагмент руководства от Apple (справа)

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

6. Расположение кнопок


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


Главная кнопка «Купить» расположена на видном месте, в первом экране страницы товара на сайте «Спортмастер»


Главная кнопка «Оформить заказ» расположена в первом экране корзины на сайте Adidas. Также кнопка продублирована на случай большого количества товаров в корзине.


Главная кнопка «Оформить заказ» отсутствует в первом экране корзины маркетплейса «Беру».

7. Текст на кнопках


7.1. Понятный призыв к действию


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


Текст на кнопке должен ясно подсказывать действие

7.2. Динамичные надписи на кнопках


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


Динамичные кнопки в Twitter, кнопка меняет надпись и цвет при наведении курсора, подсказывая действие

7.3. Значки на кнопках


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


Кнопки на сайте Amazon на русском (слева) и японском (справа) языках

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


Значки (сверху) и их значения (снизу)

1 — личный кабинет (регистрация или вход).
2 или 3 — с этими значками следует быть осторожнее, потому как они могут обозначать множество функций: избранное, сохраненное, список желаний, закладки, лайк, рейтинг. Легко запутаться.
4 — сравнение товаров (по характеристикам).
5 — просмотренные ранее товары.
6 — помощь (info).

7.4. Текст рядом с кнопками


Желательно указывать подписи к кнопкам и значкам. Без подписи кликабельность снижается, а вместе с ней и конверсия. Пример: когда компания Microsoft выпустила почтовый клиент Outlook 97, то в новом интерфейсе для кнопок были использованы значки основных команд.

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


Microsoft Outlook 97

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


Microsoft Outlook 2003

Поясняющий текст рядом с кнопками также помогают снять беспокойства пользователей, например: «Я сейчас нажму на кнопку и у меня спишут деньги?»


Поясняющий текст рядом с кнопкой на сайте Booking.com

7.5. Не перегружайте кнопки текстом


Для этого можно воспользоваться рекомендациями выше.


Nix.ru

***

Автор: Эдуард Файзуллин, основатель Conversant.me

Улучшение кнопок формы и командной панели

11.01.2016

Реализовано в версии 8.3.8.1652.

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

Кнопка гиперссылка

Появился новый вид кнопки – Гиперссылка командной панели.

Положение картинки справа

Стало возможным задавать расположение картинки справа или слева от заголовка. Для этого у кнопки мы сделали новое свойство ПоложениеКартинки.

Компактная группа кнопок

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

Овальная кнопка

Появилась возможность создавать овальные кнопки. Форма кнопки управляется новым свойством расширения группы подменю - Фигура.

Отображение кнопки при активности

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

Цвет рамки, фона, заголовка и шрифт заголовка

При желании вы можете теперь раскрашивать рамку, фон и заголовок кнопки, и даже менять шрифт заголовка. Для этого предназначены новые свойства кнопки ЦветРамки, ЦветФона, ЦветТекстЗаголока и ШрифтЗаголовка.

Изменение стандартного отображения команд

Для некоторых команд мы изменили правила стандартного отображения. Например, команда Скопировать теперь отображается картинкой в командной панели.

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

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

Теги: UI 

Рассказать друзьям:

5 способов улучшить кнопку призыва к действию

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

5 способов улучшить кнопку призыва к действию

Зачем улучшать ваши призывы к действию?

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

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

 

Вот базовый пример того, как призыв к действию реализован на Optimizely.

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

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

Итак, давайте начнем с рассмотрения того, как простое изменение, например, цвет кнопки, может оказать огромное влияние.

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

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

 

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

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

2. Не усложняйте дизайн

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

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

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

3. Разумно используйте размер

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

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

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

Вот пример разумного размера CTA из мобильного сайта Dollar Shave Club:

размер призыва к действию

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

4. Не предоставляйте вариантов выбора

В маркетинговых исследованиях Айенгар и Леппер сделали следующий вывод:

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

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

И это означает, что ваша конечная цель — использовать только одну кнопку призыва к действию на целевую страницу.

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

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

5. Используйте короткий текст

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

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

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

 

Для примера вернемся к исследованию Midas Media. Это же исследование показало, что высокопроизводительные кнопки CTA обычно используют очень мало слов:

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

Практикуйте A/B тестирование

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

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

Для сравнения старого варианта с новым есть два способа. Самый простой — внести изменения и наблюдать как меняется конверсия, но тут есть свои недостатки, изменение коэффициента конверсии может быть вызвано сторонними факторами, например, сезонностью спроса. Более оптимальный — одновременное тестирование  двух версии, когда пользователи случайно делятся на две группы, которые видят разные версии сайта, так вы сможете сравнить изменения конверсии, убрав внешние факторы. Подробнее про A/B тестирование вы можете прочитать в отдельном посте.

 

миф или реальность? / Boosta.ru corporate blog / Habr

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

A/B тестирование – совсем непростой инструмент для повышения конверсии. И новичкам бывает очень сложно создать хороший, обдуманный и обоснованный эксперимент. А ведь так хочется запустить небольшой A/B тест, повысить конверсию и положить дополнительную 1 000 $ к себе в карман через недельку. И именно в этом случае начинается тестирование всех элементов подряд. Безусловно, это ошибка.

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

Для наглядности рассмотрим 4 кейса

1 кейс: изменение одного слова на кнопке призыва к действию – увеличение кликабельности на 90%

Этот эксперимент Майкл Аагаард (эксперт в области оптимизации конверсии и копирайтинга) проводил на лендинге компании Unbounce. Как видно на картинке, было изменено всего одно слово.

Изначально текст призыва к действию был «Начни свой 30-дневный бесплатный период». В тестовом варианте изменили лишь одно слово – «Начать мой 30-дневный бесплатный период».

В результате этого эксперимента кликабельность CTA-кнопки увеличилась на 90 %.

Таким образом, изменение лишь одного местоимения в призыве к действию увеличило количество переходов на следующий этап воронки продаж на 90 %. Это отличный результат для такого простого эксперимента, который может запустить даже новичок в A/B тестировании.

Поехали дальше.

2 кейс: добавление одного слова в CTA-кнопку – увеличение платежей на 31.47 %

Этот эксперимент проводился на последнем этапе воронки продаж – странице оплаты. Проект Writework.com — это платный образовательный портал для студентов колледжей и университетов.

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

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

Как видно на картинке, первоначальный вариант CTA-кнопки был «Создать аккаунт». В результате этого эксперимента количество платежей увеличилось на 31.47 %.

Всего одно добавленное слово привело к такому значительному увеличению конверсии.

Далее ещё 2 убедительных примера.

3 кейс: изменение цвета CTA-кнопки – повышение продаж на 35.81 %

Этот A/B тест проводился на страницах товаров интернет-магазина, который занимается продажей фарфора.

Как видно на картинке, изначально CTA-кнопка «Добавить в корзину» была синего цвета, в то время как и текст, и фон имели аналогичные цвета. Как считаете, в чём была проблема?

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

В тестовом варианте цвет был заменён на зелёный. Благодаря такому незначительному изменению продажи интернет-магазина увеличились на 35.81 %.

А теперь представьте, что означает увеличение продаж крупного интернет-магазина на 35.81 %. Это суммы с пятью, шестью или семью нулями!

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

4 кейс: Добавление 3 слов в CTA-кнопку – увеличение кликабельности на 213.16 %

Этот A/B эксперимент проводился на посадочной странице компании Fitness World – самой крупной сети тренажёрных залов в Скандинавии. Была поставлена цель – увеличение количества переходов к странице оплаты, где потенциальному клиенту предлагается выбрать тренажёрный зал и оплатить абонемент.

Оригинальный вариант CTA-кнопки имел текст «Приобрести абонемент». В тестовом варианте было добавлено 3 слова – «Выбрать тренажёрный зал и оплатить абонемент». В результате этого эксперимента количество переходов на следующий этап воронки продаж увеличилось на 213.16 %.

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

Итак, мы рассмотрели 4 отличных кейса A/B тестирования, в которых совсем незначительные изменения имели серьёзный успех. Какой же вывод можно сделать из всего этого?

Вывод

Маленькие изменения имеют значения. Да, это так. Это проверено на практике. Но это совсем не говорит о том, что они всегда приводят к увеличению конверсию. И это факт.

Небольшие изменения в A/B тестах работают только в том случае, если они касаются критических элементов. В нашем случае это были CTA-кнопки — они являются наиболее распространенным объектом A/B экспериментов

Почему?

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

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

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

Подготовлено блогом Boosta.ru и проектом Changeagain.me

Читайте также наши другие популярные статьи:

1. Они помогут найти всех «убийц» конверсии — 10 отчётов в Google Analytics (5000+ просмотров)
2. 100 идей для A/B тестирования. Часть первая (2000+ просмотров)
3. 100 идей для A/B тестирования: Часть вторая (1000+ просмотров)
4. Как найти идею для A/B теста: тепловые карты и опросы (1000+ просмотров)

Перевод и адаптация: http://contentverve.com/10-call-to-action-case-studies-examples-from-button-tests/

Как дизайн CTA-кнопки может увеличить конверсию?

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

Данная информация рекомендована всем. Она существенно расширит ваше понимание практики оптимизации конверсии и лидогенерации. Напомним, что кнопкой призыва к действию, или CTA-кнопкой (call-to-action button), мы называем ссылку, часто оформленную в виде кнопки, нажатие на которую приводит к отправке данных лид-формы или выпонению любого другого целевого действия.

Что вы должны знать и помнить oб CTA-кнопках

Для посадочной страницы призыв к действию олицетворяет собой переломный момент между конверсией (Conversion) и отказом от нее (Bounce). Если вы просите пользователя сделать что-либо на вашем лендинге, то дабы выполнить желаемое действие, он должен воспользоваться вашим CTA-элементом — независимо от того, что вы конкретно предлагаете: загрузить eBook, заполнить лид-форму, купить товар/услугу или просто перейти на другую страницу.

CTA: Переломный момент между конверсией и отказом от нее

Кнопки призыва к действию состоят из двух основных элементов: собственно дизайна (цвет, форма, шрифт) и текста. Они оба имеют непосредственное влияние на конверсию, однако играют разные роли в процессе преобразования: 

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

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

Читайте также: 4 уловки повышения эффективности призывов к действию

Начнем с примера из реальной жизни

Сейчас речь пойдет о крупном европейском сайте электронной торговли, продающем фарфор, расписанный вручную (по материалам сайта contentverve.com). Изменяя цвет и форму кнопки призыва к действию, маркетологам удалось повысить продажи продукта – не только рейтинг кликабельности (CTR) – на 35,81%.

Это пример прекрасно иллюстрирует, какое влияние на конверсию может оказывать дизайн CTA-кнопок.

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

Нет универсальной формулы «абсолютной CTA-кнопки», срабатывающей каждый раз

Твитнуть цитату:

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

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

Главное – выделить кнопку

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

Миллионов цветов на выбор, и с какого мне начать?

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

Еще пример из реальной практики

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

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

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

Читайте также: Искусство сочетания цветов — яркий путь к высокой конверсии

Визуальные эффекты

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

Рассмотрим несколько примеров

В предыдущем примере (сайт для торговли недвижимостью) оранжевая кнопка с зеленой стрелкой конвертировала значительно лучше, чем скучный коричневатый оригинал. Дизайнеру не понравилась новая кнопка, несмотря на положительное влияние, оказанное ей на конверсию – его главное возражение сводилось к тому, что сочетание оранжевой кнопки с зеленой стрелкой кажется ему «уродливым». Специалист по оптимизации приводил свой довод: зеленая стрелка делает кнопку более заметной, а следовательно – более активно взаимодействующей с пользователем.

Спор разрешило простое А/Б-тестирование. Дизайнер оказался неправ: кнопка без стрелки понизила конверсию на 12,29%.

А вот противоположный пример: эксперт по оптимизации предположил, что, изменив цвет надписи на зеленой кнопке с черного на желтый, он еще больше выделит кнопку на странице и увеличит CTR. Увы, последствия были самыми неприятными: изменение цвета надписи снизило кликабельность 18,01%.

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

Простая зеленая кнопка с описательным текстом превзошла «креативную» на 10,94%.

Размер имеет значение, но «больше» не всегда значит «лучше»

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

Вот пример, в котором увеличение размера графического элемента привело к снижению конверсии на 10%:

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

Уважайте текст на CTA-кнопке!

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

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

Читайте также: Контурные кнопки: 15 примеров призывов к действию на посадочных страницах

Что вы должны сделать прямо сейчас

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

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

Высоких вам конверсий!

По материалам: unbounce.com

26-05-2013

10 столпов эффективности / Habr

Расскажу о первых факторах которые, по моему мнению, влияют на эффективность CTA (call to action) кнопки, она же «купить» в икоммерц-проектах.
Никаких советов и кейсов, скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.

1) Расположение


Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране — то сами, своими руками, снижаем конверсию.
Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.


Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.

2) Размер


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


На сайте Yoox нет сомнений какой элемент интерфейса главный.

3) Цвет


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


На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.

4) Текст (содержание)


Это мой любимый момент. В качестве текста внутри кнопки можно видеть на сайтах зоопарк вариантов. Я считаю, что текст в кнопке должен:
  • точно отражать действие, конкретизировать его. В этом смысле «купить» не говорит ни о чем.
  • включать эмпатию. Например «Положить в мою корзину»
  • содержать призыв к действию, не быть нейтральным.

Сюда же: Стрелка спецсимволом (→) в кнопке, если после ее нажатия происходит переход и ее отсутствие если перехода нет.


На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.

5) Форма


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


На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.

6) Интерактивность / тактильность


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


Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.

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

7) Повторение


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


На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.

8) Качество исполнения


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


Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.

9) Изменяемость


При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? — Никому. Привлекает внимание? — Да.
Прием для сплит-теста годится, пробуем.

10) Взаимосвязь с другими CTA-кнопками


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


На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.

Заключение


Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии — прямо и непосредственно. Я повышал за счет этого продуктивность в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.

Всем рабочих кнопок!

Отправить ответ

avatar
  Подписаться  
Уведомление о