Форма оплаты на сайте: семь ошибок, которые стоят денег

Сколько стоит плохая форма оплаты

Форма оплаты – самый дорогой экран сайта в пересчёте на пиксель: сюда доходят люди, которые уже решили купить. И именно здесь их теряют. По метаанализу Baymard (50 исследований, обновление сентября 2025) средняя доля брошенных корзин – 70,22%. Часть этих людей просто прицениваются, поэтому Baymard отдельно опрашивал тех, кто был готов заплатить: 40% ушли из-за неожиданных доплат за доставку и комиссий, 20% – из-за долгой доставки, 19% – из-за недоверия к форме карты, 18% – потому что от них потребовали завести аккаунт, 17% – из-за длинного или запутанного оформления, 12% не смогли заранее посчитать итог, 9% не нашли подходящего способа оплаты.

Оценка того же Baymard: крупный магазин только за счёт юзабилити оформления заказа может поднять конверсию на 35%, а в масштабах США и Европы это 260 миллиардов долларов заказов, которые можно вернуть. Переносить цифру на российский магазин нельзя – другой рынок, другие способы оплаты. Пропорции, по моим аудитам, похожи, с одной поправкой: ошибок в самой форме, а не в цене доставки, у нас больше.

Оговорка сразу: если вы продаёте B2B по счёту, дальше можно не читать. Ваша форма оплаты – это реквизиты и договор, и там другой список экспонатов.

Семь экспонатов из коллекции

Коллекцию я собираю десять лет. Названий магазинов не будет: экспонат – не сайт, а приём, который повторяется от проекта к проекту.

1. Номер карты без пробелов

Поле принимает шестнадцать цифр подряд и ругается на пробел. Человек читает номер с карты блоками по четыре, вводит сплошной строкой и ошибается в третьем блоке. В подборке из 129 гайдлайнов для платёжных форм, которую Станислав Хрусталёв опубликовал на Хабре в ноябре 2022 года, маска с отступами между блоками стоит среди базовых: так номер проверяется глазами. Туда же – фиксированная цифровая клавиатура на смартфоне для полей с числами. Оба пункта – мелкая правка во фронтенде, а не редизайн.

2. «Сначала зарегистрируйтесь»

Аккаунт до оплаты – классика, и она держится. По бенчмарку Baymard 2024 года 84% магазинов не откладывают создание аккаунта до экрана подтверждения, хотя 18% готовых платить покупателей уходят именно из-за требования регистрации. Аккаунт нужен магазину для повторных продаж, а не покупателю для первой. Правильный порядок: оплата гостем, а на странице «спасибо» – предложение задать пароль, потому что почта и телефон уже введены.

3. Итоговая сумма появляется на последнем шаге

Доставка, упаковка, «сервисный сбор» всплывают на четвёртом экране. Это те самые 40% и 12% из опроса Baymard. В гайдлайнах Хрусталёва пункт звучит буквально: сумма заказа должна быть в интерфейсе оплаты, чтобы не возвращаться назад. Я бы добавила: стоимость доставки показывайте ещё в корзине, пусть даже как «от».

4. СБП спрятан в выпадающем списке

Самый российский экспонат. Кнопка «Оплатить картой» крупная, а СБП – третьим пунктом в списке «другие способы». Между тем по данным Точка Банка (больше 200 млн транзакций клиентов банка с мая 2025 по май 2026) СБП – каждый четвёртый платёж, а в онлайне он лидирует: 95% оплат цифровых товаров, 94% – финансовых услуг, 89% – в образовании. В эквайринге Русского Стандарта доля СБП весной 2026-го дошла до 36% против 25% двумя годами раньше. Порядок способов оплаты – решение по данным, а не по привычке: посмотрите, чем платят у вас, и поставьте первым то, чем платят чаще. Поиск на экране оплаты – это уход.

5. Ошибка наверху, поле внизу, данные стёрты

Нажали «Оплатить» – страница перезагрузилась, вверху красная строка «проверьте введённые данные», все поля пустые. Человек не знает, где ошибся, и вводит шестнадцать цифр заново. Два гайдлайна из той же подборки: ошибка показывается сразу при уходе из конкретного поля, а значения полей не стираются, чтобы поправить одно. Технически это валидация на клиенте и форма, которая не перезагружается целиком. Экспонат чаще всего живёт на сайтах, где платёжную форму встроили как есть от эквайера и никто не открывал её после подключения.

6. Одиннадцать полей вместо восьми

Средняя форма – 11,3 поля и 5,1 шага, а достаточно восьми: бенчмарк Baymard за 2024 год. Лишние три обычно такие. Отдельные «Имя» и «Фамилия»: 42% пользователей вводят полное имя в первое поле, при этом 89% магазинов держат два поля. «Адрес, строка 2»: на ней запинаются 30% людей, а 75% сайтов показывают её всегда. Обязательное отчество и дата рождения «для бонусов». Каждое поле добавили ради CRM, а платит за него покупатель. Здесь же промокод, раскрытый по умолчанию: часть людей уходит искать код и не возвращается, поэтому Baymard советует сворачивать его в ссылку.

7. Кнопка, которая не говорит, что будет дальше

«Продолжить» на экране, где вводят карту. Спишут деньги сейчас? Будет ещё шаг? Из отказов Baymard 19% – недоверие к безопасности формы, и текст кнопки – первое, что это доверие формирует. «Оплатить 4 980 ₽» лучше «Продолжить», а рядом – способ оплаты и логотип платёжной системы, чтобы было ясно, кому уходят данные.

Что из этого находит ИИ-аудит, а что нет

ИИ-инструментами в аудитах я пользуюсь каждый день, и граница у них честная. Технические экспонаты – маска, тип клавиатуры, атрибуты автозаполнения, контраст, поле без подписи – модель находит быстро и почти без промахов: ей достаточно вёрстки и скриншота. Порядок способов оплаты, нужность отчества, момент показа стоимости доставки она не решит: для этого нужны данные вашего магазина – чем платят, откуда приходят, где бросают. Модель предложит «вынесите СБП первым», но не узнает, что ваш покупатель платит иначе.

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

Как мы смотрим формы в CRT

Экспресс-аудит вроде того, что мы делали для экосистемы Космос – личный кабинет и маркетплейс, – начинается с формы оплаты, а не с главной. Порядок такой: сначала воронка по шагам из аналитики; если её нет, первым делом ставим события на каждый шаг, иначе спорить о форме бессмысленно. Потом семь экспонатов выше как чек-лист. Потом три-пять сессий с живыми людьми на телефоне, потому что половина проблем видна только в руках. В редизайне интернет-магазина Regard адаптив был отдельной задачей, и форма оплаты на мобильном стояла в списке первой. О методе целиком в блоге мы писали в материале про дизайн-аудит.

Что не работает, скажу тоже. Аудит без доступа к данным даёт список замечаний, а не приоритеты. Такой список кладут в бэклог, и он там живёт. С цифрой «на этом шаге уходит каждый пятый» тот же пункт берут в ближайший спринт. Поэтому доступ к аналитике мы просим до начала работы, а не после.