Лого vc.ru

Какова оптимальная длительность анимации интерфейса

Какова оптимальная длительность анимации интерфейса

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

ЦП публикует адаптированный перевод заметки.

Поделиться

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

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

Опасность визуализации

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

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

Баланс

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

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

От изображения к пониманию

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

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

Анимация должна обладать такими признаками, чтобы спровоцировать внимание человека. Здесь важно использовать такие элементы визуализации, как контраст, масштаб, перемещение и повторение, чтобы иметь больше шансов быть замеченным. Все это происходит в первые 60-80 мс.

После того, как мозг человека обратил внимание на объект, он попадает в фазу сознания. Это промежуток, в котором человек уже в курсе происходящего, но пока не знает этого. Осознание возникает через 100-150 мс. Таким образом, чтобы человек осознал происходящее, ему необходимо потратить 150-200 мс.

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

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

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

Движение глаз при изучении фотографии

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

Поэтому максимальная длина анимации не должна превышать 350 мс. По прошествии этого времени природа человека заставляет его перевести фокус на другой объект.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Невероятный вывод. Все кто делают и так понимают я-то примерно 200-300 и не больше на все.

Покажите траекторию движения глаз на фото с сиськами.

Никакая. Я готов ждать хоть 5 секунд, если вещь реально стоящая. Если говна кусок, то и 0,5 секунды— адская мука.
Пока комментарий писал, 31 раз отвлёкся на fb. СДВ, мать его!

0

Как понять в новом приложении, что это не говна кусок?

0

Так же, как смотря на кусок говна, понять, что это кусок говна.

Может нравится или нет. Остальное— попытка продать говно подороже.

0

Если не ошибаюсь, эффект Либерта говорит о том, что человек погружается в состояние потока, если отклик системы не превышает 340 мс. В этом была одна из основных задач в разработке компьютеров в конце 80-х. Достижение этой цифры привело к появлению игр и возможности просто работать с компьютером. Скорость реагирования безусловных рефлексов достигает 100–130 м/с. С-но вилку получим 130-340 м/с.

уфф, еле дочитал, короче 150-350, расходимся

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Sasha Zivers

Мы ещё и яиц сами не несём, но пригорелую яичницу враз распробовать можем.

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

*паталогически собирает

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

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

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну вот об этом как раз и много говорит и повторяет Кийосаки.
Но до многих так и не доходит и продолжают твердить как заводные: "его книжки не работают в россии!!"
Рилли? Не работает экономить на пассивах и умножать активы?)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Sasha Zivers

Ну да, лучше послушайте гипнотезёра, лол.

(уточнил, т.к большинство не знает, кто это вообще)

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Показать еще