Как создать конверсионный процесс оформления заказа для электронной торговли

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

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

На сайте электронной коммерции, который я недавно проанализировал, была платежная страница, на которой 84,7% трафика приходилось на покупку. Я подсчитал, что, если бы мы могли увеличить это количество до 90%, это привело бы к 461 заказу больше и дополнительным 87 175 долларам в месяц - 23,9% роста доходов. «Маленькие» выгоды могут быть огромными.

Итак, возникает вопрос: «Как заставить больше людей пройти наш процесс оформления заказа и совершить покупки?» Конкретная тактика зависит от вашего сайта, но принципы поиска ответа универсальны.

Фреймворк для размышлений о кассах электронной коммерции: модель поведения Фогга

Суть в следующем: Поведение = Мотивация x Способность x Триггер.

Вот модель:

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

Как Amazon использует модель поведения Фогга

Когда Amazon отправляет вам электронное письмо с продвижением продукта, это мотивация и спусковой крючок. Люди переходят по ссылке и попадают на страницу продукта. Они читают текст и обзоры, смотрят на картинку, и все это повышает мотивацию. «Добавить в корзину» - это триггер для запуска процесса оформления заказа.

А как насчет способностей? Насколько легко завершить процесс оформления заказа? Вот где Amazon дает задницу. Вам нужно только ввести свой пароль и щелкнуть пару раз. Процесс оформления заказа не вызывает трения.

Вот фактический рабочий процесс в приложении для мобильной коммерции Amazon:

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

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

Как создать функцию «Добавить в корзину» и страницу корзины покупок

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

Как должно выглядеть «Добавить в корзину»?

Что должно произойти, когда люди добавляют что-то в корзину на страницах вашего продукта?

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

Вы не можете пропустить добавление корзины в Бонобо. После того, как вы нажмете «Добавить в корзину», тележка появится с небольшой анимацией, что хорошо, потому что человеческий глаз реагирует на движение. Это тонкий визуальный сигнал, который указывает на переход от посетителя к покупателю.

Содержимое корзины вместе с кнопкой «Оформить заказ» также остается видимым, пока пользователь не щелкнет в другом месте. Это хорошо. Я бы изменил цвет кнопки «Оформить заказ» на какой-нибудь другой, кроме синего - он недостаточно выделяется. Главное в визуальной иерархии - кнопка «Добавить в корзину», но товар уже в корзине.

ASOS также показывает небольшую анимацию. Они открывают содержимое тележки и складывают его через несколько секунд. Кнопка «Добавить в корзину» также изменится на «Добавлено», что является хорошим подтверждением для покупателей:

Я бы оставил содержимое корзины открытым до тех пор, пока пользователь не сделает выбор, щелкнув где-нибудь. Таким образом, кнопка «Оформить заказ» будет смотреть им в глаза.

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

Что дальше, когда товар окажется в корзине?

Есть два основных подхода:

1. Показывать подтверждение добавления корзины и удерживать пользователей на той же странице. Плюсы: Люди не просили перейти на другую страницу, так что никаких сюрпризов. Они также могут рассмотреть возможность добавления дополнительных товаров в корзину перед оформлением заказа. Минусы: у них уже есть товар, на который они сейчас смотрят, в корзине. Для вас было бы более полезно, если бы они посмотрели на что-нибудь еще, что они могли бы захотеть купить.
2. Перенести пользователя на страницу корзины. Плюсы: вы приближаете их на один шаг к совершению платежа. Это также отличная возможность сделать предложения допродажи. Минусы: вы можете потерять максимальное количество «товаров в тележке».

Amazon переведет вас на страницу корзины, подтвердит, что вы добавили продукт в корзину, и покажет вам дополнительные продажи. У Amazon хорошо получается сжимать содержимое корзины, поэтому дополнительные продажи выделяются:

Правильный баланс потенциальных стратегий зависит от вашей отрасли и целей, и вы определенно хотите это проверить.

Метрики, о которых следует помнить:

• Средняя сумма транзакции;
• Среднее количество за транзакцию.

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

