Оформление заказа не займет много. Пользовательский опыт интернет-магазинов: эффективное оформление заказов от ASOS

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

Согласно исследованию Baymard Institute «Cart Abandonment Rate Statistics» более 68% процентов заказов, которые попадают в корзину, не завершаются покупкой и оплатой.

Почему пользователь отказывается от намеченной покупки?

Чек-лист: как сделать, чтобы купить в интернет-магазине было удобно

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

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

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

1.2. При наведении и нажатии на кнопку «В корзину» она должна подсвечиваться или изменять цвет

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

При наведении на кнопку «Купить» в «Розетке» кнопка становится ярче:

Изменение внешнего вида кнопки в «Алло» после нажатия:

1.3. Укажите, какой порядок возврата и обмена товара

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

Информация о доставке на страницах «Алло»:

На сайте «Фотомаг» детальная информация открывается по клику на ссылке «Подробнее»:

2. Внутри корзины

2.1. В корзине давайте подробную информацию о заказанных товарах

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

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

2.2. Кнопка для перехода к следующему шагу оформления должна визуально выделяться

Кнопка «Продолжить оформление заказа» на сайте «Лебутик» продублирована и выделена цветом среди других элементов:

Кнопку «Оформить заказ» на сайте «Дешевше» тоже трудно не заметить:

2.3. Корзина должна «запоминать» заказ

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

2.4. Добавьте кнопку удаления товара из корзины

Например, возможность удаления товара из корзины на сайте магазина «Мобиллак» представлена в виде небольшой ссылки:

2.5. Промокоды и скидки

Разместите поля для ввода скидочных купонов и промокодов на странице корзины.

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

Поле для промокода в «Алло» по умолчанию скрыто:

И открывается только по нажатию:

А вот на сайте «Фокстрот» поле для промокода по умолчанию видно. Кроме того, на странице корзины предлагается проверить баланс бонусного счета, перейдя на другой сайт:

Пусть название поля для ввода будет интуитивно понятным. Размытое «Ваучер» лучше заменить на «У вас есть промокод?».

3. Регистрация

3.1. Дайте пользователю возможность купить без регистрации

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

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

«Лебутик» предлагает альтернативу регистрации - вход при помощи аккаунта социальной сети:

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

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

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

3.2. Фоновая регистрация

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

Вот как это реализовано в «Розетке»:

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

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

3.4. Предложите использовать в качестве логина адрес электронной почты или телефон

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

Предоставляйте возможность восстановления пароля на странице авторизации.

«Розетка» узнает пользователя по электронной почте и помогает вспомнить пароль «не отходя от кассы»:

3.5. Сохраняйте в поле логина заполненную информацию

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

3.6. Не подписывайте зарегистрировавшихся на рассылку автоматически

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

3.7. Минимизируйте количество полей ввода

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

На сайте «Лебутик» выпадающий список помогает выбрать код оператора мобильной связи из списка.

3.8. Проверка корректности вводимых данных должна осуществляться во время заполнения формы, а не после отправки

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

Проверка на странице сайта «Дешевше» происходит после отправки формы, в которой после обновления не сохраняются введенные данные:

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

Сообщение об ошибке ввода на сайте «Алло» предельно подробно описывает, как исправить конфуз:

«Лебутик» подсказывает пользователю, как ввести корректный адрес почты:

4. Доставка

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

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

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

Ввод или выбор адреса на сайте «Фотомаг»:

4.3. Указывайте стоимость доставки во время выбора способа доставки

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

Удобное отображение стоимости в зависимости от способа доставки на сайте «Дешевше»:

Стоимость доставки видна при ее выборе из списка на сайте «Алло»:

На сайте «Фотомаг» мы не видим конечной суммы, но узнаем, когда сможем уточнить итоговую стоимость:

5. Оплата и реквизиты

5.1. Указывайте способы оплаты в порядке убывания популярности

«Алло» предлагает выбрать способ оплаты:

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

