Интернет-магазины сталкиваются с тем, что некоторые пользователи начинают оформлять заказ, но бросают это дело на полдороге. Одной из причин может быть неудобная или сложная форма заказа на сайте. Как сделать ее максимально понятной и удобной для покупателя, объяснял Александр Сергеев, который занимался обновлением формы онлайн-заказа в Fotos.ua. На конференции “Интернет-магазины: стратегии роста” он рассказывал о том, с чем пришлось столкнуться, проектируя для магазина новую форму. Ниже приводим основные тезисы его выступления.
Кнопка “Купить”
Когда пользователь нажимает кнопку “Купить”, а в корзине просто меняется количество товаров. Это часто происходит незаметно для самого покупателя. В Fotos.ua решили сделать всплывающее окно: оно позволяет либо сразу быстро оформить заказ только по номеру телефона, либо перейти к полной форме оформления заказа. Если человек полностью оформил заказ, он автоматически участвует в дисконтной программе магазина.
Александр обратил внимание на такую, казалось бы, мелочь, как расположение двух кнопок “Оформить заказ” и “Продолжить покупку”. Первый раз, когда тестировали форму, кнопку “Оформить заказ” расположили справа, а “Продолжить покупки” – слева. И через неделю-полторы выяснили следующее: почему-то пользователи, покупающие более одного товара, предпочитали каждый товар оформлять по отдельности. Когда кнопки поменяли местами, пользователи поняли, что можно просто продолжать оформление заказа. А до этого кнопку “Продолжить покупки” просто не замечали.
Ремарка к быстрому оформлению заказа: важно нормально объяснить пользователю, в каком виде и какие данные ему вводить:
Оформление заказа – первый шаг
Когда пользователь магазина переходит к оформлению заказа, шапка сайта поменяется. Так пользователю на уровню ощущений дают понять, что он уже не выбирает товары на сайте, а участвует в другом процессе, где нужно будет оставлять свои данные и в конечном итоге – деньги. Также, покупателю показывают путь, который ему нужно будет пройти.
Формы заказа для нового пользователя и пользователя, который уже покупал в магазине ранее, отличаются. Так, регулярный пользователь может войти в свой профиль, указав e-mail или пароль, либо же может авторизоваться через аккаунт в социальной сети.
Так форма выглядит для нового пользователя (кликните, чтобы увеличить):
А так – для того, кто уже регистрировался в магазине (кликните, чтобы увеличить):
Одна из основных проблем проектирования, по словам Александра – это навигация и поиск. В форме нужно просто показать, что именно покупателю сделать для оформления заказа (шаги последовательно указаны вверху формы).
В старой форме заказа Fotos было одношаговое оформление: пользователю предлагалось сразу заполнить множество полей (личные данные, адрес, тип доставки, оплаты). Такая детализированная форма могла не понравиться покупателюили отпугнуть его. С другой стороны, если оставить только форму быстрого заказа, где нужно указать только имя и телефон, количество заказов, возможно, и вырастет, но также вырастут и расходы на сбор дополнительной информации, могут появиться дополнительные ошибки при ее валидации. Поэтому, по мнению Александра, оптимальным является пошаговое оформление.
В форме заказа магазина есть возможность оставить дополнительный e-mail и телефоны. Оказалось, что в базе Fotos есть люди, на которых зарегистрировано по 5 и даже по 12 адресов. Почему так? Часто бывает, что для всей семьи покупками в интернет-магазине занимается кто-то один. Так что лучше дать пользователю возможность оставлять несколько телефонов/адресов. Эту возможность лучше подчеркнуть с помощью иконки (обычную ссылку покупатель может пропустить):
На скриншоте видно, что возле каждого поля размещается объяснение: зачем магазину такие данные.
Оформление заказа – второй шаг
На этом этапе сначала указывается город. В идеале пользователь должен сразу получить информацию о том, в какой день, в какое время он получит заказ, а также – сколько это будет стоить. К примеру: “Можем доставить ваш заказ такого-то числа, с 10:00 утра”. Лояльность покупателя сразу повысится. Fotos не использует эту “фишку”, поскольку поток заказов у магазина – значительный. Но небольшой интернет-магазин вполне может себе такое позволить. Но, если магазин не может гарантировать время доставки, лучше не рисковать и не обещать покупателю невыполнимых вещей, считает Александр.
Как помочь пользователю выбрать город? Можно использовать подсказки, всплывающие окна, комбо-боксы, в Fotos выбрали последнее: выделили области, вынесли основные города в верхний список. По данным WebVisor, пользователи находят свой город в такой форме без проблем.
Проблема, которую в магазине пока не решили: что делать, если человек не может найти свой город (к примеру, магазин туда просто не доставляет).
Интернет-магазины часто пишут адрес самовывоза. Но важно, особенно если пользователь делает покупку на сайте впервые, показать этот адрес на карте, нарисовать схему проезда.
Оформление и подтверждение заказа – третий шаг
В Fotos дают два варианта оплаты: наличный и безналичный расчет. Как и во всей форме заказа, здесь лучше человеческим языком пояснить пользователю, что произойдет, если он выберет какой-то из этих вариантов.
В форме подтверждения заказа показывается информация, которую сам пользователь ввел ранее. В Fotos решили, что подтверждать заказ будут только по телефону (ведь пользователи не всегда проверяют почту). “Покупатель не будет волноваться: он будет знать, что ему позвонят и проверят все данные”, – говорит Сергеев.
Два важных момента, которые нужно учитывать. Если, например, покупатель отобрал покупку в корзину, затем отвлекся, вернулся через какое-то время, а цена в магазине – уже другая, ему обязательно нужно на это указать. В Fotos в форме заказа уведомляют пользователя, что цена поменялась. Важно, чтобы это работало без перезагрузки страницы.
Также, форма заказа будет смотреться лучше, если внизу будет перечень товаров с маленькими их изображениями. Тогда, по мнению Александра, покупателю виднее, что именно и в каком количестве он выбрал.
