Новые тарифы по подготовке сайта к Новому Году. Подробнее »

закрыть×

14.09.2017

3.8K

Апгрейдим страницу оформления заказа, чек-лист

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

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

Оптимизация страницы оформления заказа 

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

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

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

Для примера возьмем вот такую страницу:

Страница оформления заказа в интернет-магазине

1. Аналитика страницы

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

Что можно отслеживать:

Полученные данные фиксируем, выдвигаем гипотезу (что можно исправить), вносим правки – и снова собираем данные. Затем сравниваем новые данные с прежними и делаем вывод – сработала наша гипотеза или нет, и начинаем сначала.

2. На странице заказа есть список товаров и его можно редактировать

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

А если в процессе заказа он решит заказать не 2, а 4 вот этих футболки, то зачем ему препятствовать в этом и вынуждать возвращаться на страницу Корзины – пусть изменит количество сразу на странице Заказа.

Список товаров в заказе

Все чаще магазины объединяют страницу Корзины и Заказа в одну.

3. В списке товаров показываются скидки

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

Скидка в списке товаров

4. В списке товаров есть картинки и краткие описания

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

Описания в списке товаров

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

5. На странице заказа есть поле для промокода

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

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

Поле для промокода при оформлении заказа

6. Оформление заказа происходит в 1 шаг

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

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

Способы доставки
Выбран другой способ доставки

7. Разумное число полей в форме

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

Минимум полей в форме заказа

Можно оставить необязательными:

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

8. Можно оформить заказ в 1 клик

Для тех пользователей, которые в принципе не любят клавиатуру и разбираться в способах доставки, а любят поговорить.

Человек жмет «Купить в 1 клик» и отправляет номер своего телефона. Менеджер получает состав заказа, связывается с клиентом и заполняет остальные параметры заказа за него.

Заказ в 1 клик

9. Для способов оплаты есть иконки и указана комиссия (если есть)

Если способов оплаты больше 3, то с иконками ориентироваться в них проще – достаточно беглого взгляда, чтобы заметить нужный способ оплаты (например, оплату через Сбербанк.Онлайн).

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

Способы оплаты с иконками

10. Для способов доставки указана стоимость

Фиксированная или в формате «от …» – но стоимость доставки должна быть указана, чтобы человек мог сориентироваться, что его ждет при выборе того или иного способа доставки. Когда выбирает конкретный способ и указывает район/город, то стоимость доставки должна посчитаться точно.

Стоимость доставки

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

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

Условие бесплатной доставки

12. Для доставки курьером можно выбрать удобное время

Для курьерской доставки это самый важный вопрос – придется ли мне сидеть дома весь день и ждать курьера? Если я смогу выбрать какой-то один промежуток времени (например, с 9 до 14 часов), мне будет удобнее спланировать свой день.

Выбор удобного времени для доставки

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

13. Для самовывоза адреса точек можно посмотреть на карте

Обязательно укажите адреса точек для самовывоза (и их режим работы). Покажите эти точки на карте Яндекса или Гугла – так пользователь быстрее найдет наиболее удобную для себя точку.

Адреса точек самовывоза на карте

14. В списках оплаты и доставки по умолчанию выбраны популярные варианты

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

Способы оплаты и доставки выбраны по умолчанию

15. Одни данные – в одно поле

Вместо полей «Улица», «Дом», «Подъезд» поставьте одно поле «Адрес доставки» – когда человек действительно хочет получить свой заказ, он способен указать там свой адрес в полном и понятном виде. Выбор города или района выносят в отдельное поле, как правило, только для того, чтобы автоматически рассчитывать стоимость доставки.

То же касается и полей для ФИО. Вместо трех полей «Фамилия», «Имя», «Отчество» вполне достаточно одного поля «Имя и фамилия» или просто «Ваше имя».

Поля для адреса доставки и имени

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

16. Используются «помощники» для заполнения полей

Например, маска ввода для номера телефона:

Маска ввода для телефона

Выпадающий календарь (datepicker) для даты:

Datepicker для выбора даты

Поле поиска для больших выпадающих списков:

Поиск для длинных списков

Все эти инструменты помогают быстрее заполнить необходимые поля.

17. Есть пояснения к полям

Краткие пояснения полезны там, где у посетителя может возникнуть вопрос «А зачем им нужны эти данные?».

Например, пояснение к полю с телефоном – «Для подтверждения заказа», во-первых, снимает возражение «Зачем им понадобился мой телефон», во-вторых, стимулирует указать правильный номер.

Пояснение к полю с телефоном

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

Подсказка к полю email

К предложению создать Личный кабинет подойдут пояснения: «Чтобы хранить историю заказов», «Чтобы получать скидки за сумму заказов», «Чтобы копить бонусные баллы».

Коммент к полю с личным кабинетом

Думаю, принцип вы поняли – укажите выгоду, которую получит клиент, и поле будет заполнено.

18. Сообщения об ошибках в форме видны и понятны

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

Сообщение о незаполненном поле

19. Разумная проверка вводимых данных

Иногда номер телефона хотят записать так:
8(945)123-45-67 доб.444,
или даже вот так:
777-44-22 звонить после 15:00

Если у вас в форме есть строгая проверка на номер телефона и там разрешены только цифры, скобки и дефисы, то обе этих записи не пройдут. А ведь это два реальных клиента, просто первому надо звонить через добавочный код, а второму только после трех часов (и если, допустим, в адресе доставки он указал СПб, то и отсутствие кода города в этом номере нам не помеха).

Поэтому не стоит ставить строгих ограничений на те данные, которые строгости не требуют.

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

Сообщение о неверном email

20. Важные поля в начале, остальные – в конце формы

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

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

Вот так пойдет взгляд пользователя:

Так будет идти взгляд пользователя

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

21. Для подписки указана частота писем

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

Галочка подписки

22. Можно оформить заказ без регистрации

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

Оформление заказа без регистрации личного кабинета

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

И даже если все свои заказы пользователь будет делать у вас без личного кабинета, это не столь важно. Главное, чтобы он делал их именно у вас.

23. Можно авторизоваться здесь же без перехода на другую страницу

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

Когда я делаю очередной заказ на Озоне, мне приходится в середине процесса оформления заказа уходить по ссылке «Личный кабинет», указывать там свои логин/пароль и потом снова открывать корзину. И если появится интернет-магазин, во всем аналогичный Озону, но в котором я смогу войти в свой личный кабинет прямо на странице заказа, не покидая ее – Озон будет забыт из-за такой, казалось бы, мелочи.

Авторизация на странице заказа

24. Для авторизованного пользователя данные заполняются автоматически

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

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

Форма заказа для авторизованного юзера

25. Есть поле «Комментарий к заказу»

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

Поле Комментарий к заказу

26. Выводится итоговая сумма заказа

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

Стоимость заказа

27. Под кнопкой есть краткое пояснение последующих событий

Это снимает вопрос «А что будет после того, как я нажму на эту кнопку?». Спрашивали – отвечаем:

Пояснения под кнопками

28. После оформления заказа выдается информативное сообщение

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

Сообщение после отправки заказа

29. После оформления заказа уходит письмо на email

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

Письмо о новом заказе

30. Есть сообщение для пустой корзины

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

Страница заказа для пустой корзины

Итог

Помните про основные правила для страницы заказа в интернет-магазине:

Считаете, что оформление заказа в вашем магазине проходит идеально? Предложите оформить заказ человеку, который с компьютером на «вы» (у кого-то это мама, старшая сестра или пожилая соседка) – и вы увидите, как люди «спотыкаются» о моменты, которые вам кажутся очевидными.

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

конверсия, ошибки юзабилити, фишки для сайта, юзабилити-аудит, интернет-магазины

Автор Дарья Севостьянова
Руководитель отдела Разработки

 

Дайджест новых статей
по интернет-маркетингу
раз в неделю на ваш email

Правила комментирования блога