Как увеличить конверсию

Не переделывая сайт полностью
В диджитал-агентство обратился сайт доставки еды. Их волновала низкая конверсия клиентов, которые заходили на сайт с мобильных устройств. Вопрос был жизненно важным: на долю мобильных приходилось 40% клиентов.
У бизнеса не хватало денег на глобальную доработку, которая стоит 100–200 тысяч рублей. В агентстве предложили сделать минимум: увеличить шрифты и кнопки целевого действия, на что ушло всего 10 тысяч рублей. Конверсия в заказах с мобильных устройств выросла в три раза.
Этот кейс нам рассказал Илья Карбышев из агентства «Атвинта». Виджеты обратной связи, кнопки целевого действия и чаты кажутся второстепенными мелочами, но на деле не менее важны, чем остальное содержимое сайта.
Известен кейс маркетингового блога Kissmetrics: недостатки в дизайне онлайн-чата и неудобные поля привели к снижению количества регистраций на 8,59%, а конверсия на следующем этапе воронки продаж упала на 22,14%.
В статье расскажем, как не допустить ошибок в этих элементах и повысить конверсию без серьезных изменений сайта.

Онлайн-консультант

Чем удобен. Некоторым клиентам проще спросить в чате, чем звонить по телефону; ответ через чат приходит быстрее, чем по почте; задать вопрос проще, чем заполнять форму обратной связи. Сотрудники помогают с выбором, предлагают сопутствующие товары, увеличивают объем продаж и средний чек.
По данным исследований Zendesk, посетители сайтов считают онлайн-чат наиболее удобным способом коммуникации: 92% клиентов довольны результатом взаимодействия через чаты-консультанты. Исследование Emarketer.com говорит о том, что онлайн-чаты обеспечивают около 38% онлайн-продаж.
Где расположить. Расположить виджет можно в углу на страницах, где посетитель выбирает товар или принимает решение о покупке: в каталоге, карточке товара, корзине.
Как использовать для повышения конверсии. Для работы с чатом нужно подготовить сотрудников поддержки. Они должны не только знать продукт и обладать навыками продаж, но и уметь поддерживать письменный диалог.
Отвечать на вопросы важно в течение минуты, пока посетитель не ушел с сайта или информация не потеряла для него актуальность. Начать общение и сделать релевантное предложение поможет информация из карточки покупателя в CRM: история его просмотров, заказов, обращений в службу поддержки.
Как делать нельзя. Слишком крупное и яркое окно активного чата может закрывать часть информации или мешать сделать заказ. В результате клиенты уходят с сайта и покупают у конкурентов.
Посетители не любят общаться с роботами: шаблонные автосообщения отталкивают, а стоковые фотографии и выдуманная информация о сотруднике поддержки снижают доверие. В результате клиент отказывается от покупки или покупает меньше, чем хотел бы.
Снижает конверсию и форма с вопросами в чате. Чем больше действий нужно сделать покупателю, чтобы получить ответ на свой вопрос, тем выше вероятность, что он не станет ничего спрашивать.
galleryimg
Чат в интернет-магазине «Юлмарт» закрывает нужную информацию. Его можно перемещать по экрану, но закрыть сложно: плохо видно, куда кликнуть
galleryimg
galleryimg
galleryimg
galleryimg
Чат в интернет-магазине «Юлмарт» закрывает нужную информацию. Его можно перемещать по экрану, но закрыть сложно: плохо видно, куда кликнуть

Виджет обратного звонка

