Апгрейдим страницу оформления заказа, чек-лист. Иной взгляд на оформление заказа в интернет-магазине
Постоянно происходят какие-то изменения. Сильная конкуренция не дает стоять на месте тенденциям развития интернет-маркетинга.
Если, например, вчера кнопка «заказать звонок» была неким привлекательным новшеством, то сегодня она есть уже везде и ни одного потребителя ею не удивишь. Именно поэтому владельцы ведущих интернет-магазинов находятся в постоянном поиске новых идей и новых «фишек». Причем зачастую так получается, что далеко ходить не приходится – порой достаточно простого «косметического» редизайна.
Сегодня мы поговорим о, казалось бы, такой простой вещи, как оформление заказа в интернет магазине. На каждом сайте есть такой раздел. Однако далеко не каждый сайт может похвастаться, что работа этой функции у него отлажена идеально и приносит максимум покупателей. Чаще всего случается как-раз-таки наоборот: магазины вообще «не заморачиваются» по этому поводу. Ну, есть форма заказа и есть, что еще надо.
Так вот, это очень большое заблуждение. Чем сложнее и непонятнее как сделать заказ тем больше шансов, что порядка 2/3 посетителей не станут вообще «заморачиваться» с приобретением товара в Вашем интернет магазине.
Основные правила форма оформления заказаНачнем с того, что всегда необходимо указывать, во сколько этапов происходит оформление заказа и сколько времени это все займет. Так, например, фраза «три простых шага и несколько минут Вашего времени» увеличивает шанс того, что покупатель совершит заказ и до конца его оформит.
Когда человек уже нажал « и находится в процессе совершения покупки, он должен понимать, на какой стадии он находится, и сколько этапов ему еще предстоит преодолеть. Лучше всего не использовать спецсимволы, иконки или какие-то картинки для обозначения дальнейших шагов. Клиент может трактовать их неправильно. Надежнее и правильнее писать все словами: «выбор способа доставки» или «подтвердить заказ». Рядом с кнопками, обозначающими действие, не следует размещать ничего лишнего. Пусть она будет одна в свободном пространстве, но видна, доступна и понятна.
С точки зрения человеческой психологии и привычки, кнопки положительного действия («оформить заказ», «подтвердить» и пр.) должны располагаться справа и быть привлекательными и заметными для глаз клиента. Кнопки серии «возврат», «отмена» и др. должны быть слева и не должны выделяться на общем фоне, чтобы не было стимула их нажимать.
Если при заполнении формы Вы просите от клиента какие-то его личные данные, всегда объясняйте, для чего они необходимы: имя и фамилия – для оформления документов на товар, номер телефона – для связи по вопросам доставки, электронный адрес – для подтверждения заказа.
Процесс оформления должен быть последовательным. Нельзя допускать того, чтобы во время какого-то из этапов, покупателю пришлось бы прервать свои действия и отправится, например, регистрироваться. Вряд ли после этого он продолжит свой заказ, останется в Вашем интернет-магазине или придет туда снова. Не должно быть причин по которым покупателю пришлось бы прервать свой процесс заказа.
Перед Вами образец неправильного оформления, где в процессе покупки требуется внезапная регистрация. Но это Ozon.ru- самый крупный гипермаркет России и здесь он диктует свои правила.
Еще одна распространенная ошибка, которая часто встречается на сайтах и с которыми Вы наверняка сталкивались. Итак, Вы заполнили множество различных полей с указанием многих данных о Вас, это заняло некоторое время, нажимаете кнопку «далее» и тут система выдает Вам ошибку, что, например, в каком-то поле Вы не до конца или неправильно что-то написали. И тут Вы видите, что для исправления это ошибки, Вам надо заполнять все формы сначала! Как минимум, это раздражает. Максимум – клиент уходит с Вашего сайта. Не допускайте такого печального недоразумения.
Не забывайте, на всех этапах оформления заказа должна быть видна наиболее важная информация: стоимость и состав заказа, условия доставки и способы оплаты.
И, наконец, самый идеальный вариант – это когда Вы конкретно указываете все сроки доставки, ее конкретную стоимость. Другими словами, фраза «доставка осуществляется в течение 5-15 дней» звучит неопределенно, не вызывая никаких положительных эмоций. Надпись же «товар будет доставлен 1 сентября» порадует покупателя гораздо больше. К примеру, мне очень нравиться в интернет магазинах такой прием, когда поле доставки автоматически определяет по IP адресу мой город и сразу расчитывается стоимость доставки товара и время.
Работа над сайтом интернет-магазина – это долгая и кропотливая работа. Необходимо продумывать каждую деталь и каждую мелочь в этой детали, внедрять новые «фишки», анализировать, изменять и дорабатывать.
В этой статье, расскажу про такую важную штуку для юзабилити интернет-магазина, как взаимозависимость полей на странице оформления заказа в корзине.
На примере объясню что это такое. Предположим ваш интернет-магазин территориально расположен в Питере, там у вас есть пункт самовывоза или офлайновый магазин. По Петербургу вы делаете доставку курьером и даете возможность самовывоза. Но кроме этого вы осуществляете доставку на всю Россию. Как в этом случае реализовать правильное оформление заказа на сайте, чтобы было удобно всем, и тем вашим клиентам, которые находятся с вами в одном городе (могут воспользоваться самовывозом или курьерской доставкой) и другим, которые могут получить свой заказ только через почтовые службы.
Получается что всех клиентов можно условно разделить на две группы — местные (из Спб.) и иногородние (из любого другого города России).
Зная это, давайте определим какой минимальный набор полей в форме оформления заказа будет нужен в вашем магазине для каждой из этих групп.
Как видите, поля оформления заказа отличаются для местных покупателей интернет-магазина и для иногородних.
Это как раз и есть та самая зависимость полей в корзине, о которой я говорил вначале. После того как покупатель указал свой город, с учетом этого города мы даем ему для заполнения только поля, которые в данном случае нужны и даем на выбор только те способы оплаты и доставки, которые можем принять и осуществить.
Проще говоря, магазин не должен показывать покупателю поля, которые не нужно чтобы он заполнял или выбирал. Например, если магазин осуществляет доставку в Москву только через почтовые службы, но не может сделать доставку курьером, то показывать способ доставки «Курьером» для города Москва не нужно. Далее, если при выборе способа доставки «Грузовозофф» вы технически не можете принять оплату «Наложенным платежом», то не нужно показывать этот способ оплаты для способа доставки через «Грузовозофф». Думаю логика тут понятна.
То же самое с «местными». Не гуманно местного покупателя, который хочет сам заехать за заказом (если он выбрал «Самовывоз») заставлять заполнять поля «Адрес» и «Индекс». Далее, когда «Самовывоз» выбран, мы не должны показывать этому покупателю способы оплаты, недоступные при самовывозе. Будет странно если при самовывозе покупатель выберет способ оплаты наличными через Евросеть.
Несмотря на то что на первый взгляд эта взаимосвязь полей может показаться запутанной, на деле все очень просто. Особенно если такая возможность поддерживается в CMS. Так, в любимой мной CMS 1С-Битрикс, подобное оформление заказа в интернет-магазине, настраиваются мышкой за 10-15 минут. Без проблем можно указать для какого города какие поля выводить, какие службы доставки и способы оплаты подключать и т. п. При этом зависимость необязательно должна быть именно от города из которого покупатель. Зависимость может быть от способа доставки. Выбрал «Самовывоз» — не увидишь в способах оплаты лишних полей. При этом со стороны клиента все логично выглядит, нет вопросов «зачем я заполняю адрес» если заберу заказ сам и т. д.
У «связанных полей» применение может быть не только в улучшении юзабилити оформления заказа. Можно для разных городов выводить разные способы доставки. Например, есть удобная служба доставки, которая возит только в 15 городов-миллионников — можно настроить чтобы только для покупателей из этих городов была доступна эта служба.
Казалось бы, сказанное выше — очевидные вещи. Но во многих интернет-магазинах эти очевидные вещи не применяются и как результат, прием и оформление заказа имеет такое количество полей, заполнив которые можно не только заказать красовки, но и получить загранпаспорт:-).
Все, наверное, читали популярные кейсы, в которых в крупных американских магазинах (Амазон, Заппос, Ебей), поменяв местами две формы, увеличили конверсию в десятки раз. Обычно такие примеры приводят в пользу необходимости делать как можно меньше полей при оформлении заказа.
Кейсы красивые и вызывают интерес. Но в них обычно не бывает предыстории. Возьмем пример, где на странице оформления заказа поменяли две формы местами.
Как вы думаете, их ведь не наугад поменяли, а основываясь на каком-то предположении?
Давайте попробуем привести пример подобного предположения. Как думаете (вспомнив сказанное выше про взаимозависимость полей), есть разница, что нужно выводить на странице оформления заказа в первую очередь поле «Индекс» или поле «Город»? На первый взгляд, разницы нет.
Теперь добавим исходных данных из описанного выше примера, когда магазин находится в Питере. Есть самовывоз, делает доставку курьером только по Питеру, а в другие города отгружает заказы через почтовые и транспортные компании (курьерской доставки нет). Теперь есть разница, какое поле будет первым, индекс или город?
Да, теперь есть. Более того, новая информация сильно влияет на весь процесс оформления заказа. Теперь мы должны сделать ряд полей зависимыми. А именно поле «Город» должно быть первым. Пока поле «Город» не заполнен, поля «Индекс», «Адрес», «Способы доставки» и «Способы оплаты» не показываем. Они появятся только после того, как будет выбран любой город кроме «Санкт-Петербург». Потому что в Питере, как мы говорили выше, магазин доставляет только по самовывозу и курьером. А раз так, то ему не нужны от клиента его индекс и адрес (сразу на два поля меньше заполнять) .
Смотрим дальше, что еще у нас улучшилось. Еще мы не показываем все способы доставки и способы оплаты, а показываем только те, которые реально можем принять. Для Питера, как уже говорилось выше в примере, это при получении оплата наличными или по банковской карте. Для иногородних, чьи заказы будут отгружены через транспортную компанию, оплаты «наличными при получении» конечно не будет. Так мы избавили клиента от лишней путаницы с выбором из вариантов, которые ему заведомо недоступны, а менеджера магазина избавили от лишних, с этим связанных вопросов и недовольств покупателей.
Таким образом, просто добавив на страницу оформления заказа взаимосвязь полей, можно для ряда пользователей сократить количество полей, нужных для заполнения, уменьшить негатив связанный с непониманием некоторых пунктов по оплате и доставке и в результате увеличить конверсию корзины. Никто ведь не сомневается что количество продаж связано с юзабилити корзины?
Посмотрите пост про оформление заказа без регистрации в Битрикс. Он отлично дополняет эту статью.
” вызвала интерес со стороны читателей, поэтому решил продолжить подобную серию статей. И сегодня мы углубимся в способы упрощения процедуры оформления заказа в вашем интернет магазине. Применив решения из этой статьи, вы с легкостью сможете оптимизировать свою страницу или страницы оформления заказа.
Само собой, каждый интернет магазин по своему уникален и не существует оптимального для всех случаев варианта. Поэтому я постараюсь привести общие, проверенные мной, рекомендации, а вы уже сами решите что для вас подходит, а что нет.
Перед тем как мы начнем, давайте ответим на вопрос зачем вообще оптимизировать процесс оформления заказа в интернет магазине:
Каким бы хорошим не был ваш сайт, через процедуру оформления заказа проходят все будущие покупатели. И именно поэтому так важно, чтобы этот процесс был прост, быстр и не вызывал негативных эмоций у посетителя. Если вы будете придерживаться определенных правил, то результат не заставит себя ждать.
Типы оформления заказаСуществует три базовых типа оформления заказа, каждый из которых имеет свои плюсы и минусы.
1. В несколько шаговНаиболее распространенный вариант, который по умолчанию встроен в большинство . Функционально прост и тривиален: на странице корзины есть кнопка “Оформить заказ”, при нажатии на которую покупатель начинает оформление заказа за несколько шагов. Для каждого типа запрашиваемой у покупателя информации есть свой шаг.
Каждый шаг собирает определенную информацию с покупателя;
Покупателя просят предоставить информацию порционно и он не пугается от большого количества полей на одной странице;
Лучше всего подходит для тех интернет магазинов, которые запрашивают много информации с покупателя;
Все-таки несколько шагов и нежелание заполнять десятки полей.
Второй по популярности вариант, крайне редко встречается в CMS по умолчанию, хотя легко добавляется с помощью модулей. При нажатии кнопки “Оформить заказ” в корзине, покупателю предлагается заполнить все данные на одной странице вместо нескольких.
Все данные собираются на одной странице;
Оптимальное решение для большинства интернет магазинов;
Если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Поэтому необходимо оптимизировать количество полей (будет рассмотрено ниже).
Вариант, который встречается реже всего. Отдельной страницы для процесса оформления заказа не предусмотрено, все происходит непосредственно на странице корзины.
Все данные собираются на одной странице с ;
Лучше всего работает с минимальным набором полей на странице (см. скриншот выше)
Аналогично если на одной странице запрашивается слишком много данных, это может отпугнуть покупателя. Аналогично необходимо оптимизировать и снизить количество полей для заполнения.
Рассматривая интернет магазин в классическом его понимании, имеет смысл брать в расчет лишь три основных варианта. Предлагаю перейти к выбору наиболее оптимального.
Какой же из трех вариантов выбрать?Сразу скажу, что никаких четких правил и предписаний в плане выбора способа оформления заказа я не видел. Поэтому отталкиваюсь лишь от собственного опыта. С моей точки зрения, наиболее оптимальный вариант: отдельная страница оформления заказа в один шаг . Подобный вариант легко оптимизируется и может быть запросто масштабирован практически под любой проект.
Оптимизация оформления заказа интернет магазинаВ этой главе я подскажу вам наиболее простые и элегантные решения (остальные, более функциональные решения, я внедряю только по своей ). Только не забудьте их внедрить, а не просто прочитать и отложить “на завтра” .
Нам много не надо! Снижаем нагрузку на покупателяПредлагаю начать оптимизацию не с перестановки элементов или добавки функционала, а, наоборот, с сокращения количества запрашиваемых данных. Не следует просить покупателя вводить вообще все данные: имя, фамилию, отчество, телефон, email, страну, регион, город, улицу, дом, корпус, квартиру, индекс и многое другое. Это его отпугнет, поэтому предлагаю упростить задачу.
Давайте подумаем какую информацию на сайте необходимо собирать, а какую вовсе необязательно?
|
Тип данных |
Необходимость запроса на сайте |
| Фамилия и Имя | Необходимо . |
| Отчество | Необязательно , можно уточнить по телефону. Требуется для отправки почтового отправления. |
| Необходимо для отправки данных заказа и добавления в подписчики. | |
| Телефон | Необходимо для контакта с покупателем. |
| Индекс | Необязательно , оператор может уточнить самостоятельно по адресу. |
| Город | Желательно . Для понимания часового пояса покупателя. |
| Адрес | Необходимо . В одно поле. Если есть , автоматически подставляйте адрес самовывоза в это поле при его выборе. |
| Страна | Необязательно. Требуется только при работе на несколько стран. |
| Комментарий к заказу | Необходимо . |
Таким образом необходимо запрашивать следующие данные:
Пример: “Андрей Родионов ”
Пример: ”
Пример: “+7-123-456-78-90 ”
Пример: “Санкт-Петербург, Невский пр, дом 1, кв 1 ”. Предлагать заполнять в одно поле , не следует делать отдельное поле для улицы, отдельное для дома и отдельное для квартиры.
Всего получилось пять полей для заполнения. Запросив эти данные, вы с легкостью сможете:
- Связаться с покупателем;
- Внести его в базу подписчиков;
- Отправить заказ.
Согласитесь, что все стало гораздо проще, хотя информация запрашивается ровно та же. Так как вы в любом случае подтверждаете заказ по телефону, то всю необходимую для вас информацию вы сможете выяснить уже устно.
Теперь, оптимизировав сбор данных покупателя, давайте рассмотрим несколько вариантов оформления заказа на базе рекомендации выше.
Вариант №1. Просто и со вкусом.Данный вариант подходит тем, кто хочет малой кровью оптимизировать оформление заказа и по этой странице. Самое главное, примите рекомендацию по поводу сокращения полей для сбора информации с покупателя и выведите варианты доставки и оплаты.
В результате вы должны получить примерно следующую картину:
Согласитесь, что данная форма заказа проста и незатейлива, но при этом эффективно готова выполнять свою задачу? При необходимости, добавьте рядом со их стоимость.
Теперь предлагаю рассмотреть второй вариант, в который можно вместить куда больше функционала и удобства для покупателя.
Вариант №2. Стильно и функционально.Если в первом варианте у нас вся информация собиралась в одном месте, то во втором варианте мы с вами попробуем разделить сбор данных и сделать его более наглядным.
Шаг 1. И начнем со сбора данных покупателя. Учтем опыт первого варианта и много просить не будем
Шаг 2. Выбор способа доставки .
Если у вас как минимум 2 способа доставки, очень хорошо работает разделение вариантов по вкладкам чтобы покупатель сразу сконцентрировался на нужном ему варианте.
Вот таким образом можно предложить выбрать курьерскую доставку:
Внимательный читатель заметит, что адрес запрашивается дважды, но это специально сделано для наглядности. В конечном варианте этого нет.
А вот так самовывоз:
Доставка Почтой России:
Согласитесь, что вся эта информация, выведенная без вкладок, не читалась бы так легко. А так все выглядит чистенько и аккуратно.
Шаг 3. Выбор способа оплаты.
Здесь тоже постараемся сделать все максимально просто и наглядно.
Теперь посмотрим как все будет выглядеть в сборе.
Уютно выглядит, правда?
Важное уточнение : подобная форма заказа сформировалась не просто так из головы, а на основе собственных исследований юзабилити форм и работы со многими интернет магазинами. И именно подобная форма сейчас внедряется в разрабатываемый мною детский интернет магазин. Как только он будет готов, я с радостью поделюсь с вами ссылкой.
Конечная реализация, конечно же, за вами, но вы с легкостью можете взять за основу предложенный мною вариант. А чтобы понять насколько хорошо работает ваше оформление заказа, следует прибегнуть к аналитике.
Аналитика формы отправки заказаВ этом нам помогут два незаменимых инструмента:
В этой системе мы будем использовать “Визуализацию последовательностей”. Подобное отслеживание будет наиболее эффективно для интернет магазинов с оформлением заказа в несколько шагов. Выглядеть это будет примерно следующим образом (кликните по изображению для увеличения):
На изображении выше показаны несколько шагов оформления заказа от корзины до страницы “Спасибо за покупку”. Как думаете, почему на предпоследнем шаге такое большое количество отказов?
Что вам даст эта статистика:
Как настроить подобный инструмент рассказано .
Яндекс.МетрикаМногие слышали про Вебвизор, но не все слышали про Аналитику Форм. Для того чтобы велось отслеживание этой статистики, у вас должен быть включен ВебВизор и внедрен соответствующий код Яндекс.Метрики на сайт. Взгляните на пример отчета по одному шагу оформления заказа (клик для увеличения):
Что вам даст эта статистика:
На основе этих данных вы с легкостью поймете в какую сторону стоит думать в плане дальнейшей оптимизации страницы оформления заказа.
ЗаключениеСегодняшняя статья раскрыла для вас один из самых простых путей увеличения конверсии вашей страницы оформления заказа. Рассмотрим ваши дальнейшие варианты действий:
И да, первым двум желающим я готов бесплатно провести аудит их оформления заказа. Для этого достаточно дать ссылку на свой интернет магазин в комментарии и ожидать тестового заказа
26.09.2013 Мини аудитыЛюбой аудит должен быть основан в первую очередь на данных систем аналитики и статистики поведения покупателей. Ввиду того, что этих данных у меня нет, сильно сужается область работы.
Wool day.Начну с того, что крайне смущает скорость работы сайта. Проверял с нескольких компьютеров, везде поведение одинаково медленное.
Учетная запись.
Как вы считаете, не слишком ли много на один небольшой участок вариантов оформления заказа?
Не уверен, что предлагаю оптимальное решение для вашей ситуации, но мое ощущение, что на скриншоте ниже все выглядит несколько чище:
Допустим, я хочу совершить заказ без регистрации и нажимаю на соответствующую кнопку. Вносим коррективы:
Следующий шаг.
Способы доставки .
Способы оплаты .
Пользовательское соглашение .
Форма состоит из следующих блоков:
Чтобы посетителю Вашего сайта не пришлось в ручном режиме указывать в форме наименование товара или услуги, которую он желает заказать, данные сюда попадают автоматически при нажатии на кнопку добавления товара в форму. Кнопки инициализации заказа вы можете получить в личном кабинете. В составе заказа может одновременно находится насколько торговых позиций, которые посетитель сайта решит заказать.
Если в настройках товара указана цена - форма автоматически рассчитает стоимость всего заказа. А если в настойках у товара установлен признак "возможно заказать несколько товаров", то в форме будет отображаться и количество, а итоговая стоимость заказа при этом будет рассчитана из этого количества.
На финальном этапе заказа посетитель при оформлении вводит свои данные. Количество полей и их наименования произвольное и настраивается в личном кабинете сервиса EasyNetShop. При этом у каждого из полей можно установить признак "Обязательное" и форма заказа не будет отправлена до того момента, пока обязательное поле не заполнено.
Покупатель может завершить оформление заказа или вернуться на сайт для добавления в форму дополнительных товаров или услуг.
Пример html-кода для добавления корзины
скопируйте в любое место на странице 1 раз
Тестовый код для размещения кнопки КУПИТЬ
разместите рядом с описанием нужного товара
Купить
Готовый персональный код корзины и коды кнопок для добавления в неё товаров в можете получить в личном кабинете:
Преимущество формы заказа EasyNetShopНаша форма заказа выполнена по технологии корзины товаров, прежде чем оформить заказ необходимо его собрать. Такая технология имеет ряд преимуществ над традиционной формой, которая выпадает при нажатии на кнопку рядом с товаром и не формирует заказ:
Ещё несколько позитивных моментов в форме заказа EasyNetShop:
- Постоянно напоминает о незавершенном действии по оформлению заказа.
- Удобно при формировании заказа с мобильных устройств тем, что половина данных (о товаре и количестве) уже автоматически заполнены.
- Позволяет производить расчет не только суммы заказа, но и стоимости доставки, а также скидку.
- Сохраняет данные при повторном возвращении на сайт, если заказ не был завершен.
- Позволяет организовать процесс онлайн-оплаты для сформированного заказа.
Заполненная и отправленная форма заказа остается формальностью и даже если получен обратный ответ о том, что заявка получена. Это не дает 100%ой уверенности покупателю в том, что именно совершена покупка. Не получив ответа и не понимая стоит ли ему его ждать (какое время) - покупатель продолжит поиск товара на других сайтах. Совсем другое дело, если покупатель оформил заказ через корзину товаров и ему пришел тот же самый автоматический ответ о том, что заказ №… оформлен. Это уже не формальность.
Есть определенная ожидаемая модель поведения покупателя на сайте, выработанная типовыми интернет-магазинами и практически любой покупатель будет искать привычную для него кнопку “добавить в корзину”, а затем и саму корзину для завершения заказа. Наличие формы заказа для покупки товара - это уход от типичного поведения покупателя и может вызвать неопределенную реакцию (от сложностей, до ухода с сайта)