Коротко
Зачем сервису видеоинструкция вместо текста?
Zaletai - мой сервис трендвотчинга вертикальных видео: он находит ролики, которые залетели выше нормы своего автора, и разбирает, почему. Первый вход в такой сервис - момент, когда человек решает, остаться или уйти. В окне «Как пользоваться» четыре шага, и раньше на каждом стояла картинка с подписью.
Картинка объясняет, что есть на экране. Ролик объясняет, что с этим делать. Поэтому я заменил иллюстрации на короткие ролики, по одному на шаг, и отдельно собрал общий ролик на все шаги сразу, на две с лишним минуты.
Собирал их не руками: ролики делает мой видеоконтент-завод, конвейер, где ИИ-агент собирает ролик из сценария, скриншотов и озвучки. Как устроена озвучка в таких роликах, я разбирал в статье озвучка ролика нейросетью.
Шаги берутся с живого экрана, а не из памяти
На этом я чуть не ошибся. Шаги онбординга я собирался взять из окна «Как пользоваться Zaletai», а в моей рабочей копии проекта этого окна не оказалось. Первая мысль была - экрана не существует, придётся придумывать шаги самому. Оказалось, рабочая копия отстала от основной ветки продукта на 123 изменения, а окно появилось там накануне.
Вывод простой: факты о продукте брать из последней версии, а не из ближайшей копии. Если ролики делает агент, ему так и надо поставить задачу: сначала обнови код до последней версии, потом читай экран. Это занимает секунды и защищает от инструкции к несуществующему интерфейсу.
Второй урок того же дня: тексты на кнопках и в подсказках продукта лучше переносить в сценарий дословно. Пользователь сверяет ролик с экраном, и если в ролике «Начать разбор», а на кнопке «Разобрать», он спотыкается.
Какой формат ролика выбрать для окна инструкции?
| Параметр | Что я выбрал | Почему |
|---|---|---|
| Формат кадра | Квадрат 720 на 720 точек | Помещается в окно на любом экране, текст на кадре читается |
| Длина ролика на шаг | 27-44 секунды | Одно действие и его результат, без лишнего |
| Общий ролик на все шаги | 141 секунда | Для тех, кто хочет посмотреть всё разом |
| Вес файла | 0,5-1,7 мегабайта | Окно открывается сразу, без ожидания загрузки |
| Субтитры | Вшиты в ролик | Понятно и без звука |
Для своего завода я завёл второй формат кадра рядом с вертикальным: квадрат с рамкой длительности от 15 секунд до двух с половиной минут. Вертикальные ролики для ленты по-прежнему держу в рамке 45-60 секунд.
Важная деталь для окна: ролик загружается только тогда, когда пользователь дошёл до его шага. При листании прошлый ролик останавливается, следующий подгружается. Иначе окно грузит сразу все ролики и открывается медленно, особенно на мобильном интернете.
Звук по умолчанию: почему браузер решает за тебя
Первая версия при сборке получилась без звука по умолчанию: так казалось надёжнее, и меня об этом не спросили. Я её развернул: человек может не понять, что звук вообще есть. Значок перечёркнутого динамика без подписи не сообщает, что у ролика есть голос, который объясняет шаг.
Итоговая логика получилась такой:
- Ролик пытается играть со звуком.
- Если браузер не пускает, ролик играет без звука, а поверх стоит кнопка с текстом «Включить звук».
- На следующем шаге ролик снова пробует запуститься со звуком: к этому моменту человек уже нажимал кнопки, и браузер обычно разрешает.
Правила автозапуска описаны в документации для разработчиков браузеров. Если ролики в продукт ставит агент, ему стоит сразу сказать: «предусмотри блокировку звука браузером», иначе он сделает вариант, который работает только у того, кто уже кликал по странице.
Как проверить ролик в окне до выкладки?
Первая версия окна выглядела хорошо на моём экране и сломалась в трёх местах:
- Ролик не помещался в окно. Размер считался по ширине, без учёта высоты: на экране ноутбука ролик высотой 812 точек вылезал за окно на 44 точки.
- Кнопка звука закрывала субтитры. Она стояла внизу кадра, ровно там, где идут вшитые субтитры.
- Повтор с конца не перезапускал ролик. В одном из браузеров после окончания ролик стоял на последнем кадре.
Всё это видно только в живом браузере.
Поэтому любую правку интерфейса, которую делает агент, я принимаю по превью, а не по его отчёту: так же проверял и сайт, собранный из презентации компании.
На телефоне отдельно смотрю, не уезжает ли окно под адресную строку и не нужно ли прокручивать, чтобы увидеть кнопку «Дальше». Отдельная ловушка: если браузер свёрнут или вкладка скрыта, он ставит видео на паузу, и кажется, что ролики сломаны. Мы однажды чуть не начали чинить несуществующую ошибку именно так. Проверять надо в видимом окне.
Пролистать все шаги на ноутбуке и телефоне. Убедиться, что ролик целиком в окне. Проверить, что кнопки не закрывают субтитры. Досмотреть ролик до конца и запустить снова. Открыть окно в новом браузере без кликов и проверить кнопку звука.
Что делать с экранами, которых гость не видит?
В Zaletai экраны разбора и сценария гостю недоступны, а ролики собирались с гостевого входа. Поэтому шаги 2-4 в роликах показаны схемами, а живой экран есть только на первом шаге. Заодно в кадр не попадает ничего из чужих кабинетов.
Схема имеет ещё одно преимущество: она меньше устаревает. Если в интерфейсе передвинули кнопку, ролик со схемой остаётся верным, а ролик с живым экраном придётся переснимать. Как держать инструкции свежими, когда интерфейс меняется каждый месяц, я разбирал в статье инструкция устарела за месяц.
Частые вопросы
Частые вопросы
Главный вывод
Самые дорогие ошибки здесь не про монтаж, а про проверку: устаревшая копия продукта и решение о звуке без вопроса к тому, кто будет смотреть.
Практический шаг: открой свой сервис в новом окне браузера глазами нового пользователя и запиши, на каком шаге хочется закрыть вкладку. Это первый кандидат на ролик.
Какой шаг в твоём продукте новые пользователи чаще всего не понимают с первого раза?