Чем удобен. По данным New Voice Media, 75% потребителей считают телефонный звонок наиболее быстрым способом получить ответ. Конверсия в покупку из телефонных звонков — 30–50%.
Где расположить. Лучше располагать в правом нижнем углу или в шапке сайта в разделе контактов. Может следовать за посетителем во время чтения текста, перемещаясь по странице при просмотре: читатель прокручивает страницу вниз, а виджет спускается вслед за ним.
Как использовать для повышения конверсии. При срочных услугах, например при вызове эвакуатора, есть смысл показать виджет сразу в виде всплывающего окна на весь экран. Если услуга требует выбора, то окно демонстрируют через некоторое время или располагают виджет в виде кнопки призыва к действию.
В форме обратного звонка оставьте минимум полей, в идеале — одно поле для ввода номера телефона. Остальные необходимые данные работник службы поддержки сможет выяснить во время разговора.
Персонализируйте формы с учетом страницы, где находится клиент. Например, если он в каталоге услуг клиники, предложите ему записаться к свободному специалисту или получить скидку, которая его заинтересовала.
Укажите время, через которое поступит обратный звонок, — например 25–30 секунд. Обещание перезвонить в конкретный срок повышает доверие: клиент понимает, насколько быстро ему ответят.
Автоматизировать соединение с оператором поможет встроенная система Callback. Она тут же перезванивает клиенту при наличии свободного менеджера.
В «Мобильном предприятии» Билайн можно настроить обратный звонок клиенту в течение нескольких секунд и связать его со свободным сотрудником call-центра. Можно записывать звонки и контролировать качество работы телефонных менеджеров.
Упростит взаимодействие с клиентами и кликабельный телефон в контактах сайта. С ним пользователю не нужно набирать номер — достаточно нажать на него.
В «Билайн» есть возможность подключить многоканальную телефонную линию 8-800. Звонки на нее бесплатны с телефонов любых мобильных операторов. В результате клиенты звонят чаще, а конверсия увеличивается. Одновременно на один номер может звонить неограниченное число человек, вы не пропустите ни одного звонка.
Как делать нельзя. Не показывайте повторно форму обратного звонка пользователю, который ее закрыл. Не предлагайте звонок тем, кто уже оформляет заказ, или тем, кто только зашел в первый раз.
importantimg
В мобильной версии форма обратного звонка часто закрывает весь сайт и раздражает пользователей. Здесь лучше использовать кнопку.
Не предлагайте посетителю заполнять слишком много полей. Если он хочет быстро получить обратную связь, длинная форма приведет к отказу от услуги.
Нельзя обещать перезвонить через 25 секунд, а перезванивать через час или больше: за это время клиент уже найдет ответ на свой вопрос в другом месте. Кроме того, вы потеряете его доверие. Такой срок разумно предлагать, только если вы используете систему Callback.
Автоматизировать соединение с оператором поможет встроенная система Callback. Она тут же перезванивает клиенту при наличии свободного менеджера.
galleryimg
На сайте клиники «Медси» форма обратного звонка закрывает экран и появляется почти сразу при открытии сайта
galleryimg
galleryimg
galleryimg
galleryimg
На сайте клиники «Медси» форма обратного звонка закрывает экран и появляется почти сразу при открытии сайта

Форма обратной связи

Чем удобна. Такой способ контакта помогает получить данные клиента для дальнейшего взаимодействия с ним.
Где расположить. Разместить лучше там, где покупатель должен совершить целевое действие: запросить прайс-лист, оформить подписку или заказ. Иногда размещают в конце страницы или в отдельном блоке в качестве дополнительного средства обратной связи.
Как использовать для повышения конверсии. Главные элементы формы — заголовок и кнопка. Важно, чтобы они объясняли пользователю цель отправки данных. Поля формы располагают в логической последовательности, чтобы посетитель шаг за шагом оставлял нужные сведения.
Конверсия из формы напрямую зависит от количества полей в ней: по данным Quicksprout, ограничение количества полей до трех может привести к росту конверсии до 25%. А исследование Hubspot показывает, что сокращение количества полей с четырех до трех приводит к повышению конверсии до 50%.
Упростите ввод данных с помощью подсказок. Например, разместите в полях подсказки светлым шрифтом. Еще один способ — маска: она автоматически форматирует информацию и не позволяет ввести неправильные данные. Это особенно удобно для ввода данных в определенном формате, например номера телефона.
Вместо стандартной кнопки «Отправить» используйте кнопку с описанием целевого действия, ради которого посетитель заполняет форму. Например, «Зарегистрироваться» или «Получить прайс».
Поле, которое заполняет пользователь, должно быть подсвечено или выделено. Нужно подсветить ошибки заполнения, чтобы клиент не искал поля, которые неправильно заполнил. Рядом с подсвеченным полем покажите сообщение об ошибке, выделите его цветом или разместите в заметном месте.
Как делать нельзя. Избыток полей, длинные и сложные формы, капча снижают конверсию. Не стоит разделять поля, например использовать три поля для ФИО вместо одного. Как правило, чем проще форма обратной связи, тем чаще ее заполняют. Идеальный вариант — два-три основных поля.
importantimg
Если в вашей форме некоторые поля выделены как обязательные, удалите необязательные. Раз эта информация не важна, не стоит загромождать ею форму.
Объясните, для чего нужны поля в форме. Например, «Укажите почту, чтобы получить письмо-подтверждение» или «Оставьте телефон для быстрой связи». Так вы увеличите число клиентов, заполняющих форму. Если вы установили маску для помощи в наборе, убедитесь, что движение курсора по полям прописано правильно: в случае ошибок подсказка будет раздражать пользователей — особенно в мобильной версии, где вводить данные сложнее.
Не стоит добавлять к форме кнопку «Отмена». Для выхода достаточно закрыть форму или уйти со страницы. Пользователи могут случайно нажать на кнопку «Отмена» и очистить поля от введенной информации. После этого они вряд ли будут заполнять форму повторно.
galleryimg
Длинная форма с капчей. Проще сразу позвонить сотруднику, чем заполнять форму и потом ждать звонка
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
Длинная форма с капчей. Проще сразу позвонить сотруднику, чем заполнять форму и потом ждать звонка

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

