# Видеоинструкция к сервису: короткие ролики в окне знакомства вместо текста

Видеоинструкция для пользователей сервиса: зачем ролик на каждый шаг, какой формат выбрать для окна, как обойти блокировку звука браузером и что проверить.

URL: https://posts.danashkin.ru/guides/videoinstrukciya-k-servisu
Обновлено: 2026-10-15

---

## Коротко

**Главное**

- Короткий ролик на каждый шаг объясняет сервис быстрее абзаца текста. Я поставил такие ролики в окно «Как пользоваться» своего сервиса Zaletai: четыре квадратных ролика по 27-44 секунды, по одному на шаг.
- Шаги инструкции надо брать с живого экрана продукта, а не по памяти. Я чуть не снял ролик про экран, которого, как мне казалось, не существовало: моя рабочая копия отставала от продукта.
- Для окна внутри сервиса удобнее квадрат, а не вертикаль: он помещается в окно на любом экране. Вес ролика держи до 1-2 мегабайт.
- Браузер сам решает, играть ли ролик со звуком: без нажатий на странице звук блокируется. Значит, нужна подписанная кнопка «Включить звук», а не значок перечёркнутого динамика.

## Зачем сервису видеоинструкция вместо текста?

**Главное**

Новый пользователь не читает инструкции, он смотрит на экран и решает, понятно ли ему. Ролик на полминуты показывает действие: куда нажать и что получится. Текст это только описывает. В окне знакомства с сервисом видео сокращает путь от «зашёл» до «понял, что делать».

Zaletai - мой [сервис трендвотчинга вертикальных видео](/guides/zaletai-trendvotching-vertikalnyh-video): он находит ролики, которые залетели выше нормы своего автора, и разбирает, почему. Первый вход в такой сервис - момент, когда человек решает, остаться или уйти. В окне «Как пользоваться» четыре шага, и раньше на каждом стояла картинка с подписью.

Картинка объясняет, что есть на экране. Ролик объясняет, что с этим делать. Поэтому я заменил иллюстрации на короткие ролики, по одному на шаг, и отдельно собрал общий ролик на все шаги сразу, на две с лишним минуты.

Собирал их не руками: ролики делает мой видеоконтент-завод, конвейер, где [ИИ-агент](/concepts/ai-agent) собирает ролик из сценария, скриншотов и озвучки. Как устроена озвучка в таких роликах, я разбирал в статье [озвучка ролика нейросетью](/guides/ozvuchka-rolika-neyrosetyu).

## Шаги берутся с живого экрана, а не из памяти

**Главное**

Сценарий видеоинструкции пишется по тому, что сейчас видит пользователь в продукте, а не по тому, что помнит автор. Продукт меняется быстрее памяти. Лучший источник - сам экран в последней версии продукта и тексты, которые на нём стоят.

На этом я чуть не ошибся. Шаги онбординга я собирался взять из окна «Как пользоваться Zaletai», а в моей рабочей копии проекта этого окна не оказалось. Первая мысль была - экрана не существует, придётся придумывать шаги самому. Оказалось, рабочая копия отстала от основной ветки продукта на 123 изменения, а окно появилось там накануне.

Вывод простой: факты о продукте брать из последней версии, а не из ближайшей копии. Если ролики делает агент, ему так и надо поставить задачу: сначала обнови код до последней версии, потом читай экран. Это занимает секунды и защищает от инструкции к несуществующему интерфейсу.

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

## Какой формат ролика выбрать для окна инструкции?

**Главное**

Для окна внутри сервиса - квадрат: он целиком помещается в модальное окно и на ноутбуке, и на телефоне. Вертикаль хороша для ленты соцсетей, но в окне сервиса либо обрезается, либо становится мелкой. Длина - около полуминуты на шаг, вес - до 1-2 мегабайт.

| Параметр | Что я выбрал | Почему |
|---|---|---|
| Формат кадра | Квадрат 720 на 720 точек | Помещается в окно на любом экране, текст на кадре читается |
| Длина ролика на шаг | 27-44 секунды | Одно действие и его результат, без лишнего |
| Общий ролик на все шаги | 141 секунда | Для тех, кто хочет посмотреть всё разом |
| Вес файла | 0,5-1,7 мегабайта | Окно открывается сразу, без ожидания загрузки |
| Субтитры | Вшиты в ролик | Понятно и без звука |

Для своего завода я завёл второй формат кадра рядом с вертикальным: квадрат с рамкой длительности от 15 секунд до двух с половиной минут. Вертикальные ролики для ленты по-прежнему держу в рамке 45-60 секунд.

Важная деталь для окна: ролик загружается только тогда, когда пользователь дошёл до его шага. При листании прошлый ролик останавливается, следующий подгружается. Иначе окно грузит сразу все ролики и открывается медленно, особенно на мобильном интернете.

## Звук по умолчанию: почему браузер решает за тебя

**Главное**

Браузеры разрешают автоматически запускать видео без звука всегда, а со звуком - только если человек уже взаимодействовал со страницей: нажал, кликнул. Если окно инструкции открылось само, ролик со звуком браузер заблокирует. Нужен запасной вариант: игра без звука и подписанная кнопка «Включить звук».

