Дизайн экрана корзины мобильного приложения
Корзина — экран с высоким abandonment rate. Пользователь туда заходит, видит что-то неудобное или непонятное, и уходит. Проблема почти всегда не в «некрасивом дизайне», а в перегруженности: слишком много действий на экране, неочевидная итоговая сумма, неудобное редактирование количества.
Ключевые UX-решения, которые влияют на конверсию
Количество товара. Два паттерна: stepper (минус/плюс рядом с позицией) и inline input. Stepper удобнее одной рукой, input быстрее при большом количестве. На iOS UIStepper из UIKit — готовый компонент, но выглядит по-системному. Кастомный stepper требует правильной обработки быстрого нажатия: throttle на 300ms, иначе сервер получает лавину запросов при удержании кнопки.
Удаление позиции. Свайп влево с action button (iOS-паттерн, UIContextualAction) или long press с контекстным меню — оба варианта рабочие. Но обязательно нужен undo-toast: «Товар удалён» + кнопка «Отменить» на 4–5 секунд. Без этого процент случайных удалений критично высокий.
Структура итоговой суммы:
Пользователь должен понять, откуда взялась итоговая цифра, за 2 секунды. Типичная ошибка: скидка показана отдельной строкой в середине списка, промокод — в другом месте, доставка — не посчитана до выбора адреса. Итог: человек не понимает, почему сумма такая, и не идёт дальше.
Правильная структура блока итогов:
- Сумма товаров
- Скидка (если есть)
- Поле промокода
- Доставка (с пометкой «рассчитывается на следующем шаге» если не известна)
- Итого — крупно, выделено
Пустая корзина и сопутствующие состояния
Пустое состояние — не просто иллюстрация «корзина пуста». Это возможность вернуть пользователя в каталог. Хорошее решение: иллюстрация + заголовок + кнопка «Продолжить покупки» + блок «Недавно просмотренные» если есть история.
Состояние загрузки: skeleton-заглушки под каждую строку позиций. Не общий spinner на весь экран.
Кнопка «Оформить заказ» — sticky внизу, всегда видна. На iOS SafeArea нижний отступ обязателен, иначе кнопка прячется за home indicator на iPhone X и новее. В Figma это прорабатывается для обоих устройств: с home indicator и без.
Как делаем
Figma, Auto Layout, component variants для всех состояний ячейки (normal, swipe-revealed, loading). Отдельный компонент для блока итогов — переиспользуется на экране чекаута. Передача разработчику через Figma Dev Mode с токенами и спецификацией.
Срок — 1 день. Оценка уточняется после анализа ТЗ.