Также поможет с выбором оформлением заказа. Оформление заказа в вашем интернет магазине

Цель урока

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

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

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

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

Вопросы

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

Задачи

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

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

Шаблон

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

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

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

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

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

Найдите в шаблоне страницы служебных форм глобальный блок, отвечающий за верхнюю часть сайта (обычно это $GLOBAL_AHEADER$) и поместите его в такую конструкцию:

Название сайта

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

Тоже самое проделаем и с нижней частью сайта ($GLOBAL_BFOOTER$) и сайдбаром ($GLOBAL_CLEFTER$):

Если испытываете трудности с глобальными блоками, вспомните .

Привлечь внимание к полям формы

Всего на странице оформления заказа пользователю предлагается заполнить четыре формы:

1. Форма с содержимым заказа (таблица) $BODY$
2. Форма выбора способа доставки $DELIVERY_SELECTOR$
3. Форма выбора способа оплаты $PAYMENT_SELECTOR$
4. Форма ввода личных данных $ORDER_FIELDS$

Для того, чтобы выделить поля форм необходимо настроить.methods-list и #order-table:

Methods-list, #order-table { margin: 20px; background-color: #e5e5e5; border: 1px solid #cccccc; }

Убрать ненужные поля

Здесь речь идет о форме ввода личных данных $ORDER_FIELDS$ . Наверняка, вы уже прошли урок 31 о полях заказа . Нам потребуется взглянуть на каждое добавленное поле под микроскопом и спросить себя: "Действительно ли информация из него так важна для нас, что мы готовы терять часть клиентов ради нее?".

Зачастую хватает "Имени", "Номера телефона" и "Адреса доставки".

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

После того, как вы решили удалить лишние или добавить новые поля вернитесь к уроку 31.

Преодолеть сомнения посетителей

Как будем преодолевать:

• После формы с содержимым заказа $BODY$ разместим краткую информацию о гарантии и условиях возврата
• Рядом с формой выбора способов оплаты $PAYMENT_SELECTOR$ разместим иконки аттестатов, сертификатов (при их наличии) или иконки способов оплаты;
• Перед кнопкой "Оформить заказ" $ORDER_BUTTON$ сообщим, что заказ можно отменить/изменить в любой момент. Так у пользователя не будет долгих раздумий на тему "А правильно ли я все оформил"
• Под кнопкой "Оформить заказ" $ORDER_BUTTON$ разместим блок "Что будет дальше?". В нем мы сообщим о том, что перед доставкой заказа, обязательно перезвоним, уточним в указанное время.

К сожалению, в рамках данного урока мы не можем рассматривать способ добавления иконок к формам оплаты или доставки. Поэтому просто добавьте соответствующий блок после $PAYMENT_SELECTOR$ .

Применять активный залог

Давайте рассмотрим конкретный пример. По умолчанию, выбора способа оплаты описан этим участком шаблона:

Способ оплаты

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

Выберите способ оплаты

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

Указать количество шагов и времени на оформление заказа

Перед $BODY$ добавьте сообщение о том, сколько шагов в процессе оформления заказа и сколько времени это займет, например:

Оформление заказа в 4 шага занимает не более 3ех минут

Откуда на uCoz несколько шагов оформления заказа? Здесь речь идет о шагах в пределах одной страница. Я предлагаю такой вариант:

1. Шаг 1. Проверьте содержимое заказа
2. Шаг 2. Выберите способ доставки
3. Шаг 3. Выберите способ доставки
4. Шаг 4. Укажите информацию о себе

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

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

Упражнения

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

09 Апр

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

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

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

Оформление интернет-магазина

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

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

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

Структура интернет-магазина (страницы)

На сайте любого интернет-магазина обязательно должны быть следующие страницы:

1. Главная;
2. Контактная информация;
3. Страница(ы) с каталогами товаров (по категориям или все вместе);
4. Страница самого товара;
5. Корзина;
6. Условия доставки, оплаты, гарантии;
7. Страница оформления заказа.

Это обязательные страницы, но как я и говорил выше, еще требуется фантазия с вашей стороны и дополнения другими страницами. У меня к примеру еще есть: страница отзывов, страница с часто задаваемыми вопросами, акции (категория, но как отдельная страница). Почему я не прописал страницу регистрации и личный кабинет для клиентов? Потому что, как выяснилось, для некоторых магазинов, таких как мой cmoda.ru и для других магазинов, работающих в отдельном городе, это не столь нужно. Еще раз повторюсь, что это обязательный список страниц, но вы его можете и должны дополнять.

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

Шапка интернет-магазина

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

Контактная информация

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

Страница с товарами (каталоги)

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

Страница самого товара

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

Условия доставки, оплаты и гарантии

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

Гарантии обязательно нужны! Это позволяет клиенту меньше думать перед приобретением товара в вашем интернет-магазине, потому что он видит, что вы отвечаете за его качество.

Корзина и оформление заказа

В корзине ничего замысловатого нет. Она просто должна правильно подсчитывать сумму и все. А вот при оформлении заказа у вас должна быть упрощенная форма без регистрации, потому что не каждому хочется регистрироваться в интернет-магазине. При вводе данных не допускайте лишних пунктов, берите только те данные, которые необходимы, не нужно заставлять заполнять тонны строк. Самые необходимые: ФИО, номер телефона, адрес доставки, mail, комментарий к заказу (не обязательно).

