Оформление заказа на одной странице или по шагам: как выбрать для своего магазина

Что входит в checkout магазина

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

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

Слово checkout означает часть покупки после корзины, где человек сообщает нужные сведения, выбирает получение и подтверждает заказ, поэтому оценивать её только по длине формы неудобно: отдельный короткий экран может скрывать важное условие, которое появится слишком поздно. Сначала составьте перечень решений покупателя. Адрес нужен для курьера. Самовывоз требует выбора места получения. Оплата завершает уже определённые условия покупки.

В справке 1С-Битрикс компонент «Одношаговое оформление заказа» описан как оформление на одной странице с использованием AJAX. Это способ обновлять части страницы без полной перезагрузки. Название компонента помогает обсудить текущую основу магазина с разработчиком, а удобство конкретного оформления оценивают по работе его блоков и условиям покупки.

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

Почему адрес меняет следующие условия заказа

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

Адрес выбирают перед расчётом доставки. Предлагать недоступную доставку до определения адреса — значит заставлять покупателя потом исправлять уже принятое решение.

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

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

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

Одна страница сохраняет общий вид покупки

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

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

Слабое место одной страницы — зависимые обновления. Покупатель меняет город, а внизу незаметно появляется другая сумма доставки. Если кнопка подтверждения остаётся рядом с прежним итогом или обновление сдвигает её под палец, покупатель может подтвердить покупку, считая прежнюю сумму актуальной. Визуальная группировка помогает отделить ввод от результата. У изменённого блока сохраняется понятная подпись, а окончательный итог показывается до подтверждения.

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

На телефоне общий вид зависит от прокрутки и клавиатуры. Адрес может занимать заметную часть экрана, а итог окажется далеко ниже. Поэтому в промежуточной версии проходят оформление с открытой клавиатурой, возвращаются к условиям и читают сумму перед подтверждением. Если нужен отдельный компактный итог, в нём сохраняют узнаваемый состав покупки. Он помогает свериться, а не закрывает поля ввода.

Шаги уменьшают видимый объём, но требуют возврата

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

Скрытый путь хуже длинного. Если после обещанного последнего экрана появляется ещё один обязательный выбор, человек теряет ориентир.

Возврат — часть оформления, а не редкое отклонение. Покупатель может заметить ошибку в адресе или предпочесть самовывоз после просмотра суммы. Он возвращается, меняет нужное условие и продолжает с сохранёнными контактами. Это поведение включают в задание вместе с прямым переходом вперёд.

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

Для магазина с простым самовывозом пошаговый вариант может добавить лишние переходы, а для курьерской доставки с зависимыми условиями — яснее выстроить порядок выбора. Я бы сопоставил сложность решений в обоих вариантах, поскольку чужое число экранов не объясняет задачи этого магазина. Оба варианта стоит пройти на одинаковом составе покупки и сравнить места, где человек останавливается или возвращается.

После ошибки покупатель продолжает свою покупку

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

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

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

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

Особенно полезно рассмотреть ожидание ответа после нажатия кнопки, потому что повторный клик или возврат из платёжного сервиса может породить сомнение, создан ли заказ, а неопределённость подтолкнёт покупателя начать всё заново и оставить магазину несколько записей одной покупки. Исполнитель показывает сообщение во время ожидания и экран после ответа. Покупатель узнаёт заказ по номеру. В статусе указано, оплачен ли заказ. Саму передачу платёжного статуса рассматривают отдельно — в разборе оплаченного заказа без отметки оплаты.

Сравнение на действиях вашего магазина

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

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

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

Отдельно учитывают создание заказа. Документация электронной коммерции Метрики предлагает отправлять данные о покупке в момент подтверждения заказа. В этой передаче обязателен идентификатор покупки id. Поэтому аналитик заранее объясняет, чем эта запись отличается от события успешной оплаты, а исполнитель сохраняет одинаковое правило в обоих вариантах оформления.

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

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

Короткое правило выбора для этой покупки

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

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

Для передачи задачи в ШТАБ ИТ на доработку оформления подготовьте текущую форму, доступные варианты получения и описание связей между ними. Далее нужны экран итоговой покупки и список событий учёта. Исполнитель покажет, как эти условия работают в выбранном формате, а маркетолог сможет принять результат на обычном пути и при изменении выбора.