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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
534
How-to Читать 7 минут 20 марта 2019

Как оформить форму заказа в интернет-магазине

Как создать форму заказа в интернет-магазине и проверить ее эффективность
ЧЕК-ЛИСТ: АНАЛИЗ БИЗНЕСА — ВНУТРЕННИЕ ПРОЦЕССЫ
Неудобные формы заказа влияют на конверсию. Если пользователь не хочет их заполнять, он закрывает вкладку и переходит на сайт конкурента. Чтобы избежать потерь, надо правильно создать форму. Если она уже создана — протестировать и усовершенствовать.

Какой должна быть форма оформления заказа

1
Доступность. Желательно, чтобы посетители ее быстро находили. В то же время не стоит делать всплывающие окна, которые появляются сами собой, оформлять ее анимацией. Все что мигает — раздражает и отталкивает.
Дизайн формы заказа онлайн
Хорошо работают яркие небольшие свернутые кнопки в виде ссылки, когда дополнительные окна появляются при клике на них. Размещают их обычно в правом верхнем углу или на странице контактов.
Модуль корзины и заказа в интернет-магазине
2
Ненавязчивость. Должна собирать только нужные данные и сохранять их.
3
Сохранение данных. Все введенные данные бережно сохраняются, даже если страница обновилась или пользователь закрыл вкладку.
4
Встроенная проверка правильности заполнения. Система должна уведомить, если в номере не хватает цифр или не указан домен почтового сервера. Часть потенциальных покупателей будет закрывать страницу и переходить к конкурентам, если в конце длинной анкеты, нажав кнопку «Отправить», получит сообщение о нескольких ошибках.
Проверка правильного заполнения формы на сайте
Обратная связь поможет клиенту уточнить свои вопросы у продавца или получить подтверждение о приеме заказа. Для этого сразу после получения заказа можно отправлять письмо с его номером и примерной датой доставки.
Уведомление об успешном заказе
На лендингах лучше всего работают веб-формы, размещенные после описания услуг.
Форма заказа для лендинга

Что учесть при создании процесса оформления заказа

Каждый вид бизнеса индивидуален, поэтому создавайте веб-форму индивидуально. Но есть общие моменты:

  • структура;
  • поле ввода;
  • строки меток;
  • кнопки действий;
  • проверка/обратная связь.

Структура формы заказа

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

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

Как формировать структуру:
1
Сгруппировать связанные вопросы. Есть блок «Личная информация», такая как ФИО, дата рождения; или «Информация по аккаунту» — пароль, логин и др.
2
Расположить вопросы по порядку. Легче и быстрее заполнять поля, расположенные сверху вниз в один столбец.

Поля ввода

В полях ввода пользователи отвечают на вопросы, прописывают пароль, выбирают правильный вариант из списка. Есть разные виды текстовых полей. Тестируя форму, надо убедиться, что они подобраны правильно.
1
Обязательное и необязательное. Чтобы конверсия не пострадала, желательно обязательные поля отмечать знаком «*», а лучше — не спрашивать малозначимые данные.
Обязательные и необязательные поля в форме заказа
2
Если настроена функция заполнения полей «По умолчанию», следует убедиться, что они заполняются автоматически информацией о посетителях. Ошибок там быть не должно — сами пользователи заполненные автоматически строки обычно не перепроверяют.
3
Желательно, чтобы были маски ввода информации. Для номеров телефона, которые прописываются посетителями, должны быть скобки под код оператора и пробелы, тире между цифрами. Так у потенциальных покупателей будет меньше ошибок.
Маски ввода при оформлении заказа
4
Хорошая форма требует минимум усилий: переходить между полями, редактировать их клиенты должны с помощью одной клавиатуры.
5
Чтобы пользователи не теряли из вида вопросы, на которые они отвечают, их лучше подсвечивать. Подсветку можно настраивать любую или использовать автофокус.
Вопросы в форме оформления заказа

Метки

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

Не злоупотребляйте использованием Caps Lock. Хорошо, если каждый вопрос начинается с заглавной буквы. Варианты, где каждое слово предложения написано с большой буквы или все буквы большие, — неудачные. Такие надписи раздражают и затрудняют чтение.

Кнопки действий

1
Внимание акцентируется на важных действиях. Чтобы пользователи не путались, кнопку «Готово» или «Подписаться» выделяют цветом. Если есть кнопка «Назад», которая стоит над формой для заполнения, ее лучше оттуда убрать. Пользователь может нажать ее случайно.
Кнопка действия в форме онлайн-заказа
2
Нет кнопок с несколькими действиями. Кнопки «Сброс» лучше тоже убрать — их могут нажать случайно.

Как улучшить форму онлайн-заказа

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

Мобильная форма оформления заказа

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

Что нужно учесть в мобильной форме:
1
Важные вопросы. Просьбы ввести альтернативный адрес, e-mail, телефон раздражают. Да и перечитывать вопросы, а затем прописывать ответы на маленьком экране неудобно. Обычно достаточно 3–5 полей: ФИО, телефон, вариант оплаты и доставки, адрес.
2
Отсутствие блоков «Персональная информация» и т.д. Вопросы в блоках, где вводятся ФИО в три отдельные поля, лучше заменить одним.
3
Вертикальное выравнивание. При горизонтальном выравнивании сложнее работать — какой-то вопрос легко пропустить. К тому же многие пользователи любят просмотреть все вопросы, прежде чем начать заполнять поля. С вертикальным выравниванием это сделать легче.
4
Выпадающие списки. Экономят место на экране, облегчают процесс заполнения.
5
Кнопка «Подтвердить» или «Отправить». Стоит после всех вопросов по центру и выделяется цветом. В противном случае потенциальные покупатели могут ее не заметить. В то же время цвет кнопки должен быть ненавязчивым, а сама она — неподвижной.
6
Настроенное масштабирование. Это делается с помощью мета-тега viewport. Если форму случайно увеличат, на странице не потеряются поля или кнопки.
7
Быстрая загрузка. Если скорость медленная, надо проверить, нет ли тяжелых изображений. Клиенты, которые заполняют форму, уже готовы сделать заказ. Обидно их потерять из-за технических моментов.
8
Адаптивная клавиатура. Если в поле вводится текст, система выдает клавиатуру с алфавитом, а если номера телефонов — цифры. Самостоятельное переключение отнимает у пользователей время, увеличивается риск совершения ошибок при случайном нажатии.
Чтобы максимально упростить процедуру оформления заказа, следует настроить автозаполнение адреса, в том числе с геолокацией. Тогда ошибок со стороны потенциальных покупателей станет еще меньше.

Заключение

Форма оформления заказа — важнейший элемент веб-сайта. Она влияет на то, что данные о заказе будут приходить. Убедитесь, что в ней продуманы:

  • структура;
  • поля ввода;
  • метки;
  • кнопки;
  • обратная связь.

После визуальной проверки лучше попросить нескольких коллег ее заполнить. Это позволит убедиться, что все работает правильно. Наконец, чтобы охватить потенциальных посетителей, делающих заказы со смартфонов, желательно создать отдельную форму для мобильной версии.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

из 5 на основе 0 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов