Форма состоит из следующих блоков:

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

    Если в настройках товара указана цена - форма автоматически рассчитает стоимость всего заказа. А если в настойках у товара установлен признак "возможно заказать несколько товаров", то в форме будет отображаться и количество, а итоговая стоимость заказа при этом будет рассчитана из этого количества.

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

    • Пример html-кода для добавления корзины
    скопируйте в любое место на странице 1 раз

    Тестовый код для размещения кнопки КУПИТЬ
    разместите рядом с описанием нужного товара Купить

    Готовый персональный код корзины и коды кнопок для добавления в неё товаров в можете получить в личном кабинете:

    Преимущество формы заказа EasyNetShop

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

    Ещё несколько позитивных моментов в форме заказа EasyNetShop:
    • Постоянно напоминает о незавершенном действии по оформлению заказа.
    • Удобно при формировании заказа с мобильных устройств тем, что половина данных (о товаре и количестве) уже автоматически заполнены.
    • Позволяет производить расчет не только суммы заказа, но и стоимости доставки, а также скидку.
    • Сохраняет данные при повторном возвращении на сайт, если заказ не был завершен.
    • Позволяет организовать процесс онлайн-оплаты для сформированного заказа.

    Заполненная и отправленная форма заказа остается формальностью и даже если получен обратный ответ о том, что заявка получена. Это не дает 100%ой уверенности покупателю в том, что именно совершена покупка. Не получив ответа и не понимая стоит ли ему его ждать (какое время) - покупатель продолжит поиск товара на других сайтах. Совсем другое дело, если покупатель оформил заказ через корзину товаров и ему пришел тот же самый автоматический ответ о том, что заказ №… оформлен. Это уже не формальность.

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

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

    Но так ли обстоят дела на самом деле? Предлагаем вам ознакомиться с некоторыми формами оформления заказа на коммерческих сайтах.

    Примеры страниц оформления заказа на коммерческих сайтах

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

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

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

    (Рис. Клиенты, уже пользовавшиеся услугами сайта «ASOS», должны ввести адрес электронной почты и пароль, а новым клиентам необходимо создать аккаунт)

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

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

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

    Компания «Macy’s»
    Вот еще один прекрасный пример – приятная, понятная и не перегруженная страница, которая обращает внимание пользователей на ключевые моменты:

    (Рис. Если вы уже ранее что-либо покупали на сайте, то вы можете зайти на страницу своих заказов, введя адрес эл. почты и пароль. Новичкам только после выбора товара предлагают перейти на страницу оформления заказа, нажав на кнопку «Сделать расчет как гостю». При этом автоматически будет создан профайл).

    «Macy’s» хорошо справились с этой задачей еще и потому, что на странице оформления заказа покупателям дается информация по возврату и доставке товара (при щелчке на значки «коробка» и «замок»), а вверху страницы указан номер, по которому можно позвонить и уточнить всю необходимую информацию. Согласитесь, что подобный подход к делу внушает доверие и уважение.

    Компания «Walmart»
    На своей странице оформления заказа компания «Walmart» предлагает гостям опции по созданию аккаунта либо по дальнейшему оформлению заказа без его создания. Т.е. у нового покупателя есть выбор – сэкономить время «здесь и сейчас» либо в будущем:

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

    Компания «Sears»
    Интересный подход к данному вопросу проявила компания «Sears», которая решила, что страница входа в систему для постоянных клиентов им не нужна. Поэтому компания отправляет всех своих пользователей сразу на страницу оформления заказа.
    Так выглядела их страница оформления заказа раньше:

    А так она выглядит сейчас:

    Все предельно понятно (необходимо ввести адрес доставки, имя получателя и email), нет никаких барьеров для оформления покупки.

    Компания «WHSmith»
    Еще один образец для подражания. Очень аккуратная страница, не принуждающая пользователя к обязательной регистрации:

    (Рис. Пользователя просят ввести email и ненавязчиво спрашивают, есть ли у него пароль для входа на сайт)

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

    (Рис. Войти, введя адрес эл. почты и пароль. Зарегистрироваться, введя адрес эл. почты, почтовый код и номер клубной карты)

    Такой подход, думаю, может отпугнуть ряд случайных покупателей, поэтому можно посоветовать «Tesco» все-таки попробовать ввести оформление заказа и для случайных гостей сайта и отследить результат.

    Компания «John Lewis»
    Еще один прекрасный пример оформления страницы заказа. Здесь нет условия обязательной регистрации всех пользователей, а на самой страничке представлены все необходимые контактные данные компании, предложена функция безопасного подтверждения заказа (оформление заказа можно продолжить только пройдя по ссылке, высланной на электронный адрес):

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

    Компания «Boots»
    Ранее мы уже рассматривали сайт компании «Boots», у которой обязательная регистрация перед оформлением заказа может быть одним из факторов, негативно отражающимся на уровне продаж:

    (Рис. Войти в систему оформления заказа через email и пароль или зарегистрироваться на сайте, прежде чем начать делать покупки)

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

    (Рис. Посетителю предлагают ввести электронный адрес и указать, является он новым покупателем (тогда надо щелкнуть по ниже располагающейся желтой кнопке) или уже пользовался услугами «Amazon» (тогда вводится пароль)).

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

    (Рис. Нового покупателя просят ввести имя, адрес эл. почты, номер контактного телефона (опционально) и пароль).

    Компания «House of Fraser»

    У них очень простая страничка оформления заказа, которая не представляет собой никакого барьера для совершения покупки:

    (Рис. Просят войти или продолжить оформление заказа в качестве гостя, указав для начала лишь свой email).

    Компания «American Apparel»

    Компании «American Apparel» удалось на одной страничке разместить не только информацию о заказах (список покупок) и их стоимости, но и функцию «войти через свой логин» и оформление заказа в статусе гостя.
    Однако все это сделано настолько «вкусно», что покупатель нисколько не запутается и его ничто не будет отвлекать от покупки:

    (Рис. Оформление заказа: 1) список и стоимость заказа; 2) войти через свой логин или в качестве гостя указать детали доставки)

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

    Например, если не брать во внимание ввод номера с клубной карты (что в любом случае опционально), формы по оформлению и подсчету стоимости заказа таких компаний, как «House of Fraser» и «Tesco», требуют введения одинаковой информации.

    Вот только «Tesco» своей манерой реализации превратили это в барьер, а «House of Fraser» не создают никаких препятствий и направляют всех пользователей сразу на страницу оформления заказа без обязательной регистрации. Какая тактика лучше? Как по мне, вторая…

    И всегда помните, если Вы хотите, чтобы клиенты делали покупки у Вас — не ставьте никаких барьеров для них.

    Цель урока

    Разработать часть шаблона служебных форм отвечающую за страницу оформления заказа.

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

    Основная цель

    Основная цель страницы оформления заказа - быть заполненной посетителем. Вопросы, с которыми сталкиваются пользователи при заполнении форм:

    Вопросы

    • С чего начать?
    • Заполнить форму легко? И сколько на это понадобится времени?
    • Какой способ оплаты/доставки подходит мне?
    • Сколько шагов надо пройти до полного заполнения формы?
    • Почему я должен заполнять эти поля? Зачем им эти данные?
    • Можно ли вам доверять? Моя почта/номер телефон не попадут в руки спамеров?
    • Что мне делать после отправки формы?
    Задачи

    Давайте посмотрим, с какие задачи решает страница оформления заказа.

    Задача Решение
    Предоставить простой аккуратный макет

    Для этого потребуется добавить свободного пространства, а также убрать все лишнее
    Привлечь внимание к полям формы

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

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

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

    Проведите пользователя через процесс оформления заказа с помощью глаголов в активном залоге. Их можно использовать в заголовках страницы или в пояснении к полям формы заказа
    Указать количество шагов и времени на оформление заказа

    Делается это в верхней части страницы, до того, как пользователь перейдет к оформлению

    Теперь решим эти задачи.

    Шаблон Предоставить простой аккуратный макет

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

    Чтобы упростить вид страницы оформления заказа нам потребуется:

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