Сумма заказа не рядом с кнопкой «Далее»: проблема UX в корзине

В корзине пользователь принимает решение о продолжении. Для этого нужна видимая итоговая сумма рядом с действием. Когда сумма и кнопка разнесены, взгляд должен преодолевать экран. Возникает пауза: сколько спишется? Неочевидно, изменится ли итог после следующего шага.

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

Проблема усиливается при переменной стоимости: доставка, налоги, скидки по купонам, баллы, платные опции. Пользователь пытается сверить расчёт, листает туда‑сюда, возвращается к полям промокода, меняет количество. Время на шаг растёт, уверенность падает.

В наблюдениях видны повторные скроллы, остановки перед кнопкой, отказ от продолжения. Частая стратегия — отложить оформление «на потом» или закрыть вкладку. Сомнение появляется не из‑за суммы как таковой, а из‑за её недоступности в момент действия. Низкий контраст, мелкий кегль, однотипные кнопки усиливают эффект. В списке товаров блоки цены и действий конкурируют за внимание. Навигация теряет фокус: главный шаг не поддержан главной цифрой.

Когда критично, а когда нет

Критично:

• Маркетплейсы и e‑grocery: много позиций, переменные сборы, промокоды, слоты доставки.
• Туризм и билеты: доплаты за багаж, место, страховку; цена меняется на шаге.
• Доставка еды: комиссии, чаевые, динамичные скидки.
• B2B и корпоративные закупки: лимиты бюджетов и пороги согласования.
• Высокая доля мобильного трафика и длинные корзины с прокруткой.
• BNPL/рассрочка: решение зависит от итоговой суммы и платежа по месяцу.

Не критично:

• Магазины с одним товаром в заказе и фиксированной ценой без доплат.
• Цифровые товары с фиксированной стоимостью и включёнными налогами.
• Дешёвые импульсные покупки, где цена известна заранее и не меняется.
• Внутренние корпоративные порталы, где оформление регламентировано и выбора мало.
• Проекты, где корзина формальна, а переход ведёт на единый экран оплаты с очевидной суммой.

Открытый вопрос для проверки

Что вам нужно увидеть на экране корзины, прежде чем нажать «Перейти к оформлению», и где вы ожидаете увидеть итоговую сумму?

Возможное решение проблемы

• Объедините итог и действие. Разместите «Итого» и кнопку «Перейти к оформлению» в одном визуальном блоке. Это главный модуль шага.
• Сохраните видимость. На мобильных сделайте фиксированную панель внизу: «Итого» + кнопка. На десктопе — правый или нижний сайдбар, который остаётся на экране.
• Покажите состав суммы. Рядом с итогом отобразите скидку, доставку, налоги. Коротко иерархично: Итого, затем детали меньшим шрифтом.
• Обновляйте мгновенно. Изменение количества, удаление товара, применение промокода сразу меняют итог. Без перезагрузки и задержек.
• Уберите шум. Сократите второстепенные блоки вокруг кнопки. Высокий контраст, крупный кегль, понятные подписи: «Итого», «Скидка», «Доставка».
• Проясните неизвестное. Если доставка рассчитывается дальше, напишите это рядом с итогом: «Доставка будет рассчитана на следующем шаге». Не скрывайте неопределённость.
• Учтите доступность. Правильный порядок фокуса, aria‑метки, озвучивание итога и изменения суммы скринридером.
• Проверьте крайние случаи. Длинные названия, нулевые суммы, купоны, частичная предоплата, отсутствие доставки — итог и кнопка должны оставаться рядом и читабельны.
• Настройте метрики. Отслеживайте скроллы, время на шаге, клики по кнопке, корректировки корзины. Смотрите, снизилось ли число возвратов из следующего шага.

Примеры гипотез для роста конверсии

• Если перенести итоговую сумму в один блок с кнопкой и закрепить его внизу экрана на мобильных, то конверсия в переход из корзины может увеличиться за счёт того что снижается усилие на сверку суммы перед действием.
• Если показать полный разбор стоимости (товары, скидка, доставка, налоги) рядом с кнопкой, то конверсия в переход к оформлению может увеличиться за счёт того что пропадает неопределённость суммы списания.