Социальные сети

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

Важные дополнения

Быстрая покупка

Быстрая покупка подходит практически всем интернет магазинам и позволяет во многом упростить процесс оформления заказа для тех, кто любит экономить своё время. Что надо сделать: разместить на странице товара кнопку «Купить в 1 клик» или «Быстрая покупка». По клику на кнопку будет всплывать окно, в котором будет предложено ввести «Имя» и «Телефон», на который вы и перезвоните. Некоторые еще размещают поле для email, чтобы сразу зарегистрировать человека или просто сохранить его email.

Обратный звонок

Еще одна простая вещь, которую используют далеко не все. А ведь это отличный способ сэкономить время вашего покупателя и помочь ему оформить заказ по телефону в удобное для клиента время. Что надо сделать: в шапке сайта, рядом с вашим телефоном, разместите кнопку или текст «Обратный звонок». По клику должно всплывать окно, в котором покупатель введет Имя и Телефон. После отправки заявки желательно связаться с клиентом в течение 10-50 минут .

Информация о доставке и оплате в карточке товара

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

Акции, оживляющие сайт

В интернете полно магазинов, по которым не понять работают они или нет. Видя новости, например, от июня 2015 года, многие думают, что магазин скорее мёртв и уходят с сайта. И ваша задача показать, что вы действительно работаете, обрабатываете заказы и готовы помочь своим покупателям. Что надо сделать: разместите у себя на сайте сквозной статический баннер, в котором у вас постоянно будет висеть какая-нибудь акция с ограничением по времени. По истечению срока, вы просто сдвигаете срок на 1-2 недели вперед и снова вывешиваете на свой сайт. Таким образом у вас будет постоянная акция и по датам на неё всегда можно понять, что магазин жив.

А также

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

Вывод

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

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

Спасибо за внимание!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коллеги, в этой статье мы хотим рассказать вам, как происходит оформление заказа, его оплата и доставка.

1. Магазин

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

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

   И так, Вы зашли в раздел Магазин и выбираете интересующую Вас категорию товара: "Пленка", "Оборудование", "Дополнительное оборудование", "Расходные материалы" или "Хром". Весь представленный ассортимент в наличии! Нажимая на картинку любого товара, Вы видите подробные характеристики и его большую фотографию. Понравившийся товар необходимо оформить, для этого просто нажмите на кнопку «Купить» и Вы увидите, как он добавится в Вашу «Корзину». Таких товаров в «Корзину» можно добавлять неограниченное количество.

3. Оформление заказа

   Когда Вы выбрали то, что хотели, нажимаете кнопку «Оформить» в «Корзине» и автоматически переходите на страницу заполнения данных и выбора способа оплаты. Здесь Вы заполняете свои данные для доставки: ФИО, Адрес доставки, Контактный телефон, Электронную почту – эти данные нужны для оформления и дальнейшей отправки Вашего заказа. Также Вы увидите поле «Комментарии к заказу» - в этом поле Вы можете оставить свои пожелания и комментарии к заказу, либо попросить, чтобы с Вами связался менеджер и ответил на оставшиеся вопросы.

   Итак, Вы заполнили свои данные, дело осталось за малым – выбрать удобный для Вас способ оплаты заказа. Сделать это можно на этой же странице – на выбор предлагается 11 способов оплаты. Расскажем о некоторых из них чуть подробней:

   • Перевод на карту Сбербанка – На указанную Вами электронную почту придут реквизиты нашей карты для оплаты. Внести оплату Вы сможете в любом отделении или терминале Сбербанка, или, например, переводом через Ваш он-лайн банк.
   • Выставить счет на оплату – На Вашу электронную почту придет счет на оплату заказанного Вами товара. Оплатить данный счет можно в отделении любого банка либо безналичным переводом.
   • Отдельно выделены способы оплаты «Онлайн» - самые быстрые способы оплаты. Деньги за заказ поступают мгновенно и Вам не нужно никуда идти! К примеру, при оплате заказа таким способом Вы сможете воспользоваться любой банковской картой VISA или MASTERCARD либо системой денежных переводов QIWI, электронными деньгами WebMoney, Яндекс.Деньги, или выбрать другой удобный для Вас способ онлайн-оплаты в сервисе «Яндекс.Касса».

   Если ни один из этих способов оплаты Вам не подошел или у Вас остались какие-то вопросы, Вы можете задать их нашему онлайн-консультанту либо связаться с нами по телефону горячей линии 8-800-200-51-21 – для России (Звонок бесплатный), для других стран +7-927-010-37-58, Вайбер или Ватс Ап +7-927-711-33-66.

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

   И так, Вы оформили заказ. Оплатили его. Что же происходит с Вашим заказом дальше?

4. Сборка и отправка заказа

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

   Стоимость стандартной доставки материалов составляет порядка 400-600 руб, срок доставки 3-4 дня, в удаленные регионы чуть больше, но мы следим за сроками и выбираем оптимальный вариант перевозчика.

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

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

   Выбрать товар и начать оформление заказ можно прямо сейчас - Перейти в магазин