UX-DECISIONS.md

#	Область	Решение
1	Header	Sticky compact
2	Поиск	Autocomplete + категории
3	Карточка товара	Клик → страница (без quick view)
4	Корзина	Slide-out drawer
5	Checkout	One-page + Guest checkout
6	Mobile nav	Bottom bar + FAB (контакты)
7	Оплата	Агрегатор: ПСБ + Сбер + Т-Банк + Облачная касса
8	Доставка	Самовывоз + СДЭК + Курьер
9	PWA	Basic + Push opt-in
10	Отзывы	Только покупатели + бонусы за фото/видео

ПОЛНЫЙ (top):
┌─────────────────────────────────────────────────────────────┐
│ [Logo]  [Каталог ▼]  [____Поиск____]  📞 8-800  [🛒 3] [👤] │  60px
└─────────────────────────────────────────────────────────────┘

COMPACT (при скролле):
┌─────────────────────────────────────────────────────────────┐
│ [Logo]        [🔍]                           [🛒 3] [☰]    │  48px
└─────────────────────────────────────────────────────────────┘

Почему:
- Корзина и поиск всегда доступны
- Место экрана не теряем
- Mega menu только на полном header

2. Поиск

[фейерв___________]
├─ фейерверк → Салюты (24)
├─ фейерверк → Фонтаны (12)
└─ "фейерверк батарея" — искать всё

Почему:
- Подсказки экономят время
- Категории уточняют намерение
- Исправление опечаток

3. Карточка товара

Решение: Клик → страница товара (без quick view)

Почему:
- Quick view редко ведёт к покупке
- Усложняет код (дублирование)
- На mobile quick view невозможен

Альтернатива: Кнопка "сравнить" на карточке

4. Корзина

                    ┌──────────────────┐
 Страница каталога  │ 🛒 Корзина    ×  │
 (затемнена)        │──────────────────│
                    │ Товар 1   ×   2шт│
                    │ Товар 2   ×   1шт│
                    │──────────────────│
                    │ Итого: 5 000₽    │
                    │ [ОФОРМИТЬ ЗАКАЗ] │
                    └──────────────────┘

Почему:
- Не теряем контекст страницы
- Можно продолжить покупки
- "Добавлено" → drawer открывается автоматически

5. Checkout

┌─────────────────────────────────────┐
│ 1. Контакты                         │
│    Телефон: [+7 999 123-45-67]      │
│    Email (для чека): [опционально]  │
├─────────────────────────────────────┤
│ 2. Доставка                         │
│    ○ Самовывоз (бесплатно)          │
│    ● СДЭК до ПВЗ [Выбрать ▼]        │
│    ○ Курьер                         │
├─────────────────────────────────────┤
│ 3. Оплата                           │
│    ● Картой онлайн                  │
│    ○ СБП                            │
│    ○ При получении                  │
├─────────────────────────────────────┤
│  🎁 Хотите подарок? [Да!]           │
│     (нужна регистрация)             │
├─────────────────────────────────────┤
│         [ОПЛАТИТЬ 5 000 ₽]          │
└─────────────────────────────────────┘

Почему:
- Минимум полей = выше конверсия
- Guest checkout: 80% не хотят регистрацию
- Регистрация опциональная (через подарок)

6. Mobile Navigation

Вариант A: Bottom bar + FAB (классика)

┌─────────────────────────────────────┐
│                                     │
│           КОНТЕНТ                   │
│                                     │
│                           ┌───┐     │
│                           │ 📞│     │  ← FAB зелёный
│                           └───┘     │
├─────────────────────────────────────┤
│  🏠      🔍      🛒(3)     ☰       │
│ Главная Поиск  Корзина  Меню       │
└─────────────────────────────────────┘

Вариант B: Одна кнопка-хаб (минимализм)

СВЁРНУТО:                    РАЗВЁРНУТО:
┌─────────────────┐          ┌─────────────────┐
│                 │          │    (контент)    │
│    КОНТЕНТ      │          │   затемнён      │
│                 │          ├─────────────────┤
│                 │          │ ☰ КАТАЛОГ       │ ← большой
│                 │          │                 │
│                 │          │ 🔍  🛒  🤖  📞  │ ← сетка
│        ┌───┐    │          │ 👤  ❤️          │
│        │ ⊕ │    │   ──→    │                 │
│        └───┘    │          │        ┌───┐    │
└─────────────────┘          │        │ × │    │
                             └────────└───┘────┘

Хаб включает:
- ☰ Каталог (большая кнопка сверху)
- 🔍 Поиск
- 🛒 Корзина (с бейджем)
- 🤖 AI-помощник
- 📞 Контакты (WhatsApp, Telegram, звонок)
- 👤 Профиль
- ❤️ Избранное

Вариант C: Минимальный bottom bar + хаб

┌─────────────────────────────┐
│                             │
│        КОНТЕНТ              │
│                             │
│                             │
├─────────────────────────────┤
│   🛒(3)      ⊕      ☰      │  ← только 3 кнопки
│  Корзина   Хаб    Меню      │
└─────────────────────────────┘

Хаб (⊕) открывает: поиск, AI, контакты, профиль
Меню (☰) открывает: каталог

Вариант D: Свайп-панель

