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

Если есть сомнения в подходах - .

Что делает оформление заказа приятным?

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

Полезные фичи:

• • Поиск адреса или предиктивный ввод текста.

• • Копирование адреса доставки в адрес платёжных данных.

• • Просьба создать аккаунт появляется в конце, когда пользователь готов сделать покупки.

• • Оформление заказа без регистрации.

• Понятные сообщения об ошибках, чтобы пользователь быстро смог исправить их.

Источники проблем:

• • Принуждённая регистрация перед оформлением заказа.

• • Слишком много шагов.

• • Ненужные поля формы.

• • Непонятные сообщения об ошибках.

• Проблемы с подтверждением формы. Например, строгие правила формата времени.

Лучшие примеры форм оформления заказа

Domino’s

Сайт Domino’s сделал упор на мобильность. Он распознаёт типы устройств и адаптируется под них.

Форма оформления заказа — приятная и легкая в использовании: нет регистрации, простые поля заполнения, сохранённые платёжные данные для повторных покупателей.

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

Также у них есть приложение, в котором можно сделать заказ одним щелчком. Просто открываете приложение, ждёте 10 секунд, и ваша пицца направляется к вам.

Lowe’s

Регистрация может стать преградой на пути совершения покупок. Этот дополнительный шаг перед оформлением заказа может оказаться непосильным для многих пользователей.

С другой стороны, регистрация позволяет упрощать процесс покупок в дальнейшем. Это удобно и для пользователей

Предложите зарегистрироваться в конце процесса оформления заказа. На сайте Lowe’s можно зарегистрироваться, перед тем как нажать на кнопку ‘сделать заказ’. Здесь не должно возникнуть трудностей.

Threadless

Прекрасная форма оформления заказа. Пользователя сразу ведут на страницу с корзиной и платёжными данными. Можно сделать заказ без регистрации, между прочим.

Вся форма оформления заказа находится на одной странице. И это очень удобно.

Amazon

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

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

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

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

Schuh

Их команда отлично понимает важность юзабилити и постоянно улучшает её.

Посмотрите на скриншот ниже, в чём прелесть данной страницы:

• • Безопасность. Вверху размещено подтверждение о безопасности страницы и контактные данные компании.

• • Оповещение о доставке и возврата товара. Три пункта над формой оформления заказа напоминают пользователям о хороших условиях доставки, скидках и простом процессе возвращения товара.

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

• • Простая регистрация. Schuh не интересна регистрация на данном этапе, он предложит её позже.

• • Ссылки на важную информацию. Не нужно делать эти ссылки внизу слишком заметными, но они должны быть, если понадобятся пользователю.

• • Способы оплаты. Визуальное напоминание о том, с помощью чего пользователи могут оплатить заказ.

• Форма по центру. На странице есть несколько отвлекающих элементов, но фокус сконцентрирован на совершении покупки.

Crate & Barrel

У формы красивый и простой дизайн. Всё выстроено логически, каждое поле помечено. Есть индикатор прогресса, отсутствуют отвлекающие элементы на странице.

Nordstrom

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

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

Superbalist.com

Этот сайт сделал форму регистрации в виде новеллы – как только пользователь добавляет товар в корзину, ему предлагают (в виде всплывающего окна) создать аккаунт с помощью электронной почты или аккаунта в Facebook, или зайти в уже существующий.

Потом пользователя просят создать пароль, прежде чем продолжить.

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

Что примечательно, на сайте Superbalist добавлено много мелкого текста, который объясняет условия доставки и что вписывать в поля.

AO.com

AO.com проделал хорошую работу. На этой странице можно выбрать время и дату доставки, к тому же очень легко:

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

Joseph Joseph

Еще один сайт с красивым дизайном формы оформления заказа — Joseph Joseph . Страница, которая была выбрана в качестве примера — форма регистрации/оформление заказа без регистрации.

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

Хорошие примеры, но есть куда расти…

Сайт Zappos — хороший пример, они уделяют внимание обслуживанию и лояльности клиентов.

Тем не менее, процесс оформления заказа несовершенен. Создание аккаунта — обязательное условие, которое не устроит всех пользователей.

