Ошибки в формах заказа, которые сливают ваш бюджет

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

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

Ошибка №1. Использовать Radio Button в мобильной версии

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

Как это можно исправить?

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

Ошибка №2. Неинформативная группировка

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

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

Ошибка №3. Отсутствие наглядности при выборе даты и времени

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

Запись на стрижку лучше сделать в виде календаря, как показано на 2-ой и 3-ей картинке. Пользователь сможет быстро понять, какие даты и время доступны, а какие нет, и одним касанием сделать выбор.

Ошибка №4. Отсутствие логики в колонках

В вертикальной форме, как на картинке слева, пользователю легко упустить из виду какое-то поле.

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

Ошибка №5. Использовать одинаковое расстояние между полями

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

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

Разберем еще несколько популярных ошибок, связанных с формами доставки.

Страница доставки

Что не так в форме заказа слева? Во-первых, доставка. Она разбита на шаги, но так, что пользователь не понимает, сколько этапов его еще ждет.

Как это решить?

Отобразить этапы прогресс-баром (индикатором заполнения), как на примере справа. Так пользователю станет понятно, сколько шагов еще осталось.

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

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

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

Форма оплаты

В чем ошибка на примере слева? «Выберите тип карты» — ненужный инпут. Ниже есть поле ввода номера карты. По нему можно автоматически определить ее тип, не заставляя пользователя напрягаться.

Форма подтверждения заказа

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

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

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

Форма размещения заказа

Ну и в чем ошибка — спросите вы, все же хорошо? Не совсем.

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

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

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot