Урок 62. Шаблон страницы оформления заказа

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

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

Задачи

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

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

Шаблон

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

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

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

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

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

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

<?$PAGE_ID$ = 'checkout'?><div><img src="/img/logo_simple.png"/><big>Название сайта</big></div><?else?>$GLOBAL_AHEADER$<?endif?>

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

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

<?$PAGE_ID$ = 'checkout'?><div>$POWERED_BY$ Название сайта, год</div><?else?>$GLOBAL_AHEADER$<?endif?>

<?$PAGE_ID$ = 'checkout'?><div>...Помощь по оформлению заказа...</div><?else?>$GLOBAL_CLEFTER$<?endif?>

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

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

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

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$.

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

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

<h3> Способ оплаты </h3>
$PAYMENT_SELECTOR$

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

<h3> Выберите способ оплаты </h3>
$PAYMENT_SELECTOR$

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

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

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

<?if $PAGE_ID$ = 'checkout'?>Оформление заказа в 4 шага занимает не более 3ех минут <?endif?>

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

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

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

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