Возможно, в случае компании Zappos, репутация бренда снимает этот барьер. Интересно, пробовали ли они что-то другое.

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

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

Выделять форму оформления заказа не значит заманивать пользователей, это значит упрощать им процесс покупки.

Boots

Эта форма оформления заказа — самая худшая из представленных.

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

Заключение

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

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

Есть ли у вас примеры форм оформления заказа лучше представленных? Если да, поделитесь ими с нами в комментариях под постом…

Процедура покупки товара в нашем Интернет-магазине очень проста и состоит из нескольких шагов.

1. Выбор товара

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

2. Добавление товара в корзину

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

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

3. Оформление и подтверждение заказа

После того как Вы окончательно сформировали и проверили свой заказ нажмите на кнопку «Оформить заказ».

Введите информацию :

* ФИО получателя,
* адрес доставки,
* контактные данные.

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

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

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

Оплата покупателем счета продавца автоматически означает согласие покупателя с приведенными правилами приобретения товара в фирме «Сезон».

4. Работа с заказом

Заказы обрабатываются с 10.00 до 18.00.

В выходные и праздники возможна задержка обработки заказа.

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

Вы можете оплатить заказ сразу после оформления либо после звонка оператора, если вы выбрали оплату квитанцией или электронным способом.

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

Важно! Срок оплаты товара - сутки с момента подтверждения заказа операторм интернет-магазина. На это же время резервируется товар. По истечении этого срока, если от Вас не поступит оплата, резерв товара аннулируется.

Ресурс компании 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 избавили своих посетителей от этих надоедливых сообщений.

Пути для дальнейшего улучшения

1. Используйте описательные индикаторы прогресса: замените надпись «Продолжить» на «Просмотреть мой заказ» и т.д.
2. Объясните посетителям, почему они должны указывать в форме дату рождения.
3. Используйте более человечные сообщения об ошибках, которые не заставят ваших пользователей уйти.
4. Предоставьте покупателю достойную причину, по которой вам понадобится номер его мобильного (например, вы отправляете клиентам текстовые уведомления о статусе их заказа).
5. Предоставьте людям возможность вернуться на предыдущую страницу, когда они находятся в процессе оформления заказа. Это позволит им внести важные изменения, даже если вспомнят о своей ошибке слишком поздно.

И никакого контактного номера?

Компания ASOS действительно не указывает на своем сайте никаких контактных номеров — они общаются с клиентам при помощи социальных сетей, справочных страниц и формы обратной связи.

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

Клиенты ASOS уже знают, что товары в их корзине будут зарезервированы не дольше 60 минут, поэтому ожидать ответа от службы поддержки на протяжении нескольких часов (до 4 часов) для них было бы попросту бессмысленно.

Подводя итоги

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

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

Иной взгляд на оформление заказа в интернет-магазине

• Usability ,
• Веб-дизайн

В странах СНГ не менее 75-80% заказов приходятся на cash-and-delivery (оплата заказа при доставке). Это отличие российского и западного потребителя легло в основу редизайна оформления заказа Сотмаркета еще в 2012 году. Тогда впервые в России интернет-магазин перестал требовать авторизации или регистрации клиента перед совершением покупки.

Фоновая регистрация и авторизация пользователей

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

Мэтчинг аккаунтов происходит по номерам мобильных телефонов и эл. адресов, что позволяет не терять клиентскую историю. Подход себя оправдал: процент заказов зарегистрированных через сайт вырос с 28% до 52%.

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

Ремаркетинг брошенных корзин

Данные, собранные таким образом, нельзя (читай: бессмысленно) использовать для рассылки рекламных сообщений не связанных с конкретным заказам.

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

ФИО одним полем

• ненавязчивое напоминание о необходимости ввести полные данные ФИО;
• менеджер колл-центра получает во внутреннюю систему обработки заказов корректно разнесенные;
• сама форма сохраняет визуальную простоту и не выглядит сложнее, чем есть на самом деле.

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

Усиливаем влияние на принятие решений пользователем

Ввод адреса доставки одним полем

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