Первая версия при сборке получилась без звука по умолчанию: так казалось надёжнее, и меня об этом не спросили. Я её развернул: человек может не понять, что звук вообще есть. Значок перечёркнутого динамика без подписи не сообщает, что у ролика есть голос, который объясняет шаг.

Итоговая логика получилась такой:

1. Ролик пытается играть со звуком.
2. Если браузер не пускает, ролик играет без звука, а поверх стоит кнопка с текстом «Включить звук».
3. На следующем шаге ролик снова пробует запуститься со звуком: к этому моменту человек уже нажимал кнопки, и браузер обычно разрешает.

Правила автозапуска описаны в документации для разработчиков браузеров. Если ролики в продукт ставит агент, ему стоит сразу сказать: «предусмотри блокировку звука браузером», иначе он сделает вариант, который работает только у того, кто уже кликал по странице.

## Как проверить ролик в окне до выкладки?

**Главное**

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

Первая версия окна выглядела хорошо на моём экране и сломалась в трёх местах:

- **Ролик не помещался в окно.** Размер считался по ширине, без учёта высоты: на экране ноутбука ролик высотой 812 точек вылезал за окно на 44 точки.
- **Кнопка звука закрывала субтитры.** Она стояла внизу кадра, ровно там, где идут вшитые субтитры.
- **Повтор с конца не перезапускал ролик.** В одном из браузеров после окончания ролик стоял на последнем кадре.

Всё это видно только в живом браузере.

Поэтому любую правку интерфейса, которую делает агент, я принимаю по превью, а не по его отчёту: так же проверял и [сайт, собранный из презентации компании](/guides/sayt-iz-prezentacii-kompanii).

На телефоне отдельно смотрю, не уезжает ли окно под адресную строку и не нужно ли прокручивать, чтобы увидеть кнопку «Дальше». Отдельная ловушка: если браузер свёрнут или вкладка скрыта, он ставит видео на паузу, и кажется, что ролики сломаны. Мы однажды чуть не начали чинить несуществующую ошибку именно так. Проверять надо в видимом окне.

**Проверочный список окна с роликами**

Пролистать все шаги на ноутбуке и телефоне. Убедиться, что ролик целиком в окне. Проверить, что кнопки не закрывают субтитры. Досмотреть ролик до конца и запустить снова. Открыть окно в новом браузере без кликов и проверить кнопку звука.

## Что делать с экранами, которых гость не видит?

**Главное**

Часть экранов сервиса доступна только после входа или оплаты, и снять их из гостевого режима нельзя. Тогда шаг показывают схемой: упрощённым рисунком того, что увидит пользователь, с подписями. Это честнее, чем выдуманный экран, и проще в поддержке.

В Zaletai экраны разбора и сценария гостю недоступны, а ролики собирались с гостевого входа. Поэтому шаги 2-4 в роликах показаны схемами, а живой экран есть только на первом шаге. Заодно в кадр не попадает ничего из чужих кабинетов.

Схема имеет ещё одно преимущество: она меньше устаревает. Если в интерфейсе передвинули кнопку, ролик со схемой остаётся верным, а ролик с живым экраном придётся переснимать. Как держать инструкции свежими, когда интерфейс меняется каждый месяц, я разбирал в статье [инструкция устарела за месяц](/guides/instrukciya-ustarela-za-mesyac).

## Частые вопросы

**Главное**

Спрашивают, нужен ли голос в ролике-инструкции, делать ли ролики на другие языки, как часто их переснимать и где ещё такие ролики полезны, кроме окна знакомства с сервисом.

### Частые вопросы

**Нужен ли голос в ролике-инструкции?**

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

**Делать ли ролики на другие языки?**

Если сервис переведён, то со временем да. Пока ролики озвучены только по-русски, в других языковых версиях окна у меня остались иллюстрации. Лучше картинка на родном языке пользователя, чем ролик на чужом.

**Как часто переснимать ролики?**

Когда меняется действие, а не оформление. Новый цвет кнопки ролик не ломает, новый порядок шагов ломает. Сборка из сценария на заводе позволяет пересобрать ролик за минуты, если поменялась одна реплика.

**Где ещё полезны короткие ролики-инструкции?**

В справке по сложным функциям, в письмах новым пользователям и в ответах поддержки на частые вопросы. Один и тот же ролик на полминуты закрывает вопрос, на который иначе отвечают текстом десятки раз.

## Главный вывод

**Главное**

Короткие ролики по шагу в окне знакомства объясняют сервис быстрее текста. Работают они, когда шаги сняты с живого экрана последней версии продукта, формат подходит окну, а не ленте, звук учитывает правила браузера и подписан, а окно проверено в живом браузере на двух экранах.

Самые дорогие ошибки здесь не про монтаж, а про проверку: устаревшая копия продукта и решение о звуке без вопроса к тому, кто будет смотреть.

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

Какой шаг в твоём продукте новые пользователи чаще всего не понимают с первого раза?

### Источники

- [Autoplay guide for media and Web Audio APIs - правила автозапуска видео со звуком, MDN](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay)
- [User onboarding - знакомство пользователя с продуктом, Wikipedia](https://en.wikipedia.org/wiki/User_onboarding)
- [Скринкастинг - видеозапись экрана для инструкций, Википедия](https://ru.wikipedia.org/wiki/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D0%BA%D0%B0%D1%81%D1%82%D0%B8%D0%BD%D0%B3)