Как сделать тур по сайту для новых пользователей: пошаговая инструкция

Что такое тур по сайту

Тур — это пошаговый гайд по интерфейсу: подсветка конкретного элемента на странице, карточка с текстом рядом с ним, и кнопки "Далее" / "Пропустить" для навигации между шагами. В отличие от подсказки которая объясняет один элемент, тур ведёт пользователя через последовательность из нескольких элементов или действий.

Тур идеально подходит для нескольких задач: первый вход в продукт (онбординг новых пользователей к ключевому действию), запуск новой крупной функции (когда нужно объяснить несколько связанных элементов нового интерфейса), демонстрация сложного workflow (если правильное использование продукта требует понимания последовательности из нескольких шагов).

Шаг 1: определите цель тура — одно конкретное действие

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

Перед тем как открывать конструктор, ответьте: после прохождения этого тура пользователь должен сделать что? Если ответ — "познакомиться с интерфейсом" — это неправильная цель, слишком абстрактная. Если ответ — "создать первый проект" или "настроить первую интеграцию" — это правильная конкретная цель.

Шаг 2: спланируйте последовательность шагов

Оптимальная длина тура — 3–5 шагов. Каждый шаг должен вести к следующему логично, без пропусков в логике пользователя.

Рекомендуемая структура: первый шаг — контекст и обещание результата ("Сейчас создадим ваш первый проект — займёт 2 минуты"), средние шаги — конкретные действия которые непосредственно ведут к цели, последний шаг — подтверждение результата и указание что делать дальше.

Важно: каждый шаг тура должен быть привязан к реальному, видимому в данный момент элементу интерфейса. Если элемент шага 3 появляется только после выполнения шага 2 (например, кнопка появляется после заполнения формы) — это нормально и ожидаемо, конструктор должен это учитывать.

Шаг 3: привяжите шаги к элементам через Picker

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

Инструмент привязки (Picker) позволяет выбирать элементы прямо на живом сайте, без необходимости находить и копировать CSS-селекторы вручную. Самый удобный способ работы — через специальное браузерное расширение, которое даёт доступ к конструктору тура напрямую на вашем продакшен-сайте (или staging-окружении), позволяя кликнуть на нужный элемент и сразу привязать к нему шаг.

Это решает критическую проблему привязки к координатам: если дизайн сайта изменится (переставятся элементы, изменится верстка) — привязка к самому элементу останется корректной, в отличие от привязки к пиксельным координатам которая сломается при любом изменении интерфейса.

Шаг 4: напишите текст для каждого шага

Текст каждого шага тура должен отвечать на два вопроса: что нужно сделать и зачем.

Заголовок шага — формулировка действия, не название элемента. "Создайте первый проект" лучше чем "Кнопка создания проекта".

Описание — одно-два предложения с обещанием результата. "Нажмите эту кнопку — через минуту у вас будет первое рабочее пространство для команды."

Финальный шаг отличается от остальных — он должен поздравить с завершением и явно указать следующее действие после тура: "Готово! Теперь пригласите коллегу чтобы начать работать вместе."

Шаг 5: настройте триггер запуска тура

Когда тур должен появляться — критически важная настройка, влияющая на completion rate.

Хороший триггер: автоматический запуск при первом входе нового пользователя (наиболее частый сценарий для онбординг-туров), запуск при первом переходе в конкретный раздел (для туров про конкретную функцию, не для общего онбординга), запуск по конкретному событию переданному из кода продукта (например, после завершения регистрации).

Важно настроить условие "не показывать повторно тем кто уже видел тур" — иначе пользователи которые прошли тур однажды будут видеть его снова при каждом входе, что создаёт раздражение.

Шаг 6: настройте сегментацию

Если тур релевантен не всем пользователям одинаково — настройте показ только нужному сегменту через раздел "Аудитория". Условия сегментов строятся на основе атрибутов, переданных при идентификации пользователя в коде продукта.

Типичный пример: тур про продвинутую аналитику показывать только пользователям тарифа Pro которые уже выполнили базовые действия онбординга — нет смысла показывать продвинутый тур пользователю который ещё не сделал первый шаг.

Шаг 7: проверьте на реальном сайте перед публикацией

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

После проверки переключите статус с "Черновик" на "Активен".

Шаг 8: анализируйте прохождение и итерируйте

Раздел аналитики после запуска показывает: completion rate (доля дошедших до конца), drop-off по каждому шагу (на каком именно шаге уходит больше всего пользователей), среднее время прохождения тура.

Если drop-off высокий на конкретном шаге — это сигнал что либо текст этого шага непонятен, либо привязанный элемент сложно найти на экране, либо требуемое действие создаёт трудность для пользователя. Переписывайте этот шаг и смотрите изменилась ли цифра.