# Onboarding UX

> Паттерны первого запуска: welcome, tour, empty-states. Триггеры: «первый запуск», «setup wizard», «TTV». НЕ активация trial→onboarding-cro-ru.

- Skill: `jhamidun/onboarding-ux` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jhamidun/onboarding-ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/onboarding-ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/onboarding-ux

---


# Onboarding UX

Цель — дать пользователю **первое полезное действие за <60 секунд**. Любой экран, который не приближает к этому, — кандидат на удаление.

## Паттерны (от лучшего к худшему)

### 1. Get-to-value first
Не показывай туториал, не спрашивай данные — пусти в продукт сразу с примером данных. Покажи возможности через готовый кейс.

### 2. Inline coachmarks
Подсказки появляются у элемента **в момент**, когда он впервые становится видимым. Не отдельный туториал, а тонкие сноски прямо в интерфейсе. Закрываются один раз.

### 3. Empty state с задачей
Не просто «Тут пока ничего нет». Дай конкретное действие: «Создайте первый проект» с кнопкой.

### 4. Прогрессивный сбор данных
Не спрашивай 8 полей в форме. 1-2 минимума. Остальное — собирай по мере использования.

### 5. Опциональный тур
Только если пользователь сам ткнул «Show me how». Не auto-play.

## Что НЕ делать

- ❌ **3+ welcome-слайда** перед началом работы. Удаляй.
- ❌ **Modal с туториалом**, который надо закрыть. Не работает.
- ❌ **Пустые поля «расскажите о себе»** на старте. Не заполнят.
- ❌ **Подсветка одного элемента на всём экране** — лекторская, давит.
- ❌ **«Пропустить»** мелким серым в углу — верный признак, что онбординг не нужен.

## Empty states — отдельный жанр

Каждый раздел приложения должен иметь empty state, не тупо «Нет данных». Структура:

```
┌────────────────────────────┐
│        [иконка / иллюстр]  │
│                            │
│  Заголовок: что тут будет  │
│  Подзаголовок: зачем оно   │
│                            │
│      [ Главное действие ]  │
│      или вторичная ссылка  │
└────────────────────────────┘
```

См. `states-checklist` для полного списка состояний.

## Прогрессия

Первая сессия пользователя — не одна целевая точка. Это серия побед:

1. **Первая минута** — видит value (не просто понимает интерфейс).
2. **Первая сессия** — выполняет первое полезное действие.
3. **Первый день** — возвращается.
4. **Первая неделя** — приглашает кого-то / интегрирует.

Дизайнь под каждую вешку отдельно.

## Реализация в прототипе

```jsx
function App() {
  const [seen, setSeen] = useState(() => JSON.parse(localStorage.onboarding || '{}'));
  const mark = (k) => {
    const next = { ...seen, [k]: true };
    setSeen(next); localStorage.onboarding = JSON.stringify(next);
  };

  return <>
    {!seen.firstVisit && <FirstVisitBanner onClose={() => mark('firstVisit')} />}
    {!seen.composer  && hasOpenedComposer && <ComposerHint onSeen={() => mark('composer')} />}
    <Workspace />
  </>;
}
```

Никаких мегамодалок. Маленькие подсказки в нужный момент.

## Чеклист онбординга

- [ ] Понятно, что это за продукт, за 5 секунд?
- [ ] Первое полезное действие <60 секунд?
- [ ] Нет 3+ welcome-экранов?
- [ ] Empty states содержательные, не «Тут пока пусто»?
- [ ] Подсказки появляются in-context, не как modal?
- [ ] Можно закрыть всё и вернуться позже?
- [ ] Возвращающийся пользователь не видит онбординга снова?
- [ ] Есть способ найти помощь, если запутался?

## Антипаттерны для прототипа

В прототипе часто соблазн «нарисовать туториал», потому что это видимая работа. **Но если туториал нужен — продукт плох.** Лучше потрать время на то, чтобы сделать UX, который не нуждается в туториале.

Если туториал всё-таки нужен — сделай его максимально невидимым. Ты ведь хочешь, чтобы человек **пользовался** продуктом, а не **изучал** его.

## Legacy reference

Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в `references/legacy-onboarding-ux.md`. Секции там: 4 типа онбординга, Структура экранов, Permissions — когда просить, Time-to-value (TTV), Progressive disclosure, Empty states которые учат, Specific onboarding patterns, Skip vs обязательное, Antipattern: «You must complete this», Метрики (для тех кто меряет), Антипаттерны.