Глава 5: Конверсия

На рисунке 1 указаны рекомендации для увеличения конверсий, сложность их реализации и влияние на метрики сайта.

Рисунок №1 — Рекомендации для увеличения конверсий

Поясним описанные рекомендации. Не стоит использовать редирект в корзину после клика по кнопке CTA “Купить/Заказать”. Это принуждение пользователя сразу оформить заказ, дайте ему возможность продолжить покупки(рис. 2). Возможно, его заинтересуют еще какие-то товары. Это лучшее решение, как для клиента так и для владельца.

Рисунок №2 — Возможность продолжить покупки, оформить заказ или кредит

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

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

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

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

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

Примеры сайтов, которые следуют данным рекомендациям:

1. Отсутствует редирект после добавления в корзину(рис. 3).

https://www.revolve.com/ (После добавления в корзину, выводится модальное окно, где на выбор: перейти в корзину или продолжить покупки)

https://www.asos.com/ (Товар добавляется в корзину, при этом нет модальных окон, просто иконка корзины пополняется числом добавленных товаров)

Рисунок №3 — Отсутствие редиректа в корзину/оформление заказа

Компания LYST проводила анализ юзабилити с целью улучшения взаимодействия пользователей с несколькими устройствами и повышения конверсии.

В результате был обновлен процесс добавления в корзину:

Добавление модального окна “добавлен в корзину”, а не перенаправлять на страницу корзины(рис. 4).
Дополнительная информация:

• дали пользователям возможность продолжать делать покупки;
• посмотреть корзину;
• или оформить заказ напрямую.

Рисунок №4 — Слева корзина до изменений, справа — после изменений

AllyouneedFresh, один из крупнейших онлайн-супермаркетов Германии для увеличение количества транзакций, совершенных на мобильном телефоне, сделали(рис. 5):

1. Перенесли параметры даты доставки в начало оформления заказа.
2. Добавили «продолжить оформление» призыв к действию внизу корзины.
3. Автоматическое определение кредитной карты клиента вместо того, чтобы пользователи сами выбирали из выпадающего списка.
4. Соответствие длины поля длине ввода.
5. Использование меток (label) вместо заполнителей(placeholder) для полей формы.
6. Увеличили кнопку «Сохранить» призыв к действию и сделали его более
   заметным.

Рисунок №5 — Проводимые изменения(слева до, справа после изменений)

Результаты:

• Транзакции через мобильный телефон выросли на 51%.
• Мобильный CVR улучшился на 14%.
• Количество возвратов со страницы подтверждения заказа уменьшилось на 21%.

1. Сохранение заказа или отправка его на почту(рис. №6).

https://www.zumiez.com/ (отправить на почту)

https://ao.com/ (сохранить и отправить на почту)

https://www.rei.com/ (сохранить заказ на потом)

Рисунок №6 — Возможность сохранить заказ или отправить на почту

1. Гостевой заказ(рис. 7).

https://www.michaelkors.global/

Рисунок №7 — Оформление гостевого заказа

7 летнее исследование крупных американских e-commerce сайтов показало, что 68,8% корзин остаются брошенными.

Причины отказа:

• 26% отказываются из-за длинного процесса оформления заказа.
• 55% из-за высокой стоимости доставки.
• 34% из-за принудительного создания заказа.
• 21% из-за отсутствия отображения итоговой суммы заказа на одном экране устройства(до границы экрана либо в самом верху заказа).

1. Преимущества создания аккаунта(рис. 8).

https://shop.mango.com/ (просьба оставить email, чтобы создать аккаунт позже)

https://www.petco.com (информация о необязательной регистрации, но если ввести пароль, то аккаунт автоматически создается)

https://www.novica.com/ (описаны преимущества создания аккаунта)

Рисунок №8 — Описания преимуществ создания аккаунта

1. Отсутствие подтверждения информации клиента(рис. 9).

Большое количества полей отталкивает пользователей.

Рисунок №9 — Нет дополнительных полей для подтверждения информации

1. Регистрация с помощью соц сетей(рис. 10).

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

Рисунок №10 — Регистрация с помощью соц сетей

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

Рисунок №11 — Регистрация в одно касание и автоматическая авторизация

1. Ограничение точек выхода из чекаута(рис. 11).

https://www.juniqe.com/

https://www.petco.com

https://ao.com/

Рисунок №11 — Ограничение точек выхода

1. Использование поэтапного оформление заказа при большом количестве полей(рис. 12).

https://www.juniqe.com/

https://www.petco.com

https://ao.com/

Рисунок №12 — Поэтапное оформление заказа

Как вариант уведомления пользователя об успешном завершении очередного этапа оформления, можно оформить pop-up окно с динамическим прогресс баром, где будут описаны этапы заказа(рис. 13).

