Ресурс компании ASOS предоставляет посетителям прекрасный пользовательский опыт благодаря грамотно продуманной процедуре оформления заказа (checkout). В этой статье мы расскажем, почему их корзина работает так эффективно, и продемонстрируем несколько трендовых методик, которые позволят вам прокачать вашу собственную страницу оплаты.
Говоря в общем, успех корзины данного интернет-магазина диктуется одним простым фактором — прозрачностью. Иными словами, на странице заказа пользователи видят всю ключевую информацию: наличие товара на складе/период резервирования, варианты доставки, бонусные предложения, условия возврата, меры предосторожности, а также доступные способы оплаты. Это позволяет посетителям чувствовать себя увереннее и подталкивает их к завершению покупки.
Прямо к корзине или остаемся на странице продукта?
Если хотите, чтобы ваши клиенты покупали несколько товаров за раз, откажитесь от автоматического перехода в корзину при добавлении каждого продукта. Вместо этого, разместите на странице интерактивную вкладку, которая всегда будет отображать пользователям содержимое их корзины.
Таким образом, клиенты смогут постоянно отслеживать свои покупки, а переход покупателя к корзине станет добровольным, сознательным решением.
Как ASOS побуждает к оплате на 50% больше новых покупателей?
Между изначальной версией checkout-страницы ASOS и обновленным дизайном есть одно существенное отличие: если ранее клиентам нужно было регистрироваться для оформления заказа, то сейчас разработчики не акцентируют внимание на создании аккаунта. Вместо этого, они просят покупателей нажать соответствующую кнопку для продолжения.
Бывший eCommerce директор компании ASOS Джеймс Харт (James Hart) рассказал, как им удалось достичь такого улучшения:
«В целом, мы практически не изменяли функционал этапа покупки на данной стадии, но после череды длительных сплит-тестов был доработан экран входа в систему. В результате, мы добились снижения числа отказов на 50%».
Взгляните на обновленную страницу оплаты заказа на сайте ASOS:
А теперь на ее предыдущую версию:
Тестирования, проведенные в eCommerce-сегменте, показывают, что пользователи не желают проходить через процедуру создания аккаунта, когда их к этому принуждают. Покупатели не хотят выполнять никаких дополнительных действий, и уж тем более, указывать свою личную информацию, чтобы завершить покупку, поскольку все это отнимает у них драгоценное время.
На самом деле, большинство клиентов утверждает, что в идеале при оформлении заказа они ограничились бы лишь выбором пароля. Далее вы увидите, что ASOS все еще просят покупателей регистрироваться, но кроме стандартных требований (контактного имени и email-а), пользователям достаточно указать пароль.
Лучшие практические методики оформления заказа
Ниже мы выделили несколько ключевых элементов покупательского опыта на сайте ASOS, которые соответствуют лучшим методикам и поддерживают сосредоточенность клиентов на завершении покупки.
1. Пошаговая процедура оформления заказа
Обновленное оформление заказа от ASOS показывает, насколько простым может быть этот процесс, если вы скроете от пользователей все отвлекающие факторы.
2. Гарантия безопасности
Помимо логотипа и названия этапа, на котором находится человек, ASOS размещает в хедере страницы только информацию о безопасности вводимых данных. Это важно для повышения чувства доверия, особенно в сегменте розничной торговли, и может быть взято на вооружение менее известными ритейл-сервисами.
3. Четкий индикатор прогресса
Индикатор прогресса выполнен с учетом всех нюансов:
1. Минималистичность дизайна.
2. Он четко показывает, на какой стадии оформления заказа вы находитесь.
3. Количество шагов четко определено.
4. Абсолютно понятно, что до подтверждения у вас будет возможность просмотреть заказ.
4. Наличие разъясняющих подсказок
Возле некоторых полей, таких как email, пароль и пол, разработчики разместили вспомогательную информацию, чтобы пользователи понимали, зачем компании понадобились эти данные. В идеале, данный прием следует применять и для даты рождения, но до этого мы еще доберемся.
5. Понятный главный CTA-элемент
На каждой странице оформления заказа основная CTA-кнопка, которая позволяет пользователю перейти к следующему шагу, является наиболее заметным элементом. В то время как многие ритейл-сервисы до сих пор задействуют на своих сайтах весьма спорные призывы к действию, ASOS заботится о том, чтобы их клиенты могли с легкостью перейти к следующему этапу процесса.
6. Ручной ввод адресных данных
Для подавляющего большинства посетителей возможность ручного ввода адресной информации имеет огромное значение. К тому же, при наличии этой опции интернет-магазин получает от покупателей более достоверную информацию.
Ввиду некоторых причин, к примеру, в случае переезда в новый жилищный комплекс, многие клиенты не могут пользоваться автоматическим подбором адреса. Это значит, что вы должны по максимуму упростить для них процедуру заполнения полей.
7. Наличие адреса для отправки счета
Для большинства ритейл-сервисов эта опция уже превратилась в некий стандарт, но ее все еще можно доработать. В данном случае, если посетитель использует один и тот же адрес (для доставки товара и счета), ASOS сразу перенаправляет его непосредственно к оплате заказа, тем самым предоставляя ему еще более быстрый, а значит, более позитивный пользовательский опыт.
Если же вас интересует альтернативное решение, вы можете отправлять ваших клиентов на страницу оформления доставки и только после этого спрашивать, хотят ли они использовать дополнительный платежный адрес.
8. Изменение полей оплаты на основе выбора карты
В какой-то степени команде ASOS удалось реализовать этот подход, но все же с наличием дополнительных полей в форме можно поспорить. Если они необязательны, то исключив их, вы избавите ваших клиентов от излишних раздумий, которые отдаляют их от завершения покупки.
9. Полный предпросмотр и редактирование заказа до его подтверждения
Как видно из индикатора прогресса, ASOS предоставляет посетителям критически важную возможность пересмотра и редактирования всей информации до подтверждения заказа.
В то время как некоторые интернет-магазины ожидают от клиентов подтверждения сразу же после ввода платежных реквизитов, ASOS разделяют два самых важных решения, которые человеку приходится принимать во время оформления заказа. Более того, они также обеспечивают гибкость редактирования информации для внесения возможных изменений.
10. Различные варианты доставки, перечисленные в удобном формате
ASOS не только предлагает клиентам множество вариантов доставки, но и демонстрирует их в удобном формате. Как правило, такую информацию размещают в выпадающих вкладках, однако методика от ASOS позволяет посетителям одновременно видеть все доступные тарифы, благодаря чему они могут принимать более взвешенные решения относительно способа доставки.
11. Возможность вернуться назад без потери информации
Хотя ASOS и не предоставляет покупателям кнопку «назад» во время оформления заказа, чтобы не отвлекать их самого процесса, многие клиенты все равно могут захотеть вернуться на предыдущую страницу, чтобы проверить или изменить свои данные.
На большинстве eCommerce ресурсов такое действие может привести к появлению предупреждений и требований повторной отправки информации, но ASOS избавили своих посетителей от этих надоедливых сообщений.
Пути для дальнейшего улучшения
И никакого контактного номера?
Компания ASOS действительно не указывает на своем сайте никаких контактных номеров — они общаются с клиентам при помощи социальных сетей, справочных страниц и формы обратной связи.
Благодаря усилиям, которые эта команда приложила на улучшение покупательского опыта, им удалось существенно уменьшить количество потенциальных причин обращения в службу поддержки. В результате, покупатели очень редко просят о помощи, так как во время оформления заказа они не хотят переключаться на заполнение сторонней формы.
Клиенты ASOS уже знают, что товары в их корзине будут зарезервированы не дольше 60 минут, поэтому ожидать ответа от службы поддержки на протяжении нескольких часов (до 4 часов) для них было бы попросту бессмысленно.
Подводя итоги
Хотя приведенный в качестве примера подход компании ASOS далеко не идеален, вам определенно стоит попробовать описанные здесь приемы на вашем сайте, чтобы убедить клиентов в целесообразности завершения сделки.
Совместив указанные методики с дополнительными рекомендациями, вы сможете оптимизировать покупательский опыт и свести к минимуму число «брошенных корзин».
Прибыльность любого интернет-магазина в первую очередь зависит, насколько комфортные условия созданы на сайте. Любой покупатель хочет как можно быстрее найти то, что они ищет и при этом затратить минимум своих усилий. По статистике большинство клиентов не любят процесс оформления заказа . Именно поэтому, если вы хотите увеличить количество продаж, необходимо упростить систему оформления заказов у себя на сайте.
В интернет-магазинах чтобы купить товар, клиент должен заполнить форму заказа , которая устанавливается на сайт с помощью специальных скриптов, модулей или плагинов. При создании формы заказов придерживайтесь следующих правил.
1. Простота — залог эффективности.
Как показывает практика, если покупатель столкнётся с какой-нибудь проблемой при оформлении заказа, он чаще всего покидает ресурс, опасаясь столкнуться с этой проблемой снова. Если ваша форма заказа содержит несколько простых этапов и заполнение не занимает особого труда, вам гарантированы стабильные продажи. Стоит отметить, что с простотой, главное, не переборщить, всегда учитывайте специфику вашего проекта. Форма заказа на сайте должна собирать минимально необходимую информацию для осуществления заказа.
2. Используйте наглядные примеры.
Человеку всегда нужен наглядный пример, тем более при заполнении формы заказа . Старайтесь создать такую веб-форму, которую сможет заполнить даже полный «чайник».
3. Всего показывайте ход оформления заказа вашему клиенту.
Клиент должен всегда видеть сколько этапов он прошел и сколько ещё предстоит пройти. имеет особое значение с точки зрения психологии. Классическая схема оформления заказа проходит в 3-4 этапа. Первый этап — пользователь составляет список заказа. Второй этап — покупатель вносит свои контактные данные. Третий этап — проверка информации. Четвертый этап — сделка.
4. Развейте все сомнения клиентов.
В нашей стране совсем недавно стал действовать закон о защите персональных данных, но многие пользователи не знают об этом. В html форме заказа обязательно укажите пометку о неразглашении личной информации. Это существенно повысит доверие ваших клиентов.
5. Нет! регистрациям.
Практически все покупатели плохо относятся к любой регистрации, в связи с тем, что этот процесс может занять много времени (по их мнению). Поэтому даже если у вас на сайте регистрация осуществляется без подтверждения профиля, удалите её или сделайте процесс оформления заказа доступным для незарегистрированных пользователей. Стоит отметить, что в некоторых случаях регистрация, напротив, необходима. Например, когда вы намерены создать качественную базу клиентов. В этом случае, сделайте регистрацию на сайте через социальные сети. Это очень просто.
Все вышеперечисленные правила и советы, несомненно, повышают эффективность формы заказа на сайте , но всегда нужно помнить о том, что многое зависит от особенностей тематики. Только методом проб и ошибок можно действительно повысить конверсию сайта.
Цель урока
Разработать часть шаблона служебных форм отвечающую за страницу оформления заказа.
Познакомиться с формами выбора способа оплаты, доставки и анкетой покупателя.
Основная цель страницы оформления заказа - быть заполненной посетителем. Вопросы, с которыми сталкиваются пользователи при заполнении форм:
Вопросы
Давайте посмотрим, с какие задачи решает страница оформления заказа.
| Задача | Решение |
|---|---|
| Предоставить простой аккуратный макет | Для этого потребуется добавить свободного пространства, а также убрать все лишнее |
| Привлечь внимание к полям формы | Для этого мы добавим блоку с полями отличающийся фон и границы вокруг формы |
| Убрать ненужные поля | Потребуется определить, какие поля пользователь обязан заполнить, чтобы можно успешно было завершить заказ. Ничего лишнего, что может заставить пользователя оставить страницу оформления заказа |
| Преодолеть сомнения посетителей | Можно сообщить о том, что заказ можно будет отменить в любой момент. Или рассказать о преимуществах покупки в вашем магазине: условия гарантии, возврата или доставки |
| Применять активный залог | Проведите пользователя через процесс оформления заказа с помощью глаголов в активном залоге. Их можно использовать в заголовках страницы или в пояснении к полям формы заказа |
| Указать количество шагов и времени на оформление заказа | Делается это в верхней части страницы, до того, как пользователь перейдет к оформлению |
Теперь решим эти задачи.
Начнем с самого сложного. Так выглядит страница оформления заказа по умолчанию:
Чтобы упростить вид страницы оформления заказа нам потребуется:
При желании, от сайдбара можно совсем отказаться.
Найдите в шаблоне страницы служебных форм глобальный блок, отвечающий за верхнюю часть сайта (обычно это $GLOBAL_AHEADER$) и поместите его в такую конструкцию:
Название сайтаlogo_simple.png - это упрощенное изображение логотипа. Способов упростить логотип для страницы оформления заказа несколько - уменьшить его в размерах, переработать, оставив фирменный стиль или сделать черно-белым.
Тоже самое проделаем и с нижней частью сайта ($GLOBAL_BFOOTER$) и сайдбаром ($GLOBAL_CLEFTER$):
Если испытываете трудности с глобальными блоками, вспомните .
Всего на странице оформления заказа пользователю предлагается заполнить четыре формы:
Для того, чтобы выделить поля форм необходимо настроить.methods-list и #order-table:
Methods-list, #order-table { margin: 20px; background-color: #e5e5e5; border: 1px solid #cccccc; }
Здесь речь идет о форме ввода личных данных $ORDER_FIELDS$ . Наверняка, вы уже прошли урок 31 о полях заказа . Нам потребуется взглянуть на каждое добавленное поле под микроскопом и спросить себя: "Действительно ли информация из него так важна для нас, что мы готовы терять часть клиентов ради нее?".
Зачастую хватает "Имени", "Номера телефона" и "Адреса доставки".
Конечно, стоит учитывать маржинальность товаров. В магазинах, где приходится обрабатывать большое количество заказов - дополнительные поля увеличат прибыль за счет снижения трудозатрат на обработку. В случае с небольшим потоком заказов - имеет смысл запрашивать только имя и номер телефона, в основном положившись на квалификацию менеджеров по продажам.
После того, как вы решили удалить лишние или добавить новые поля вернитесь к уроку 31.
Как будем преодолевать:
К сожалению, в рамках данного урока мы не можем рассматривать способ добавления иконок к формам оплаты или доставки. Поэтому просто добавьте соответствующий блок после $PAYMENT_SELECTOR$ .
Давайте рассмотрим конкретный пример. По умолчанию, выбора способа оплаты описан этим участком шаблона:
Если использовать активный залог, то этот же фрагмент будет выглядеть так:
То же самое касается выбора способа доставки, проверки содержимого заказа и заполнения формы данных о пользователе.
Перед $BODY$ добавьте сообщение о том, сколько шагов в процессе оформления заказа и сколько времени это займет, например:
Оформление заказа в 4 шага занимает не более 3ех минут
Откуда на uCoz несколько шагов оформления заказа? Здесь речь идет о шагах в пределах одной страница. Я предлагаю такой вариант:
Обратите внимание, в названии каждого из шагов используется активный залог.
На этом урок заканчивается. Для страницы оформления заказа существует ряд настроек, который позволит повысить конверсию по ней. Об этом мы поговорим в следующих уроках.
Упражнения
В этой статье, расскажу про такую важную штуку для юзабилити интернет-магазина, как взаимозависимость полей на странице оформления заказа в корзине.
На примере объясню что это такое. Предположим ваш интернет-магазин территориально расположен в Питере, там у вас есть пункт самовывоза или офлайновый магазин. По Петербургу вы делаете доставку курьером и даете возможность самовывоза. Но кроме этого вы осуществляете доставку на всю Россию. Как в этом случае реализовать правильное оформление заказа на сайте, чтобы было удобно всем, и тем вашим клиентам, которые находятся с вами в одном городе (могут воспользоваться самовывозом или курьерской доставкой) и другим, которые могут получить свой заказ только через почтовые службы.
Получается что всех клиентов можно условно разделить на две группы — местные (из Спб.) и иногородние (из любого другого города России).
Зная это, давайте определим какой минимальный набор полей в форме оформления заказа будет нужен в вашем магазине для каждой из этих групп.
Как видите, поля оформления заказа отличаются для местных покупателей интернет-магазина и для иногородних.
Это как раз и есть та самая зависимость полей в корзине, о которой я говорил вначале. После того как покупатель указал свой город, с учетом этого города мы даем ему для заполнения только поля, которые в данном случае нужны и даем на выбор только те способы оплаты и доставки, которые можем принять и осуществить.
Проще говоря, магазин не должен показывать покупателю поля, которые не нужно чтобы он заполнял или выбирал. Например, если магазин осуществляет доставку в Москву только через почтовые службы, но не может сделать доставку курьером, то показывать способ доставки «Курьером» для города Москва не нужно. Далее, если при выборе способа доставки «Грузовозофф» вы технически не можете принять оплату «Наложенным платежом», то не нужно показывать этот способ оплаты для способа доставки через «Грузовозофф». Думаю логика тут понятна.
То же самое с «местными». Не гуманно местного покупателя, который хочет сам заехать за заказом (если он выбрал «Самовывоз») заставлять заполнять поля «Адрес» и «Индекс». Далее, когда «Самовывоз» выбран, мы не должны показывать этому покупателю способы оплаты, недоступные при самовывозе. Будет странно если при самовывозе покупатель выберет способ оплаты наличными через Евросеть.
Несмотря на то что на первый взгляд эта взаимосвязь полей может показаться запутанной, на деле все очень просто. Особенно если такая возможность поддерживается в CMS. Так, в любимой мной CMS 1С-Битрикс, подобное оформление заказа в интернет-магазине, настраиваются мышкой за 10-15 минут. Без проблем можно указать для какого города какие поля выводить, какие службы доставки и способы оплаты подключать и т. п. При этом зависимость необязательно должна быть именно от города из которого покупатель. Зависимость может быть от способа доставки. Выбрал «Самовывоз» — не увидишь в способах оплаты лишних полей. При этом со стороны клиента все логично выглядит, нет вопросов «зачем я заполняю адрес» если заберу заказ сам и т. д.
У «связанных полей» применение может быть не только в улучшении юзабилити оформления заказа. Можно для разных городов выводить разные способы доставки. Например, есть удобная служба доставки, которая возит только в 15 городов-миллионников — можно настроить чтобы только для покупателей из этих городов была доступна эта служба.
Казалось бы, сказанное выше — очевидные вещи. Но во многих интернет-магазинах эти очевидные вещи не применяются и как результат, прием и оформление заказа имеет такое количество полей, заполнив которые можно не только заказать красовки, но и получить загранпаспорт:-).
Все, наверное, читали популярные кейсы, в которых в крупных американских магазинах (Амазон, Заппос, Ебей), поменяв местами две формы, увеличили конверсию в десятки раз. Обычно такие примеры приводят в пользу необходимости делать как можно меньше полей при оформлении заказа.
Кейсы красивые и вызывают интерес. Но в них обычно не бывает предыстории. Возьмем пример, где на странице оформления заказа поменяли две формы местами.
Как вы думаете, их ведь не наугад поменяли, а основываясь на каком-то предположении?
Давайте попробуем привести пример подобного предположения. Как думаете (вспомнив сказанное выше про взаимозависимость полей), есть разница, что нужно выводить на странице оформления заказа в первую очередь поле «Индекс» или поле «Город»? На первый взгляд, разницы нет.
Теперь добавим исходных данных из описанного выше примера, когда магазин находится в Питере. Есть самовывоз, делает доставку курьером только по Питеру, а в другие города отгружает заказы через почтовые и транспортные компании (курьерской доставки нет). Теперь есть разница, какое поле будет первым, индекс или город?
Да, теперь есть. Более того, новая информация сильно влияет на весь процесс оформления заказа. Теперь мы должны сделать ряд полей зависимыми. А именно поле «Город» должно быть первым. Пока поле «Город» не заполнен, поля «Индекс», «Адрес», «Способы доставки» и «Способы оплаты» не показываем. Они появятся только после того, как будет выбран любой город кроме «Санкт-Петербург». Потому что в Питере, как мы говорили выше, магазин доставляет только по самовывозу и курьером. А раз так, то ему не нужны от клиента его индекс и адрес (сразу на два поля меньше заполнять) .
Смотрим дальше, что еще у нас улучшилось. Еще мы не показываем все способы доставки и способы оплаты, а показываем только те, которые реально можем принять. Для Питера, как уже говорилось выше в примере, это при получении оплата наличными или по банковской карте. Для иногородних, чьи заказы будут отгружены через транспортную компанию, оплаты «наличными при получении» конечно не будет. Так мы избавили клиента от лишней путаницы с выбором из вариантов, которые ему заведомо недоступны, а менеджера магазина избавили от лишних, с этим связанных вопросов и недовольств покупателей.
Таким образом, просто добавив на страницу оформления заказа взаимосвязь полей, можно для ряда пользователей сократить количество полей, нужных для заполнения, уменьшить негатив связанный с непониманием некоторых пунктов по оплате и доставке и в результате увеличить конверсию корзины. Никто ведь не сомневается что количество продаж связано с юзабилити корзины?
Посмотрите пост про оформление заказа без регистрации в Битрикс. Он отлично дополняет эту статью.
Оформлению страницы «Доставка» чаще всего уделяется не слишком много внимания. Обычно, это небольшой текст о сроках и условиях доставки. На самом деле от информации, представленной на этой странице, во многом зависит решение покупателя при оформлении заказа.
В первую очередь, посетитель должен увидеть, в какие регионы осуществляется доставка. Информацию об основном регионе представить более подробно, а для дополнительных создать отдельную страницу с обзором всех возможных способов (транспортные компании, пункты выдачи, Почта России и т.д.). Если интернет-магазин работает по всей России, то на сайт можно добавить автоопределение региона и выводить информацию в зависимости от этого, а так же калькулятор для расчета стоимости.
Для большинства покупателей сроки - очень важный показатель. Необходимо обязательно указать на странице, в какие сроки товар отгружается со склада, сколько времени занимает доставка. Если она возможна на следующий день, то это довольно положительный фактор. Не стоит вводить покупателей в заблуждение, указывая меньшие сроки, чем есть на самом деле - это только негативно скажется на репутации интернет-магазина и увеличит количество отказов от заказов.
Можно ли проверить или примерить товар перед покупкой, разрешается ли вскрывать заказ до оплаты, сможет ли курьер проконсультировать по функциям товара? Вся эта информация часто интересует покупателей и ее необходимо как можно подробнее представить на странице.
Так же можно добавить информацию об ответственности за отказ от заказа при доставке. Часто покупатели делают заказы, рассчитывая посмотреть на товар и, если он не подойдет, отказаться. В этом случае покупатель оплачивает стоимость доставки.
Он необходим для того, чтобы покупатели знали, куда обратиться в случае наступления гарантийного случая и на какой адрес осуществлять возврат. Если указать его нет возможности (интернет-магазин работает без склада), то можно указать юридический или почтовый адрес компании.
Здесь можно указать, как покупатель сможет отслеживать заказ, каким образом он получит трек-номер и где сможет его проверить.
Несмотря на, казалось бы, большое количество информации, представить ее необходимо как можно лаконичнее и структурированно, чтобы покупателю не пришлось длительное время изучать страницу доставки.
