Продуктовый тур — как собрать онбординг, после которого возвращаются

Продуктовый тур онбординг новых пользователей — это последовательность из 4–7 подсказок, которая ведет человека по интерфейсу к первому полезному действию. Хороший тур поднимает activation rate на 15–30% и сокращает Time-to-Value до одного визита. Сделать его можно за час в no-code конструкторе или за пару спринтов на Intro.js — выбор зависит от того, как часто меняется UI.

Чем продуктовый тур отличается от онбординга и чек-листа

Онбординг — общий зонтик: все, что помогает новому пользователю получить пользу от продукта. Продуктовый тур — один из паттернов внутри онбординга. Чек-лист — другой.

Тур работает в момент действия: пользователь открыл экран, увидел подсказку «Нажмите сюда, чтобы создать первый виджет», нажал, перешел к следующему шагу. Чек-лист, наоборот, висит в углу постоянно и показывает прогресс по 5–8 задачам — пользователь возвращается к нему сам, в своем темпе.

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

Когда продуктовый тур помогает, а когда мешает

Помогает:

• интерфейс новый или сильно отличается от привычных аналогов;
• первое полезное действие требует 3+ кликов в разных местах;
• есть конкретная метрика «доходит до X», которая сейчас плохая;
• продукт сложный для самостоятельного освоения за 5 минут.

Мешает:

• продукт похож на десятки других (CRM, лендинг-конструктор), пользователь хочет щелкать сам;
• в туре больше 8 шагов, drop-off становится больше пользы;
• запускается без возможности пропустить, раздражение и отписки;
• интерфейс часто перерисовывается, селекторы шагов ломаются на каждом релизе.

Из чего состоит хороший тур

Минимальный набор элементов:

• начальный поп-ап «Привет, давайте покажу основное» с кнопками «Поехали» и «Пропустить»;
• 4–6 тултипов на конкретные элементы интерфейса с подсветкой текущего фокуса;
• финальный экран с понятным следующим действием — не «Готово!», а «Создайте первый проект»;
• состояние «вернемся позже», если пользователь нажал «Пропустить», — чтобы тур можно было перезапустить из меню помощи.

Дополнительно — пустые состояния (empty states) на разделах, куда пользователь придет после тура, и чек-лист в углу для возврата.

Как спроектировать продуктовый тур за 5 шагов

Определите целевое действие. «Регистрация → ??? → возврат на 7 день». Что между? Для чата на сайте это «установить скрипт + получить первое сообщение». Для CRM — «создать сделку и провести по воронке».

Разложите путь на минимальные шаги. Каждый шаг = одна подсказка. Если шаг не помещается в 1–2 строки текста, дробите.

Напишите тексты в активном залоге. «Нажмите Создать, чтобы добавить первый виджет» — да. «Здесь вы можете создавать виджеты» — нет.

Добавьте кнопку «Пропустить» на каждом шаге. Принудительные туры роняют retention сильнее, чем отсутствие тура.

Соберите метрики до запуска. Без них тур — декорация.

Какие метрики смотреть

Activation rate — доля новых пользователей, дошедших до целевого действия за первые N дней. Базовая метрика, на которую тур влияет напрямую.

Time-to-Value (TTV) — сколько проходит от регистрации до первого полезного результата. Хороший тур сокращает TTV в 2–3 раза.

Tour completion rate — сколько пользователей дошло до последнего шага. Норма для тура из 5 шагов — 40–60%. Если падение между конкретными шагами больше 30%, шаг сломан или непонятен.

Feature adoption rate — какая доля пользователей, прошедших тур, использует целевую функцию через 7 дней. Это и есть отложенный эффект тура.

Как сделать продуктовый тур без разработчика на Нотифлоу

В кабинете «Виджеты → Создать → Тур». Дальше:

1. Назначьте триггер — обычно «первый вход за все время» или «не видел ранее этот тур».
2. Добавьте шаги: каждый шаг — селектор элемента + текст + действие при клике (next, custom URL).
3. Настройте подсветку текущего шага и затемнение остального интерфейса.
4. Включите кнопку «Пропустить» и сохраните прогресс — если пользователь закрыл вкладку на третьем шаге, при возврате тур стартует с третьего.
5. Опубликуйте.

Тур работает поверх вашего сайта без изменения его кода — Нотифлоу вставляется одним скриптом, остальное настраивается визуально.

Сравнение: свой код vs no-code конструктор

Intro.js, driver.js, Shepherd — open-source библиотеки. Подключаете JS+CSS, пишете JSON со шагами, подвязываете к роутингу. Плюс — полный контроль и нулевая стоимость рантайма. Минус — каждое изменение тура = задача разработчику и релиз. Если интерфейс продукта обновляется раз в 2 недели, тур быстро ломается на устаревших селекторах.

No-code конструктор (Нотифлоу и аналоги) — визуальный редактор, версионирование, A/B-тесты прямо из кабинета, аналитика по шагам. Плюс — продакт меняет тур без помощи разработки. Минус — стоимость подписки и зависимость от стороннего скрипта на сайте.

Простое правило выбора: если тур меняется реже раза в квартал — пишите свой. Чаще — берите конструктор.

Частые ошибки в туре

Тур сразу после регистрации, до того как пользователь увидел интерфейс. Дайте 3–5 секунд осмотреться.

Подсказки висят на скрытых элементах. Если шаг указывает на кнопку, которая появится только после действия — селектор не сработает, тур ломается посередине.

Тексты в стиле «Этот раздел позволяет управлять данными». Лучше — «Здесь создают сделки. Нажмите +, чтобы добавить первую».

Длина тура больше 8 шагов. Лучше один тур про основу + контекстные тултипы там, где нужно.

Часто задаваемые вопросы

Собрать продуктовый тур без разработчика можно в Нотифлоу — регистрация на cp.notiflow.ru. Чтобы тур работал в связке с другими механиками онбординга, посмотрите «Чек-лист онбординга в SaaS» и «Как повысить activation rate». Подробное описание виджета — страница «Продуктовые туры».