Кнопка «Заказать обратный звонок»
Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку «Заказать обратный звонок«. Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Обычно кнопку «заказать обратный звонок» располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, — это больше относится к сайтам бизнес тематики и услуг.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать.
О том, как настроить контактную форму можно почитать в этих статьях:
- Создание формы обратной связи
- Контактная форма с чекбоксами и выпадающим списком
- Отправка формы без перезагрузки страницы
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: 🙂
Еще раз повторюсь — это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:
<a href="#modal">Заказать обратный звонок</a>
Теперь нужно создать контейнер модального окна:
<div>
<div>
<div>
содержимое модального окна
</div>
<a href="#close" title="Закрыть"></a>
</div>
</div>
Я добавил небольшую контактную форму, получилось так:
<div>
<div>
<p>Оставьте ваш телефон<br/>и наш консультант свяжется с вами</p>
<form name="backPhone">
<input name="telephone" type="Tel" maxlength="20" placeholder="Введите ваш телефон" required=”required” />
<button type="submit" form="backPhone">Получить прайс </button>
</form>
<a href="#close" title="Закрыть"></a>
</div>
</div>
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
Скачать исходник
А с html разметкой — все.
Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.
Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.
А на сегодня — все! Всем пока!
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на онлайн консультантов, которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.
Как создать форму обратного звонка
17260
| How-to | – Читать 6 минут |
Прочитать позже
ЧЕК-ЛИСТ: КОНТЕНТНАЯ ЧАСТЬ — НОВЫЙ ФУНКЦИОНАЛ
Форма обратного звонка нужна для повышения конверсии сайта.
С ее помощью можно проконсультировать и подвести клиента к покупке. Если на сайте нет кнопки callback, вы рискуете потерять «теплых» клиентов.
Виджет «Обратный звонок» (или call back в переводе) зарекомендовал себя как эффективный инструмент продаж в интернет-магазинах. С его помощью посетитель сайта может за несколько секунд связаться с оператором.
Обратный звонок с сайта и постоянная доступность магазина повышают лояльность покупателя. А некоторые случайные посетители становятся реальными клиентами.
Плюсы формы обратного звонка
Сводит к минимуму отказы.
Упрощает общение продавца с покупателем.
Сохраняет контакты обратившихся посетителей.
Повышает доверие постоянных клиентов.
Подталкивает к совершению действия.
Повышает качество обслуживания.
Позволяет проводить анализ эффективности страниц.
Дает понимание того, что непонятно покупателю.
Минус у такого способа связи лишь один.
Заключается он в раздражении, которое может возникать у посетителя при появлении кнопки. Чтобы этого не происходило, разработчики форм создали инструменты обработки и умные алгоритмы появления формы на сайте.
Они позволяют отображать ее только на определенных страницах, при определенных условиях или через определенное время после захода на сайт.
Как установить обратный звонок на сайте
#1
Вставить готовый скрипт в HTML-код страницы
Есть множество сайтов, предлагающих готовые скрипты кнопок, позволяющих заказать обратный звонок. Бесплатно. Вы вносите обновление в код HTML, после чего форма обратной связи появляется на сайте. Поскольку услуга бесплатная, она обычно обладает небольшим функционалом. Кнопка выглядит примерно так:
Разные скрипты могут по-разному отправлять вам уведомления о заявках клиентов, но обычно они приходят на почту, которую вы указали.
#2
Купить форму обратной связи по выбранному тарифу
В этом случае вы сами выбираете цвет и размер кнопки, определяете место ее расположения на странице и другие параметры.
Одним из самых популярных сервисов среди владельцев коммерческих сайтов является Callback Hunter. Его алгоритм рассчитывает удобный момент появления кнопки обратного звонка перед каждым посетителем сайта. Тем самым виджет не раздражает человека, но ненавязчиво предлагает помощь специалиста.
Чем дольше такая форма будет находиться на сайте, тем эффективнее будет происходить расчет алгоритма. Если человек решит связаться с оператором, оповещение тут же поступит на телефон. Чтобы включить функцию Callback Hunter, необходимо заполнить контактные данные и получить готовый код.
Скопируйте его и вставьте на сайт.
После этого виджет обратного звонка должен появиться на странице.
Использование бесплатных версий приносит ряд неудобств владельцу сайта:
Оповещение о запросе клиента на обратный звонок на почте можно увидеть не сразу.
Кнопка бывает слишком яркой, мигающей. Изменить ее дизайн нельзя.
Ограниченный функционал: минимум SMS, нет отчетов о количестве звонков.
Самая большая опасность для вас как продавца состоит в потере времени. Если вы перезваниваете через несколько секунд, то можете «дожать» клиента. Уведомление на почту не всегда приходит сразу, да и срабатывает человеческий фактор — перезвон клиенту может состояться через 5-15 минут. Для него ваша информация уже может быть неактуальной.
При установке формы «Заказать звонок» ваша основная задача — ненавязчиво предложить посетителю связаться с вами и как можно скорее перезвонить ему, если вы получили запрос. Обратные звонки оплачиваете вы согласно тарифам выбранного сервиса. Стоимость абонплаты колеблется от $10 до $30 в месяц, а каждая минута разговора стоит примерно $0,05.
Наиболее популярные разработчики форм обратного звонка: CallbackHunter, Redconnect, CallbackKiller, HookMyVisit, CallbackHub, Envybox.
Как установить кнопку обратного звонка на WordPress
Определитесь с функциями, которые обязательно должны быть в вашей форме.
Рассчитайте затраты и окупаемость сервиса обратных звонков. Для небольших интернет-магазинов с малым потоком клиентов можно использовать бесплатные версии без ежемесячной абонплаты.
Если на вашем сайте большой трафик посетителей, обратите внимание на платные варианты с переадресацией звонков на ваш телефон. Оповещение на почту в данном случае будет малоэффективным.
Предположим, вы решили установить бесплатную кнопку callback на сайте WordPress. Зайдите на сервис и введите свой почтовый адрес, название сайта. Выберите цвет будущей кнопки и нажмите «Получить код».
Скопируйте его и вставьте в код страниц вашего сайта перед закрывающим тегом </body>. Нажмите «Обновить файл».
Проверьте работоспособность кнопки на вашем сайте. Аналогичным образом устанавливаются виджеты других сервисов. Например, после обновления кода в футере форма Redconnect выглядит так:
Аналогичные решения также доступны в виде плагинов и модулей для всех популярных CMS. Например, обратный звонок на OpenCart настраивается бесплатным модулем Callback Full.
Заключение
Виджет обратной связи используется на коммерческих сайтах для повышения конверсии и улучшения качества обслуживания клиентов.
Бесплатные версии разработчиков подразумевают урезанный функционал. Их можно использовать для небольших интернет-магазинов. Для крупных сайтов лучше устанавливать платные версии с переадресацией вызовов, чтобы не терять ни одного потенциального клиента.
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
| Начать работу со «Списком задач» |
Сэкономьте время на изучении Serpstat
Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?
Оставьте заявку и мы свяжемся с вами 😉
Оцените статью по 5-бальной шкале
3.
38 из 5 на основе 13 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Denys Kondak
Как создать страницу 404 ошибки
How-to
Denys Kondak
Как проверить валидность верстки
How-to
Denys Kondak
Как продлить домен и почему срок действия домена влияет на SEO
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Кнопка обратного звонка — добавьте кнопку «Запрос обратного звонка» в свой магазин
Связанные категории
от ShopFox
Добавьте кнопку «Запросить обратный звонок» в свой магазин
2 отзыва
Доступен бесплатный план
Посмотреть демо-магазин
Раздел ключевых значений
Широкие возможности настройки
Добавьте кнопку «Запрос обратного звонка» в свой магазин Shopify, чтобы увеличить количество получаемых потенциальных клиентов. Выберите свои собственные цвета и этикетки
Доступно 24/7
Клиенты могут попросить перезвонить даже в нерабочее время. Затем вы можете звонить им, когда захотите. Уменьшите отказы!
GDPR-совместимый
Мы отображаем вашу политику конфиденциальности и флажок, чтобы принять эту политику для ваших европейских клиентов во всплывающем окне обратного вызова.
Галерея избранных изображений
Информация о приложении
Кнопка обратного вызова
Добавьте кнопку «Запрос обратного звонка» в свой магазин Shopify, чтобы увеличить количество потенциальных клиентов, которые вы получаете
Кнопка обратного звонка добавляет настраиваемую кнопку «Запрос обратного звонка» на страницы вашего продукта. Ваши клиенты могут выбрать, хотят ли они, чтобы с ними связывались по телефону, SMS или WhatsApp. Вы можете изменить эти параметры контакта в зависимости от ваших предпочтений. Выберите свои собственные цвета и этикетки, чтобы они соответствовали дизайну вашего магазина.
Повышение коэффициента конверсии
В частности, для более дорогих или индивидуальных продуктов добавление способа, с помощью которого ваши клиенты могут легко общаться с вами, может значительно повысить коэффициент конверсии. С помощью кнопки обратного звонка ваши клиенты просто должны ввести свой номер телефона и ждать, пока вы с ними свяжетесь.
Доступен круглосуточно и без выходных
Клиенты могут запросить обратный звонок даже в нерабочее время. Затем вы можете перезвонить им, когда захотите. Если вы укажете только номер своего магазина на своем веб-сайте, вы потеряете продажу.
Соответствует GDPR
Кнопка обратного вызова соответствует GDPR — мы отображаем вашу политику конфиденциальности и флажок, чтобы принять эту политику для ваших европейских клиентов во всплывающем окне обратного вызова.
Код не требуется
Вам не нужно изменять файлы темы вашего магазина или добавлять какой-либо код в ваш магазин. Просто нажмите кнопку «Установить», и приложение будет автоматически добавлено в ваш магазин (и его также можно удалить одним щелчком мыши, если вы решите, что оно вам не нравится!).
Дата запуска
15 августа 2019 г.
Интегрируется с
- Телефон
- смс
Кнопка обратного вызова
Добавьте кнопку «Запрос обратного звонка» в свой магазин Shopify, чтобы увеличить количество потенциальных клиентов, которые вы получаете
Кнопка обратного звонка добавляет настраиваемую кнопку «Запрос обратного звонка» на страницы вашего продукта. Ваши клиенты могут выбрать, хотят ли они, чтобы с ними связывались по телефону, SMS или WhatsApp. Вы можете изменить эти параметры контакта в зависимости от ваших предпочтений. Выберите свои собственные цвета и этикетки, чтобы они соответствовали дизайну вашего магазина.
Повышение коэффициента конверсии
В частности, для более дорогих или индивидуальных продуктов добавление способа, с помощью которого ваши клиенты могут легко общаться с вами, может значительно повысить коэффициент конверсии. С помощью кнопки обратного звонка ваши клиенты просто должны ввести свой номер телефона и ждать, пока вы с ними свяжетесь.
Доступен круглосуточно и без выходных
Клиенты могут запросить обратный звонок даже в нерабочее время. Затем вы можете перезвонить им, когда захотите. Если вы укажете только номер своего магазина на своем веб-сайте, вы потеряете продажу.
Соответствует GDPR
Кнопка обратного вызова соответствует GDPR — мы отображаем вашу политику конфиденциальности и флажок, чтобы принять эту политику для ваших европейских клиентов во всплывающем окне обратного вызова.
Код не требуется
Вам не нужно изменять файлы темы вашего магазина или добавлять какой-либо код в ваш магазин. Просто нажмите кнопку «Установить», и приложение будет автоматически добавлено в ваш магазин (и его также можно удалить одним щелчком мыши, если вы решите, что оно вам не нравится!).
Дата запуска
15 августа 2019 г.
Интегрируется с
- Телефон
- смс
Это приложение поддерживается ShopFox
Как связаться с
Ресурсы
- Часто задаваемые вопросы
- Политика конфиденциальности
О ShopFox
Цены
- До 20 лидов в месяц
- Выбор телефона, SMS и WhatsApp
- До 20 лидов в месяц (после первых 20 бесплатных лидов)
- СМС оповещения в режиме реального времени
- Выбор телефона, SMS и WhatsApp
- Бесплатно, если в этом месяце 0 лидов
Профессиональный
- До 100 лидов в месяц (после первых 20 бесплатных лидов)
- СМС оповещения в режиме реального времени
- Выбор телефона, SMS и WhatsApp
- Бесплатно, если в этом месяце 0 лидов
Предприятие
- Неограниченное количество лидов в месяц
- СМС оповещения в режиме реального времени
- Выбор телефона, SMS и WhatsApp
* Все расходы оплачиваются в долларах США.
** Регулярные платежи, включая ежемесячные платежи или платежи на основе использования, выставляются каждые 30 дней.
3,5 из 5 звезд
Общий рейтинг отражает текущее состояние приложения. Он учитывает все обзоры приложений, но отдает приоритет самым последним.
Подсчета за уровень рейтинга
5 из 5 звезд
50% рейтингов — 5 звезд—
1
4 из 5 звезд
0% рейтингов 4 звезды—
3 3 из 5 звезд
0% оценок 3 звезды—
2 из 5 звезд
50% оценок 2 звезды—
1
1 % оценок 3 звезды 0 0
—
Посмотреть все 2 отзыва
Список отзывов
2 из 5 звезд
23 августа 2019 г.
Расположение Великобритания
Пробовал.
Не работает, кнопка не работает. Действительно глючил и начал показывать ошибки на моей странице. Я нашел другое приложение, которое кажется намного лучше.5 из 5 звезд
21 августа 2019 г.
Расположение США
Время, проведенное в приложении Около 2 месяцев
Я использую это приложение, и оно очень хорошее, простое и я не теряю клиентов, кроме того, обслуживание клиентов впечатляет, я определенно рекомендую его.
Приложения похожие на Кнопка обратного звонка
Easy Contact Form Builder
by qikify
Контактная форма, форма предварительного заказа, конструктор форм, форма настраиваемого поля
4,8 из 5 звезд (408 отзывов)
Доступен бесплатный план
Мощный конструктор контактных форм
от Globo
Простая контактная форма, регистрационная форма, загрузка файла, форма заказа
4,8 из 5 звезд (796 отзывов)
Доступен бесплатный план
Hulk Form Builder
от HulkApps.
comСоздавайте стильные формы легко и за считанные секунды.
4,8 из 5 звезд (550 отзывов)
Доступен бесплатный план
Виджет чата WhatsApp
от SeedGrow
Виджет чата, кнопка контакта WhatsApp и служба поддержки клиентов
4,7 из 5 звезд (44 отзыва)
Доступен бесплатный план
17 лучших практик для безумно эффективных кнопок призыва к действию
Кнопки призыва к действию (CTA) — это кнопки, которые вы используете на своем веб-сайте и на своих целевых страницах, чтобы направлять пользователей к конверсии вашей цели. Это часть целевой страницы, которую пользователь должен щелкнуть, чтобы выполнить действие, которое вы от него хотите. Кнопки призыва к действию могут различаться по стилю и размеру в зависимости от вашей цели конверсии и стиля сайта. Некоторые распространенные примеры кнопок призыва к действию:
- Кнопки добавления в корзину
- Кнопки подписки на бесплатную пробную версию
- Кнопки загрузки
Кнопки CTA имеют очень конкретную цель: заставить вашего веб-посетителя нажать и совершить конверсию.
Сегодня мы обсудим 17 рекомендаций по использованию кнопок с призывом к действию, которые помогут вам получить более высокий CTR и больше конверсий от ваших красивых кнопок.
Воспользуйтесь этими советами и рекомендациями, чтобы получить все клики! И когда вы закончите, ознакомьтесь с этими 36 лучшими фразами с призывом к действию… когда-либо!
1. Используйте динамичный текст
Кнопки с призывом к действию должны содержать яркий, ориентированный на действие текст. Замените скучные слова, такие как «отправить» и «вступить», на более насыщенные словами, такие как «получить», «зарезервировать» и «попробовать». Ваши слова действия должны сопровождаться конкретным текстом, относящимся к вашему предложению, например:
- Попробуйте нашу бесплатную пробную версию
- Забронируйте место
- Скачать технический документ
Текст кнопки «Пройди этот курс» на Udemy дает отличное действие, связанное с предложением.
У Детского музея Питтсбурга приятный дизайн сайта, но текст кнопки мог бы быть лучше. Вместо скучного «Go» почему бы не попробовать «Book An Event»?
2.
Герцог Цветов, Цвета.#ВещиТолько90sДетиПоймут. Цвет кнопки имеет значение. Это очень важно. На самом деле, если вы собираетесь следовать только одному крошечному совету из этого поста, он должен уделить особое внимание цветам ваших кнопок.
Вообще говоря, зеленые и оранжевые кнопки работают лучше всего. В конечном счете, это будет зависеть от дизайна вашего сайта, поскольку контрастные цвета лучше всего подходят для выделения ярких кнопок. Вам не нужна зеленая кнопка CTA на зеленом фоне.
Зеленый и фиолетовый — контрастные цвета, к тому же эти динозавры очаровательны.
Если вы не уверены, что выглядит лучше, проведите суперсложный тест на косоглазие и посмотрите, какой из них выглядит наиболее привлекательным. Однако, если вы действительно хотите знать, какой цвет CTA-кнопки будет лучше всего работать на вашей странице, тестирование — единственный способ!
Ознакомьтесь с нашим руководством по психологии цвета — очень интересно, как разные цвета вызывают разные эмоции!
3.
Эффектные формы кнопокФорма кнопки также может сыграть большую роль при создании идеальной кнопки CTA. Вам нужно будет подумать, хотите ли вы использовать более округлую форму кнопки или кнопку с квадратными краями. Трудно сказать, что здесь работает лучше, поскольку оба стиля являются общими, и оба могут хорошо работать в разных условиях. В конечном итоге вам придется протестировать формы и посмотреть, что лучше всего подходит для вашего бизнеса!
В тесте ContentVerve закругленная зеленая кнопка показала себя лучше, чем синий прямоугольник
4. Крупный и разборчивый текст.
Текст кнопки должен быть достаточно большим, чтобы его можно было легко прочитать, но не настолько большим, чтобы он выглядел неприятным или пугающим. Вы хотите избежать ситуации «Дорогой, я взорвал ребенка».
Хотя может показаться абсурдным утверждение, что крупный текст вызывает у людей тревогу или дискомфорт, многие пользователи испытывают подсознательное отвращение к угрожающе крупным шрифтам. Текст кнопки должен быть достаточно большим, чтобы привлекать внимание, но не настолько большим, чтобы он полностью перекрывал остальной контент.
5. Текст кнопки не должен продолжаться снова и снова
Ранее мы обсуждали, как хорошо использовать конкретный текст кнопки, ориентированный на действие. Учитывая это, может показаться заманчивым растянуть текст кнопки, но это будет плохой ход. В идеале вы хотите, чтобы текст этой кнопки состоял из двух или пяти слов.
Эта кнопка CTA, вероятно, в порядке, но она приближается к красной зоне. качественная медийная реклама с призывом к действию, специально подобранная для вашего бизнеса.
СВЯЗАННЫЕ: 36 лучших фраз призыва к действию (реальные примеры + советы!)
6. Используйте речь от первого лица («получите
ваш бесплатный шаблон ») от первого лица («получите мой бесплатный шаблон »), что привело к увеличению количества кликов на 90%! Посмотрите, как изменение CTA-кнопки на вид от первого лица (поставьте себя на место клиента) повлияет на CTR.7. Создайте ощущение срочности
Создание ощущения срочности в кнопках с призывом к действию может привести к впечатляющим показателям кликабельности. Например, вы можете использовать текст кнопки:
- Зарегистрируйтесь и получите скидку 50% только сегодня!
- Загрузите электронный курс по сборке приложений за 30 долларов 10 долларов!
Даже простое добавление «сейчас» создает у пользователей тонкое ощущение срочности:
- Зарегистрируйтесь на лучший вебинар PPC прямо сейчас!
В приведенном ниже примере хорошо создается ощущение срочности. Моя единственная проблема с этим — красные метки X — они там для обозначения пунктов информации, но для меня это выглядит так, как будто они распроданы или отменены. Это опасное заблуждение!
8. Держите ее в верхней части страницы
Вы всегда хотите, чтобы кнопка с призывом к действию находилась в верхней части страницы, чтобы пользователи никогда ее не пропустили. Как отмечалось в предыдущем посте о передовых методах работы с целевой страницей, важная жизненно важная информация всегда должна находиться в верхней части страницы. Дополнительная дополнительная информация должна оставаться ниже сгиба, где она остается доступной для оценки, но не отвлекает.
9. Естественная иерархия
Иногда на вашей веб-странице могут быть другие кнопки, которые не являются вашими основными кнопками призыва к действию. Эти кнопки должны привлекать меньше внимания, чем основная кнопка CTA. Для кнопок без CTA попробуйте использовать кнопки с оттенками серого или монохроматические цвета. Ваша основная кнопка призыва к действию всегда должна быть самой большой и яркой.
Starbucks проделала хорошую работу по прояснению своей основной кнопки CTA, сохранив цветовую схему
10. Используйте копию кнопки для ценностного предложения
Вы могли заметить, что многие кнопки содержат слово «бесплатно», например, Моя бесплатная электронная книга». «Бесплатно» — заманчивое слово, и использование этого слова в тексте кнопки подчеркивает ценность вашего предложения. Подумайте о ценностном предложении вашего предложения и о том, как его лучше всего отобразить в кнопке призыва к действию.
11. Привлеките внимание графическими элементами кнопок
В некоторых случаях небольшие стрелки или графические элементы на кнопке CTA могут положительно повлиять на количество кликов. Если вы собираетесь использовать графику, убедитесь, что ваши значки разъясняют, а не путают предложение для пользователей. Например, вы хотели бы избежать использования значка загрузки диска для пользователя, который регистрируется для участия в вебинаре.
12. Текст бонусной кнопки. В некоторых ситуациях в маркетинге с призывом к действию может потребоваться добавление дополнительной строки информации в текст кнопки.
Это обычное дело для кнопок бесплатной пробной версии. Например, кнопка бесплатной пробной версии может содержать текст меньшего размера «30-дневная пробная версия, без кредитной карты» под основным текстом кнопки «Начать бесплатную пробную версию». Это ценная информация, которая побудит пользователей перейти по ссылке, чтобы начать пробную версию.
Пример из Dashboard
Это не всегда необходимо для всех кнопок, но когда оно подходит, эта дополнительная информация может сильно помочь CTR.
Кроме того, вы можете разместить эту дополнительную информацию под кнопкой или рядом с ней. Copyblogger называет эти элементы «триггерами кликов». Вот некоторые примеры триггеров кликов:
- Отзывы
- Информация о подавлении беспокойства (например, кредитная карта не требуется)
- Основные преимущества
- Точки данных (например, пользователи видят увеличение доли на 40% при использовании X)
Пример из Social Sprout
13. Призывы к действию в корзине
Сайты электронной коммерции захотят потратить больше всего времени на A/B-тестирование своих кнопок корзины/покупки. Даже небольшие изменения в кнопках корзины могут значительно повлиять на коэффициент конверсии. Обязательно предложите кнопки для других способов оплаты, таких как PayPal.
Наличие кнопки PayPal может быть огромным стимулом – МНОГО раз, заказывая еду, я был слишком ленив, чтобы выудить кредитную карту, и продвигался вперед только благодаря милости PayPal.
14. Чем меньше, тем лучше Когда дело доходит до выбора
Мы, люди, склонны страдать от парадокса выбора – нам нравится выбирать между яблоком и апельсином, но нам предлагают яблоки, апельсины, драконий фрукт, виноград, гранаты, бананы , клементин и манго, и наши головы могут чуть не взорваться от нерешительности.
В одном исследовании, проведенном Марком Леппером из Колумбийского университета, участники, которых попросили выбрать одну шоколадку из коробки с шестью шоколадками, были более довольны своим выбором, чем участники, выбравшие одну шоколадку из коробки с 30 конфетами. Сделайте своих пользователей счастливыми, давая им меньше кнопки на выбор!
Если вы хотите включить несколько вариантов выбора кнопок, придайте больший вес одному выбору по сравнению с другими, чтобы помочь пользователям направить пользователей по определенному пути. Даже не важно, какой путь на самом деле — пользователи просто хотели, чтобы их направляли!
Buffer предлагает несколько вариантов входа, но выделяет один из них
15. Следуйте естественному потоку пользователей
В западной культуре мы читаем сверху вниз и слева направо. Помня об этом естественном потоке чтения, можно повлиять на размещение смарт-кнопок. Кнопки призыва к действию, размещенные внизу или справа от контента, часто превосходят альтернативные места размещения.
Самое главное, никогда не заставляйте пользователей возвращаться назад, чтобы нажать кнопку — кнопки CTA должны появляться в соответствующих местах, которые соответствуют пользовательскому опыту. Например, вы хотели бы поместить кнопку «Зарегистрироваться сейчас» в том месте, где пользователь найдет ее после прочтения вашего предложения или продукта, а не раньше, поскольку пользователю не имеет смысла подписываться на предложение. они ничего не знают!
СВЯЗАННЫЕ: 24 необычных и эффективных примера призыва к действию, которые вы можете скопировать
16.