Дизайн екрана корзини мобільного додатка
Корзина—екран з високим 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 день. Оцінка уточняється після аналізу ТЗ.