Корзина помогает собрать товары и изменить выбор. Оформление заказа начинается после этого: покупатель оставляет данные, выбирает получение и оплату. Главная задача: завершить покупку быстро, привычно и без лишних размышлений.
Стандартный блок оформления заказа Tilda объединял корзину, контактные данные, адрес, доставку и оплату в одном окне. Необходимые для покупки функции присутствовали, но задачи были смешаны.
Оценивалось не количество обязательных полей, а то, как покупатель видит их, в какой момент принимает решения и насколько естественно переходит от одного действия к следующему.
Разделить выбор товаров и оформление заказа. Необходимые сведения запрашивать последовательно, показывать только подходящие варианты и сохранять возможность изменить ранее введённые данные.
В стандартном блоке корзина и форма оформления объединены во всплывающем окне. Состав заказа находится в верхней части и при прокрутке может выходить из видимой области. Контакты, адресные поля, условия доставки и оплаты расположены ниже, в общем потоке.
Корзина нужна, чтобы собрать товары, проверить их и изменить количество. Оформление заказа нужно, чтобы выбрать получение, ввести данные и завершить покупку. В исходной форме эти задачи не были визуально разделены.
Покупатель сразу видит большую часть анкеты: контактные поля, адрес, варианты получения и пояснения. Прежде чем начать, приходится разбираться в общем объёме информации.
Товары в корзине отображаются, но остаются вверху длинной формы. При переходе к контактам и доставке для повторной проверки состава нужно возвращаться к началу.
Без указания места получения невозможно обоснованно отобрать подходящие варианты доставки. В исходном сценарии этот вопрос не был выделен в самостоятельный этап.
Пункт выдачи удобнее выбирать с учётом расположения на карте. В большом текстовом списке сложнее оценить, какой адрес подходит.
Оформление появляется поверх сайта, часто с затемнённым фоном. Такой формат может визуально прерывать привычное взаимодействие с магазином, особенно в сочетании с длинной анкетой.
Подсказки, ошибки и служебные элементы визуально отличались от оформления Born to Bloom и нарушали целостность пользовательского опыта.
Контакты, место получения, адрес, доставка и оплата действительно нужны для физического товара. Но необязательно предъявлять их одновременно. Корзина может оставаться самостоятельной зоной управления товарами, а оформление заказа разворачиваться как последовательность небольших действий.
Корзина отвечает на вопрос «Что я покупаю?». Оформление заказа отвечает на вопрос «Как я это получу и оплачу?». Каждое действие должно быть на своём месте.
Внутри новой системы оформление разделено на пять последовательных этапов. Покупатель видит только тот шаг, на котором находится, и не сталкивается сразу со всей формой.
Оформление устроено по этапам, но покупателю не показывается их общее количество. Вместо оценки длины пути он сосредоточен на одном небольшом действии.
Контакты запрашиваются вначале, способы получения после выбора населённого пункта, доступность оплаты зависит от доставки. Неподходящие поля не мешают текущему решению.
Предыдущие данные остаются доступны через действие «Изменить». Покупатель может вернуться к выбору, уточнить сведения и продолжить оформление без повторного начала.
Покупатель не проходит длинную анкету. Он последовательно выполняет понятные действия и сохраняет контроль над уже сделанным выбором.
Первый запрос состоит только из трёх полей: имя, телефон и электронная почта. Это привычный способ начать оформление. Дальнейший маршрут зависит от того, какой товар находится в корзине.
Проверка введённых данных происходит по мере заполнения. Если возникает ошибка, сообщение объясняет, что нужно исправить. Подсказки и уведомления оформлены в стиле Born to Bloom.
Физический товар нужно доставить, поэтому после контактов понадобятся населённый пункт, способ получения и адрес либо пункт выдачи. Электронный подарочный сертификат не требует доставки. После заполнения имени, телефона и электронной почты можно перейти непосредственно к выбору онлайн-оплаты.
Контакты → населённый пункт → способ получения → выбор оплаты → подтверждение.
Контакты → онлайн-оплата → подтверждение. Адрес и доставка не запрашиваются.
Если покупатель добавил в корзину одновременно одежду и электронный сертификат, появляется понятное сообщение с предложением оформить два заказа. Это исключает вопрос, какую доставку выбрать для товара, которому доставка не нужна. Несколько электронных сертификатов можно приобрести в одном заказе.
Для физического товара следующий вопрос: в какой населённый пункт доставить заказ. Только после этого появляются подходящие для данного направления варианты получения.
Не требуется преждевременно заполнять улицу, дом, квартиру или искать подходящую службу доставки.
В следующем разделе предлагаются способы получения с учётом выбранного населённого пункта.
Выбор населённого пункта определяет следующий вопрос: какие способы получения подходят именно здесь.
На этапе получения покупатель выбирает главное: курьерская доставка или самостоятельное получение. Только затем открываются доступные услуги и необходимые поля. Условия можно быстро считать по названиям и иконкам.
Выбор курьерской услуги, при необходимости с примеркой, затем заполнение адреса доставки.
Выбор службы и конкретного пункта выдачи на карте или в списке вместо ручного поиска в длинном перечне.
После выбора курьера показываются подходящие для населённого пункта варианты и их условия. Только теперь запрашивается адрес: получатель, улица, дом и другие данные, необходимые для доставки.
Самый прямой сценарий курьерской доставки. Название, условное обозначение и стоимость видны рядом, поэтому разницу между вариантами легко оценить.
Отдельный вариант с примеркой, выделенный собственным символом и понятной подписью. Покупатель различает условия ещё до чтения подробного описания.
Для СДЭК и Яндекс Маркета предусмотрены два привычных способа выбора пункта выдачи: на карте или списком. На карте удобно сравнить расположение, в списке найти адрес и часы работы. Подробности «Как пройти» доступны для выбранного пункта.
Сложная логика доставки остаётся за кадром. Покупатель видит простой выбор: как и где удобнее получить заказ.
Курьер и самовывоз можно переключать, чтобы сопоставить условия и стоимость получения. При возвращении к уже выбранному варианту применимые сведения, включая контактные данные и ранее заполненный адрес, сохраняются.
Стоимость доставки отображается отдельно от стоимости товаров и учитывается в итоговой сумме. Варианты можно сопоставить ещё до оформления.
Для сравнения курьерской доставки и самовывоза не нужно возвращаться к первому шагу или ещё раз вводить имя, телефон и электронную почту.
При возвращении к курьерскому способу получения ранее введённые данные о получателе и адресе остаются доступными, если подходят для этого варианта.
Когда подходящей доставки в выбранный населённый пункт нет, покупатель видит соответствующее пояснение, а не неподходящий тариф.
После выбора получения покупатель переходит к способам оплаты. Варианты показаны вместе, но их доступность зависит от выбранной доставки. Если оплата онлайн или при получении невозможна, это видно сразу. Доступные способы остаются активными.
Когда способ получения поддерживает и онлайн-оплату, и оплату при получении, оба варианта доступны для выбора.
Неподдерживаемый вариант не исчезает: он остаётся видимым с пояснением и недоступен для выбора. Так покупатель понимает, что при другой доставке условия оплаты могут отличаться.
В прежнем варианте состав корзины был в верхней части длинной формы. Теперь на компьютере он находится в отдельной правой области и остаётся доступным во время оформления. Покупатель видит товары, их количество и итоговую стоимость, может увеличить или уменьшить количество прямо здесь, не возвращаясь к началу.
На небольшом экране каждый этап остаётся самостоятельным и понятным. Выбор доставки, карта пунктов выдачи и состав заказа перестроены для управления касаниями. Покупатель может проверить товары и сумму, не теряя текущий шаг оформления.
Покупатель сначала выбирает доступный способ оплаты, затем проверяет сведения и подтверждает заказ. Завершающий экран показывает результат оформления. Для электронного сертификата путь короче: выбор доставки и адрес не требуются.
Переработанная структура опирается на знакомые покупателю сценарии интернет-магазинов. Каждый вопрос появляется в подходящий момент. Покупатель не изучает длинную анкету, а спокойно завершает нужное действие.
Состав товаров сохраняется в доступной области; на компьютере им можно управлять справа, на телефоне он адаптирован к экрану.
Не показывается вся анкета и нет счётчика общего количества шагов. Каждый этап запрашивает минимум необходимых сведений.
Сначала населённый пункт, затем курьер или самовывоз, после этого конкретная услуга, адрес или пункт выдачи на карте.
Сравнение стоимости и условий, возврат к предыдущим шагам, сохранение ранее введённых данных и понятные отметки о доступности оплаты.
Для сертификата достаточно контактов и онлайн-оплаты. Смешанная корзина сопровождается подсказкой об оформлении отдельных заказов.
Крупные зоны выбора, понятные иконки, фирменные сообщения об ошибках и адаптированный мобильный интерфейс.
Born to Bloom / Итог переработки
Стандартная форма позволяла оформить заказ, но требовала ориентироваться в длинном наборе полей и условий. Новая структура поддерживает знакомую последовательность покупки: проверить товары, ввести контакты, выбрать подходящее получение и способ оплаты, подтвердить заказ. Такой сценарий снижает ощущение сложности и создаёт условия для повышения конверсии в завершённые заказы.