JHamidun 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 для полного списка состояний.
Прогрессия
Первая сессия пользователя — не одна целевая точка. Это серия побед:
- Первая минута — видит value (не просто понимает интерфейс).
- Первая сессия — выполняет первое полезное действие.
- Первый день — возвращается.
- Первая неделя — приглашает кого-то / интегрирует.
Дизайнь под каждую вешку отдельно.
Реализация в прототипе
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 => mark('firstVisit')} />}
{!seen.composer && hasOpenedComposer && <ComposerHint => 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», Метрики (для тех кто меряет), Антипаттерны.