10900
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 — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

4 из 5 на основе 3 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

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

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm