UX страницы оформления заказа: как наладить эффективное взаимодействие с пользователем

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

Подробнее ознакомиться с понятиями удобства пользовательских страниц, важностью юзабилити и как они отражаются на эффективности сайта можно в нашей ранней статье «UI/UX-дизайн».

Самое главное: конверсии и UX страницы оформления заказа неразрывно связаны между собой. Улучшение UX процесса оформления заказа окажет положительное влияние на конверсию. Слишком сложный процесс оформления заказа повлечет за собой 17% отказов от завершения сделки. Вы должны стремиться к тому, чтобы ваши потенциальные клиенты чувствовали себя максимально комфортно в процессе оформления покупки. Для достижения этой цели предлагаю вам рассмотреть различные элементы страницы оформления заказа, которые непосредственно влияют на взаимодействие с пользователем.

Дизайн, верстка и типографика

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

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

В качестве примера рассмотрим страницу оформления заказа интернет-магазина My-shop.ru. Мы видим, что дизайн страницы четкий и достаточно простой, что позволяет пользователю легко получить представление о процессе оформления заказа.

Прогресс-бар

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

Если на странице оформления заказа вашего сайта нет прогресс-бара, важно сверстать её таким образом, чтобы она была максимально понятна покупателям. Кстати, My-shop.ru использует именно такой подход: шаги пронумерованы, форма оформления заказа лаконична и не содержит лишней информации (см. пример выше).

Общий вид корзины покупок

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

• Изображение товара. Фотографии помогают покупателю вспомнить, какие товары он добавил в корзину. Шоппинг требует времени, и наличие изображений – это просто дружеское напоминание.
• Цены. Четко указывайте цену за единицу товара, общую сумму за товар, любые скидки, если таковые присутствуют, и общую стоимость покупки, подлежащую оплате.
• Стоимость доставки. Во избежание неожиданностей, четко указывайте варианты доставки и её стоимость. С этого момента, у покупателя не должно быть никаких дополнительных затрат в процессе оформления заказа, так как это совершенно точно испортит UX любой страницы! Более того, 16% отказов от покупки происходит из-за того, что люди заранее не могут увидеть общую стоимость заказа.
• Безопасность покупки. Всегда уведомляйте покупателя о том, что процесс оформления заказа происходит в безопасной и надежной среде, например, с использованием сертификата SSL и знаков доверия Symantec. Отзывы также помогают подтвердить безопасность системы.

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

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

Подарочные карты / купоны / промокоды

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

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

Amazon, к примеру, размещает строку для ввода кода купона на этапе выбора способа оплаты.

Покупка без регистрации

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

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

Адрес получателя / плательщика

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

Многие компании запрашивают эту информацию в качестве первого шага в процессе оформления заказа (сразу после появления опций «создать учетную запись» или «продолжить покупки без регистрации»).

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

Вам необходимо запросить у покупателя:

• название компании (если вы работаете с юридическими лицами)
• ФИО покупателя
• адрес получателя / плательщика
• электронная почта
• контактный номер телефона

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

Выбор способа оплаты и совершение платежа

В данном разделе должны быть четко перечислены все доступные способы оплаты. И, как упоминалось ранее: здесь не должно быть неожиданных расходов для покупателя (дополнительная стоимость доставки или иные налоги и сборы). В этом блоке, дополнительно, можно рассмотреть возможность размещения строки для ввода промокода.

На этом этапе посетители завершают свою покупку. Здесь они выбирают предпочитаемый способ оплаты и оплачивают товар(-ы). Отличной идеей будет добавить «Обзор заказа» после шага «Способы оплаты» и разместить здесь кнопку «Оформить заказ». Это предоставляет клиентам возможность еще раз проверить свой заказ перед оплатой покупки.

После продажи

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

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

Однако на этом этапе можно сделать гораздо больше:

• Создание учётной записи. Если на вашем сайте есть такая опция, вы можете предложить клиенту возможность пройти регистрацию для будущих покупок. Расскажите ему, почему это выгодно.
• Подписка на рассылку. Попросите клиента подписаться на вашу информационную рассылку, чтобы быть в курсе предстоящих рекламных акций и новых продуктов. Если покупатель заинтересован в товарах, которые вы предлагаете, он, несомненно, подпишется (узнать больше о способах повышения отдачи от маркетинговой email стратегии и ее влиянии на комплексное продвижение сайта можно из нашего руководства «12 действенных шагов для стимулирования роста информационных рассылок с помощью SEO-контента»).
• Скидка на следующую покупку. Все любят скидки, и это факт. Здесь есть несколько вариантов: предлагайте скидку при каждой покупке («-5% на следующую покупку») или комбинируйте скидку с опцией рассылки новостей («Промокод на скидку 200 рублей за подписку на рассылку»). Отправляйте своим клиентам напоминание за несколько дней до истечения срока действия промокода: скорее всего, они зайдут за покупками просто потому, что не захотят потерять возможность сэкономить.
• Отзывы в социальных сетях. Ваши (довольные) покупатели — ваши маркетологи. Попросите их поделиться отзывом о своей покупке или о вашем интернет-магазине в целом. Они совершили покупку, и если им понравился ваш магазин, скорее всего, они захотят поделиться своим мнением.
• Отслеживание заказа. Возможно, этот пункт должен быть первым в данном списке. Если покупка дорогая, или товар нужен покупателю как можно скорее, отслеживание позволяет ему видеть, на каком этапе находится выполнение его заказа в режиме реального времени (например, «Сборка», «Упаковка», «Передан курьеру»).

Отслеживать заказ обычно можно с помощью приложения или онлайн на сайте. Однако вам, как владельцу интернет-магазина, стоит уведомлять клиента об обновлениях статуса заказа, а также о датах доставки, задержках и т.д. по электронной почте. Пиццерия Domino’s Pizza сообщает клиентам о том, что пицца отправилась в духовку, с помощью push-уведомлений. Apple отправляет своим покупателям электронное уведомление за неделю до доставки новенького iPhone. Это явно не то электронное письмо, которое можно принять за спам, верно? Не стесняйтесь держать своих клиентов в курсе их покупки/доставки товаров.

Заключение

На этом всё. Как я и говорил в начале, данная статья не является руководством по увеличению числа конверсий. Она рассказывает только о UX странице оформления заказа на сайте интернет-магазина. Такие страницы различных магазинов мало чем отличаются друг от друга, поэтому данная статья является универсальным руководством к действию. Запомните главное: UX страницы оформления заказа должны быть максимально простыми и удобными, чтобы подтолкнуть клиента к покупке, не заставляя сомневаться в правильности сделанного выбора.