┌─────────────────────────────┐
│                             │
│        КОНТЕНТ              │
│                             │
│                             │
├─────────────────────────────┤
│  ▲ Свайп вверх для меню     │  ← подсказка
└─────────────────────────────┘

        ↓ свайп вверх

┌─────────────────────────────┐
│        КОНТЕНТ              │
├─────────────────────────────┤
│  ☰ КАТАЛОГ                  │
│                             │
│  🔍  🛒  🤖  📞  👤  ❤️    │
│                             │
│  ▼ Свайп вниз закрыть       │
└─────────────────────────────┘

Сравнение всех вариантов

Метрики для A/B теста

Вариант	Кликов до каталога	Экран занят	Сложность
A: Bottom bar + FAB	1	60px	Низкая
B: Один хаб	2	0px	Средняя
C: Mini bar + хаб	1-2	48px	Средняя
D: Свайп-панель	1 свайп	24px	Высокая

Метрика	Что измеряем
Конверсия в корзину	Какой вариант чаще добавляют
Время до покупки	Какой быстрее ведёт к checkout
Bounce rate	Какой меньше отказов
Глубина просмотра	Где больше страниц смотрят
Использование AI	Где чаще нажимают на помощь

Рекомендация: Запустить A/B/C/D тест на 1000+ пользователей

Вариант E: Выбор пользователя

Дать пользователю переключать режим навигации:

┌─────────────────────────────┐
│  ⚙️ Настройки               │
├─────────────────────────────┤
│                             │
│  Режим навигации:           │
│                             │
│  ○ Панель снизу (классика)  │
│  ● Одна кнопка (минимализм) │
│  ○ Свайп-меню               │
│                             │
└─────────────────────────────┘

Реализация:
- Сохраняется в localStorage
- При первом визите — показать выбор
- Или: начать с A, предложить переключить

// Сохранение выбора
localStorage.setItem('nav_mode', 'hub'); // bar | hub | mini | swipe

// Применение
document.body.classList.add(`nav-${navMode}`);

Плюсы:
- Каждому своё
- Нет "неправильного" выбора
- Повышает лояльность (персонализация)

Минусы:
- Нужно поддерживать все варианты
- Сложнее разработка

7. Оплата

Решение: Модуль-агрегатор + Облачная касса

┌─────────────────────────────────────────────┐
│           МОДУЛЬ-АГРЕГАТОР                  │
├─────────────────────────────────────────────┤
│  ┌─────────┐  ┌─────────┐  ┌─────────┐     │
│  │   ПСБ   │  │  Сбер   │  │ Т-Банк  │     │
│  ├─────────┤  ├─────────┤  ├─────────┤     │
│  │ • СБП   │  │• SberPay│  │ • T-Pay │     │
│  │ • Карта │  │• Кредит │  │ • Кредит│     │
│  └─────────┘  └─────────┘  └─────────┘     │
├─────────────────────────────────────────────┤
│         ОБЛАЧНАЯ КАССА (ОФД)                │
│     Атол / Модулькасса / OrangeData         │
└─────────────────────────────────────────────┘

Оплата:
├─ Картой
│   ○ ПСБ  ○ Сбер  ○ Т-Банк
├─ СБП (комиссия 0%)
├─ SberPay / T-Pay
├─ В кредит
│   ○ Сбер (до 24 мес)
│   ○ Т-Банк (до 12 мес)
└─ При получении

Почему:
- Агрегатор: единый интерфейс для всех
- Несколько банков: выбор для клиента
- Облачная касса: автоматическая фискализация

8. Доставка

Доставка:
├─ Самовывоз (бесплатно)
│   📍 Наш адрес, режим работы
├─ СДЭК до ПВЗ
│   [Выбрать на карте ▼]
├─ СДЭК курьер
│   Адрес: [_______________]
└─ Наш курьер (СПб)
    Бесплатно от 5000₽

Почему:
- Самовывоз: бесплатно, сразу
- СДЭК: лучший баланс цена/скорость/охват
- Виджет ПВЗ на карте обязателен
- Свой курьер: быстро в своём городе

9. PWA

Включено:
- manifest.json (иконка на home screen)
- Service Worker (кэш статики)
- Push-уведомления (статус заказа, напоминания о видео)

НЕ включено:
- Offline каталог (сложно, товары меняются)

Почему:
- Низкие затраты, ощутимый эффект
- Push нужен для системы лояльности
- Иконка = напоминание о магазине

10. Отзывы

Правила:
- Только зарегистрированные
- Только подтверждённые покупки
- Модерация перед публикацией

Schema.org

Действие	Бонус
Текст	1%
Фото	3%
Видео	5%
Первое видео	10%
В соцсетях	+3%

Обязательно:
- Product (название, цена, наличие)
- Offer (price, availability)
- AggregateRating (рейтинг)
- Review (отзывы)

{
  "@type": "Product",
  "name": "Салют Большой праздник",
  "image": "https://...",
  "description": "36 залпов, калибр 30мм",
  "offers": {
    "@type": "Offer",
    "price": "5000",
    "priceCurrency": "RUB",
    "availability": "InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "24"
  }
}

UX-DECISIONS — Решения по UX

Сводка решений

1. Header