Ответ
Дизайн CTA кнопки: как получить больше кликов Опции темы
Старый 25.12.2014, 23:58
  #1
Nataly
 
Регистрация: 30.07.2014
Сообщений: 474

Дизайн CTA кнопки: как получить больше кликов
Успех или неудача сводится к одному клику. И получение кликов на сайте (или касаний сенсорного экрана) зависит от множества факторов. Тем не менее, один маленький фактор имеет большое значение - это дизайн самой кнопки. Они везде: в сообщениях электронной почты, на домашней и посадочной страницах, контактной форме и страницах с корзиной. Большинство 4+ миллиардов страниц в интернете имеют кнопки навигации.

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

1. Используйте слова-действия

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

Таким образом, кнопки без глаголов...

• Подписка на рассылку
• Загрузка документа
• Подробнее

...становятся более ориентированными на действие, когда к ним добавляется глагол...

• Подписаться на обновления
• Скачать документ
• Узнать больше

2. Ваша кнопка проходит тест WYLTIWLT?

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

• Хотели бы вы [текст кнопки]?
• Я бы хотел [текст кнопки].

Другими словами, спросите себя, может ли текст кнопки быть прочитан от лица сайта и от лица посетителя. Если текст вашей кнопки «узнать больше», вы бы сказали «Вы хотели бы узнать больше?» и «Я хотел бы узнать больше». Так как в обоих случаях фраза имеет смысл, то текст прошел тест.

Если текст кнопки «Посмотреть ваш отчет», то задавая вопрос, вы бы сказали «Вы хотели бы увидеть ваш отчет?» и «Я хотел бы увидеть ваш отчет». Поскольку второй вариант не очень подходит, этот текст не проходит тест. Этот способ быстро убедиться в том, что текс каждой кнопки, который начинается с действия работает и от лица маркетолога и от лица посетителя. Кстати, каждая кнопка со словом-действием на Facebook проходит этот тест!





Такой подход был предложен Jonathan Richards, который и создал аббревиатуру для него: WYLTIWLT (Would you like to, I would like to).

3. Я или Вы: первое или второе лицо?

Использование местоимения является альтернативой нейтральному высказыванию. Но местоимение следует использовать с осторожностью. Tim Paige из Lead Pages протестировал текст с использованием местоимений первого и второго лица, создавая две кнопки с призывом к действию. Вот что он обнаружил.





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

«Eugene Schwartz как-то сказал, что вы должны «вставить беседу, которую клиент ведет в своей голове». Поэтому, если посетители смотрят на ваш призыв к действию, то что бы они сказали о том, что они хотят сделать? («Я хочу...»)». (Tim Paige, Lead Pages)

Совет: в заголовке и тексте используйте местоимения второго лица (вы, ваш), а в тексте кнопок местоимения первого лица (я, мое).

4. Используйте цвет, который контрастирует с другими элементами

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





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





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

«Призыв к действию должен всегда стоять на первом месте. Никто не любит тратить время на сканирование страницы в поисках следующего логического шага. Используйте данную цветовую модель, чтобы убедиться, что ваш главный призыв к действию не только выделяется, но приковывает взгляды пользователей». (Angie Schottmuller, Three Deep Marketing)

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

5. Размер кнопки должен быть достаточно большим, чтобы нажать на нее

Не у всех есть мышка под рукой. Пользователь должен иметь возможность комфортно нажать на кнопку, как с мобильного телефона, так и с планшета. Следовательно, ее размер должен соответствовать человеческому пальцу. Apple, как известно, рекомендует минимальный размер кнопки 44 х 44 пикселей, но исследование MIT Touch Lab показывает, что средний указательный палец составляет 45 x 57 пикселей.

Это связано с тем, что кончик пальца имеет не круглую, а овальную форму. Большой палец немного больше. Если вы предполагаете, что вашу кнопку будут нажимать большим пальцем (если, например, она располагается в нижнем углу приложения для планшета), сделайте ее шире: 45 x 72 пикселей.





Совет: создавайте удобную для нажатия кнопку размером примерно в 45 x 60 пикселей.

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





«Рассмотрите возможность добавления выбора. Добавьте дополнительную ссылку или менее контрастную кнопку, расположенную рядом с кнопкой с призывом к действию, которая бы представляла собой отрицательный результат не совершения действия. Смысл текста этой кнопки заключается в следующем: «Я не хочу принимать ту полезную вещь, которую вы предлагаете мне в предыдущей кнопке». Это меняет ход решения с «Следует ли нажимать на кнопку?» на «Какую кнопку мне нажать?»». (Brian Massey, Conversion Scientist).

6. Снизьте уровень вовлечения («Начать шоппинг» или «Купить сейчас»)

Некоторые действия подразумевают взятие на себя больших обязательств, а другие нет. Аналогичным образом, некоторые кнопки означают больше обязательств, чем другие. Они вызывают разные психологические реакции и больше обеспокоенности. Если кнопка с призывом к действию просит посетителей потратить время или деньги, то они с меньшей вероятностью кликнут по ней. Litmus протестировал язык кнопки для двух CTA «Начать тестирование» и «Прочитать наш обзор». Они обнаружили, что вторая версия получила на 124% больше кликов.





Разница заключается в размере обязательств. Кнопка «Начать тестирование» говорит посетителю, что, щелчок по кнопке инициирует потенциально длительный процесс, подразумевающий работу. Тогда как «Прочитать наш обзор» означает меньшие затраты времени. Аналогично, «Начать шоппинг» звучит как приятная прогулка по каталогу продукции. Тогда как «Купить сейчас» звучит, как стремление залезть в ваш кошелек.

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

Совет: снизьте уровень обязательств в тексте ваших кнопок.

7. Создавайте кнопки, которые выглядят как картинки, но сделаны как ссылки

Слово «кнопка», как правило, означает графическое изображение, точно также, как «ссылка», как правило, означает текст. Однако находчивые дизайнеры делают кнопки, которые выглядят как картинки, но построены как ссылки.

С графическими кнопками связано ряд проблем...

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

Кнопки на основе кода не имеют ни одну из этих проблем. Так как вы можете создавать прекрасные кнопки с помощью HTML и CSS, я не могу представить себе ни одной причины, по которой вы делали бы свою кнопку картинкой. Кнопки, созданные на основе HTML/CSS, иногда называют «пуленепробиваемыми», так как они изображаются везде, в том числе в электронной почте. Если в вашей команде нет времени, чтобы помочь вам с этим, не беспокойтесь.

Campaign Monitor создал программу, которая позволяет практически любому человеку создавать пуленепробиваемые кнопки. Если у вас уже имеются графические кнопки и у вас возникли проблемы с их изменением, убедитесь в том, что альт тег включает в себя кнопку label. Таким образом, она будет показываться в письмах, даже если подписчик не нажал на кнопку «Загрузить изображения».





Совет: создавайте пуленепробиваемые кнопки с помощью HTML и CSS, особенно если они предназначаются для электронной почты.

Вывод

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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить больше фолловеров в Twitter Nataly Статьи 0 22.08.2014 01:16
Добавление кнопки «наверх» на WordPress блоге dangerous Статьи 0 13.07.2013 20:19
40% кликов Google Adwords получает хитростью Alsu Магазины 3 07.03.2013 14:40
Как получить больше комментариев к своим статьям Admin Аналитика 0 08.12.2012 00:17

Метки
cta кнопка, дизайн, клик, посетители, призыв к действию, трафик, эффект фон ресторфа


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 13:12. Часовой пояс GMT +3.