Как спроектировать форму оформления заказа без лишних полей
Каждое поле в форме — это точка, где часть покупателей уходит. Считать нужно не поля, а причины, по которым их вообще спрашивают.
Минимально достаточный набор полей
Для доставки товара хватает четырёх: имя, телефон, адрес доставки, комментарий. Всё остальное — город, район, способ оплаты — выбирается, а не набирается вручную.
Email на локальном рынке — почти всегда лишнее поле: подтверждения и статусы люди читают в Telegram и SMS, а не в почте. Если нужен для чека, делайте необязательным.
Обязательная регистрация до оформления заказа — самая дорогая ошибка в этом сценарии. Оформление как гость с автоматическим созданием аккаунта по номеру телефона после успешного заказа работает лучше и ничего не теряет.
Телефон: формат, маска, валидация
Префикс +998 фиксируйте в интерфейсе как нередактируемую часть, а пользователь вводит девять цифр. Маска вида (__) ___-__-__ снижает число ошибок и сразу показывает ожидаемую длину.
Валидация должна принимать ввод в любом виде — с пробелами, скобками, дефисами — и нормализовать в единый формат перед отправкой. Отклонять номер из-за пробела — гарантированная потеря заявки.
Проверять существование номера SMS-кодом стоит только там, где это оправдано: дорогой заказ, предоплата, доступ в личный кабинет. Для обычной розницы дополнительный шаг подтверждения снижает конверсию сильнее, чем экономит на ложных заказах.
Адрес и доставка
Адрес в Ташкенте и в областях люди описывают ориентирами, а не улицей и домом. Одно свободное текстовое поле «Адрес» с подсказкой формата работает лучше набора отдельных полей улица/дом/квартира.
Город и район — выпадающие списки, влияющие на стоимость и сроки доставки. Пересчёт суммы должен происходить сразу при выборе, без перезагрузки страницы и без кнопки «рассчитать».
Карта с точкой самовывоза или зоной доставки помогает, но грузите её лениво по клику: встроенная карта — один из самых тяжёлых элементов страницы и на 3G заметно тормозит форму.
Оплата и её место в потоке
Способы оплаты показывайте иконками, а не текстом: Payme, Click, Uzum, наличными курьеру, оплата картой Humo или Uzcard. Узнаваемая иконка снимает вопрос «а работает ли у вас мой банк».
Оплата наличными при получении остаётся значимой долей заказов, и убирать её ради «безналичной культуры» — терять выручку. Пусть она будет одним из равноправных вариантов.
Переход на страницу платёжного шлюза — точка потери. Перед редиректом сохраните заказ в базе со статусом «ожидает оплаты», чтобы при обрыве связи заявка не исчезла и менеджер мог перезвонить.
Ошибки, состояния и обратная связь
Ошибку показывайте под конкретным полем и после потери фокуса, а не после нажатия кнопки отправки. Общая красная плашка «заполните форму правильно» заставляет искать проблему глазами.
Кнопка отправки не должна блокироваться до заполнения всех полей — так пользователь не понимает, чего не хватает. Пусть жмётся и подсвечивает проблемное поле с прокруткой к нему.
После нажатия кнопка обязана перейти в состояние загрузки и стать неактивной. Без этого на медленной сети получаете дубли заказов от повторных нажатий, а разбирать их приходится вручную.
Доступность и техническая корректность
Правильный type у полей меняет клавиатуру на телефоне: tel для номера, email для почты, а для суммы лучше inputmode="numeric". Атрибут autocomplete с корректными значениями заполняет форму в один тап.
У каждого поля должен быть настоящий label, а не placeholder вместо него: placeholder исчезает при вводе, и пользователь забывает, что вводил. Для скринридеров placeholder меткой не является.
Итог заказа с суммой в сумах держите на экране постоянно, а на мобильном — фиксированной панелью снизу. Сумма, которую нужно искать прокруткой, повышает число брошенных оформлений.