Как заставить работать страницу оформления заказа? Оптимизируем и боремся с отказами. Хорошие примеры, но есть куда расти…. Изменение полей оплаты на основе выбора карты

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

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

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

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

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

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

    Внимание! Предварительные заказы оформляются в обход корзины. При клике на кнопку «Предзаказ», вы сразу перейдете к процессу оформления заказа.

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

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

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

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

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

    После регистрации (или авторизации) вы попадете на страницу, где вам будет предложено выбрать способ доставки: курьерская доставка, самовывоз из ближайшего магазина или пункта выдачи, а также доставка почтовыми службами - «Почтой России» или EMS.

    В зависимости от суммы заказа и региона вам могут быть доступны разные способы доставки.

    Обратите внимание: доставка до любого из магазинов сети «1С Интерес» или партнерского пункта выдачи осуществляется бесплатно.

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

    При оформлении заказа для физического лица обязательны для заполнения поля: фамилия, имя, отчество, E-mail, телефон и адрес доставки*. Исключение составляют заказы с получением в одном из магазинов нашей розничной сети «1С Интерес» или пунктов выдачи, где адрес в заказе заполняется автоматически при выборе способа доставки.

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

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


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

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

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

    Введение абонентского номера означает, что вы даете согласие ООО «Чистый Софт Центр» на осуществление рассылки (текстовых смс-сообщений) на указанный номер о ходе исполнения заказа, для чего в том числе могут привлекаться третьи лица, а также подтверждаете, что осуществляете его использование на законных основаниях.

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

    Если же все указанные данные и состав заказа правильные, нажмите кнопку «Подтвердить заказ» и он будет отправлен на обработку.

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

    На сайте текущая информация о заказах отображается в разделе в вашем Личном кабинете (необходима авторизация).

Цель урока

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

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

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

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

Вопросы

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

Задачи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон

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

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

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

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

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

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

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

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

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

$POWERED_BY$ Название сайта, год
$GLOBAL_AHEADER$
...Помощь по оформлению заказа...
$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$ .

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

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

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

$PAYMENT_SELECTOR$

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

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

$PAYMENT_SELECTOR$

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

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

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

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

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

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

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

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

Упражнения

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

На SEOnews продолжается рубрика «Как создать интернет-магазин» . Ближайшие полгода мы будем рассказывать, почему вам нужен (или не нужен?) интернет-магазин, сколько денег нужно быть готовым потратить на его создание, как оформить основные разделы сайта, каким образом и где его продвигать. И это далеко не полный список вопросов, на которые наши эксперты готовятся дать ответ.

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

Тема правильного оформления страницы доставки актуальна всегда. Алгоритмы поисковых систем обновляются каждый месяц, и ключевые страницы сайтов (а среди них и «Доставка») обрастают все новыми фишками и функционалом. Можно реализовать сотню лайфхаков в борьбе за место в ТОП 10 выдачи, однако если на сайте будет непрозрачная, неинтересная или неполная информация о доставке, все равно на нем вряд ли сделают покупку. Сегодня важно уже не наличие страницы доставки на сайте, а то, завоюет ли она доверие посетителей.

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

И на этапе покупки выясняется, что о доставке покупатель узнает только при звонке в кол-центр по мобильному номеру. Или, например, типовая страница ‒ это полотно текста на шесть тысяч символов.

Уйдете вы с такого сайта или останетесь?

«А у вас в магазине доставка есть?»

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

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

1. Прозрачная стоимость доставки

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

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

Важно доходчиво разъяснить детали , а не просто указать цену и переложить остальное на сотрудников кол-центра.

«Доставка ‒ 450 рублей в пределах МКАД, но это если сейчас закажете, а если через час, то стоимость будет уже 600, а если вы за МКАДом, то 1200. Как, вам еще нужно привезти в определенное время с подъемом на 7 этаж и за МКАД? Тогда вам надо почитать о специальных тарифах в pdf-файле. Да, скачиваете ‒ и на четвертой странице таблица с тарифами…» (Из разговора с оператором кол-центра интернет-магазина бытовой техники и электроники).

Избегайте монолитных текстов не только в каталоге и карточках товаров, но и на странице доставки. Как лучше не делать:

И так тоже:


Минусы оформления из последнего примера:

  • Страны по зонам (Европейская 7, 8, UK без Шотландии, UK завтра, UK послезавтра), а не тариф для отдельной страны или даже города ‒ все в одном;
  • Слишком много текста (на скриншоте уместилось только 30% информации, размещенной на странице!);
  • Нет данных о формировании стоимости (почему именно 40 фунтов, конечная ли это цена) и точной даты (7-14 дней ‒ довольно сильный разброс).

Если магазин отправляет грузы в разные регионы, необходимо разработать адекватный функционал для клиентов на сайте. Например, на сайте Lamoda это реализовано так: выбираешь город, затем способ доставки (курьер, самовывоз, почта), выбираешь время (сегодня, завтра, послезавтра), смотришь на условия и сумму заказа. Если она выше 2 000 рублей ‒ приятный бонус: доставка бесплатна, если нет ‒ все еще остается выбор из двух вариантов.


Помимо прочего, это преимущество прямо указано в шапке сайта: «Доставка на следующий день в 60 городах России».

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

