Статьи

Рекомендации по выбору времени анимации

В 1991 году был один веб-сайт на пять миллиардов человек. Сегодня один веб-сайт приходится на каждого седьмого человека в мире. Активное распространение интернета на протяжении 25 лет создало для человечества постоянно расширяющийся словарь взаимодействия человека и компьютера. Мне было интересно понять, почему несмотря на вездесущность всемирной паутины, склонность человека к копированию и простоту цифрового воспроизведения, существует различный пользовательский опыт? И почему качественный дизайн всегда воспринимается правильно? Например, взять два приложения с примерно одинаковым интерфейсом. Что же заставляет пользователей остановить свой выбор на одном из них?

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

В Airbnb и Yoox меню имеют схожий эффект, но из-за выбора времени ощущаются по-разному. Меню Airbnb появляется мгновенно, Yoox — вяло.

Визуализация опасности

Человек — это результат нескольких сотен тысяч лет эволюции. Наше существование как вида защищено наличием способности распознавать опасность. Зрение является одной из определяющих способностей для того, чтобы чувствовать себя в безопасности. А такие визуальные свойства, как контрастность, масштаб, движение и положение позволяют лучше прочувствовать, что именно нас окружает. Понимание времени — т.е., сколько времени занимает изменение визуальных свойств, — помогает нам выделить элементы, являющиеся неестественными для нашей среды. Представьте, как вы прогуливаетесь по лесу и слышите шорохи вокруг. Мы развились, чтобы замечать изменения (например, движение), время которых не соответствует нашим ожиданиям и которые воспринимаются как потенциально опасные. Поэтому услышанные шорохи в любом случае вызовут у нас беспокойство, вне зависимости от того, чем они вызваны: каким-то хищником или просто порывом ветра.

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

Шар на экране не ограничен теми же свойствами, что и реальный шар.

Замысел дизайнера

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

Удивительно, что несмотря на огромные различия в стиле и функциональности, такие приложения как Gmail, Airbnb и Dropbox, являются сравнимыми по эффективности. После проведения многочисленных тестирований разработчики определили такую длительность анимации, которая будет хорошо восприниматься сотнями миллионов людей. Мы же опираемся на зрительный процесс человека, чтобы объяснить применимость этого опыта.

Путешествие изображения

Путешествие от картинки к мысли — это линейный путь, состоящий из таких феноменов, как внимание и осознание.

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

Внимание подсознательно. Мозг предотвращает перегрузку стимула, игнорируя определенные вещи. Видеоряд должен вызвать сигналы, которые мы выявили в процессе — такие как контраст, масштаб, положение и повторение, создающие больше шансов быть замеченными. Все это происходит в первые 60-80 мс. Как только появляется визуальный сигнал, он попадает в фазу осознания. Здесь происходит распознавание образов и сопоставление их с потребностями и целями. Тем не менее, событие еще не достигло сознания. Вы можете быть в курсе вещей, но еще не знать об этом. Осознание наступает через 150-200 мс. Для того, чтобы событие оказалось в сознании, 150-200 мс затрачивается на то, чтобы заметить его и понять.1

Границы человеческого познания

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

Ожидание игры

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

Человек смещает взгляд около трёх раз в секунду. Люди и большинство животных оценивают окружающую среду мысленно глазами, как бы рисуя карту. Так как мы биологически запрограммированы избегать опасности, у нас нет осознанного контроля над скоростью и частотой движения глаз. Глаз движется так быстро, как это возможно. И каждая фиксация занимает около 350 мс2. Невероятно, что всего за 1/3 секунды человек замечает и понимает стимулы, осознавая контекст, а затем делает это снова и снова.

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

Управление восприятием

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

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

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

Заключение

Программное обеспечение состоит из бесчисленных взаимодействий и анимации. Те, что «воспринимаются правильно», обладают оптимальным балансом скорости, понятности и уверенности. Идеальное время анимации — это не точное число, а диапазон, который состоит из биохимических и психологических факторов различных слоев населения. Конечно, каждый случай имеет свои сложности, но пусть диапазон 150-350 мс будет служить ориентиром при выборе времени анимации для вашего продукта.

См. также