Ресурс компании 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 далеко не идеален, вам определенно стоит попробовать описанные здесь приемы на вашем сайте, чтобы убедить клиентов в целесообразности завершения сделки.
Совместив указанные методики с дополнительными рекомендациями, вы сможете оптимизировать покупательский опыт и свести к минимуму число «брошенных корзин».
Цель урока
Разработать часть шаблона служебных форм отвечающую за страницу оформления заказа.
Познакомиться с формами выбора способа оплаты, доставки и анкетой покупателя.
Основная цель страницы оформления заказа - быть заполненной посетителем. Вопросы, с которыми сталкиваются пользователи при заполнении форм:
Вопросы
Давайте посмотрим, с какие задачи решает страница оформления заказа.
| Задача | Решение |
|---|---|
| Предоставить простой аккуратный макет | Для этого потребуется добавить свободного пространства, а также убрать все лишнее |
| Привлечь внимание к полям формы | Для этого мы добавим блоку с полями отличающийся фон и границы вокруг формы |
| Убрать ненужные поля | Потребуется определить, какие поля пользователь обязан заполнить, чтобы можно успешно было завершить заказ. Ничего лишнего, что может заставить пользователя оставить страницу оформления заказа |
| Преодолеть сомнения посетителей | Можно сообщить о том, что заказ можно будет отменить в любой момент. Или рассказать о преимуществах покупки в вашем магазине: условия гарантии, возврата или доставки |
| Применять активный залог | Проведите пользователя через процесс оформления заказа с помощью глаголов в активном залоге. Их можно использовать в заголовках страницы или в пояснении к полям формы заказа |
| Указать количество шагов и времени на оформление заказа | Делается это в верхней части страницы, до того, как пользователь перейдет к оформлению |
Теперь решим эти задачи.
Начнем с самого сложного. Так выглядит страница оформления заказа по умолчанию:
Чтобы упростить вид страницы оформления заказа нам потребуется:
При желании, от сайдбара можно совсем отказаться.
Найдите в шаблоне страницы служебных форм глобальный блок, отвечающий за верхнюю часть сайта (обычно это $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 несколько шагов оформления заказа? Здесь речь идет о шагах в пределах одной страница. Я предлагаю такой вариант:
Обратите внимание, в названии каждого из шагов используется активный залог.
На этом урок заканчивается. Для страницы оформления заказа существует ряд настроек, который позволит повысить конверсию по ней. Об этом мы поговорим в следующих уроках.
Упражнения
Тема правильного оформления страницы доставки актуальна всегда. Алгоритмы поисковых систем обновляются каждый месяц, и ключевые страницы сайтов (а среди них и «Доставка») обрастают все новыми фишками и функционалом. Можно реализовать сотню лайфхаков в борьбе за место в ТОП 10 выдачи, однако если на сайте будет непрозрачная, неинтересная или неполная информация о доставке, все равно на нем вряд ли сделают покупку. Сегодня важно уже не наличие страницы доставки на сайте, а то, завоюет ли она доверие посетителей. Чек-листом по оформлению страницы доставки Ксения Ситникова , менеджер отдела поискового продвижения i-Media, поделилась с SEOnews.ru .
Представьте, что вы разработали информативный и красочный макет главной страницы, сделали перелинковку, правильно структурировали и залили ассортимент, оформили интерактивный каталог с проработанными карточками товаров…
И на этапе покупки выясняется, что о доставке покупатель узнает только при звонке в колл-центр по мобильному номеру. Или, например, типовая страница ‒ это полотно текста на шесть тысяч символов.
Уйдете вы с такого сайта или останетесь?
Коллеги-маркетологи из Baymard Institute провели глобальное исследование ста крупнейших интернет-магазинов, в которое также вошел контент-анализ описаний дополнительных услуг. Выяснилось, что оформление страницы доставки сильно влияет на конверсию и поведенческие факторы.
С учетом собственного опыта и мнения зарубежных коллег я подготовила список самого необходимого для страницы доставки, чтобы пользователь беспрепятственно дошел до этапа оплаты.
Следите за новостями диджитал-индустрии в наших аккаунтах в
Процедура покупки товара в нашем Интернет-магазине очень проста и состоит из нескольких шагов.
Выбрать нужный товар можно из верхнего меню, перейдя в нужный каталог. Ткани удобно выбирать с помощью фильтра . При этом выбор вы можете осуществлять как по одному, так и по нескольким параметрам сразу. Можно так же задать диапазон цен на ткани.
Как только Вы определились с товаром, нажмите на кнопку «В корзину» . Количество добавленных товаров и их сумма отображается в поле «Корзина», которое находится в шапке сайта. Для тканей и прикладных материалов укажите необходимый метраж, но не менее 0,7 метра . При заказе дробного количества ткани используйте разделительную точку или запятую. При заказе купонной ткани указывайте метраж, кратный длине одного купона.
После того как вы добавили все интересующие вас товары в корзину, нажмите на данное поле и Вы попадете на страницу «Моя корзина»
. На этой странице будут перечислены все выбранные Вами товары. В поле «Количество» Вы можете изменить количество товара для покупки. После изменения количества товара сумма будет пересчитана автоматически. Также Вы можете удалить ненужный товар, нажав на крестик в колонке «Действие».
3. Оформление и подтверждение заказа
После того как Вы окончательно сформировали и проверили свой заказ нажмите на кнопку «Оформить заказ».
Введите информацию
:
* ФИО получателя,
* адрес доставки,
* контактные данные.
Выберите вариант доставки и способ оплаты . Поля, помеченные звездочками, обязательны для заполнения. Далее, для завершения процедуры оформления заказа Вам нужно нажать кнопку «Оформить заказ» .
Внимание!
Неправильно указанный номер телефона, неточный или неполный адрес могут привести к дополнительной задержке! Пожалуйста, внимательно проверяйте Ваши персональные данные при оформлении заказа.
Примечание!
Для постоянных клиентов на сайте магазина есть . В своем кабинете Вы можете посмотреть содержимое корзины, историю своих заказов, а также повторить или отказаться от заказа. Также из личного кабинета происходит оплата заказа, если Вы выбрали способ оплаты через систему ASSIST.
Оплата покупателем счета продавца автоматически означает согласие покупателя с приведенными правилами приобретения товара в фирме «Сезон».
4. Работа с заказом
Заказы обрабатываются с 10.00 до 18.00.
В выходные и праздники возможна задержка обработки заказа.
После того как Вы заказали товар в нашем сайте, на Ваш e-mail адрес будет выслано письмо с номером заказа - подтверждение того, что заказ принят
. Затем с Вами свяжется наш консультант, уточнит детали заказа и ответит на все интересующие Вас вопросы. Заказанный Вами товар будет зарезервирован
на складе и подготовлен к отправке.
Вы можете оплатить
заказ сразу после оформления либо после звонка оператора, если вы выбрали оплату квитанцией или электронным способом.
Наш консультант сообщит Вам об отправке заказа по телефону, либо вышлет на Ваш электронный адрес информацию об отправке, включая почтовый идентификатор по которому посылку можно будет отследить или номер накладной, при отправке груза транспортной компанией или курьерской службой.
Важно! Срок оплаты товара - сутки с момента подтверждения заказа операторм интернет-магазина. На это же время резервируется товар. По истечении этого срока, если от Вас не поступит оплата, резерв товара аннулируется.