2. «Бесплатная доставка», «Срочная доставка» ‒ выделить!

Это то, что вызывает доверие и мотивирует смотреть каталог дальше, делает магазин конкурентным на рынке, цепляет пользователя с первых секунд. Не забывайте, что нужно ярко выделять слова БЕСПЛАТНО и СРОЧНО. Пример: сайт Drugstore.com («Бесплатная доставка на заказы от 25 долларов ‒ КАЖДЫЙ ДЕНЬ!»).


Еще один удачный пример реализации страницы доставки ‒ на сайте Eapteka.ru:


  • можно выбрать удобный интервал времени доставки;
  • есть информация о ценах в зависимости от времени и удаленности от МКАД;
  • выделены в отдельный блок преимущества круглосуточной доставки;
  • есть бесплатная доставка при заказе на сумму от 1500 руб.;
  • есть информация о самовывозе.

3. Адреса пунктов самовывоза: главное ничего не забыть

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

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


В случае если филиалов больше 10, лучше оставить на странице доставки только карту (см. п. 4) или хотя бы прикрутить поиск по городу/метро (но ни в коем случае не текст с вертикальной полосой прокрутки!). Это позволит при выборе определенного филиала получить подробную информацию о нем.

4. Карта для наглядности

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


5. Способы оплаты (коротко)

На странице доставки необходимо сослаться на способы оплаты. Можно здесь же перечислить эти способы, если их немного, или дать ссылку на отдельный раздел, если вариантов оплаты много или страница доставки перегружена. Золотая середина ‒ разместить иконки популярных сервисов.


6. Простой калькулятор доставки

Предположим, вы оптимизируете страницу доставки для крупного магазина. У вас уже есть карта филиалов (их больше десяти), вы указали условия по срочной и бесплатной доставке, разместили адреса ‒ однако доставка зависит еще и от веса, объема и других параметров товара. В этом случае не обойтись без детализированного расчета стоимости, который можно включить в калькулятор. Снова пример с сайта Lamoda, где пользователь может:

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


7. Не забудьте удостовериться, что страница существует


Например, на момент написания статьи на сайте «Евросети» выдавалась 404-я ошибка при попытке открыть страницу «Доставка и оплата». Но сейчас проблема решена.

Лайфхаки, связанные с доставкой

1. Увеличиваем средний чек

Как только вы нажмете на кнопку «Добавить в корзину» на сайте BrewDog.com, всплывет интерактивная форма. Она наглядно показывает, что доставка в любом случае обойдется вам в 5 фунтов ‒ так почему бы не купить до 24 товаров с доставкой всего за 5 фунтов?


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


2. Покупатели любят выбирать из нескольких вариантов

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

Вот решение, которое предлагает Amazon, но оно доступно и многим средним сайтам. Во-первых, покупатели сайта Amazon в США могут вступить в Amazon Prime Community ‒ специальный привилегированный клуб ‒ и получать товары бесплатно уже на следующий день после заказа. Во-вторых, им дают возможность самим выбрать удобное соотношения скорости, цены и времени доставки.


3. Сообщите о доставке везде, где это уместно!

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


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

  • Главная страница:


  • Страница доставки:


  • Страница каталога:


  • Страница карточки товара:


Выводы

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

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

Сайт ‒ это только первая остановка на пути пользователя к доверительным отношениям с вашим брендом. Реальное взаимодействие начинается после фразы «Ваш заказ успешно оформлен».

13 мая 2014 в 09:00

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

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

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

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

Хотя авторизация на последнем шаге покупки и не несет никакой ценности для пользователя, это западное клише глубоко укоренилась в Рунете. Со средней частотой покупки (техники) раз в 9-10 месяцев люди зачастую не запоминают регистрационных данных: эл. почты, логина, пароля. Парадокс в том, что большинство интернет-магазинов с готовностью принимают заказы по телефону, но при этом создают искусственные препятствия при совершении покупке онлайн.

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

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

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


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

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

Высокое число брошенных корзин - другая известная проблема любого интернет-магазина. Не был исключением и Сотмаркет . Решение данной проблемы заключалось в изменении сортировки всего лишь трех полей ввода.


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

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

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


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


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

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


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

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

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


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


В случае выбора самовывоза из пункта Пикпоинта, клиент не может выбрать оплату в кредит .


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

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

Трудно переоценить важность удобного выбора способа доставки и самовывоза. Воспользовавшись API Яндекс.Карт мы существенно облегчили ввод адреса доставки и выбора пункта выдачи заказа. Такое решение позволило одновременно решить сразу 2 задачи:
  • с одной стороны упростить клиентам процесс заполнения формы, теперь требуется заполнить лишь одно поле ввода, вместо 3-4;
  • с другой стороны, количество ошибок/опечаток при заполнении формы существенно снизилось за счет подсказок адресов, что сокращает время обработки менеджерами заказов созданных через сайт.
Интерфейсу выбора пунктов выдачи заказов мы уделили отдельное внимание, т.к. в 70-75% заказов превалирует самовывоз, разработав две формы: на карте и списком. В обоих случаях можно выбрать интересующее метро/район/объект в зоне которого находятся ближайшие точки самовывоза. Это существенно упрощает поиск искомого пункта выдачи.