5.2. Разбейте способы оплаты на группы по смыслу:

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

Выбор способа оплаты в «Розетке»:

5.3. Укажите комиссию каждого способа оплаты

При выборе способа оплаты итоговая сумма на странице сайте «Дешевше» меняется:

«Мобиллак» мотивирует клиентов рассчитываться картой:

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

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

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

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

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

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

5.7. Собирайте платежные данные на сайте магазина

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

Если нет возможности заполнить данные в форме на сайте, позаботьтесь, чтобы на странице оплаты сохранялся стиль сайта.

Оставьте на платежной странице возможность перейти назад на сайт магазина без оплаты. Здесь же указывайте информацию о заказе (сумма заказа и содержимое корзины).

5.8. Предоставляйте информацию о безопасности платежа на странице оплаты

• безопасное соединение https,
• логотипы платежных систем и сертификаты безопасности.
• если не требуется подтверждение платежа СМС, сообщите пользователю, что платеж осуществлен без технологии 3DSecure.

5.9. Если платеж не удалось обработать, должно появляться сообщение об ошибке

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

Сообщение о том, что оплату произвести не удалось, на странице «Алло»:

Предложите альтернативные варианты оплатить покупку.

5.10. Общайтесь с клиентом на понятном языке

Замените технические и редко используемые термины более привычными.

• «Аутентифкация» - «Введите код из СМС»,
• «Динамический пароль» - «Код из СМС».

5.11. Код подтверждения должен располагаться в начале СМС, чтобы его можно было прочитать, не открывая сообщение

6. Подтверждение заказа

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

• Наименование товара,
• Количество,
• Цену,
• Стоимость доставки,
• Способ доставки,
• Комиссию платежной системы,
• Контактные данные получателя.

Дайте возможность пользователю редактировать информацию на странице подтверждения.

Подтверждение заказа при оформлении на сайте «Мобиллак»:

7. «Спасибо за покупку»

Располагайте на странице «Спасибо за покупку» информацию о заказе.

Сообщение на финальной странице покупки в магазине «Дешевше» весьма лаконично:

«Фотомаг» указывает еще и номер заказа:

«Алло» дает подробную информацию:

Продублируйте полную информацию о заказе на электронный ящик клиента.

Поместите на страницу подтверждения заказа возможность распечатать данные.

Если продукт электронный, расскажите, как его можно скачать.

Повторим пройденное

Корзина:

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

Авторизация:

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

Оплата:

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

Доставка:

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

Страница «Спасибо за покупку»:

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

Post Scriptum

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

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

Кстати, специалисты Авеб написали книгу о юзабилити интернет-магазинов. Просто инструкция по применению - только конкретные рекомендации и примеры. Вы ее уже читали? Если нет, то обязательно скачайте и прочитайте.

Какие усовершенствования корзины значительно увеличивали конверсию на вашем сайте? Чему советуете уделить внимание?

09 Апр

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А также

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

Вывод

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

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

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

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

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

1. Простота — залог эффективности.

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

2. Используйте наглядные примеры.

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

3. Всего показывайте ход оформления заказа вашему клиенту.

Клиент должен всегда видеть сколько этапов он прошел и сколько ещё предстоит пройти. имеет особое значение с точки зрения психологии. Классическая схема оформления заказа проходит в 3-4 этапа. Первый этап — пользователь составляет список заказа. Второй этап — покупатель вносит свои контактные данные. Третий этап — проверка информации. Четвертый этап — сделка.

4. Развейте все сомнения клиентов.

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

5. Нет! регистрациям.

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

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

Цель урока

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

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

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

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

Вопросы

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

Задачи

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

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

Шаблон

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

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

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

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

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

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

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

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

В любом случае для подтверждения заказа у пользователя необходимо запрашивать 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» не создают никаких препятствий и направляют всех пользователей сразу на страницу оформления заказа без обязательной регистрации. Какая тактика лучше? Как по мне, вторая…

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