Хорошо отображать содержимое корзины

Ключевые принципы эффективного отображения содержимого корзины - ясность и контроль.

• Ясность. Легко и очевидно понять, что находится в корзине, и конечную стоимость, включая доставку и налоги. Внезапные расходы заставляют людей отказываться от тележек.
• Контроль: легко вносить изменения, например обновлять количество или удалять товары.

У ASOS хороший взгляд на страницу корзины:

Что они получают правильно:

• Фотографии товаров;
• Название и цена товара;
• Возможность удалить, сохранить на потом или изменить такие детали, как размер;
• Покажите, какие платежи они принимают;
• Показать полную стоимость и подтвердить бесплатную доставку;
• Четкий призыв к действию «Касса»;
• Уменьшите неопределенность, выделив «Легкий возврат».

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

Получите правильную визуальную иерархию

Вещью номер один в визуальной иерархии должно быть продолжение оформления заказа. (Протестируйте разные призывы к действию.) Должно быть два призыва к действию: один над тележкой и один под тележкой.

Примерно так - две кнопки оформления заказа четко выделяются:

Modcloth улучшил эту страницу с момента нашего последнего просмотра. Раньше для обновления количества требовалось набирать текст. Теперь вы можете использовать степперы для увеличения или уменьшения количества.

Обратите внимание, что Modcloth также предлагает опцию PayPal. Хотя большинство людей предпочитают расплачиваться кредитной картой, предложение 1-2 альтернативных способа оплаты (например, PayPal, Amazon) является хорошей идеей и, как было показано, помогает при конверсии. Однако слишком много вариантов обидны.

Modcloth также напоминает вам, что у них есть бесплатный возврат и бесплатная доставка для заказов на сумму более 75 долларов.

Не делайте купоны заметными

Когда люди видят поле «Введите здесь код купона», они чувствуют себя менее особенными. «Почему у меня его нет?» Многие идут в Google за купоном; многие никогда не вернутся. Покидание сайта в поисках купонов - частая причина отказа от корзины покупок.

Итак, это плохая идея:

Вместо этого сделайте текстовую ссылку "Есть купон?" или что-то подобное. Когда кто-то нажимает на ссылку, появляется поле ввода, подобное изображенному выше. Текстовые ссылки менее заметны, поэтому меньше людей обратят на них внимание.

Клиенты, у которых уже есть код купона, будут искать способ его ввести. Если вы не скроете его очень хорошо, они найдут его и смогут применить свой код купона.

Напоминайте покупателям о хороших вещах: доставке, возврате и безопасности.

Когда они получат товар? Сколько стоит доставка. Это бесплатно? Будет ли транзакция безопасной? Напомните людям.

Вот пример, который показывает эти три ключевых сообщения под кнопкой оформления заказа, которая также гласит: «Платите безопасно сейчас»:

Упорные тележки FTW

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

Процесс регистрации: создавать учетную запись или нет?

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

Каждый четвертый отказывается от покупок в Интернете из-за принудительной регистрации. Принудительная регистрация - это часть «синдрома жадного маркетолога». Легко понять, почему маркетологи электронной коммерции хотят это сделать - они надеются, что пользователь «заблокируется» и будет делать больше покупок, потому что у них есть учетная запись.

Так ли это на самом деле? О, пожалуйста. На скольких веб-сайтах у вас есть зарегистрированная учетная запись? Чувствуете ли вы теперь им верность по этой причине? Бьюсь об заклад, вы не заходили в большинство из них более одного раза.

Вот хорошая история о принудительной регистрации, которую рассказал гуру юзабилити Джаред Спул:

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

Форма была простой. Полями были адрес электронной почты и пароль. Кнопки были « Вход» и « Регистрация». Ссылка была " Забыли пароль". Это была форма входа на сайт. Это форма, с которой пользователи сталкиваются постоянно. Как у них могли быть с этим проблемы?

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

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

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

