Как исправить анимационное видео, которое кажется слишком быстрым или медленным

Обложка в технике масляной живописи с названием статьи и официальной иллюстрацией ритма IBM: контурные объекты из примера поэтапной анимации

Видео может длиться двадцать секунд и казаться бесконечным. Другое длится минуту, а вам хочется, чтобы оно замедлилось. Хронометраж мало объясняет и то и другое впечатление. Важно, сколько работы должен проделать зритель до следующего события.

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

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

Найдите момент, в котором понимание начинает отставать

Рассмотрим вымышленную демонстрацию приложения для учета расходов. Поступает чек, приложение извлекает сумму, кто-то выбирает проект, отчет обновляется. Первая версия отводит каждому событию две секунды. В раскадровке все выглядит упорядоченно. При воспроизведении чек кажется показанным слишком быстро, а финальная панель — странно медленно.

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

Посмотрите последовательность один раз без пауз. Отметьте самый ранний момент, в котором теряете основную мысль. Не пишите «перегружено». Запишите, что вы пытались понять: какой чек, какой проект, что изменилось или почему сумма важна. Это разные проблемы с разными решениями.

Затем попросите коллегу, незнакомого с работой, описать этот фрагмент. Зритель, который говорит «что-то обработали», понял меньше, чем тот, кто говорит «чек отнесли к клиентскому проекту». Не подсказывайте ответ перед проверкой. Согласие после объяснения доказывает, что помогло объяснение, а не что сработало видео.

Диагностируйте темп видео по четырем видам времени

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

Эти процессы перекрываются, но не заменяют друг друга. Панель может останавливаться полсекунды, пока ее подпись уже читаема. Абзац может формально оставаться видимым, хотя вращение камеры делает чтение непрактичным. Результат может распознаваться сразу, но требовать еще мгновения, чтобы стала понятна связь с предыдущим состоянием.

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

В примере с расходами предположим, что извлеченная сумма появляется на 4.0 секунды, заканчивает масштабирование на 4.7 и заменяется на 5.2. На экране она была 1.2 секунды, но неподвижной — лишь полсекунды. Если сделать появление длиннее ради изящества, полезный интервал сократится еще сильнее, если не сдвинуть следующее событие.

Что IBM прямо говорит о ритме

Опубликованные рекомендации IBM по анимации связывают ритм с последовательным вступлением действий, причинно-следственными связями и покоем. Также они рекомендуют менее размашистое движение в визуально плотной композиции. Это важные различия: перегруженный экран не становится понятнее только потому, что все движется медленнее. Иногда правильная правка — двигать меньше объектов. IBM Design Language: советы и приемы

Официальная иллюстрация ритма IBM с поэтапной последовательностью движения

В продуктовом видео это означает, что фоновые карточки могут оставаться неподвижными, пока обрабатывается один чек. Извлеченная сумма может появиться до изменения отчета. Финальный результат может задержаться без декоративных частиц, постоянно требующих нового взгляда. Дизайн выстраивает временную иерархию, соответствующую иерархии сообщения.

Исправляйте быстрые фрагменты, не замедляя все подряд

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

Дайте сумме одно ясное появление. Оставьте ее на том же месте, пока происходит назначение проекта. Затем переведите внимание на итоговый отчет. Повторение положения или цвета суммы может сохранить непрерывность, но только если связь настоящая. Декоративное совпадение цветов не заменяет показ изменившегося значения.

Другой вариант — убрать одно открытие. Если зрителю нужно знать лишь, что утвержденные чеки попадают в отчет, ему, возможно, не нужен выбор проекта. Начните с уже назначенного чека и покажите, как утверждение создает запись в отчете. Утверждение станет уже, зато сцена — связнее.

Не убирайте существенные условия. Если автоматизация действует только для утвержденных чеков, скрытое состояние утверждения преувеличит возможности продукта. Более быстрый рассказ должен сокращать незначимые операции, сохраняя условия, благодаря которым показанный результат правдив.

Исправляйте медленные фрагменты, убирая лишнее время

Медленные фрагменты не всегда длинные. Часто они предсказуемые. Заголовок въезжает, останавливается, ждет, затем с тем же ритмом въезжает подзаголовок. Прочитав первую строку, зритель проводит остаток последовательности в ожидании информации, которую уже понимает.

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

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

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

Планируйте от важного стабильного интервала назад

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

Для вымышленной двенадцатисекундной сцены утверждения можно отвести секунды с 5 по 8 на стабильное сравнение состояний «awaiting review» и «approved». Затем спроектировать предшествующие щелчок и смену состояния так, чтобы оба оставались понятными.

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

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

Переместите условие, а не всю сцену

Наша шестисекундная анимация вымышленного годового тарифа наглядно показывает исправление времени. В обеих версиях указано US$29 в месяц. В первой строка о годовой оплате начинает появляться на 3.8 секунды и заканчивает как раз тогда, когда на 4.8 сцена начинает уходить. У цены достаточно времени; у полного предложения нет общего стабильного интервала.

Два реальных снимка клиента на 2.4 секунды: слева только месячная цена, справа цена и годовая оплата вместе

В исправленной версии годовая строка появляется вместе с ценой. В тот же момент 2.4 секунды зритель может прочитать US$348 billed annually рядом с месячным эквивалентом. Обе версии по-прежнему длятся шесть секунд. Исправленное предложение устанавливается на 0.8 секунды и остается неподвижным до 4.8, создавая четырехсекундный интервал для полного утверждения.

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

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

Используйте звук как сигнал, затем проверьте без него

Музыка может скрывать слабый темп. Последовательность под ровный ритм может нравиться, даже если информация поступает неравномерно. И наоборот, понятная демонстрация продукта может казаться неловкой на фоне дорожки, в которой фразы меняются не в тех местах.

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

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

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

Сделайте две правки с разными гипотезами

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

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

Покажите каждую версию один раз в вероятном размере просмотра. Задайте один конкретный вопрос: «Что изменилось после утверждения?» Запишите ответ, прежде чем спрашивать, какая версия понравилась больше. Изящной последовательности, сообщающей неверный результат, нужна новая правка независимо от предпочтений.

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

Читайте временную шкалу как цепочку зависимостей

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

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

Запрашивая правку, описывайте эти связи. «Сохраните извлеченную сумму неподвижной, пока чек назначается проекту; покажите запись в отчете только после назначения; уберите фоновое движение во время результата». Это конкретнее, чем «сделайте темп премиальным». Также проще проверить, решена ли проблема.

Иногда предвосхищение намеренно. Быстрый взгляд на результат может вызвать любопытство до объяснения. Пусть это будет осознанный сюжетный прием, и вернитесь к результату достаточно ясно, чтобы предварительный показ не превратился в вводящее в заблуждение обещание.

Поймите, когда проблема не в темпе

Если зритель не может понять снимок экрана на паузе, увеличение длительности вряд ли спасет его. Кадр может быть слишком широким, важное значение — мелким, текст — абстрактным. Исправьте композицию, прежде чем добавлять секунды.

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

Если аудитория уже знает процесс, вводное объяснение может казаться медленным, хотя необходимо новичкам. Это может оправдать отдельные версии. Обновление для клиентов и первое знакомство с продуктом не обязаны давать одинаковый объем контекста.

На полезной финальной проверке задают три вопроса. Можно ли без поисков определить важный предмет? Можно ли понять значимое изменение до переноса внимания? Помогает ли каждая оставшаяся секунда распознавать, читать, связывать или предвидеть? Когда ответы убедительны, у темпа есть основание. Можно перестать гнаться за произвольным ощущением скорости и дать каждой мысли заслуженное время.