Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Руководство к таймингу в анимации

Руководство к таймингу в анимации

737

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

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

Мобильные меню Airbnb и YOOX имеют аналогичные эффекты, тем не менее, из-за времени они становятся совершенно разными. Меню Airbnb появляется быстро, а Yoox медленнее.

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

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

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

 

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

Цель дизайнера

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

Interaction Designer's Intent

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

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

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

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

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

Хотя цифровой носитель пренебрегает тем, что физически возможно, мы должны бороться с пределами человеческого познания – биомеханикой того, как мы видим, и думаем. Людям требуется минимальное количество времени, чтобы обработать и понять то, что они видят. Только потому, что дизайнеры могут мгновенно создать интерфейсы – не означает, что пользователи смогут заметить и понять то, что было передано. Чем больше времени пользователям требуется на понимание анимации, тем больше шансов, что она проникнет в сознание. Эффективность возникает при минимальном времени на понимание – от 150 мс.

Ожидание

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

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

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

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

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

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

Timing and perception

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

Вывод

Программное обеспечение состоит из бесчисленных взаимодействий и анимаций. Те, что “подходят”, воплощают оптимальный баланс скорости, понятности и уверенности. Идеальный тайминг в анимации отвечает за биомеханические и психологические факторы любых пользователей. В то время как каждый случай использования имеет свои собственные проблемы, пусть спектр от 150 до 350мс служит в качестве ориентира при расчете времени на анимацию вашего продукта.

Высоких конверсий!

 

 

 

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний