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

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

Слева — экран, где допущены ошибки. Справа — альтернатива

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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