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

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

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

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

Ошибка №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

4040
47 комментариев

Автор либо сам не в теме, либо оперирует данными из учебников начала 2010х.
Почти всё, что вы сделали "как надо", надо дальше исправлять. Замена радио на карточки слишком мусорит, нужно делать расрытые списки меню с выделением цветом.
Лишние поля в форме заказа не нужны. Уже как минимум 5 лет должно быть всего два:
1 - имя в любой свободной форме;
2 - контакт в любой форме, хоть телефон, хоть почта. Верификацию нужно проводить моментально.
Поле для адреса доставка должно быть одно, в любой форме. Без классификаторов и индекса (омг).
Никогда не делайте ещё одно ("теперь точно самое последнее") окно подтверждение заказа. После выбора типа оплаты всë должно заканчиваться.

8
Ответить

Так, это что тут за рационализм развели. Тут идеальные решения проблем в созданных для них ситуациях, а не ваши эти думалки.

2
Ответить

Замена радиобаттонов на карточки мусорит только в большом количестве. Если вариантов мало, то вполне ок.

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

В статье нет "теперь точно самого последнего" окна. Там всего 3 шага, а после информация о том, что заказ размещен и благодарность.

Ответить

На клиентском сайте есть всего одна форма заявки (скрин приложил). Даже не знаю, с чего тут начать исправлять :)

3
Ответить

Отправить бабло? Ну т.е. исправлять заголовок ;)

1
Ответить

Здесь прекрасно все.

Ответить

а обратился с тем, что нет заявок и он не знает, в чем дело?))

Ответить