Как записать демо браузерного расширения, после которого хочется его установить

Браузерные расширения трудно показывать. Весь продукт живёт в попапе шириной 300 пикселей, в иконке на панели инструментов размером 16 пикселей и в нескольких изменениях на странице, которую сделал кто-то другой. Нет окна приложения, которым можно похвастаться, нет заставки, нет дашборда. И всё же демо-видео часто оказывается единственным, что стоит между любопытным посетителем и установкой.

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

Чем демо расширения отличается

Почти все советы по записи экрана исходят из того, что продукт занимает всё окно. Расширение — нет. Это меняет четыре вещи:

• Ваш интерфейс крошечный: попапы, бейджи и контекстные меню занимают малую долю кадра, при обычной компоновке их просто не видно
• Сцена — чужая страница: зритель должен узнать сайт, который вы улучшаете, прежде чем сможет увидеть, что именно изменилось
• Ценность — это разница: вы показываете не функцию, а страницу, которая стала лучше
• Установка — часть продукта: запрос разрешений и закрепление иконки — первое, с чем сталкивается новый пользователь, и именно здесь люди отваливаются

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

Сначала создайте чистый профиль для демо

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

• Освободите панель инструментов: каждая посторонняя иконка расширения конкурирует с вашей. Удалите или скройте все
• Закрепите только своё расширение: единственная иконка на пустой панели не оставляет места для путаницы
• Выйдите из личных аккаунтов: аватары, имена и адреса почты попадают в удивительно много кадров
• Уберите закладки и панель закладок: или замените их нейтральными, безопасными для показа
• Сбросьте страницу новой вкладки: по умолчанию она часто показывает историю просмотров в виде миниатюр
• Отключите посторонние уведомления: и в браузере, и в системе
• Выставьте разумный масштаб: 100 % масштаба страницы и размер окна под соотношение сторон экспорта

Настройте это один раз и сохраните профиль. Каждая следующая запись начнётся из того же чистого состояния, а ваши видео будут смотреться единой серией.

Выберите правильный режим захвата

Разумных вариантов три, и выбор зависит от того, важен ли интерфейс браузера.

• Захват окна: вариант по умолчанию для расширений. Видна панель инструментов, где живут ваша иконка и бейдж, а рабочий стол и док остаются скрытыми
• Захват области: хорош для плотного кадра с попапом и той частью страницы, на которую он влияет. Удобно для коротких клипов в соцсети, но панель инструментов обрезается и теряется понимание, где находится ваш интерфейс
• Полный экран: только когда нужно показать что-то за пределами браузера — системный диалог выбора файла, запрос разрешения ОС или другое приложение

Для большинства демо записывайте окно браузера в размере, близком к 16:9, а крупные планы делайте зумом в редакторе, а не переключением режима захвата посреди видео.

Честно покажите установку

Соблазнительно пропустить установку и сразу перейти к работающему расширению. Хотя бы в одном видео сделайте наоборот. Новые пользователи беспокоятся о разрешениях, и спокойно пройденный диалог успокаивает.

• Начните со страницы в магазине или кнопки установки: тот самый путь, по которому идёт реальный пользователь
• Не прячьте диалог разрешений: дайте ему появиться и одним предложением объясните, зачем оно нужно. «Ему нужен доступ к этому сайту, потому что он читает цены на странице» отвечает на вопрос до того, как он превратится в сомнение
• Покажите закрепление иконки: многие устанавливают расширение и потом не могут его найти. Десять секунд на закрепление избавят вас от множества обращений в поддержку
• Используйте свежий профиль, чтобы сценарий был настоящим: уже выданное разрешение молча пропускает диалог, и видео начинает вводить в заблуждение

Если вам нужен ещё и короткий клип только про функцию, вырежьте его отдельно из той же записи, а не портите полное прохождение.

Сделайте крошечный интерфейс читаемым

Здесь демо расширения выигрывается или проигрывается. Попап мал на вашем мониторе и микроскопичен на телефоне.

• Зум при каждом открытии попапа: приближение к попапу на всё время, пока он открыт, — самая полезная правка в видео о расширении
• Зум на иконку, когда меняется бейдж: число, меняющееся с 0 на 12, бессмысленно, если его никто не может прочитать
• Подсвечивайте курсор: иначе клик по иконке в 16 пикселей просто не видно. Подсветка курсора и эффекты клика точно указывают, где произошло взаимодействие
• Замрите после открытия попапа: дайте ему целую секунду до движения мыши. Движение на мелком интерфейсе после сжатия читается как размытие
• Для подписей, которые нельзя увеличить, используйте текстовые наложения: короткая подпись лучше, чем всматриваться в шрифт 10 пикселей
• Не полагайтесь на всплывающие подсказки: они мелкие, медленные и часто вообще не попадают в запись. Лучше произнесите подпись голосом

Постройте видео как «до и после»

Расширения улучшают уже существующий опыт, поэтому начните с боли.

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

Одинаковая компоновка в шагах 1 и 3 делает за вас много работы: взгляд сравнивает два кадра напрямую, а не пытается вспомнить, как страница выглядела минуту назад.

Настройки записи и экспорта

• 30 fps более чем достаточно для взаимодействий со страницей и интерфейса попапа: текст остаётся резким, а файлы небольшими
• Записывайте в нативном разрешении и обрезайте или приближайте в редакторе, а не записывайте мелко и растягивайте
• Не меняйте размер окна браузера: изменение размера во время записи переформатирует страницу и ломает ключевые кадры зума
• Записывайте системный звук, если расширение издаёт звуки, иначе только микрофон
• Экспортируйте 1080p для веба и подумайте о вертикальной обрезке лучших 20 секунд

Чек-лист перед записью

[ ] Активен демо-профиль браузера, остальные расширения скрыты
[ ] На панели закреплено только ваше расширение
[ ] Выполнен выход из личных аккаунтов, новая вкладка очищена
[ ] Демо-данные подготовлены на целевой странице
[ ] Масштаб страницы 100 %, окно под соотношение экспорта
[ ] Разрешения ещё не выданы, если показываете установку
[ ] Уведомления выключены, бейджи уведомлений очищены
[ ] Десятисекундная тестовая запись проверена в размере телефона

Частые ошибки

• Демо в браузере с пятнадцатью другими расширениями: никто не поймёт, какая иконка ваша
• Ни одного зума: самая частая причина неудачных видео о расширениях
• Вырезанный запрос разрешений: выглядит так, будто вы что-то скрываете
• Настоящий аккаунт с активной сессией: личные данные утекают в кадры, которые вы не станете внимательно пересматривать
• Объяснять попап, двигая мышью: сначала одно, потом другое
• Забыть про контекст страницы: зрителю нужно понять, что это за сайт, прежде чем ему станет важно, что изменилось

Заключение

Демо расширения должно за две минуты сделать две вещи: показать, что установка безопасна и проста, и сделать так, чтобы маленький фрагмент интерфейса ощущался значимым. С первым справляется чистый профиль. Со вторым — зум, подсветка курсора и плотная структура «до и после». Записывайте окно браузера, держите кадр неподвижным, приближайте каждый попап — и пусть преобразившаяся страница сама всё докажет.