Чем удобна. Кнопка — это обязательный элемент для конверсии посетителя сайта в покупателя. Если вы просто укажете ссылку для перехода на страницу заказа, то велика вероятность, что она останется незамеченной. Контрастная большая кнопка, расположенная там, где обычно находится курсор мыши, может привести к росту конверсии в несколько раз.
Где расположить. Рекомендуем располагать кнопку в тех местах страницы, где посетитель должен заполнить форму, заказать звонок или сделать заказ. Чаще всего на первом экране и в конце отдельных блоков.
Как использовать для повышения конверсии. Хорошо, если кнопка контрастного цвета, заметна пользователю, выделяется на фоне страницы, а не сливается с ней. По материалам vwo.com, изменение цвета и формы кнопки либо призыва к действию может повысить конверсию на величину от 9 до 62%.
Можно привлечь больше внимания к кнопке, если сделать ее визуально объемной или использовать дополнительные графические элементы. Можно разместить рядом стрелку или фотографию человека, смотрящего в сторону кнопки. Когда кнопка меняет цвет при наведении курсора, покупатель понимает, что она активна и на нее можно нажать.
Важно, чтобы надпись была крупной и хорошо читаемой. Контрастная кнопка с крупным шрифтом заметна для посетителя и вызывает желание нажать. Вокруг нее нужно оставить достаточно свободного пространства, чтобы она не сливалась с другими элементами дизайна.
Как делать нельзя. Незаметную маленькую кнопку, сливающуюся с дизайном сайта, посетитель может не увидеть.
Другая крайность — слишком большая и кричащая кнопка, которая отталкивает покупателей. Яркие цвета, анимация, стрелки и другие элементы должны быть в разумных дозах.
Не подходит излишне креативный дизайн, когда кнопка не похожа на кнопку. Плох и нечеткий призыв к действию, по которому не ясна цель клика на кнопке.
galleryimg
На сайте госуслуг кнопка сливается с баннером
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
galleryimg
На сайте госуслуг кнопка сливается с баннером

Для того чтобы повысить конверсию сайта

  1. Добавьте онлайн-консультант там, где клиенту трудно сделать выбор. Помогите ему с помощью чата: обучите сотрудников поддержки и пусть они первыми начинают общение с посетителем.
  2. Подключите виджет обратного звонка, который поможет клиенту уточнить данные, записаться на консультацию или прием. Следите, чтобы он не отвлекал и не закрывал всю страницу.
  3. Улучшите кнопки целевого действия — они подталкивают клиента к принятию решения. Сделайте их заметными, контрастными, понятными.
  4. Оптимизируйте формы обратной связи — сократите и упростите их, в идеале оставьте не больше 2–3 полей.
noteimage
Эксперты
personPhoto
Илья Карбышев, агентство «Атвинта»