Мы ошибались насчет первых покупателей. Они не возражали против регистрации. Они возмущались необходимостью регистрироваться, когда они наткнулись на страницу. Как сказал нам один покупатель: «Я здесь не для того, чтобы вступать в отношения. Я просто хочу что-нибудь купить ».

Убрав принудительную регистрацию, они увеличили продажи на 300 миллионов долларов.

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

Что вам следует делать вместо этого? Всегда предлагайте гостевой выезд. Вы можете работать над регистрацией после продажи:

• Даже не упоминайте слово «Зарегистрироваться». Скажите «Новый клиент» или аналогичный термин.
• После оформления заказа предложите создание учетной записи на странице «Спасибо». У вас уже есть их имя, адрес электронной почты и адрес из кассы, поэтому для создания учетной записи не потребуется больше нескольких щелчков мышью. Спросите желаемый пароль (или предоставьте возможность автоматически сгенерировать его) и подтвердите разрешение на создание своей учетной записи.

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

Есть несколько гораздо более предпочтительных вариантов.

Вариант оформления кассы 1

Предоставьте пользователям два варианта выбора: новые или вернувшиеся:

У Asos не всегда был такой подход. Это была их предыдущая страница регистрации, на которой было три варианта:

Убив этот подход и переключившись на оптимизированную версию, количество брошенных корзин сократилось на 50%!

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

Заказ вариант регистрации 2

Брошенные корзины покупателя - серьезная проблема. Предварительный запрос электронной почты позволяет легко начать процесс восстановления брошенной корзины. Кроме того, есть два простых варианта - без сенсорной перегрузки:

Опция регистрации Checkout 3

Еще один отличный способ - полностью пропустить экран входа в систему. Вместо этого просто используйте гостевую кассу по умолчанию. Люди с существующей учетной записью могут войти в систему по ссылке, а новые клиенты могут создать учетную запись после оплаты:

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

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

Опция регистрации Checkout 4

В этом случае регистрация учетной записи предлагается вместе с поощрением после совершения покупки. Вот пример от Speedo:

Людей не беспокоит регистрация учетной записи, пока они не заплатят вам деньги. Если бы вам пришлось выбирать, что для вас важнее: регистрация аккаунта или покупки?

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

Страница оформления заказа для электронной торговли

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

Спрашивайте информацию о кредитной карте в последнюю очередь

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

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

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

Это то , что вы не должны делать:

Это лучше. (Вы можете попасть сюда со страницы доставки.)

Плюс: он имеет четкую схему из 1–2–3 шагов. Поле имени стоит перед данными карты, и платежный адрес (если он совпадает с адресом доставки) не нужно вводить повторно.

Плохо: основной призыв к действию - «Сохранить и продолжить». Продолжить где ? Оно должно быть конкретным, например «Продолжить просмотр» или каким-либо другим действием.

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

Добавьте реалистичности, создав форму оплаты таким скевоморфным способом:

Вы можете бесплатно (!) Получить интерфейс для этого под названием Skeuocard, который будет реализован в вашей системе. Попробуйте демо здесь.

Сделайте процесс оплаты безопасным

Безопасность - серьезная проблема. Расскажите об этом людям, помимо фактического обеспечения безопасности платежей с помощью SSL. Это пример формы, которая выглядит безопасной:

Некоторые причины, по которым это работает:

• Другой цвет фона для поля номера кредитной карты.
• Логотип SSL.
• Письменное заявление: «Безопасная оплата кредитной картой. Это безопасный 128-битный зашифрованный SSL-платеж ».
• Пояснения к сроку действия и защитному коду.

Обратите внимание: если ваша аудитория не разбирается в технологиях, они могут не знать, что такое SSL или HTTPS, так что выражайтесь простыми словами.

Храните кредитные карты в своей системе

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

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

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

Заключение

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

Чтобы улучшить UX процесса оформления заказа:

• Очистите функцию «Добавить в корзину».
• Сделайте так, чтобы посетители могли легко менять или удалять товары в корзине.
• Оптимизируйте процесс регистрации - позвольте новым покупателям зарегистрироваться после покупки.
• На странице оформления заказа сначала запросите самую простую информацию.