Глава 5: Конверсия
На рисунке 1 указаны рекомендации для увеличения конверсий, сложность их реализации и влияние на метрики сайта.
Рисунок №1 — Рекомендации для увеличения конверсий
Поясним описанные рекомендации. Не стоит использовать редирект в корзину после клика по кнопке CTA “Купить/Заказать”. Это принуждение пользователя сразу оформить заказ, дайте ему возможность продолжить покупки(рис. 2). Возможно, его заинтересуют еще какие-то товары. Это лучшее решение, как для клиента так и для владельца.
Рисунок №2 — Возможность продолжить покупки, оформить заказ или кредит
В чекауте не должно быть много точек выхода с данной страницы, ни хлебных крошек, ни рекламы и пр. Только шапка сайта, в которой кликабельный логотип, каталог, поиск, корзина и футер, в котором минимум ссылок. В таком случае увеличивается вероятность успешного завершения оформления заказа.
Не делайте длинные страницы чекаута, скроллить вниз не очень удобно, особенно для мобильных устройств. Если пунктов много, то лучше сделать поэтапное оформление заказа. Но все же стоит помнить, чем меньше полей для оформления заказа, тем лучше для пользователя.
Неплохо будет повторить выгодные фразы, как бесплатная доставка или пр. в чекауте, чтобы клиент всегда помнил, почему выгодно купить именно у вас, повышается вероятность увеличения коэффициента конверсии.
Что касается призыва к действию, то тут все предельно ясно. Кнопка CTA и призывы к действию, должны быть логичны и направлять клиентов оформить заказ, получить кредит, заказать сейчас.
Важный момент — создания аккаунта при покупке товара. Не каждый человек любит, может, хочет оставлять информацию о себе. Это личная информация и заполнение форм длительный и неудобный процесс, возможно кто-то редко будет обращаться к вам в магазин и просто нет необходимости создавать аккаунт в интернет магазине. Тем более, все мы понимаем, что информация о человеке, может использоваться в маркетинговых целях. Это отталкивает часть потенциальных клиентов. Для таких случаев сделайте возможность совершить гостевой заказ, в письмах-оповещених, можно описать преимущества создания аккаунта либо предложить скидку для тех, кто создаст личный кабинет. Не лишним будет реализовать возможность регистрации через соц сети. Всего 1 клик и данные сами подтягиваются из социальной сети в личный кабинет.
Примеры сайтов, которые следуют данным рекомендациям:
- Отсутствует редирект после добавления в корзину(рис. 3).
https://www.revolve.com/ (После добавления в корзину, выводится модальное окно, где на выбор: перейти в корзину или продолжить покупки)
https://www.asos.com/ (Товар добавляется в корзину, при этом нет модальных окон, просто иконка корзины пополняется числом добавленных товаров)
Рисунок №3 — Отсутствие редиректа в корзину/оформление заказа
Компания LYST проводила анализ юзабилити с целью улучшения взаимодействия пользователей с несколькими устройствами и повышения конверсии.
В результате был обновлен процесс добавления в корзину:
Добавление модального окна “добавлен в корзину”, а не перенаправлять на страницу корзины(рис. 4).
Дополнительная информация:
- дали пользователям возможность продолжать делать покупки;
- посмотреть корзину;
- или оформить заказ напрямую.
Рисунок №4 — Слева корзина до изменений, справа — после изменений
AllyouneedFresh, один из крупнейших онлайн-супермаркетов Германии для увеличение количества транзакций, совершенных на мобильном телефоне, сделали(рис. 5):
- Перенесли параметры даты доставки в начало оформления заказа.
- Добавили «продолжить оформление» призыв к действию внизу корзины.
- Автоматическое определение кредитной карты клиента вместо того, чтобы пользователи сами выбирали из выпадающего списка.
- Соответствие длины поля длине ввода.
- Использование меток (label) вместо заполнителей(placeholder) для полей формы.
- Увеличили кнопку «Сохранить» призыв к действию и сделали его более
заметным.
Рисунок №5 — Проводимые изменения(слева до, справа после изменений)
Результаты:
- Транзакции через мобильный телефон выросли на 51%.
- Мобильный CVR улучшился на 14%.
- Количество возвратов со страницы подтверждения заказа уменьшилось на 21%.
- Сохранение заказа или отправка его на почту(рис. №6).
https://www.zumiez.com/ (отправить на почту)
https://ao.com/ (сохранить и отправить на почту)
https://www.rei.com/ (сохранить заказ на потом)
Рисунок №6 — Возможность сохранить заказ или отправить на почту
- Гостевой заказ(рис. 7).
Рисунок №7 — Оформление гостевого заказа
7 летнее исследование крупных американских e-commerce сайтов показало, что 68,8% корзин остаются брошенными. Причины отказа: https://shop.mango.com/ (просьба оставить email, чтобы создать аккаунт позже) https://www.petco.com (информация о необязательной регистрации, но если ввести пароль, то аккаунт автоматически создается) https://www.novica.com/ (описаны преимущества создания аккаунта) Рисунок №8 — Описания преимуществ создания аккаунта Большое количества полей отталкивает пользователей. Рисунок №9 — Нет дополнительных полей для подтверждения информации 92% пользователей покидают сайт, если не помнят имя пользователя или пароль. Поэтому удобно реализовать регистрацию через социальные сети. Рисунок №10 — Регистрация с помощью соц сетей Можно реализовать возможность осуществить регистрацию в одно касание, не прерывая ее их с помощью экрана регистрации. Пользователи получают защищенный, основанную на токене, без пароля учетную запись на вашем сайте, защищенную их учетной записью Google(рис. 11). Рисунок №11 — Регистрация в одно касание и автоматическая авторизация Рисунок №11 — Ограничение точек выхода Рисунок №12 — Поэтапное оформление заказа Как вариант уведомления пользователя об успешном завершении очередного этапа оформления, можно оформить pop-up окно с динамическим прогресс баром, где будут описаны этапы заказа(рис. 13). Рисунок №13 — Прогресс бар, где написаны завершенные этапы заказа Чем ближе покупатель к завершению, тем больше мотивации для достижения цели — конечного оформления заказа. https://www.zumiez.com/ (оформить заказ, отправить корзину на почту) https://www.schuhe.de/ (перейти к доставке) https://ao.com/ (кликните и соберите, выбрать адресную доставку) Рисунок №14 — Понятные кнопки CTA Это не обязательно, но некоторые интернет магазины выводят в модальных окнах сопутствующие товары или популярные покупки для дополнительных конверсий. https://www.hunterboots.com/ (вас могут заинтересовать) https://ao.com/ (сопутствующий товар) https://www.lyst.com/ (популярные товары) Рисунок №15 — Вывод сопутствующих или популярных товаров Решения Google Pay позволяют быстро и удобно оплачивать в интернете. Ваши карты хранятся в аккаунте Google, вы можете легко ими управлять. Преимущества Google Pay: Систему можно установить на: Рисунок №16 — Интеграция на страницу товара Рисунок №17 — Интеграция в гостевом аккаунте Рисунок №18 — Интеграция в чекауте Важно! Перед интеграцией Google Pay, убедитесь, что ваша платежная система поддерживает API Google Pay. Мнения владельцев бизнеса, у которых на сайтах интегрирован Google Pay: Клиенты, у которых был тип оплаты Google Pay с 65% вероятностью завершают поток бронирования номера в гостинице. (HotelTonight) Спустя неделю после окончания акции, был обнаружен рост оплат через Google Pay и доля заказов на Android-приложениях выросла на 30%. (Фанданго) С момента интеграции Google Pay, 68% транзакций были получены от новых пользователей. 24% из этих новых пользователей решили создать учетную запись в B & H. (В & Н) Примеры украинских сайтов: Покупка товаров: Рисунок №19 — Чекаут розетки Покупка товаров: Рисунок №20 — Покупка товара в комфи Минусы: Покупка товаров: Минусы: Рисунок №21 — Покупка товара в золотом веке UX оптимизация страницы оформления заказа нужна для того, чтобы повысить шанс успешного завершения процесса оформления. Главное придерживаться простых правил: Продолжение читайте в шестой главе Оптимизация форм…
Автор Ирина Старченко
практикующий веб разработчик
и seo-специалист