# Портал, понятный новичку: подсказки + FAQ + приветственный тур — дизайн

**Дата:** 2026-06-25
**Автор:** Claude (сессия по запросу владельца)
**Статус:** на утверждении владельцем
**Связано:** продолжает [2026-06-24-dumb-user-walkthrough-design.md](2026-06-24-dumb-user-walkthrough-design.md)
и находки [findings/2026-06-24-dumb-user-walk/](../findings/2026-06-24-dumb-user-walk/) (REPORT.md, SIMPLIFICATION.md, A11Y.md).

## 1. Цель

Сделать так, чтобы портал был понятен человеку, который видит CRM и рекламу **впервые**
и ничего не знает о «лидах», «синхронизации», «тарифных ступенях». Чтобы портал **сам
подсказывал** — и клиент не плутал, не пугался и **не писал в поддержку** по очевидным вопросам.

Две задачи в порядке приоритета:

1. **Главная — слой самоподсказок.** Везде, где новичок может застрять, дать подсказку прямо
   в интерфейсе: маленький «?» с короткой фразой, текст в пустых разделах, подпись под полем,
   плюс отдельная страница **«Частые вопросы» (FAQ)** и короткий **приветственный тур** при
   первом входе.
2. **Параллельная — свежий осмотр готовности на боевом.** Пройти текущий боевой liderra.ru
   глазами клиента полным путём (включая реальный приход лидов), переподтвердить открытые
   находки 24.06 (U2/U5/U6/U7) на актуальной сборке и поймать новое.

## 2. Что уже сделано (не дублировать)

Из прогона 24.06 (детали — в `findings/2026-06-24-dumb-user-walk/`):

- ✅ **U1** — жаргон «домен конкурента / источник-донор» заменён понятными подписями
  («Сайт, с которого нужны заявки» / «Телефон, по которому идут клиенты») — **на боевом** (25.06).
- ✅ **B1** — счётчик «хватит на N дней» на дашборде считает от дневного заказа, синхронно с
  биллингом — **на боевом** (25.06).
- ✅ **U4** — цена лида в карточке показывается (вчерашнее «—» было артефактом ручной вставки).
- ✅ Деньги — billing-audit чистый (копейки не теряются, блокировки честные).

**Остаются открытыми** (переподтвердить на боевом и добить): U2, U3, U5, U6, U7, C1, V1 + полноценная
проверка доступности (A11y была только лёгким взглядом).

## 3. Охват

Кабинет клиента целиком, тем же путём, что 24.06, плюс реальный поток лидов:

- Регистрация нового аккаунта (новый тенант) → онбординг → дашборд.
- Проекты: создание, шаги мастера, источник, лимиты, включение, блокировки.
- Биллинг / баланс: пополнение (экран), списания, тариф, заморозка и разблокировка.
- Заявки / сделки: список, карточка, фильтры, канбан, экспорт.
- Настройки профиля, раздел «Помощь».
- **Поток лидов:** реальное включение проекта → заказ у поставщика → приход лида → списание →
  как это видит клиент.

**Вне охвата:** админка `/admin/*` (другая роль), кабинет поставщика `crm.bp-gr.ru` (внешняя система),
онлайн-оплата картой (ЮKassa выключена до ООО — проверяем только экран/тексты, не реальную оплату).

## 4. Где и как гоняем

- **Боевой `liderra.ru`** под **новым тест-клиентом** (решение владельца 25.06). Как 22.06:
  отдельный тест-аккаунт, реальный путь, **уборка тест-данных и заказов у поставщика после**.
- **Реальные деньги клиента (tenant 2 — 1 836 400 ₽) и его данные НЕ затрагиваются.**
- Проход — браузером (Playwright MCP), **скриншот каждого шага** в папку прогона
  `docs/superpowers/findings/2026-06-25-novice-self-service/`.
- Перед любым выкатом правок на боевой — агент `prod-deploy-validator` (GO/NO-GO).

## 5. Что считаем находкой

К категориям 24.06 (UX-простота / баг / блокировка / визуал / a11y) добавляется главная новая:

- **«Портал не подсказывает»** — место, где новичок не понимает, что это / зачем / что нажать,
  и **нет** подсказки. Фиксируется как: `экран → элемент → чего не хватает → предлагаемый текст
  подсказки → вид (?, hint под полем, пустое состояние, шаг тура, пункт FAQ) → важность`.

Важность: 🔴 *клиент застрянет / напишет в поддержку / уйдёт* · 🟠 *догадается, но с трудом* ·
🟡 *косметика*.

## 6. План по фазам

Каждая фаза — отдельный план реализации (через `writing-plans`) и отдельное согласование выката.