Рисунок №13 — Прогресс бар, где написаны завершенные этапы заказа

Чем ближе покупатель к завершению, тем больше мотивации для достижения цели — конечного оформления заказа.

1. Понятные и логичные кнопки CTA(рис. 14).

https://www.zumiez.com/ (оформить заказ, отправить корзину на почту)

https://www.schuhe.de/ (перейти к доставке)

https://ao.com/  (кликните и соберите, выбрать адресную доставку)

Рисунок №14 — Понятные кнопки CTA

1. Бонус: с вашим товаром покупают(рис. 15).

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

https://www.hunterboots.com/ (вас могут заинтересовать)

https://ao.com/ (сопутствующий товар)

https://www.lyst.com/ (популярные товары)

Рисунок №15  — Вывод сопутствующих или популярных товаров

1. Бонус: реализовать оплату через платежные системы от Google.

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

Преимущества Google Pay:

• Достаточно войти в аккаунт и вы готовы использовать платежные данные.
• Одно API для сайтов и приложений.
• Интеграция в течении недели.
• Доступно по всему миру.
• Оформление заказов в несколько кликов.
• Высокий показатель конверсии цели.

Систему можно установить на:

• Страницу товара(рис.16).

Рисунок №16 — Интеграция на страницу товара

• В гостевой аккаунт(рис. 17).

Рисунок №17 — Интеграция в гостевом аккаунте

• В чекаут(рис.18).

Рисунок №18 — Интеграция в чекауте

Важно! Перед интеграцией Google Pay, убедитесь, что ваша платежная система поддерживает API Google Pay.

Мнения владельцев бизнеса, у которых на сайтах интегрирован Google Pay:

Клиенты, у которых был тип оплаты Google Pay с 65% вероятностью завершают поток бронирования номера в гостинице. (HotelTonight)

Спустя неделю после окончания акции, был обнаружен рост оплат через Google Pay и доля заказов на Android-приложениях выросла на 30%. (Фанданго)

С момента интеграции Google Pay, 68% транзакций были получены от новых пользователей. 24% из этих новых пользователей решили создать учетную запись в B & H. (В & Н)

Примеры украинских сайтов:

https://m.rozetka.com.ua/

Покупка товаров:

1. Отсутствует редирект на корзину, после добавления товара.
2. В корзине отображаются выбранные товары, количество и сумма без учета доставки.
3. Понятная и крупная кнопка CTA “Оформить заказ”.
4. Оформление заказа разбито на этапы и большие, понятные кнопки CTA(рис. 19).
5. Ограниченное количество выходов из чекаута и корзины.
6. Есть возможность оформить гостевой заказ.

Рисунок №19 — Чекаут розетки

https://comfy.ua/

Покупка товаров:

1. При добавлении в корзину появляется модальное окно с возможностью оформить заказ или получить кредит(рис. 20).
2. Для определенных товаров появляются рекомендации сопутствующих товаров(аксессуаров).
3. Есть возможность оформить гостевой заказ.
4. Понятные и большие кнопки CTA.
5. Ограниченное количество выходов из чекаута и корзины.

Рисунок №20 — Покупка товара в комфи

Минусы:

1. Страница оформления заказа длинная.
2. Итоговой суммы не видно сразу, только при прокрутке вниз.

https://www.zolotoyvek.ua

Покупка товаров:

1. При добавлении в корзину появляется модальное окно с возможностью оформить заказ или продолжить покупки(рис. 21).
2. Есть возможность оформить гостевой заказ.
3. Понятные и большие кнопки CTA.
4. Ограниченное количество выходов из чекаута и корзины.
5. На месте корзины отображается итоговая сумма заказа.

Минусы:

1. Страница оформления заказа не разбита на этапы, но и не очень длинная.

Рисунок №21 — Покупка товара в золотом веке

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

1. Не делать редирект в корзину после добавления товара туда. Лучше использовать кнопки CTA “Оформить заказ/Заказать сейчас/Получить кредит” и “Продолжить покупки”.
2. Дать пользователю возможность оформить гостевой заказ, зарегистрироваться через соц сети. Если важна регистрация, то форма должна быть максимально простой, без повторов полей. Лучше описать на сайте преимущества регистрации или напомнить об этом при оформлении гостевого заказа в письме.
3. Уменьшить количество пунктов в оформлении  заказа насколько это возможно. Если же это затруднительно, то сделать поэтапное оформление, чтобы страница не была слишком длинной.
4. Отобразить итоговую сумму на первом экране.
5. Ограничить выходы из корзины и чекаута.
6. Кнопки CTA должны быть понятны и заметны.
7. Необязательно, но лучше к товарам выводить сопутствующие или популярные, если это уместно.

Продолжение читайте в шестой главе Оптимизация форм…

---

Автор Ирина Старченко
практикующий веб разработчик
и seo-специалист