Страница оформления заказа. Чек-лист!
Оптимизация страницы оформления заказа
Особых сложностей здесь нет – чем страница заказа понятнее и удобнее, тем больше вероятность того, что пользователь оформит заказ. Понятно, что в некоторых случаях человек проберется и через 10-ти страничный квест ради отправки заказа (например, если у вас наиболее выгодное предложение по цене, либо нужный товар есть только у вас), но и в таком случае может наступить предел терпению.
Если же вы хотите, чтобы оформленный заказ был к тому же и не последним, следует уважать пользователя на каждом шаге взаимодействия с ним – в том числе, и на шаге оформления заказа. Уважение компании к клиенту (пусть даже потенциальному) всегда конвертируется в лояльность клиента к компании.
Переходим к делу и начинаем проверять, все ли необходимое присутствует на странице оформления заказа нашего магазина.
Для примера возьмем вот такую страницу:
1. Аналитика страницы
Этот пункт – не для посетителей вашего сайта. Этот пункт – для вас, для владельцев, и он очень и очень важен (потому и стоит первым в списке). Если вы не анализируете поведение пользователей на странице заказа, значит, вы не сможете понять, есть ли на ней проблемы, какие они, и стало ли лучше после внесенных изменений.
Что можно отслеживать:
- Стандартные поведенческие: процент отказов, время просмотра страницы.
-
Аналитика форм: сколько людей взаимодействовали с формой и сколько в итоге отправили данные. Например, Яндекс.Метрика дает такую картинку (анализируются данные за последние 2 недели):
Здесь хорошо видим, сколько людей даже не стали заполнять форму (137), а сколько попытались, но бросили (91). Наша цель – повышать итоговую конверсию формы (которая внизу справа – отношение числа людей, отправивших данные, к общему числу людей, зашедших на страницу с формой).
- Вебвизор (в Метрике). Собственно, берем те 228 людей, которые не справились с заполнением формы, и отсматриваем 7-15 посещений из них – что вызвало трудности, после какого поля или блока человек сдулсясдался.
Полученные данные фиксируем, выдвигаем гипотезу (что можно исправить), вносим правки – и снова собираем данные. Затем сравниваем новые данные с прежними и делаем вывод – сработала наша гипотеза или нет, и начинаем сначала.
2. На странице заказа есть список товаров и его можно редактировать
Показать список выбранных товаров на странице заказа необходимо, чтобы человек не забывал, ради чего он вынужден напрягаться и заполнять форму заказа.
А если в процессе заказа он решит заказать не 2, а 4 вот этих футболки, то зачем ему препятствовать в этом и вынуждать возвращаться на страницу Корзины – пусть изменит количество сразу на странице Заказа.
Все чаще магазины объединяют страницу Корзины и Заказа в одну.
3. В списке товаров показываются скидки
Люди не любят упускать выгоду – поэтому и на странице заказа продолжайте показывать, что товар приобретается со скидкой (если скидка есть).
4. В списке товаров есть картинки и краткие описания
Обычно в списке товаров при оформлении заказа показывают только название. Вроде как на картинки и описание пользователь уже насмотрелся в карточке товара. Но вспомните, ведь человек еще не оформил заказ, и возможно, он еще сомневается, стоит ли покупать. Поэтому можно кратко напомнить ему, какой хороший товар лежит у него в корзине.
Это справедливо для товаров с высокой и средней ценой. Для недорогих товаров можно не показывать описания. Также и при большом числе товаров в корзине лучше скрыть описания, чтобы сэкономить место на странице.
5. На странице заказа есть поле для промокода
Если вы выдаете промокоды на скидки или бонусы, не забудьте добавить в форму заказа поле, где этот промокод можно ввести. Ибо нет ничего неприятнее, чем получить промокод, радостно побежать делать заказ и не найти, как же использовать этот промокод.
Чтобы поле не слишком сильно отвлекало тех, кому промокода не досталось, можно сделать его разворачивающимся по клику.
6. Оформление заказа происходит в 1 шаг
Если посетитель сразу видит, какую информацию ему надо заполнить для заказа – то он может визуально оценить, сколько времени потребуется на это. Если же заполнение заказа разбито на шаги, то такую оценку сделать невозможно, и подсознательно ожидается, что на каждом шаге придется потратить столько же времени, сколько и на первом.
Чтобы сделать форму визуально простой, можно скрывать часть ненужной в данный момент информации. Например, дополнительные поля для доставки показываем только для выбранного способа, а не для всех сразу:
7. Разумное число полей в форме
Просите от пользователя только ту информацию, которая вам действительно необходима от него сейчас. В большинстве случаев – это номер телефона и адрес доставки.
Можно оставить необязательными:
- Поле для имени: к нему привыкли и знают, что менеджер будет обращаться по этому имени
- Поле для комментария к заказу
- Поле для email: да, необязательное. Что вам важнее – чтобы юзер зарегистрировал аккаунт, но ничего не оплатил (т.к. пока регистрировал аккаунт, передумал платить), или чтобы оплатил, хоть и без регистрации аккаунта?
И даже если пользователь не указал адрес доставки (а выбрал, например, доставку курьером) – можно принять такой заказ. Ведь номер телефона у вас есть, так что ничто не мешает позвонить и уточнить адрес.
8. Можно оформить заказ в 1 клик
Для тех пользователей, которые в принципе не любят клавиатуру и разбираться в способах доставки, а любят поговорить.
Человек жмет «Купить в 1 клик» и отправляет номер своего телефона. Менеджер получает состав заказа, связывается с клиентом и заполняет остальные параметры заказа за него.
9. Для способов оплаты есть иконки и указана комиссия (если есть)
Если способов оплаты больше 3, то с иконками ориентироваться в них проще – достаточно беглого взгляда, чтобы заметить нужный способ оплаты (например, оплату через Сбербанк.Онлайн).
Если при каком-то способе оплаты берется комиссия – обязательно напишите об этом. Лучше человек сразу выберет другой способ, чем натолкнется на неприятный «сюрприз» в процессе оплаты.
10. Для способов доставки указана стоимость
Фиксированная или в формате «от …» – но стоимость доставки должна быть указана, чтобы человек мог сориентироваться, что его ждет при выборе того или иного способа доставки. Когда выбирает конкретный способ и указывает район/город, то стоимость доставки должна посчитаться точно.
11. Указаны условия для бесплатной доставки
Если доставка у вас бесплатна при заказе от какой-то суммы, укажите это – вполне вероятно, что человек дозакажет еще товар, если ему чуть-чуть не хватает до бесплатной доставки.
12. Для доставки курьером можно выбрать удобное время
Для курьерской доставки это самый важный вопрос – придется ли мне сидеть дома весь день и ждать курьера? Если я смогу выбрать какой-то один промежуток времени (например, с 9 до 14 часов), мне будет удобнее спланировать свой день.
Если человек выбрал время, на которое все доставки уже расписаны – не страшно, достаточно связаться с ним по телефону и договориться на другое время. Если сделать это вежливо, негатива не будет.
13. Для самовывоза адреса точек можно посмотреть на карте
Обязательно укажите адреса точек для самовывоза (и их режим работы). Покажите эти точки на карте Яндекса или Гугла – так пользователь быстрее найдет наиболее удобную для себя точку.
14. В списках оплаты и доставки по умолчанию выбраны популярные варианты
Чтобы при попытке отправить заказ не вызывать ошибок «Не выбран способ оплаты» или «Не выбран способ доставки», отметьте в них значения по умолчанию. Для этого посмотрите по статистике своих заказов, какие способы люди выбирают чаще всего. Например, можно выбрать «Наличные» для способов оплаты и «Доставка по городу» для способов доставки.
15. Одни данные – в одно поле
Вместо полей «Улица», «Дом», «Подъезд» поставьте одно поле «Адрес доставки» – когда человек действительно хочет получить свой заказ, он способен указать там свой адрес в полном и понятном виде. Выбор города или района выносят в отдельное поле, как правило, только для того, чтобы автоматически рассчитывать стоимость доставки.
То же касается и полей для ФИО. Вместо трех полей «Фамилия», «Имя», «Отчество» вполне достаточно одного поля «Имя и фамилия» или просто «Ваше имя».
И никогда, слышите, никогда не просите указать почтовый индекс – сейчас его помнят единицы. Если вам нужно отправить заказ по почте, вы всегда можете найти индекс по указанному клиентом адресу.
16. Используются «помощники» для заполнения полей
Например, маска ввода для номера телефона:
Выпадающий календарь (datepicker) для даты:
Поле поиска для больших выпадающих списков:
Все эти инструменты помогают быстрее заполнить необходимые поля.
17. Есть пояснения к полям
Краткие пояснения полезны там, где у посетителя может возникнуть вопрос «А зачем им нужны эти данные?».
Например, пояснение к полю с телефоном – «Для подтверждения заказа», во-первых, снимает возражение «Зачем им понадобился мой телефон», во-вторых, стимулирует указать правильный номер.
Пояснение к email – «На него продублируем заказ и пришлем чек об оплате» – дает пользователю возможность самому решить, оставлять email или нет. Как правило, если человеку напомнить, что на email он получит полезную информацию (ведь там будет номер заказа и контакты магазина), а не спам, то процент заполнения такого поля возрастает. И нет негатива из-за принуждения оставлять свой email.
К предложению создать Личный кабинет подойдут пояснения: «Чтобы хранить историю заказов», «Чтобы получать скидки за сумму заказов», «Чтобы копить бонусные баллы».
Думаю, принцип вы поняли – укажите выгоду, которую получит клиент, и поле будет заполнено.
18. Сообщения об ошибках в форме видны и понятны
Говорим дружное «Нет» перечислению ошибок в самом начале формы – и потом ищи их по всем полям. Форма вообще должна проверяться без перезагрузки страницы. Не заполнил телефон и нажал кнопку «Оформить заказ»? Обводим поле «Телефон» красным, пишем, что надо его заполнить, и прокручиваем страницу именно к этому полю. Поле с ошибкой должно находиться прямо перед глазами пользователя.
19. Разумная проверка вводимых данных
Иногда номер телефона хотят записать так:
8(945)123-45-67 доб.444,
или даже вот так:
777-44-22 звонить после 15:00
Если у вас в форме есть строгая проверка на номер телефона и там разрешены только цифры, скобки и дефисы, то обе этих записи не пройдут. А ведь это два реальных клиента, просто первому надо звонить через добавочный код, а второму только после трех часов (и если, допустим, в адресе доставки он указал СПб, то и отсутствие кода города в этом номере нам не помеха).
Поэтому не стоит ставить строгих ограничений на те данные, которые строгости не требуют.
Другой пример – про email. Если мы хотим регистрировать личный кабинет на адрес почты, то его надо проверить. И если введенный адрес не подходит под формат email – следует указать на ошибку, иначе пользователь не сможет получить пароль от аккаунта и посмотреть историю заказов. То есть в этом случае мы уберегаем пользователя от ошибки – а это уже не придирка, а проявление заботы.
20. Важные поля в начале, остальные – в конце формы
Мы уже договорились, что полей в форме будет немного. Но и их мы можем разделить по приоритетам. На первое место ставим выбор способов оплаты и доставки. Затем контакты и комментарий к заказу, и только потом показываем прочие поля. Таким образом, даже если ближе к концу формы пользователь уже «подустанет», он сможет пропустить последние необязательные поля и оформить заказ.
Сюда же, в конец формы (или на границу внимания, но не в центр) ставим предложения по созданию личного кабинета, по подписке и пр. – это второстепенные действия, тогда как главная цель – оформить текущий заказ.
Вот так пойдет взгляд пользователя:
Если человек не оставил свою почту, а вы так хотели слать ему рассылки – просто вложите в оплаченный им заказ промокод для получения скидки на последующие заказы. Конечно, у этого промокода будет одно условие – получить скидку можно только после регистрации личного кабинета. Вот и все, email у вас в кармане. Ведь оставить почту тому магазину, с которым уже было успешное взаимодействие, гораздо проще, чем при самом первом заказе.
21. Для подписки указана частота писем
В принципе, все мы любим распродажи и скидки. И получать информацию о них действительно удобно (для товаров с частым потреблением – одежда, бытовая химия, корма для животных, какие-то расходники и т.д. – то есть то, что покупаем постоянно). Вот только не хочется, чтобы почту заваливало спамом. Поэтому стоит указать, насколько часто вы будете присылать письма (только честно, плз) и напомнить о том, что можно всегда отписаться от рассылки (аналог фразы «вы ничем не рискуете»).
22. Можно оформить заказ без регистрации
Интернет-магазинов много, и ни за что не упомнить всех логинов/паролей для них. Поэтому первое, что ищут глаза на форме заказа – это волшебную кнопку «Оформить заказ без регистрации».
Когда человек делает свой первый заказ, то личный кабинет ему не нужен, ведь он еще не знает, можно ли вам доверять. После успешного первого опыта доверия будет больше, поэтому при втором заказе клиент может уже совершенно добровольно зарегистрироваться.
И даже если все свои заказы пользователь будет делать у вас без личного кабинета, это не столь важно. Главное, чтобы он делал их именно у вас.
23. Можно авторизоваться здесь же без перехода на другую страницу
Это относится к тем пользователям, которые уже ранее создали личный кабинет.
Когда я делаю очередной заказ на Озоне, мне приходится в середине процесса оформления заказа уходить по ссылке «Личный кабинет», указывать там свои логин/пароль и потом снова открывать корзину. И если появится интернет-магазин, во всем аналогичный Озону, но в котором я смогу войти в свой личный кабинет прямо на странице заказа, не покидая ее – Озон будет забыт из-за такой, казалось бы, мелочи.
24. Для авторизованного пользователя данные заполняются автоматически
Если пользователь зашел в свой личный кабинет, то давайте поможем ему в оформлении заказа:
- Отметим те способы оплаты и доставки, которые он использовал при последнем заказе – скорее всего, и сейчас он использует их же.
- Заполним имя, телефон и адрес доставки так же из предыдущего заказа. Если что-то поменялось, пользователь просто заменит данные.
- Скроем совсем блок про личный кабинет и подписки – авторизованному пользователю он не нужен.
В идеале, авторизованный пользователь должен лишь окинуть взглядом форму и нажать «Оформить заказ».
25. Есть поле «Комментарий к заказу»
Не надо делать его большим, обычно туда пишется одно-два предложения, что-то вроде «Большая просьба позвонить за час до доставки», «Мне нужен такой же, но с перламутровыми пуговицами» и т.п.
26. Выводится итоговая сумма заказа
Обязательно покажите стоимость выбранных товаров, стоимость доставки и итоговую сумму, чтобы покупателю не пришлось складывать самостоятельно.
27. Под кнопкой есть краткое пояснение последующих событий
Это снимает вопрос «А что будет после того, как я нажму на эту кнопку?». Спрашивали – отвечаем:
28. После оформления заказа выдается информативное сообщение
Сообщаем пользователю, что его заказ принят (не забываем поблагодарить). Обязательно указываем время следующего контакта и номер заказа. Полезно продублировать информацию о заказе (сумма, выбранные способы оплаты и доставки, адреса), некоторые люди хотят убедиться, что все указали правильно.
29. После оформления заказа уходит письмо на email
Если пользователь оставил свой email – отправьте письмо с подтверждением заказа. Информация та же, что и в предыдущем пункте, плюс добавляем состав заказа. И обязательно указываем контактные данные магазина (телефон менеджера), чтобы пользователь смог оперативно связаться с вами, если возникнут вопросы.
30. Есть сообщение для пустой корзины
Если товаров в корзине еще нет, а пользователь перешел на страницу оформления заказа – по ошибке или из истории браузера – не будем пугать его пустой страницей. Покажем, что да, это корзина, и да, она пуста. А вот и разделы товаров – выбирайте, что душа пожелает:
Итог
Помните про основные правила для страницы заказа в интернет-магазине:
- Простота и в то же время полнота информации (все кратко и по делу, ничего лишнего)
- Минимум полей для ввода
- Мягкие ограничения (не загоняйте пользователей в угол строгими требованиями)
- Взаимодействие с пользователем (расчет стоимости доставки, выбор ближайшего пункта самовывоза и т.п.)
- Аналитика данных (а куда без нее)
Считаете, что оформление заказа в вашем магазине проходит идеально? Предложите оформить заказ человеку, который с компьютером на «вы» (у кого-то это мама, старшая сестра или пожилая соседка) – и вы увидите, как люди «спотыкаются» о моменты, которые вам кажутся очевидными.
Кстати, наши юзабилити-спецы умеют смотреть на сайты «чужими» глазами. Так что если нужна помощь в аналитике страницы заказа или магазина в целом – вам сюда. Внедрить что-то приглянувшееся из чек-листа мы тоже можем (или исправить обнаруженные ошибки), за консультацией сюда.