### Фаза 0 — свежий осмотр на боевом (диагностика)
Проход по §3 под тест-клиентом, скриншоты. На выходе:
- обновлённый список находок (переподтверждение U2/U5/U6/U7/C1/V1 + новое);
- **карта мест для «?»-подсказок** по всем клиентским экранам;
- **черновик текстов FAQ** (из реальных мест путаницы + типовых вопросов);
- **сценарий приветственного тура** (какие 4–6 шагов показать новичку при первом входе).

### Фаза 1 — слой самоподсказок (главная ценность, низкий риск)
В основном **тексты в интерфейсе**, без изменения логики и денег:
- «?»-иконки с короткими пояснениями у ключевых кнопок/полей/разделов;
- подписи-подсказки под полями (примеры заполнения);
- понятные тексты в пустых состояниях («тут пусто, потому что… сделайте 1-2-3»);
- единый словарь (выбрать одно слово для лида — рекомендуется **«Заявка»** — и применить везде; U7).

### Фаза 2 — страница «Частые вопросы» (FAQ)
- Отдельная публичная/кабинетная страница FAQ, связанная с разделом «Помощь».
- Наполнение из Фазы 0: «Что такое заявка?», «Как пополнить баланс?», «Почему списали деньги?»,
  «Как включить проект?», «Что значит "хватит на N дней"?», «Почему приём заявок на паузе?» и т.д.
- Тексты — на утверждение владельцу (финальные формулировки за ним).

### Фаза 3 — приветственный тур при первом входе
- Короткая пошаговая подсветка ключевых мест («сначала сюда — пополнить, потом сюда — создать
  проект, тут будут заявки»), 4–6 шагов, с возможностью пропустить и не показывать снова.
- Показывается один раз новому клиенту; не мешает опытному.

### Фаза 4 — добить открытые упрощения 24.06
U2 (спросить имя / не звать «коллега»), U3 (статус заморозки на дашборде и в проектах),
U5 (смягчить баннер «18:00/синхронизация» для новичка), U6 (объяснить или скрыть «Автопополнение»),
C1 (формат денег и тон в баннере заморозки), V1 (сдвиг времени «28 мин назад»). Детали «было→стало» —
в `findings/2026-06-24-dumb-user-walk/SIMPLIFICATION.md`, переподтвердить на боевом.

## 7. Технические рамки

- Стек — **Vue 3 + Vuetify 3**, палитра **Forest** (Brandbook). Визуальную систему не меняем —
  меняем тексты, подсказки, видимость статуса, добавляем FAQ и тур.
- **«?»-подсказки** — нативные Vuetify (`v-tooltip` / `VIcon` + hint-слоты полей), без сторонних
  React-зависимостей.
- **Тур** — библиотека-кандидат выбирается в плане реализации; обязательное условие — совместимость
  с Vue 3 (никаких React-only, напр. не `framer-motion`); рассмотреть Vue-friendly варианты
  (driver.js / shepherd.js) или лёгкую собственную реализацию на оверлее. Решение — в `writing-plans`.
- **FAQ** — статическая страница в SPA (контент в коде/конфиге; полноценная CMS не нужна — YAGNI).
- Все правки Фаз 1–3 — **аддитивный текст/UI**, логику и деньги не трогают → низкий риск.
- Любую правку — по **TDD**, фронт-тесты (Vitest) на видимость подсказок/тура; деньги не затрагиваются.
- Выкат — штатным `redeploy` (соберёт фронт сам), после `prod-deploy-validator` GO.

## 8. Безопасность и уборка

- Боевой не порчу: тест-клиент, реальный клиент и его деньги не трогаются.
- После прогона — уборка тест-аккаунта, тест-лидов и заказов у поставщика (паттерн 22.06).
- Ничего необратимого без разрешения владельца: коммит/пуш/выкат — отдельно, по «делаем» + escape.
- Открытые вопросы не закрываю.

## 9. Критерий готовности

- Пройден весь охват §3 на боевом, по каждому экрану — скриншоты.
- Готовы: карта подсказок, черновик FAQ, сценарий тура (Фаза 0).
- Реализованные фазы — зелёные тесты + проверка глазами (`verification-before-completion`) перед
  «готово».
- Тест-данные и заказы у поставщика убраны; деньги клиента целы (сверка до==после).

## 10. Явно НЕ делаем

- Не трогаем деньги/данные реального клиента и тенантов.
- Не включаем онлайн-оплату (ждёт ООО) — только экран/тексты.
- Не закрываем открытые вопросы.
- Не делаем тяжёлую CMS под FAQ и не тащим React-зависимости ради тура.
- Не правим код на боевом руками — только через TDD + redeploy.
